Schaltflächen mit den neuen Hintergrundoptionen von Divi gestalten (6 Designs enthalten)
Veröffentlicht: 2017-08-02Wenn Sie die neue Benutzeroberfläche für Hintergrundoptionen von Divi nicht genutzt haben, verpassen Sie etwas. Die Gestaltungsmöglichkeiten im Hintergrund sind erstaunlich. Aber wäre es nicht großartig, die gleichen leistungsstarken Designoptionen für unsere Buttons zu haben? Wenn die Antwort ja ist, dann denke ich, dass Sie diesen Beitrag lieben werden.
Heute zeige ich Ihnen, wie Sie die gleichen leistungsstarken Hintergrund-Designfunktionen für die Gestaltung von Schaltflächen verwenden können. Dieser Design-Trick legt den Zeilen- und Spaltenhintergrund hinter das Schaltflächenmodul, um Ihnen 3 Ebenen von Designfunktionen zu bieten. Mit dieser Art von Macht könnte es gefährlich werden. Bleiben Sie am besten ruhig und gehen Sie zuerst langsam
Lass uns gehen.
Vorgeschmack
Hier sind die Beispiel-Button-Designs, die in diesem Beitrag behandelt werden.
Schaltflächen mit den neuen Hintergrundoptionen von Divi gestalten (6 Designs enthalten)
Abonnieren Sie unseren Youtube-Kanal
Die Einrichtung
Fügen Sie mithilfe des visuellen Gebäudes einen regulären Abschnitt mit einer einspaltigen Zeile hinzu.
Fügen Sie als Nächstes ein Schaltflächenmodul zur Zeile hinzu.
Aktualisieren Sie dann die Einstellungen des Tastenmoduls wie folgt:
Inhaltsoptionen
Schaltflächentext: [Text eingeben]
Schaltflächen-URL: [URL eingeben]
Designoptionen
Tastenausrichtung: Mitte
Textfarbe: Hell
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 48px
Erweiterte Optionen
Wir benötigen die Breite von 100%, um die Breite der Spalte zu füllen. Geben Sie dazu das folgende benutzerdefinierte CSS in das Feld Hauptelement ein:
Width: 100%;
Einstellungen speichern
Sie können derzeit nichts auf der Seite sehen, da der Rahmen und der Text der Schaltfläche weiß sind. Anstatt die Hintergrundfarbe der Schaltfläche mit den Einstellungen des Schaltflächenmoduls zu gestalten, werden wir die Hintergrundfarbe der Zeile/Spalte hinter der Schaltfläche mit den erweiterten Hintergrundoptionen anpassen. Wir werden die Einstellungen des Schaltflächenmoduls erneut überprüfen, sobald wir mit der Erstellung spezifischerer Designs für die Schaltflächen beginnen. Aber jetzt beenden wir das Einrichten der Zeile.
Gehen Sie zu den Zeileneinstellungen , in denen sich Ihre neue Schaltfläche befindet, und aktualisieren Sie Folgendes:
Inhaltsoptionen
Wählen Sie die Registerkarte Hintergrundverlauf Spalte 1 und klicken Sie dann auf die graue runde Schaltfläche mit einem weißen Plussymbol.
Jetzt sollten Sie sehen, dass die Standardverlaufsfarben hinter Ihrer weißen Schaltfläche angezeigt werden.
Die Spalte passt jetzt gut hinter unsere Schaltfläche, aber wir müssen die Breite der Schaltfläche verringern. Dazu verwenden wir die Zeilengrößeneinstellungen. Indem wir eine benutzerdefinierte Breite für unsere Zeile festlegen, legen wir auch die Breite unserer Schaltfläche fest.
Designoptionen
Unter den Designoptionen werden wir die Größe der Zeile an unsere neue Schaltfläche anpassen, indem wir Folgendes anpassen:
Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 500 Pixel (dadurch wird die maximale Breite der Schaltfläche auf 500 Pixel festgelegt)
Benutzerdefiniertes Auffüllen: 0 Pixel oben, 0 Pixel rechts, 0 Pixel unten, 0 Pixel links
Erweiterte Optionen
Wir müssen den Randradius der Zeile und Spalte mit dem übereinstimmen, den wir für unsere Schaltfläche festgelegt haben, damit sie alle übereinstimmen. Geben Sie dazu das folgende benutzerdefinierte CSS in das Feld Hauptelement ein:
border-radius: 10px;
Geben Sie das gleiche CSS in das Feld Column Main Element ein :
border-radius: 10px;
Einstellungen speichern
Nachdem die Zeileneinstellungen jetzt aktualisiert wurden, um eine benutzerdefinierte Breite und Auffüllung zu haben, wurden zwei Dinge erreicht. Zuerst haben wir erfolgreich eine benutzerdefinierte Breite für unsere Schaltfläche festgelegt. Und zweitens haben wir jetzt eine weitere Ebene von Hintergrundoptionen, mit denen wir unsere Schaltfläche gestalten können.
Das sind insgesamt 3 Hintergrundebenen (Schaltfläche, Spalte, Zeile), die wir später zum Stylen verwenden könnten.
Hier ist eine Illustration, wie die Schaltfläche derzeit erstellt wird.
Ziemlich cool oder?
Das war's für die Grundeinstellung. Jetzt ist es Zeit für den spaßigen Teil, tolle Designs für Ihre Buttons zu kreieren.
Geniale Button-Designs erstellen
#1 Videohintergrund-Schaltfläche
Um diese Schaltfläche zu erstellen, verwenden Sie alle 3 Ebenen, den Zeilenhintergrund für das Video, den Spaltenhintergrund für den Farbverlauf und den Schaltflächenhintergrund für die leicht blaue Überlagerung.
Für die Zeileneinstellungen aktualisieren Sie die folgenden Inhaltsoptionen :
Hintergrundvideo: [Video hochladen]
Spalte 1 Hintergrund-Verlaufsfarben: rgba(12,113,195,0.41), rgba(131,0,233,0.18)
Einstellungen speichern
Aktualisieren Sie für die Tastenmoduleinstellungen Folgendes:
Inhaltsoptionen
Schaltflächentext: „Check it out“
Designoptionen
Schaltflächenhintergrundfarbe: rgba(12,113,195,0.25)
Farbe des Knopfrahmens: #0c71c3
Einstellungen speichern
Jetzt bleibt nur noch der Randradius des Videohintergrunds. Wir müssen einige benutzerdefinierte CSS hinzufügen, um dem Video einen Randradius zu geben, der der Schaltfläche entspricht. Dieser Zusatzcode ist nur für den Videohintergrund-Button erforderlich.
Um das benutzerdefinierte CSS hinzuzufügen, gehen Sie im Visual Builder zu den Seiteneinstellungen und klicken Sie auf die Registerkarte Erweitert. Aktualisieren Sie dann das Eingabefeld für benutzerdefiniertes CSS mit dem folgenden CSS:
.et_pb_section_video_bg {
border-radius: 10px;
}
Einstellungen speichern
Tipp : Eine weitere coole Designoption besteht darin, die Videoshow im Schwebeflug anzuzeigen. Geben Sie Ihrem Schaltflächenmodul einfach eine durchgehende Hintergrundfarbe und ändern Sie es beim Schweben in transparent.
Das ist es! Jetzt haben Sie eine Schaltfläche mit einem Videohintergrund.
#2 Karierter Knopf
Die karierte Schaltfläche erfordert die Verwendung von zwei Ebenen (Zeile und Spalte) von Hintergrundfarbverläufen.
Um diese Schaltfläche zu erstellen, verwenden Sie 2 Ebenen, den Zeilenhintergrund für die erste Farbverlaufsebene und den Spaltenhintergrund für die letzte Farbverlaufsebene.
Für die Zeileneinstellungen aktualisieren Sie die folgenden Inhaltsoptionen :
Hintergrund-Verlaufsfarben: #8300e9, #0c71c3
Verlaufsrichtung: 270deg
Startposition: 50%
Endposition: 0%
Spalte1 Hintergrund-Verlaufsfarben: rgba(224,11,0,0.39), rgba(255,255,255,0)
Verlaufsrichtung: 180deg
Startposition: 50%
Endposition: 0%
Einstellungen speichern
Gehen Sie nun zu den Tastenmoduleinstellungen und aktualisieren Sie Folgendes
Inhaltsoptionen
Schaltflächentext: „Abonnieren“
Designoptionen
Breite des Tastenrahmens: 0px
Tastenabstand der Buchstaben: 10px
Schaltflächenschriftart: Standard, Fett (B), Kursiv (I)
Schaltflächen-Hover-Buchstabenabstand: 10px
Das ist es. Hier ist das Endergebnis.
Jetzt wissen Sie, wie Sie Ihren Schaltflächen einen karierten Effekt hinzufügen.
#3 Schaltfläche mit radialem Verlauf
Um diese Schaltfläche zu erstellen, verwenden Sie 2 Ebenen (Zeile und Spalte) von Hintergrundfarbverläufen.
Für die Zeileneinstellungen aktualisieren Sie die folgenden Inhaltsoptionen :
Hintergrund-Verlaufsfarben: #8300e9, #0c71c3
Verlaufstyp: Radial
Radiale Richtung: Mitte
Startposition: 50%
Endposition: 100%
Spalte1 Hintergrund-Verlaufsfarben: rgba(224,11,0,0.39), rgba(255,255,255,0)
Verlaufstyp: Radial
Radiale Richtung: Mitte
Startposition: 50%
Endposition: 100%
Einstellungen speichern
Gehen Sie nun zu den Tastenmoduleinstellungen und aktualisieren Sie Folgendes:
Inhaltsoptionen
Schaltflächentext: „kontaktiere mich“
Designoptionen
Breite des Tastenrahmens: 0px
Button-Schriftart: Crafty Girls
Schaltflächensymbol: [Herzsymbol wählen]
Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN
Erweiterte Optionen
Als letzten Schliff fügen wir der Schaltfläche einen Folienschatten hinzu. Geben Sie zusätzlich zum vorherigen Code das folgende benutzerdefinierte CSS in das Feld Hauptelement ein :
box-shadow: 0px 5px 10px 3px #ccc;
Das ist es! Hier ist Ihr Endergebnis:
#4 Bullseye-Taste
Um diese Schaltfläche zu erstellen, verwenden Sie 2 Ebenen (Zeile und Spalte) von Hintergrundfarbverläufen. Außerdem werden wir einige benutzerdefinierte CSS im Schaltflächenmodul hinzufügen, um den Popup-Effekt für den unteren Rand zu erstellen.
Für die Zeileneinstellungen aktualisieren Sie die folgenden Inhaltsoptionen :
Hintergrund-Verlaufsfarben: #023500, #008c02
Verlaufstyp: Radial
Radiale Richtung: Mitte
Startposition: 19%
Endposition: 0%
Spalte1 Hintergrundverlaufsfarben: rgba(0,206,72,0.43), rgba(255,255,255,0)
Verlaufstyp: Radial
Radiale Richtung: Mitte
Startposition: 32%
Endposition: 0%
Gehen Sie nun zu den Tastenmoduleinstellungen und aktualisieren Sie Folgendes:
Inhaltsoptionen
Schaltflächentext: „Kaufen“
Designoptionen
Schaltflächentextgröße: 65px
Breite des Tastenrahmens: 0px
Tastenschrift: Roboto, Fett (B), Großbuchstaben (TT)
Erweiterte Optionen
Nun zum letzten Schliff. Fügen Sie die folgende benutzerdefinierte CSS an den vorhandenen Code in dem Hauptelement Eingabefeld:
box-shadow: 0px 5px 0px 0px #01771f;
#5 Bildschaltfläche
Um diese Schaltfläche zu erstellen, verwenden Sie alle 3 Ebenen, die Zeile für das Hintergrundbild, die Spalte für den Verlaufshintergrund und den Schaltflächenhintergrund für die halbtransparente blaue Farbüberlagerung.
Für die Zeileneinstellungen aktualisieren Sie die folgenden Inhaltsoptionen :
Unter der Registerkarte Hintergrundbild
Hintergrundbild: [Bild hochladen]
Hintergrundbildgröße: Cover
Position des Hintergrundbilds: Mitte
Hintergrundbild wiederholen: Keine Wiederholung
Hintergrundbild-Mischung: Multiplizieren
Unter der Registerkarte Hintergrundverlauf
Hintergrund-Verlaufsfarben: rgba(12,113,195,0.33), #edf000
Verlaufstyp: Linear
Verlaufsrichtung: 63deg
Startposition: 50%
Endposition: 100%
Scrollen Sie nun nach unten zu den Optionen für den Hintergrund von Spalte 1 und wählen Sie die Registerkarte Farbverlauf.
Spalte 1 Hintergrund-Verlaufsfarben: rgba(236,239,31,0.66), rgba(0,0,0,0.49)
Spaltengradiententyp: Linear
Spaltenverlaufsrichtung: 139deg
Spaltenstartposition: 12%
Spaltenendposition: 0%
Einstellungen speichern
Das kümmert sich um unsere zweite Ebene der Hintergrunddesigns. Noch einer übrig.
Gehen Sie zu den Tastenmoduleinstellungen und aktualisieren Sie Folgendes:
Inhaltsoptionen
Schaltflächentext: „Tickets holen“
Designoptionen
Schaltflächenhintergrundfarbe: rgba(12,113,195,0,16)
Farbe des Knopfrahmens: #efef4f
Schaltflächenschrift: Lato
Schaltflächensymbol: [Ticket-Symbol auswählen]
Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN
Schaltfläche Hover Textfarbe: #023b7c
Schaltfläche Hover Hintergrundfarbe: #023b7c
Das ist es!. Sehen Sie sich Ihre Bildschaltfläche an.
#6 Porträttaste
Um diese letzte Schaltfläche zu erstellen, verwenden wir nur eine Ebene des Hintergrunddesigns. Wir werden eine Bildmischung aus Hintergrundbild und Hintergrundfarbe verwenden, um einen einzigartigen Look zu erzielen.
Scrollen Sie für die Zeileneinstellungen nach unten zu den Hintergrundoptionen für Spalte 1 und aktualisieren Sie Folgendes:
Spaltenhintergrundbild: [Hochformatbild hochladen]
Spalte Hintergrundbildgröße: Fit (dadurch wird sichergestellt, dass das Porträt immer in die Schaltfläche passt)
Spaltenhintergrundbildposition: Mitte links (dadurch wird Ihr Porträt links von der Schaltfläche ausgerichtet)
Spaltenhintergrundbildwiederholung: Keine Wiederholung
Column Background Image Blend: Luminosity (dies erzeugt eine schöne Mischung der orangen Farbe mit dem Porträt)
Stellen Sie sicher, dass Sie die aktuellen Verlaufsfarben löschen, wenn Sie sie festgelegt haben. Wenn nicht, möchten Sie den orangefarbenen Hintergrund mischen können. Klicken Sie einfach auf die Registerkarte "Verlauf", bewegen Sie den Mauszeiger über das Farbauswahlfeld und klicken Sie auf das Papierkorbsymbol, das oben rechts auftaucht.
Jetzt können Sie die Orangenmischung auf Ihrer Schaltfläche sehen.
Einstellungen speichern
Gehen Sie nun zu den Tastenmoduleinstellungen und aktualisieren Sie Folgendes:
Inhaltsoptionen
Schaltflächentext: „Lass uns reden“
Designoptionen
Tastenausrichtung: Rechts
Farbe des Knopfrahmens: #ff7b23
Tastenabstand der Buchstaben: 3px
Button-Schriftart: Happy Monkey
Schaltflächensymbol [Chatsymbol hinzufügen]
Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN
Schaltflächen-Hover-Buchstabenabstand: 3px
Alles erledigt! Ich mag dieses Design für einen Blog-Kontaktknopf. Ich denke, es fügt eine schöne persönliche Note hinzu.
Entwerfen von Schaltflächen auf verschiedenen Spaltenstrukturen
Bisher haben wir die einspaltigen Zeilen als Hintergrund für unsere Schaltflächen verwendet. Dies ermöglicht uns 3 Ebenen des Hintergrunddesigns. Wenn Sie jedoch eine Schaltfläche in eine andere Spaltenstruktur einfügen möchten, können Sie dies tun. Sie verlieren nur die Zeile als Hintergrundebene.
Angenommen, Sie möchten eine 1/2 1/2-Spaltenzeile mit einer Schaltfläche links und etwas Text rechts hinzufügen. Hier ist, was Sie tun würden.
Beginnen Sie mit einem neuen regulären Abschnitt und wählen Sie die Zeilenstruktur 1/2 1/2 Spalten aus. Fügen Sie dann in der linken Spalte ein Tastenmodul hinzu .
Stellen Sie in den Einstellungen für das Schaltflächenmodul sicher, dass Sie das folgende CSS in das Eingabefeld Hauptelement auf der Registerkarte Erweitert einfügen:
Width: 100%;
Sie können den Rest des Tastenmoduls später anpassen.
Gehen Sie als Nächstes zu den Zeileneinstellungen und scrollen Sie nach unten zu den Hintergrundoptionen für Spalte 1 und aktualisieren Sie die Hintergrundeinstellungen wie gewünscht.
Gehen Sie dann zur Registerkarte Design und aktualisieren Sie Folgendes:
Benutzerdefinierter Abstand von Spalte 1: 0 Pixel oben, 0 Pixel rechts, 0 Pixel unten, 0 Pixel links
Einstellungen speichern
Jetzt haben Sie eine Schaltfläche in der linken Spalte, die die Hintergrundoptionen von Spalte 1 für das Design verwenden kann. Wenn Sie zurückgehen und den Schaltflächenstil nach Ihren Wünschen aktualisieren, fügen Sie Ihren Text in die rechte Spalte ein und Sie sind fertig!
Reaktionsfähig?
Jawohl. Da die Tasten in die Spaltenstruktur von Divi integriert sind, reagieren die Tasten auf allen Geräten gut. Möglicherweise müssen Sie die Einstellungen des Tastenmoduls erneut aufrufen, um anzupassen, wie sich bestimmte Tastenelemente an verschiedene Geräte anpassen.
Cross-Browser-Unterstützung
Derzeit wird die CSS-Eigenschaft für den Hintergrund-Blending-Modus von Internet Explorer oder Edge nicht unterstützt, und Safari bietet nur begrenzte Mischoptionen. Der Fallback ist jedoch meiner Erfahrung nach in den meisten Fällen nicht erheblich.
So sehen die Schaltflächen im IE aus:
Wenn Sie sich für den IE einsetzen, würde ich vorschlagen, sie zu testen, um ein glückliches Medium zu finden, das sowohl auf dem IE als auch auf anderen Browsern gut aussieht.
Abschließende Gedanken
Ich muss zugeben, dieses Tutorial ist für mich persönlich ziemlich bahnbrechend. In der Vergangenheit musste ich meinem Child-Theme eine Reihe von Klassen und zusätzliches CSS hinzufügen, wenn ich Schaltflächen kreativ gestalten wollte. Aber jetzt, da ich die Hintergrundoptionen von Divi nutzen kann, ist mein Leben viel einfacher geworden. Ich hoffe, dass Sie diesen Design-Trick verwenden können, um Ihre Schaltflächen auf die nächste Stufe zu heben.
Freue mich von dir in den Kommentaren zu hören.
Danke schön