Kompatibilität:

WebSite X5 Evo und Pro

Fangen wir mit einem Beispiel an: Sie sind der Inhaber eines Autoteileladens und für Sie ist es wichtig, dass Ihre Telefonnummer auf Ihrer Homepage immer angezeigt wird, damit man bei Fragen oder für Bestellungen sich mühelos mit Ihnen in Kontakt setzen kann. Machen wir jetzt ein anderes Beispiel: Sie besitzen einen Onlineshop und Sie möchten auf der Suchseite der Produkte ein Angebot hervorheben. In beiden Fällen brauchen Sie eine Schaltfläche, die sich vom Rest der Seite abhebt, die immer verfügbar ist und die einfach anklickbar ist. 


Was Sie brauchen, ist also das Zusatzobjekt Sticky Button. Mit diesem Objekt können Sie tatsächlich Schaltflächen einrichten, die am Rand der Seite auch beim Scrollen sichtbar bleiben und mit denen man wichtige Aktionen schnell ausführen kann, wie z. B. einen Anruf machen, sich für Ihren Newsletter registrieren oder eine Bestellung aufgeben. Auf der Vorschauseite können Sie ein paar Beispiele finden.



In dieser Anleitung geht es darum:


Was ist ein Sticky Button und wozu kann es verwendet werden

Fangen wir mit der Erläuterung des Begriffs: Sticky Buttons (nämlich "Klebeknöpfe") sind Schaltfläche, die 3 Hauptmerkmale teilen: 

  1. Feste Position: Diese Schaltflächen bleiben in einer festen Position relativ zum Browserfenster, unabhängig vom Scrollen der Seite.
  2. Immer sichtbar: Sie sind immer sichtbar, am Rand der Seite verankert und es ist klar, dass sie nicht zu den Inhalten der Seite gehören. So erleichtern sie den schnellen Zugriff auf die wichtigsten Aktionen, die der Benutzer ausführen möchte.
  3. Spezifische Funktionen: Oft werden sie mit bestimmten Funktionen assoziiert, z. B. das Teilen auf Sozialen Netzwerken, das Starten eines Chats, die Anmeldung für eine Dienstleistung usw. 

Aufgrund dieser Merkmale, sind Sticky Button perfekt als Teilen-Buttons in Sozialen Medien, als Kontakt- oder Support-Buttons oder als Call-To-Action (Newsletter-Anmeldung, App-Download, Bestellung usw.).


Wie fügen Sie ein Sticky Button auf Ihrer Website ein

In WebSite X5 können Sie ein Sticky Button so einfügen:

  • auf einer spezifischen Seite einfügen: So wird das Sticky Button nur auf der ausgewählten Seite (z. B. die Homepage) angezeigt.
  • auf dem Header oder Footer des Templates einfügen: So wird das Sticky Button auf allen Seiten Ihrer Website angezeigt.


So geht es:

  • Wenn Sie das Sticky Button auf einer spezifischen Seite anzeigen möchten, wählen Sie die gewünschte Seite auf Schritt 3 - Sitemap aus und öffnen Sie sie mit Doppelklick. Fügen Sie das Objekt Sticky Button in einer Zelle des Layout-Rasters ein.
  • Wenn Sie dagegen das Sticky Button auf allen Seiten der Website anzeigen möchten, gehen Sie auf Schritt 2 > Inhalt des Tempaltes, öffnen Sie den Bereich Header oder Fußzeile und fügen Sie das Objekt Sticky Button ein. 
#Tipp - Es ist nicht wichtig, in welcher Zelle oder wo auf dem Header/Footer das Objekt eingefügt wird: Das Sticky Button wird weiterhin oben auf der Seite angezeigt.
  • In jedem Fall, nachdem Sie es eingefügt haben, doppelklicken Sie auf das Objekt Sticky Button, um das Einstellungen-Fenster zu öffnen und gehen Sie mit der Gestaltung weiter.

 

Wie definieren Sie den Inhalt eines Sticky Buttons

Jetzt können Sie den Inhalt des Sticky Button definieren: Sie können beide einen Text und ein Bild verwenden. 

  • Auf dem Einstellungen-Fenster, geben Sie den Text des Sticky Buttons ein. Natürlich können Sie ihn formatieren und die Farbe festlegen.
  • Wenn Sie möchten, können Sie dann ein Bild aus Ihrem PC oder aus den Online-Bibliotheken importieren. Für das Bild definieren Sie dann die Größe in Pixel und die Ausrichtung rechts oder links vom Text. 


Wie legen Sie den Stil eines Sticky Buttons fest

Kümmern wir uns jetzt um das Aussehen des Stikcy Buttons, und zwar mit den Optionen im Bereich Stil:

  • Fangen Sie damit an, die Hintergrundfarbe, den eventuellen Schatten und die Abgerundeten Ecken zu definieren. 
  • Legen Sie die Ränder fest, nämlich den Abstand zwischen dem Inhalt und den Rändern des Buttons.
  • Definieren Sie die Position des Buttons.  Grundsätzlich können Sie entscheiden, auf welcher Seite des Browserfensters die Schaltfläche verankert werden soll: oben, unten, rechts oder links. 
  • Schließlich legen Sie die Ausrichtung fest, um zu definieren, ob die Schaltfläche rechts/oben, mittig oder links/unten an der Seite des Bildschirms, an der sie verankert ist, ausgerichtet werden soll.
#Tipp - Wenn das Sticky Button auf der rechten oder linken Seite des Browserfensters platziert wird, wird der Inhalt automatisch vertikal ausgerichtet.  
  • Sie können festlegen, dass das Sticky Button auf der Seite mit einer Animation und nach einer Anfänglichen Verzögerung, deren Dauer Sie einstellen können, angezeigt wird: Sie finden diese Elemente im Bereich Optionen.


Wie erwähnt, Ziel der Sticky Buttons ist, eine Aktion ausführen zu lassen.

  • Im Bereich Optionen finden Sie den Eintrag Link: klicken Sie auf  und wählen Sie die gewünschte Aktion aus dem folgenden Fenster aus, das der Schaltfläche zugewiesen werden muss. 


Sind Sie schon neugierig, wie diese Objekt auf Ihrer Website aussieht? Installieren Sie sofort Sticky Button


Fehlen Ihnen noch Credits für den Kauf dieses Objekts? Alle Kreditpakete ansehen