Schaltflächen sind die einfachste Möglichkeit, Website-Besucher zu Aktionen zu animieren. Mit Schaltflächen können Besucher zudem auf andere Seiten Ihrer Website oder auf eine andere Website geführt werden. Mit Schaltflächen lassen sich zudem Popup-Fenster, Kontaktformulare, Onlinereservierungen, E-Mail-Adressen und vieles mehr öffnen.
-
Geben Sie den Text, der auf der Schaltfläche angezeigt werden soll, in das dafür vorgesehene Feld ein.
-
Wählen Sie aus den folgenden Optionen aus, wohin die Schaltfläche verlinkt:
-
Vorhandene Seite.
-
Link zum Speichern. Dies wird nur angezeigt, wenn die Website über einen Shop verfügt.
-
Adresse der Website.
-
Popup-Fenster.
-
Anker.
-
Mitgliedstarif checkout. Dies wird nur angezeigt, wenn die Website die Funktion "Mitgliedschaft" hinzugefügt hat.
-
Blog-Beiträge. Diese Option wird nur angezeigt, wenn die Website über einen Blog verfügt.
-
E-Mail-Adresse.
-
Klicken Sie auf Zum Anrufen.
-
Datei zum Download.
-
Tipp
Weitere Informationen zu diesen Optionen finden Sie unter Linkauswahl
Verwenden Sie den Designeditor, um auszuwählen, ob die Schaltfläche den im Bereich „Thema“ definierten primären oder sekundären Schaltflächenstil erbt. Darüber hinaus können Sie zwischen den verschiedenen Schaltflächenlayouts wählen, Änderungen am Schaltflächenstil (Breite, Höhe) und Schaltflächentext (Schriftart, Textgröße, Farbe, Format, Ausrichtung und Richtung) vornehmen und den inneren und äußeren Abstand anpassen.
Alle Änderungen, die Sie im Designeditor vornehmen, überschreiben die Stile, die auf der Ebene des Themas Schaltfläche festgelegt wurden. Wenn Sie zum Theme-Button-Stil zurückkehren müssen, klicken Sie auf Auf Theme-Stil zurücksetzen.
-
Wenn Sie Änderungen an der Schaltfläche vornehmen (dadurch werden die auf der Thema-Schaltflächenebene eingestellten Stile außer Kraft gesetzt), wird auf dem primären oder sekundären Schaltflächenstil weiterhin ein Kontrollkästchen angezeigt.
-
Wenn Sie auf einen Schaltflächenstil klicken, der nicht über das Kontrollkästchen verfügt, wird die Schaltfläche auf den Stil zurückgesetzt, der auf der Thema-Schaltflächenebene festgelegt wurde.
Hinweis
Weitere Informationen zu Design-Schaltflächen finden Sie unter Website-Schaltflächen.
Mit schwebenden Schaltflächen wird eine Schaltfläche jederzeit angezeigt, auch wenn ein Besucher auf der Seite nach unten scrollt. Verwenden Sie schwebende Schaltflächen, um wichtige CTAs (Calls-to-Action) zu fixieren, damit sie auf allen Seiten einer Website zu sehen sind und angeklickt werden können.
Anwendungsfälle können zum Beispiel sein:
-
Kontaktieren Sie uns
-
ABONNIEREN
-
ANGEBOT EINHOLEN
So lassen Sie eine Schaltfläche im klassischen Editor schweben oder in Editor 2.0 fixiert werden:
-
Klicken Sie in der Seitenleiste auf widget. Suchen Sie nach der Schaltfläche widget, klicken Sie darauf und ziehen Sie sie auf die Leinwand.
-
Klicken Sie mit der rechten Maustaste auf die Schaltfläche, und klicken Sie dann auf Entwurf bearbeiten. Wenn Sie Editor 2.0 verwenden, klicken Sie auf die Schaltfläche, um das schwebende Menü zu öffnen, und wählen Sie Design bearbeiten. Dadurch wird das Design-Panel auf der rechten Seite des Bildschirms geöffnet. Scrollen Sie nach unten zum Abschnitt Position des Design-Fensters.
-
Scrollen Sie auf der Registerkarte Stil nach unten, und klicken Sie auf den Schalter Schwebend . Wenn das Floating-Attribut deaktiviert ist, erscheint die Schaltfläche automatisch in den ersten Zeilen oben auf der Seite. Wenn Sie Editor 2.0 verwenden, erweitern Sie das Menü Positionstyp, und wählen Sie Fest aus. Dadurch wird sichergestellt, dass Ihre Schaltfläche in einer festen Position bleibt, während der Benutzer auf Ihrer Website scrollt. Diese Änderung gilt für alle Bildschirmgrößen, Sie können sie jedoch bei Bedarf überschreiben. Nachdem Sie die Position ausgewählt haben, können Sie nicht mehr von Fest zu Angeheftet wechseln. Dies liegt daran, dass die Schaltfläche aus dem ursprünglichen Container entfernt wird, wenn Sie Fest auswählen, sodass sie beim Scrollen des Benutzers auf dem Bildschirm sichtbar bleibt. Wenn Sie von Fest zu Angeheftet wechseln würden, wüsste der Editor nicht, in welchem Container die Schaltfläche platziert werden soll. Wenn Sie wechseln müssen, müssen Sie zuerst wieder auf Standard wechseln. Die Schaltfläche wird in den ersten Abschnitt des Ansichtsfensters verschoben.
-
Wählen Sie eine Position für die Schaltfläche aus. Wechseln Sie die Geräteansicht, um die Position auf verschiedenen Geräten zu ändern. Wenn Sie sich im Editor 2.0 befinden, legen Sie im Menü Abstände über die Randeinstellungen fest, wo sich die Schaltfläche im Viewport befindet. Dies ist besonders wichtig für die Konfiguration, wenn Sie zwei feste Schaltflächen an der gleichen Position im Ansichtsfenster haben.
-
Um die schwebende Schaltfläche nur auf der aktuellen Seite anzuzeigen, aktivieren Sie den Schalter Nur auf dieser Seite anzeigen .
Hinweis
Eine schwebende Schaltfläche kann so eingestellt werden, dass sie auf bestimmten Seiten angezeigt wird, aber standardmäßig auf allen Seiten angezeigt wird (es gibt derzeit keine Möglichkeit, sie nur für bestimmte Seiten zu deaktivieren).
-
Für Mobilgeräte empfehlen wir, die schwebende Schaltfläche unten in der Ecke des Bildschirms zu positionieren, damit Benutzer die Schaltfläche ganz einfach mit einer Hand auswählen können.
-
Sie können auf Mobilgeräten auch einfach ein Symbol anstelle eines Texts anzeigen. Wählen Sie dafür das Layout aus, das Symbole auf Mobilgeräten unterstützt.
-
Wenn eine schwebende Schaltfläche auf Mobilgeräten nicht angezeigt wird, verwenden Sie möglicherweise ein altes mobiles Layout. Um das Layout zu aktualisieren, gehen Sie zum Designeditor und klicken Sie auf Website-Layout.
Angeheftete Schaltflächen bleiben so lange an ihrem übergeordneten Element (Spalte oder innere Spalte) hängen, wie sich das übergeordnete Element im Viewport befindet. Wenn sich mehr als eine angeheftete Schaltfläche an derselben Position befindet, ist die Schaltfläche oben die erste Schaltfläche.
Hinweis
Angeheftet ist in erweiterten Rastern keine Option.
So aktivieren Sie eine angeheftete Schaltfläche in Editor 2.0:
-
Klicken Sie in der Seitenleiste auf widget. Suchen Sie nach der Schaltfläche widget, klicken Sie darauf und ziehen Sie sie auf die Leinwand.
-
Klicken Sie auf die Schaltfläche, um das schwebende Menü zu öffnen, und wählen Sie Design bearbeiten aus. Dadurch wird das Design-Panel auf der rechten Seite des Bildschirms geöffnet.
-
Scrollen Sie im Design-Panel nach unten zum Abschnitt Position.
-
Klicken Sie auf das Menü Positionstyp , um es zu erweitern, und wählen Sie Angeheftet aus. Dadurch wird sichergestellt, dass die Schaltfläche an ihrem übergeordneten Element (Spalte oder innere Spalte) haftet, solange sich das übergeordnete Element im Ansichtsfenster befindet. Diese Änderung gilt für alle Bildschirmgrößen, Sie können sie jedoch bei Bedarf überschreiben.
-
Konfigurieren Sie im Abschnitt Position den Versatz der Schaltfläche. Der Versatz ist die Stelle, an der die Schaltfläche beim Bildlauf angeheftet wird, bevor sie das Ansichtsfenster verlässt. Wenn desktopeingestellt ist, haben andere Bildschirmgrößen die gleichen Werte, können jedoch bei Bedarf pro Bildschirmgröße überschrieben werden. Wenn die Option "Sticky Header" aktiviert ist, basiert der Offset auf der Standardhöhe der Kopfzeile. Wenn Sie einen Sticky Header nach dem Einstellungsoffset aktivieren, wird er nicht automatisch aktualisiert, und Sie müssen zurückgehen und den Offset manuell anpassen.
Wenn Sie die Schaltfläche zu irgendeinem Zeitpunkt in ein anderes übergeordnetes Element (Spalte oder innere Spalte) verschieben, werden die Einstellungen des Design-Bedienfelds, wie z. B. der Versatz, beibehalten.
Sowohl im schwebenden Menü als auch im Design-Panel der Schaltfläche wird ein angeheftetes Indikatorsymbol angezeigt.