Widgets: Button

Mit Buttons bringst du Besucher am einfachsten dazu, aktiv zu werden: Ein Klick führt sie auf eine andere Seite deiner Website oder zu einer ganz anderen Website. Genauso kann ein Button ein Pop-up, ein Kontaktformular, eine Online-Reservierung, eine E-Mail-Adresse und einiges mehr öffnen.

Wie du Widgets hinzufügst, erfährst du unter „Widgets hinzufügen".

Inhalts-Editor

Klicke auf das Element, um das Schwebemenü zu öffnen, und klicke dann auf die Option für den Inhalts-Editor.

1. Gib den Text, der auf dem Button erscheinen soll, in das dafür vorgesehene Feld ein.
2. Wähle aus den folgenden Optionen, wohin der Button verlinkt:
   • Existing Page.
   • Website address.
   • Popup.
   • Anchor.
   • Back to top.
   • Email Address.
   • Click To Call.
   • File for download.

Tipp: Ausführliche Informationen zu diesen Optionen findest du unter „Link auswählen".

Design-Editor

Klicke auf das Element, um das Schwebemenü zu öffnen, und klicke dann auf die Option zum Bearbeiten des Designs.

Im Design-Editor legst du fest, ob der Button den primären oder sekundären Button-Stil aus dem Thema-Panel übernimmt. Daneben stehen dir mehrere Button-Layouts zur Wahl. Auch den Stil des Buttons (Breite, Höhe), seinen Text (Schriftart, Textgröße, Farbe, Format, Ausrichtung und Richtung) sowie den Innen- und Außenabstand passt du hier an.

Alles, was du im Design-Editor änderst, überschreibt die Stile auf Ebene des Thema-Buttons. Zurück zum Thema-Button-Stil kommst du mit einem Klick auf Auf Themenstil zurücksetzen.

Informationen zu Design-Optionen, die nicht speziell für dieses Widget gelten (zum Beispiel Layout, Stil oder Abstand), findest du unter „Widget-Design".

Primäre und sekundäre Thema-Buttons

• Wenn du Änderungen am Button vornimmst (die die auf Ebene des Thema-Buttons festgelegten Stile überschreiben), bleibt beim primären oder sekundären Button-Stil ein Anzeigekästchen sichtbar.
• Wenn du auf den Button-Stil ohne Anzeigekästchen klickst, wird der Button auf den Stil zurückgesetzt, der auf Ebene des Thema-Buttons festgelegt ist.

Hinweis: Mehr Informationen zu Thema-Buttons findest du unter „Website-Thema".

Schwebende Buttons (feste Buttons im Editor 2.0)

Ein schwebender Button bleibt immer im Bild, egal wie weit ein Besucher nach unten scrollt. So bleiben wichtige Handlungsaufforderungen auf allen Seiten deiner Website fest verankert, sichtbar und anklickbar.

Ideale Anwendungsfälle sind:

• Kontaktiere uns
• Abonnieren
• Angebot anfordern

So machst du einen Button schwebend:

1. Klicke in der Seitenleiste auf Hinzufügen und dann auf Elemente.
2. Suche nach dem Button-Widget und ziehe es per Drag-and-drop auf den Canvas.
3. Klicke mit der rechten Maustaste auf den Button und dann auf Design bearbeiten. Wenn du im Editor 2.0 bist: Klicke auf den Button, um das Schwebemenü zu öffnen, und wähle Design bearbeiten. Dadurch öffnet sich das Design-Panel. Scrolle nach unten zum Bereich Position.
4. Scrolle im Tab Stil nach unten und klicke auf den Schalter Schweben. Wenn das Attribut „Schweben" deaktiviert ist, erscheint der Button automatisch in der ersten Zeile oben auf der Seite.
5. Wähle eine Position für den Button. Wechsle die Geräteansicht, um die Position auf verschiedenen Geräten zu ändern.
6. Damit der schwebende Button nur auf der aktuellen Seite erscheint, aktiviere den Schalter Nur auf dieser Seite anzeigen.

Hinweis: Standardmäßig erscheint ein schwebender Button auf allen Seiten. Du kannst ihn gezielt nur auf bestimmten Seiten anzeigen lassen; ihn allein für einzelne Seiten auszuschalten ist derzeit nicht möglich.

Hinweise für Mobilgeräte

• Auf Mobilgeräten empfehlen wir, den schwebenden Button in die untere Ecke des Bildschirms zu setzen, damit Besucher ihn leicht mit einer Hand antippen können.
• Statt Text kannst du auf Mobilgeräten ein Symbol anzeigen, indem du das Layout wählst, das auf Mobil ein Symbol zeigt.
• Wenn ein schwebender Button auf Mobilgeräten nicht angezeigt wird, nutzt du möglicherweise ein altes Mobil-Layout. Um das Layout zu aktualisieren, gehe zum Design-Editor und klicke auf Webseitenlayout.