Schaltflächenstile wählen, die Besucher führen.

DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden

Sie entscheiden, wie laut jede Schaltfläche ist. Eine volle Schaltfläche markiert die eine Aktion, die Sie am meisten wollen, und eine umrandete daneben bietet die Alternative, ohne zu konkurrieren. Diese Seite zeigt, wie Sie ein solches Paar stylen und welche Einstellung was ändert. Um eine Schaltfläche hinzuzufügen und ihren Link zu setzen, siehe Schaltfläche hinzufügen.

Das Video folgt den Schritten unten: Es macht „Apply now“ zur Hauptschaltfläche und fügt eine umrandete zweite hinzu.

Haupt- und Zweitschaltfläche stylen

Beginnen Sie mit einer Schaltfläche auf der Seite, etwa Apply now.

  1. Zeigen Sie auf die Schaltfläche und öffnen Sie More > Settings.
  2. Setzen Sie Type auf Primary.
  3. Setzen Sie Size auf Large und klicken Sie auf Save.
  4. Zeigen Sie erneut auf die Schaltfläche und öffnen Sie More > Clone. Die Kopie erscheint direkt unter dem Original.
  5. Öffnen Sie More > Settings auf der Kopie. Ändern Sie ihren Title, zum Beispiel auf Download brochure, und ihren Link.
  6. Schalten Sie Outline style ein und klicken Sie auf Save.
  7. Klicken Sie in der Symbolleiste auf Save.

Stil für jede Aktion wählen

Aktion Stil Beispiel
Die eine Aktion, die Sie am meisten wollen Volles Primary Apply now
Eine Alternative Outline style im selben Type Download brochure
Eine Nebenaktion Link, das wie ein Textlink aussieht Read the terms
Eine Warnung oder ein letzter Schritt Danger oder Warning Cancel my booking

Nutzen Sie eine volle Schaltfläche pro Abschnitt, damit Besucher sofort sehen, wo zu klicken ist. Schreiben Sie Bezeichnungen, die sagen, was passiert: „Get started“ statt „Click here“, „Send message“ statt „Submit“.

Was Sie sehen

Zwei große Schaltflächen stapeln sich in der Spalte: eine volle in der Primärfarbe Ihres Themes und eine umrandete mit Rahmen und Text in derselben Farbe. Die volle zieht den Blick zuerst an. Links öffnen nicht, während Sie bearbeiten. Um sie zu testen, speichern Sie die Seite, öffnen Sie das Ansichtsmenü (das Augensymbol) und wählen Sie Preview.

General-Panel einer Schaltfläche mit eingeschaltetem „Outline style“, Typ „Primary“ und Größe „Large“, neben einer vollen Schaltfläche „Apply now“ und der umrandeten Schaltfläche „Download brochure“ darunter

Settings

Einstellung Was sie bewirkt Standard
Type Der Farbstil: Primary, Secondary, Success, Info, Warning, Danger, Link, Light oder Dark. Die Farben kommen aus Ihrem Theme. Primary
Outline style Ein farbiger Rahmen und Text ohne Füllung Aus
Size Normal, Large oder Small Normal
Block button Dehnt die Schaltfläche über die volle Breite ihrer Spalte Aus
Link target Same window oder New window. Erscheint, sobald Link einen Wert hat. Same window

Für Theming: Jedes Type fügt die Bootstrap-Klasse btn-<type> hinzu, etwa btn-primary. Mit eingeschaltetem Outline style wird daraus btn-outline-<type>, außer bei Link, das immer btn-link bleibt. Large fügt btn-lg hinzu, Small fügt btn-sm hinzu und Block button fügt btn-block hinzu.

Wenn Sie den Stil nicht sehen

  • Die umrandete Schaltfläche zeigt keinen Rahmen. Type ist Link, das immer wie ein Textlink aussieht, daher wirkt Outline style nicht. Wählen Sie ein anderes Type für eine umrandete Schaltfläche.
  • Die Schaltfläche verschwindet fast. Light ist nah an Weiß, daher verblasst es in einem weißen Abschnitt. Wählen Sie ein dunkleres Type, oder geben Sie dem Abschnitt eine Hintergrundfarbe.
  • Der Link öffnet im selben Tab. Link target ist Same window, und es erscheint erst, sobald Link einen Wert hat. Füllen Sie zuerst Link aus, dann wählen Sie New window.

Wie geht es weiter?