5 kreative Divi-Button-Modul-Designs und wie man sie macht

In diesem Beitrag zeige ich Ihnen 5 kreative Divi-Button-Modul-Designs, die Sie mit dem Button-Modul von Divi ganz einfach erreichen können. Das Schaltflächenmodul ist eines der beliebtesten aller Divi-Module, da Schaltflächen so wichtig sind, um Besucher auf einer Website zu Ihren gewünschten Zielen zu führen. Daher ist es sehr wichtig, dass wir als Designer und Entwickler diese Buttons ansprechend und auffällig gestalten.

Lass uns eingraben!

Vorgeschmack

Hier ist ein kurzer Blick auf die Schaltflächen, die wir in diesem Tutorial erstellen werden.

1. Pfeiltaste nach links

2. Schaltfläche zum Verschieben der Linie

3. Pull-Tab-Taste

4. Kreis-Logo-Schaltfläche

5. Leuchtknopf

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

5 Divi-Button-Modul-Designs und wie man sie macht

1. Pfeiltaste nach links

Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile ein Schaltflächenmodul hinzu.

Ändern Sie dann den Standardinhaltstext der Schaltfläche in "Erste Schritte" (oder was auch immer Sie eigentlich wollen).

Jetzt ist es an der Zeit, zu den Designeinstellungen zu springen und Folgendes zu aktualisieren:

Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextfarbe: #ffffff
Schaltflächenhintergrundfarbe: #324376
Rahmenbreite: 0px
Tasten-Buchstaben-Abstand: 0.2em
Knopfschrift: Fira Sans
Schriftstil: TT (Großbuchstaben), U (unterstrichen)
Unterstreichungsfarbe: rgba(255,255,255,0.2)
Unterstreichungsstil: Doppel
Schaltflächensymbol: siehe Screenshot
Farbe des Schaltflächensymbols: #ff4751
Platzierung der Schaltflächensymbole: Links

Benutzerdefinierte Polsterung: 40 Pixel links, 20 Pixel rechts

Box Shadow: siehe Screenshot
Horizontale Position des Kastenschattens: 22px
Vertikale Position des Boxschattens: 0px
Schattenfarbe: #ff4751

(Der benutzerdefinierte linke Abstand von 40px erzeugt einen festen Raum, der mit dem Boxschatten gefüllt wird, um bündig mit dem linken Pfeilsymbol zu sitzen.)

Da der Schatten des linken Kastens bündig mit dem Anfang des Pfeilsymbols abschließt, erzeugt dies einen schönen Pfeilumrandungseffekt. Wenn es aus irgendeinem Grund nicht bündig am Symbol anliegt, können Sie die horizontale Position nach Bedarf anpassen. Das Schöne an diesem Design ist, dass der linke Pfeilrand auch beim Hinzufügen unterschiedlicher Mengen von Schaltflächentext an Ort und Stelle bleibt.

Hier ist das Endergebnis.

2. Schaltfläche zum Verschieben der Linie

Dieser Next-Button-Stil hat eher ein technisches und minimalistisches Gefühl. Die Linien werden mit einem Kastenschatten und einem Hintergrundverlauf erstellt, die durch einen transparenten Rahmen getrennt sind. Ich habe auch einen Hover-Effekt hinzugefügt, der den Boxschatten nach rechts verschiebt, was wiederum die untere Linie für eine subtile Interaktion leicht nach rechts verschiebt.

Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile ein Schaltflächenmodul hinzu.

Aktualisieren Sie den Textinhalt der Schaltfläche nach Ihren Wünschen. Ich belasse die Standardeinstellung "hier klicken" für dieses Beispiel. Aktualisieren Sie dann die Designeinstellungen wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextfarbe: #3b7986
• Schaltfläche Hintergrundfarbe links: rgba(255,255,255,0)
• Button Hintergrund Farbverlauf rechts Farbe: #3b7986
• Verlaufsrichtung: 180deg
• Startposition: 96%
• Endposition: 0%
• Breite des Tastenrahmens: 10px
• Farbe des Schaltflächenrahmens: rgba(0,0,0,0)
• Schaltflächenrandradius: 0px
• Tasten-Buchstaben-Abstand: 6px
• Tastenschrift: Exo 2
• Schriftdicke: fett
• Schriftstil: Tt (Kapitälchen)
• Schaltflächensymbol: Pfeil nach rechts (siehe Screenshot)
• Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN
• Benutzerdefinierte Polsterung: 0 Pixel unten
• Box Shadow: siehe Screenshot
• Horizontale Position des Boxschattens: -15px
• Vertikale Position des Kastenschattens: 15px
• Stärke der Box-Schattenausbreitung: -13px
• Schattenfarbe: #3b7986

Möglicherweise müssen Sie die Hintergrundfarbe auch beim Hover auf #ffffff setzen, da dies die Standardeinstellung für die Schaltfläche ist.

Der Schlüssel zu diesem Design ist der Hintergrundfarbverlauf und der Boxschatten. Durch Einstellen des Startpunkts des Hintergrundfarbverlaufs auf 96 % wird eine Linie mit einer Breite von 4 % am unteren Rand der Schaltfläche erstellt. Wenn wir dann den Boxschatten positionieren und färben, haben wir ein weiteres Linienelement, das die Schaltfläche schön umschließt. Außerdem funktioniert das Pfeilsymbol nach rechts auch gut mit den Liniendesignelementen.

Hier ist das endgültige Design.

Um den Hover-Effekt hinzuzufügen, der den Boxschatten verschiebt, gehen Sie zurück zu den Designeinstellungen und bewegen Sie den Mauszeiger über die Option „Box Shadow Horizontal Position“. Sie sehen ein Pfeilsymbol-Popup direkt neben dem Text. Klicken Sie darauf, um die Hover-Optionen für diese bestimmte Einstellung zu öffnen.

Klicken Sie dann auf den Hover-Tab und ändern Sie den Wert auf 13px.
Der Hover-Effekt wird im Visual Builder in der Vorschau angezeigt.

So sieht der Hover-Effekt aus:

3. Pull-Tab-Taste

Dieses Design für die nächste Schaltfläche fügt einen Kastenschatten hinzu, um das rechte Schaltflächensymbol zu umrahmen, das an einer absoluten Position bleibt. Wenn Sie den Mauszeiger darüber bewegen, streckt sich die Schaltfläche nach rechts, wodurch der Effekt entsteht, dass Sie an einer Lasche ziehen.

Um die Schaltfläche zu erstellen, erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile und fügen dann der Zeile ein Schaltflächenmodul hinzu.

Öffnen Sie die Einstellungen für das Schaltflächenmodul und aktualisieren Sie den Schaltflächentext unter der Registerkarte Inhalt nach Belieben (ich werde den Text "Weitere Informationen" verwenden).

Springen Sie dann zur Registerkarte Design und aktualisieren Sie Folgendes:

Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextfarbe: #ffffff
Schaltfläche Hintergrund Farbverlauf links: #7D80DA
Button Hintergrund Farbverlauf rechts: #8EEDF7
Verlaufsrichtung: 90deg
Breite des Tastenrahmens: 0px
Schaltflächenrandradius: 10px
Tastenabstand der Buchstaben: 1px
Schaltflächenschriftart: Source Sans Pro
Schriftdicke: fett
Schriftstil: TT
Schaltflächensymbol: Siehe Screenshot
Farbe des Schaltflächensymbols: #ffffff
Benutzerdefinierte Polsterung: 1em links, 2,5em rechts
Boxschatten: Siehe Screenshot
Horizontale Position des Boxschattens: -35px
Vertikale Position des Boxschattens: 0px
Schattenfarbe: #7d80da

Der Schlüssel zu diesem Design ist der Kastenschatten auf der rechten Seite, der das Symbol umrahmt. Aber jetzt muss das Symbol so positioniert werden, dass es in den Farbverlaufsbereich passt. Dazu müssen wir benutzerdefiniertes CSS hinzufügen.

Gehen Sie zur Registerkarte Erweitert und geben Sie das folgende CSS in das Eingabefeld Nach ein:

position: absolute;
right: 5%;

Dieses CSS zielt auf die Position des Symbols ab und weist ihm eine absolute Position von 5% vom rechten Rand der Schaltfläche zu.

Schauen Sie sich das bisherige Design an.

Um nun den Hover-Effekt hinzuzufügen, müssen wir nur die rechte Padding-Option unter der Hover-Registerkarte aktualisieren. Öffnen Sie dazu die Schaltflächeneinstellungen und öffnen Sie die Hover-Optionen, indem Sie mit der Maus über das benutzerdefinierte Padding-Element fahren und auf das angezeigte Cursorsymbol klicken. Wählen Sie dann den Hover-Tab und geben Sie Folgendes ein:

Benutzerdefinierte Polsterung: 4em rechts

Schauen wir uns nun das Endergebnis an.

4. Kreis-Logo-Schaltfläche

Für das nächste Design verwandeln wir ein Kreissymbol/-bild in einen anklickbaren Button mit einem coolen Hover-Effekt, der einen kurzen Aufruf zum Handeln zeigt.

Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile ein Schaltflächenmodul hinzu.

Öffnen Sie dann die Einstellungen für das Schaltflächendesign. Fügen Sie auf der Registerkarte "Inhalt" das Wort "Los" für den Schaltflächentext hinzu.

Gehen Sie dann zu den Designeinstellungen und wählen Sie die benutzerdefinierten Schaltflächenstile aus. Fügen Sie zunächst das Kreisbild als Hintergrundbild für die Schaltfläche hinzu. Damit dies funktioniert, stellen Sie sicher, dass Sie ein PNG-Bild eines Logos oder Symbols verwenden, das ein perfekter Kreis ist und dass die Bildabmessungen die gleiche Höhe und Breite haben. Das Bild, das ich verwende, ist ein PNG, das 118 x 118 Pixel groß ist. Schnapp es dir hier, wenn du willst:

Stellen Sie nach dem Hinzufügen des Hintergrundbilds sicher, dass die Hintergrundbildgröße auf "Tatsächliche Größe" eingestellt ist. Dadurch wird sichergestellt, dass das Bild seine ursprünglichen Abmessungen (118 x 118 Pixel) beibehält.

Als nächstes wollen wir unsere Schaltfläche so bemessen, dass sie die genauen Abmessungen unseres Kreisbildes hat. Wechseln Sie dazu zur Registerkarte Erweitert und geben Sie das folgende benutzerdefinierte CSS im Hauptelement ein:

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

Beachten Sie, dass die CSS die Breite, Höhe und Zeilenhöhe alle auf den gleichen Wert von 118px setzt. Dies ist die gleiche Breite und Höhe unseres Bildes. Jetzt passt das Bild perfekt in den Button. Die Zeilenhöhe ist auf 118px eingestellt, damit der Text innerhalb des Buttons vertikal innerhalb des Buttons zentriert wird (er ist noch nicht perfekt zentriert, da wir noch einige Auffüllungen entfernen müssen, die ihn wegwerfen). Und text-align: center sorgt dafür, dass der Text innerhalb der Schaltfläche zentriert bleibt, auch wenn das Schaltflächenmodul links- oder rechtsbündig ausgerichtet ist.

Jetzt müssen wir nur noch einige Designeinstellungen vornehmen, die das Design vervollständigen. Wechseln Sie zur Registerkarte Design und aktualisieren Sie Folgendes:

Schaltflächentextfarbe (Standard): rgba(0,0,0,0)
Schaltflächentextfarbe (Hover): #ffffff

(Dadurch wird der Schaltflächentext standardmäßig ausgeblendet und beim Hover in weiß angezeigt)

Hintergrundfarbe (Standard): #121212
Hintergrundfarbe (Hover): #da00f2

(Dies zeigt standardmäßig einen schwarzen Hintergrund hinter dem Bild und dann eine hellrosa Hintergrundfarbe beim Schweben.)

Breite des Tastenrahmens: 0px
Knopfradius: 50%;

(Wenn Sie den Schaltflächenradius auf 50% einstellen, wird die Schaltfläche in eine Kreisform geändert, da die Höhe und Breite der Schaltfläche im benutzerdefinierten CSS auf 118px eingestellt wurde.)

Schaltflächenschriftart: Poppins
Schriftdicke: fett
Schriftstil: TT
Schaltflächensymbol anzeigen: NEIN (ein Schaltflächensymbol wird den zentrierten Text verwerfen)
Benutzerdefiniertes Padding: 0px oben, 0px unten

(Es ist wichtig, den oberen und unteren Abstand zu entfernen, damit die Zeilenhöhe, die wir in benutzerdefiniertem CSS festlegen, den Text vertikal zentriert.)

Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Schattenfarbe (Standard): rgba(0,0,0,0)
Schattenfarbe (Hover): rgba(0,0,0,0.68)

(Dadurch wird beim Schweben ein leichter Kastenschatten um den Kreis herum angezeigt, um einen zusätzlichen Popout-Effekt zu erzielen.)

Hier ist das endgültige Design mit dem Schwebeeffekt.

5. Leuchtknopf

Dieses letzte Design ist ziemlich unkompliziert und einfach zu machen. Alles, was Sie brauchen, ist eine kreative Verwendung von Hintergrundfarben und Kastenschattenfarben. Der Hover-Effekt erhöht einfach die Größe des Box-Shadows, um einen stärkeren Glow-Effekt zu erzielen.

Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile ein Schaltflächenmodul hinzu. Bevor Sie das Schaltflächenmodul aktualisieren, öffnen Sie die Abschnittseinstellungen und geben Sie dem Abschnitt eine dunkle Hintergrundfarbe (#333333).

Öffnen Sie nun die Schaltflächeneinstellungen.

Sie können den Standard-Button-Text „Hier klicken“ belassen. Aktualisieren Sie dann die folgenden Designeinstellungen:

Tastenausrichtung: Mitte
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 18px
Textfarbe der Schaltfläche: #ffffff

Schaltfläche Hintergrundfarbe links: #00ff8c
Button Hintergrund Farbverlauf rechts: #15c39a
Verlaufstyp: Radial
Radiale Richtung: Mitte
Endposition: 75%

(Wenn Sie den Verlaufstyp auf Radial einstellen, erhält der Verlauf eine Kreisform, die sich nach außen ausdehnt. Stellen Sie sicher, dass die hellere Farbe in der Mitte des Verlaufs angezeigt wird, um den Glüheffekt zu erzeugen.)

Breite des Tastenrahmens: 0px
Schaltflächenrandradius: 100px
Tastenabstand (Standard): 4px
Tastenabstand (Hover): 5px

(Wenn Sie den Buchstabenabstand beim Schweben vergrößern, wird die gesamte Schaltfläche leicht erweitert, um einen schönen Effekt zu erzielen.)

Schriftstärke: Ultra Bold
Schriftstil: I, TT
Schaltflächensymbol: Pfeil nach rechts (siehe Screenshot)
Benutzerdefinierte Polsterung: 20 Pixel oben, 20 Pixel unten, 30 Pixel links, 50 Pixel rechts

(Sie benötigen mehr rechte Polsterung, um das Symbol mit dem rechten Pfeil zu berücksichtigen)

Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenunschärfe (Standard): 64px
Box-Schattenunschärfe-Stärke (Hover): 100px
Stärke der Box-Schattenausbreitung: -12px
Schattenfarbe: rgba (0,255,140,0.66)

(Der Box-Schatten trägt zum Glüheffekt bei, wenn Sie die Schattenfarbe mit der Farbe der Schaltfläche abgleichen. Wenn Sie die Unschärfestärke beim Schweben erhöhen, wird auch das Leuchten der Schaltfläche vergrößert.)

Schauen Sie sich das endgültige Design mit dem Schwebeeffekt an.

Mehr Button-Inspiration

Um mehr über Inspirationen zu Schaltflächenstilen zu erfahren, lesen Sie einige dieser anderen Artikel:

• So erstellen Sie eine Icon-Schriftart-Schaltfläche mit Divi
• Entwerfen Sie ein einzigartiges Divi-Layout im Vollbildmodus mit einer animierten Bildlauftaste
• So gestalten Sie Ihre Monarch Social Buttons passend zum Design Ihrer Website
• 7 Schlüssel zum Erstellen eines unwiderstehlichen Abonnieren-Buttons

Abschließende Gedanken

Ich hoffe, diese Beispiele haben Sie dazu inspiriert, das Divi Button Module auf kreative neue Weise zu maximieren! Da ein Call-to-Action für Ihre Website so wichtig ist, ist es immer gut, eine Vielzahl von Ideen in unserer Toolbox zu haben, um einzigartige Schaltflächenoptionen zu erstellen. Fühlen Sie sich frei, diese Ideen zu verwenden, um einige erstaunliche eigene Knopfstile zu entwickeln!

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

Danke schön!