Erstellen einzigartiger Divi-Button-Designs mit einem Textmodul

Das Erstellen einzigartiger Divi-Button-Designs mit einem Textmodul ist Ihnen vielleicht schon in den Sinn gekommen. Dann bist du kreativer als du denkst! Mit der Veröffentlichung von Hover-Optionen in Divi können alle Module anklickbar gemacht werden. Dies öffnet die Tür für die Verwendung eines beliebigen Moduls (mit all seinen integrierten Designeinstellungen) als anklickbaren CTA oder Schaltfläche. Mit einem Textbaustein können Sie beispielsweise beliebig viel Text in verschiedenen Formaten in das Modul einfügen. Darüber hinaus verfügt das Textmodul über einige robuste Designoptionen zum Anpassen der abgerundeten Ecken, um einzigartige Formen zu erstellen.

In diesem Tutorial werde ich einige einzigartige Divi-Button-Designs untersuchen, die mit einem Textmodul möglich sind.

Lass uns anfangen!

Vorgeschmack

Hier sind einige Beispiele für Schaltflächendesigns, die wir mit dem Textmodul einfach erstellen werden.

Dies ist eine Schaltfläche mit Text in zwei Zeilen…

Dies ist eine Schaltfläche mit einem Listenelement…

Dies ist eine Schaltfläche mit kreativen Ecken…

Erstellen einzigartiger Divi-Button-Designs mit einem Textmodul

Abonnieren Sie unseren Youtube-Kanal

#1 Erstellen einer Schaltfläche mit mehreren Textzeilen

Wie bereits erwähnt, ermöglicht das Textmodul eine unbegrenzte Textmenge, sodass es einfach wäre, eine Schaltfläche mit nur zwei Textzeilen zu erstellen, indem das Textmodul in mehreren Formaten verwendet wird. Mit dem Wysiwyg- oder Texteditor können Sie Absatztext, Überschriften, Links, Listen und Blockzitate hinzufügen. Und das Beste am Textmodul ist, dass Sie jedes dieser Textformate mithilfe der in die Designeinstellungen des visuellen Builders integrierten Registerkarten-Benutzeroberfläche individuell ausrichten und gestalten können.

Dies macht es wirklich einfach, mehrere Textzeilen hinzuzufügen und dann jede Textzeile separat für ein einzigartiges Schaltflächenlayout zu formatieren.

Hier ist ein kurzes Beispiel, wie Sie das Textmodul als Schaltfläche mit mehreren Textzeilen einrichten.

Erstellen Sie, falls noch nicht geschehen, eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie die Option „Von Grund auf neu erstellen“. Erstellen Sie dann einen neuen Abschnitt in einer einspaltigen Zeile. Fügen Sie dann der Zeile einen Textbaustein hinzu.

Verwenden Sie für den Textinhalt die Registerkarte html und geben Sie Folgendes ein:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Es gibt viele verschiedene Hintergrundstile, die wir unserem Modul hinzufügen können, aber für dieses Beispiel fügen tet einen einfachen Hintergrund mit Farbverlauf hinzu:

Hintergrundfarbe links: #FEE140
Hintergrund mit Farbverlauf rechts: #FA709A

Gehen Sie dann zur Registerkarte "Design" und verwenden Sie die Benutzeroberfläche der Registerkarte "Überschrift", um die Überschriften-Tags h3 und h4 wie folgt zu gestalten:

Überschrift 3 Schriftstärke: Ultra Bold
Überschrift 3 Schriftstil: TT
Überschrift 3 Textfarbe: #ffffff
Überschrift 4 Schriftstil: TT
Überschrift 4 Textfarbe: #ffffff
Überschrift 4 Textgröße: 16px

Jetzt müssen wir nur noch das Textmodul so dimensionieren, dass es eher wie eine Schaltfläche aussieht. Aktualisieren Sie dazu Folgendes:

Breite: 230px
Benutzerdefinierte Polsterung: 1em oben, 0,5em unten, 2em links, 2em rechts

Seit der Veröffentlichung der neuen Hover-Optionen von Divi können alle Module wie eine Schaltfläche anklickbar werden. Gehen Sie dazu zurück zum Inhalts-Tab und geben Sie eine Modul-Link-URL ein.

Hier ist das Endergebnis.

Als Hover-Effekt können Sie einen Boxschatten hinzufügen, der über die Schaltfläche streicht und letztendlich eine neue Hintergrundfarbe anwendet, um den Verlauf zu ersetzen.

Öffnen Sie dazu die Textbausteineinstellungen und aktualisieren Sie Folgendes:

Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px (Standard), 230px (Hover)
Vertikale Position des Boxschattens: 0px
Schattenfarbe: rgba(0,0,0,0) (Standard), #fee140 (Hover)

So sieht es beim Schweben aus.

#2 Erstellen einer Listenelement-Schaltfläche

Da Sie mit Textmodulen Listen (ungeordnet oder geordnet) zum Inhalt hinzufügen können, können Sie diese Funktion nutzen, um eine Listenschaltfläche zu erstellen. Im Grunde müssen Sie nur eine Liste mit einem Listenelement im Inhaltsfeld erstellen. Wickeln Sie dann Ihr Listenelement in ein Überschriften-Tag ein, damit Sie das Listenaufzählungselement und den Überschriftentext separat formatieren können.

Erstellen Sie, falls noch nicht geschehen, eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie die Option „Von Grund auf neu erstellen“. Erstellen Sie dann einen neuen Abschnitt in einer einspaltigen Zeile. Fügen Sie dann der Zeile einen Textbaustein hinzu.

Fügen Sie dann im Text-Tab Ihrer Inhaltseinstellungen den folgenden HTML-Code hinzu:

<ol><li><h3>Contact Us</h3></li></ol>

Es ist wichtig, den Listenelementtext in ein Überschrift-Tag einzuschließen, damit wir den Aufzählungspunkt/die Nummer des Listenelements getrennt vom Text formatieren können.

Springen Sie nun zum Design-Tab und beenden Sie die Gestaltung des Textbausteins als Schaltfläche:

Wählen Sie in der Kategorie „Texteinstellungen“ die Registerkarte „Geordnete Liste“ und aktualisieren Sie Folgendes:

Schriftart der geordneten Liste: Exo 2
Schriftstärke der bestellten Liste: Leicht
Textfarbe der bestellten Liste: #000000
Textgröße der geordneten Liste: 20px
Buchstabenabstand der geordneten Liste: 5px
Art der geordneten Liste: Dezimal-führende Null
Position des geordneten Listenstils: Außerhalb
Artikeleinzug der geordneten Liste: 2em

Klicken Sie unter der Kategorie Überschriftentext auf die Registerkarte H3 und aktualisieren Sie Folgendes:

Überschrift 3 Schriftart: Exo 2
Überschrift 3 Schriftstärke: Halbfett
Überschrift 3 Schriftstil: TT
Überschrift 3 Textfarbe: #0c71c3
Überschrift 3 Textgröße: 26px
Überschrift 3 Zeilenhöhe: 0.3em

Als nächstes ändern Sie die Breite des Moduls und geben ihm einen Rahmen und einen Abstand, damit er wie eine Schaltfläche aussieht:

Breite (des Moduls): 262px
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung: 2em oben, 0px unten, 2em links, 2em rechts
Abgerundete Ecken: 10px2em
Rahmenbreite: 1px
Randfarbe: #000000
Bordürenstil: solide

Und vergessen Sie nicht, einen Link zu Ihrem Modul zu der angegebenen URL Ihrer Wahl hinzuzufügen.

Hier ist das endgültige Design.

Fühlen Sie sich frei, neue Listenstiltypen (wie Upper Roman) für einzigartige Listenschaltflächen-Designs zu erkunden.

#3 Erstellen eines Buttons mit kreativen Ecken (wie ein Blatt)

Für dieses nächste Design werden wir die Designeinstellung für abgerundete Ecken innerhalb eines Textmoduls nutzen. Die Grundidee besteht darin, verschiedene Eckenradiuswerte festzulegen, um einzigartig geformte Schaltflächen zu erstellen. In diesem Beispiel gestalte ich unser Modul so, dass es wie eine Blattschaltfläche aussieht.

Erstellen Sie, falls noch nicht geschehen, eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie die Option „Von Grund auf neu erstellen“. Erstellen Sie dann einen neuen Abschnitt in einer einspaltigen Zeile. Fügen Sie dann der Zeile einen Textbaustein hinzu.

Öffnen Sie die Textmoduleinstellungen und geben Sie im Textregister des Inhaltsfelds folgenden HTML-Code ein:

<h3>grow</h3>
<h4>with us</h4>

Dies ermöglicht es uns, den Schaltflächentext auf zwei Zeilen zu setzen (die vertikale Breite zu reduzieren) und sie unabhängig zu formatieren.

Als nächstes fügen Sie einen Verlaufshintergrund mit einer „blattähnlichen“ Farbe hinzu.

Hintergrundfarbe links: #7cda24
Hintergrundfarbe rechts: #26e051
Steigungsrichtung: 90deg

Lassen Sie uns nun zu den Designeinstellungen springen, um unseren Text zu zentrieren und die Überschriften-Tags zu gestalten. Sie müssen die Registerkarte H3 auswählen, um die Überschrift H3 zu entwerfen, und die Registerkarte H4 auswählen, um die Überschrift H4 zu entwerfen:

Textausrichtung: Mitte
Überschrift 3 Schriftart: Oswald
Überschrift 3 Schriftstärke: Leicht
Überschrift 3 Schriftstil: TT
Überschrift 3 Textfarbe: #ffffff
Überschrift 3 Textgröße: 27px
Überschrift 4 Schriftart: Oswald
Überschrift 4 Schriftstil: TT
Überschrift 4 Textfarbe: #ffffff

Aktualisieren Sie das Design weiter, um Ihrem Textmodul die richtige Breite und den richtigen Abstand für eine Schaltfläche zu geben.

Breite: 178px
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung: 2em oben, 2em unten, 1em links, 1em rechts

Schließlich können wir unsere benutzerdefinierten abgerundeten Ecken hinzufügen, um dem Modul eine Blattform zu verleihen, und dann einen Kastenschatten hinzufügen, um das Blatt lebendiger zu machen. Um dies zu tun, aktualisieren Sie Folgendes:

Entsperren Sie zunächst die Option für abgerundete Ecken, damit Sie jeder Ecke individuelle Werte zuweisen können.

Obere linke Ecke: 100px
Rechte untere Ecke: 100px

Fügen Sie dann einen Boxschatten hinzu…

Box Shadow: siehe Screenshot
Horizontale Position des Kastenschattens: 25px
Vertikale Position des Boxschattens: -4px
Stärke der Box-Schattenausbreitung: -12px
Schattenfarbe: rgba(0,0,0,0.25)

Vergessen Sie nicht, Ihre Modul-Link-URL hinzuzufügen, damit Ihr Modul auf den gewünschten Ort verlinkt.

Hier ist das endgültige Design.

Für einen Hover-Effekt können Sie die abgerundeten Eckenwerte abwechseln, um das Schaltflächendesign beim Hover in die entgegengesetzte Richtung zu setzen:

Und so sieht der Hover-Effekt aus.

Abschließende Gedanken

Es ist immer schön, ab und zu über den Tellerrand zu schauen, wenn es um die Gestaltung von Websites mit Divi geht. Hoffentlich hilft dieses Tutorial dabei, neue und kreative Divi-Button-Designs mit dem Textmodul zu entwickeln. Tatsächlich würde ich vorschlagen, andere Module (wie das Blurb-Modul) für noch mehr Designoptionen zu erkunden.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!