Einen Button kannst du auf deiner Webseite verwenden, um deine Nutzer*innen auf wichtige Links aufmerksam zu machen, oder für Handlungsaufforderungen, sogenannte Call-to-Actions (CTAs). Ich zeige dir, wie du mit dem Divi-Button-Modul einen individuellen Button gestalten kannst.
1. Button-Modul einfügen
Um einen Button zu erstellen, wählst du zuerst das Modul “Button” aus und fügst es auf deiner Seite ein. Das Feld für die Beschriftung des Buttons ist direkt zu sehen. Hier gibst du ein, was die Nutzer*innen tun sollen, zum Beispiel den CTA "Jetzt kaufen", "Anmelden" oder "Mehr erfahren". Der Button passt sich automatisch der Länge deines Textes an.
2. URL hinzufügen
Der nächste Schritt ist das Einfügen der URL. In den Link-Einstellungen trägst du die Ziel-URL ein, zum Beispiel den Link zum Bestellformular von Digistore24 oder den Link zu einem Blogartikel oder einer Angebotsseite. Du hast auch die Möglichkeit zu entscheiden, ob sich der Link im selben Fenster oder in einem neuen Tab öffnen soll. Für externe Links würde ich dir empfehlen, diese in einem neuen Tab zu öffnen, um die Nutzer*innen auf deiner Seite zu halten.
3. Button gestalten
Jetzt geht es ans Design. Du kannst die Position des Buttons festlegen (links, mittig, rechts). Wähle die passende Position, je nach Gestaltung deiner Webseite.
Zusätzlich kannst du die Textfarbe anpassen. Hier hast du die Wahl zwischen hell und dunkel. Dies sollte im Kontrast zum Hintergrund stehen. Wenn das helle Design beispielsweise auf einem weißen Hintergrund verschwindet, ist eine dunkle Beschriftung die bessere Wahl.
Für eine detailliertere Anpassung verwende den “benutzerdefinierten Stil”. Damit hast du folgende Einstellungsmöglichkeiten:
- Farbanpassung:
Passen die Farben deinem Corporate Design an und verwende deine Brand-Farben. Wähle für den Button am besten eine auffällige Farbe.
- Schriftgröße und -art:
Ändere Größe und Stil, um deinen Button hervorzuheben. Verwende auch hier deine Brand-Schriftarten.
- Hintergrundfarbe und Verlauf:
Wähle einen einfachen Farbton oder gegebenenfalls einen Farbverlauf, um den Button optisch ansprechend zu gestalten.
- Border-Radius:
Runde auf Wunsch die Ecken des Buttons ab.
- Icon und Hover-Effekt:
Füge ein Icon hinzu, das beim Überfahren mit der Maus sichtbar wird (Hover-Effekt).
- Abstände:
Die Abstände ober- und unterhalb des Buttons lassen sich ebenfalls anpassen.
- Schatten:
Ein Schatten kann dem Button zusätzlich Tiefe verleihen und ihn hervorheben.
4. Button speichern
Nachdem du deinen Button fertig gestaltet hast, speichere ihn in der Divi-Bibliothek ab. So kannst du ihn immer wieder verwenden, was dir viel Zeit und Aufwand spart und darüber hinaus eine einheitliche Gestaltung deiner Webseite ermöglicht.
Probiere die verschiedenen Einstellungsmöglichkeiten aus und finde heraus, welches Button-Design am besten zu deiner Webseite passt. Ich wünsche dir viel Spaß dabei!
