Erstellen Sie Ihren ersten Button

Fazit

Fügen Sie Button Basic über die Schaltfläche „+“ ein und wenden Sie die Voreinstellung an, um mit nur wenigen Klicks eine gut aussehende Schaltfläche zu erstellen. Richten Sie einfach Ihren Text ein, verlinken Sie ihn und veröffentlichen Sie ihn, um loszulegen.


Schritt 1: Setzen Sie den Block ein

  1. Öffnen Sie den Bearbeitungsbildschirm für Beiträge oder Seiten
  2. Klicken Sie an der Stelle, an der Sie einen Block hinzufügen möchten, auf die Schaltfläche ***.
  3. Geben Sie „Button Basic“ in das Suchfeld ein
  4. Klicken Sie auf den angezeigten Block Button Basic, um ihn einzufügen

Punkt: Sie können es auch finden, indem Sie nach „zen“ oder „button“ suchen.


Schritt 2: Wenden Sie die Designvoreinstellung an

  1. Wählen Sie den eingefügten Block aus
  2. Klicken Sie in der Symbolleiste oben im Block auf das Voreinstellungssymbol
  3. Wählen Sie Ihr Lieblingsdesign aus der angezeigten Voreinstellungsliste aus

Anpassungstipps: Verwenden Sie die Voreinstellungen als Grundlage und passen Sie Farbe und Größe später gerne an. Wir empfehlen, zunächst eine Voreinstellung auszuwählen, die Ihrer Gesamtrichtung nahe kommt.


Schritt 3: Bearbeiten Sie den Text

  1. Klicken Sie direkt auf den Text innerhalb des Blocks
  2. Geben Sie den Text der Schaltfläche ein, den Sie anzeigen möchten (z. B. „Kontaktieren Sie uns“, „Kostenlos starten“).

Punkt: Texte können direkt im Editor bearbeitet werden. Schriftgröße und -stärke können im Bereich „Texteinstellungen“ in der Seitenleiste angepasst werden.


Schritt 4: Richten Sie den Link ein

  1. Klicken Sie bei ausgewähltem Block auf das Link-Symbol in der Symbolleiste
  2. Geben Sie die Ziel-URL des Links ein
  3. Aktivieren Sie bei Bedarf „In neuem Tab öffnen“.
  4. Bestätigen Sie mit der Eingabetaste

Hinweis: Sie können zwischen a (Link)/button (Schaltflächenelement)/div (Blockelement) wechseln, indem Sie das Tag in der Symbolleiste auswählen. Mit normalen Link-Buttons gibt es kein Problem wie mit dem a-Tag.


Schritt 5: Farben anpassen

  1. Öffnen Sie jedes Einstellungsfeld in der Seitenleiste
  2. So ändern Sie die Hintergrundfarbe: Öffnen Sie das Bedienfeld Hintergrundeinstellungen
  3. So ändern Sie die Textfarbe: Öffnen Sie das Bedienfeld Texteinstellungen
  4. Geben Sie die Farbe mithilfe der Farbauswahl oder des Farbcodes an

Anpassungstipp: Das Sicherstellen eines guten Kontrastverhältnisses zwischen der Hintergrundfarbe der Schaltfläche und der Textfarbe verbessert die Sichtbarkeit und Zugänglichkeit.


Schritt 6: Überprüfen Sie mit der Vorschau

  1. Klicken Sie oben im Editor auf die Schaltfläche Vorschau
  2. Wählen Sie „Vorschau in neuem Tab
  3. Überprüfen Sie die Sichtbarkeit der Tasten am vorderen Ende
  4. Überprüfen Sie auch die Änderungen beim Hovern und beim Übergang zum Linkziel.

Punkt: Die Anzeige im Editor und die Anzeige im Frontend stimmen grundsätzlich überein, das CSS-Theme kann sich jedoch darauf auswirken. Bitte führen Sie die abschließende Bestätigung im Frontend durch.


Schritt 7: Veröffentlichen Sie Ihre Seite

  1. Wenn Sie mit dem Erscheinungsbild und dem Link der Schaltfläche zufrieden sind, klicken Sie oben im Editor auf Veröffentlichen oder Aktualisieren.
  2. Rufen Sie zur endgültigen Bestätigung die Startseite auf

Wenn Sie detailliertere Einstellungen vornehmen möchten

Button Basic verfügt über 18 Arten von Einstellungsfeldern. Detaillierte Informationen zur Einstellungsmethode finden Sie im buttonBasic Setting Guide.

Haupteinstellungsfeld:

PanelWas Sie tun können
TexteinstellungenPassen Sie Schriftgröße, -stärke, Zeilenabstand und Zeichenabstand an
LayouteinstellungenAnpassen von Breite, Höhe und Rändern (Ränder und Abstand)
HintergrundeinstellungenFarb-/Abstufungs-/Bild-/Mustereinstellungen
RandeinstellungenPassen Sie Linienbreite, Stil, Farbe und abgerundete Ecken an
SymboleinstellungenSymbole hinzufügen, Größe und Farbe festlegen
AnimationseinstellungenAnimation beim Schweben oder Anzeigen (Pro-Funktion)

nächster Schritt

Wenn Sie an der Version Pro interessiert sind, können Sie die Aktivierungsmethode unter [Aktivierung der Version Pro] (../pro-activation/) überprüfen.