So erstellen Sie Symbolschrifttasten mit Divi

Icon-Schriftarten haben viele Verwendungsmöglichkeiten in der Welt des Webdesigns. Da Schriftsymbole bei der Skalierung auf verschiedene Größen in Farbe und Design klar bleiben, ist es sinnvoll, sie in Schaltflächen zu verwenden. Und das Erstellen einer Icon-Schriftart-Schaltfläche in Divi ist mit der Elegant Icon-Schriftart eigentlich ganz einfach. In diesem Tutorial zeige ich Ihnen, wie Sie Symbolschriftarten mit dem Schaltflächenmodul von Divi verwenden können, um eine einzelne Symbolschaltfläche zu erstellen.

Zu den Highlights dieses Tutorials gehören:

• So verwenden Sie die elegante Schriftart, um ein Symbol als Schaltflächentext hinzuzufügen
• So fügen Sie einen Abstand und einen Randradius hinzu, der sicherstellt, dass die Schaltfläche die Form eines perfekten Quadrats oder Kreises annimmt
• So ersetzen Sie das Schaltflächensymbol durch ein anderes Symbol beim Hover
• So positionieren Sie ein Schaltflächensymbol, um ein Bild zu überlappen
• und mehr…

Vorgeschmack

Hier ein kleiner Vorgeschmack auf das, was noch kommt…

Was du brauchst

Für dieses Tutorial verwende ich Folgendes:

• Divi-Thema (offensichtlich)
• Die eleganten Schriftsymbole – Sobald Sie die ZIP-Datei aus dem Blogbeitrag heruntergeladen haben, ziehen wir die Schriftdatei eleganticons.ttf hinein, die als benutzerdefinierte Schrift für unser Schaltflächenmodul verwendet wird.
• Das Layout der Bed & Breakfast-Startseite (kostenlos im Divi Builder erhältlich)

Lass uns anfangen!

Hinzufügen der Elegant Icon-Schriftart zu Ihrem Button-Modul

Schaltflächenmodul hinzufügen

Erstellen Sie zunächst eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie „Von Grund auf neu erstellen“ und fügen Sie nach der Bereitstellung des visuellen Builders eine einspaltige Zeile zum Abschnitt hinzu und fügen Sie dann ein Schaltflächenmodul zur Zeile hinzu.

Ziehen Sie die elegante Symbolschrift hinein

Um die Elegant Icon Font zu erhalten, gehen Sie zum Elegant Icon Font Blog Post und laden Sie die Font-Datei herunter. Extrahieren Sie den Inhalt der ZIP-Datei und suchen Sie die eleganten Symbolschriftdateien, indem Sie zu elegant_font > HTML CSS > fonts navigieren. Ziehen Sie dann die Datei „ElegantIcons.ttf“ aus Ihrer Computerdatei und legen Sie sie in den Visual Builder ab.

Dadurch wird das Modal zum Hochladen von Schriftarten automatisch angezeigt. Klicken Sie einfach auf die Schaltfläche Hochladen, um die Schriftart in den Divi Builder hochzuladen.

Jetzt haben Sie Zugriff auf die elegante Symbolschrift, wenn Sie eine beliebige Modulschrift im Visual Builder anpassen.

Gehen Sie zu den Einstellungen des Schaltflächenmoduls und aktualisieren Sie die Schaltflächenschriftart mit der neuen Elegant Icon-Schriftart, die Sie gerade hochgeladen haben. Es wird in der Liste der Symbole unter "Benutzerdefinierte Schriftarten" angezeigt.

Möglicherweise stellen Sie fest, dass Ihr Schaltflächentext jetzt in eine Reihe von Symbolen umgewandelt wurde. Dies liegt daran, dass jedes in das Texteingabefeld der Schaltfläche eingegebene Zeichen jetzt ein Symbol hat, das dem aktuell verwendeten Buchstaben/Zeichen entspricht.

Da wir nur ein Symbol für unsere Schaltfläche benötigen, können Sie ein beliebiges Zeichen auf der Tastatur auswählen, um das diesem Zeichen zugeordnete Symbol zu generieren. Geben Sie beispielsweise die Zahl 5 für Ihren Schaltflächentext ein, um einen rechten Chevron-Pfeil zu erhalten.

Schaltflächensymbole austauschen auf Hover

Wie Sie wissen, enthält das Schaltflächenmodul die Option zum Hinzufügen von Symbolen beim Hover. Wir können diese Funktionalität verwenden, um die Symbolschriftart durch das Hover-Symbol zu ersetzen, um einen schönen Hover-Effekt zu erzielen. Alles, was wir tun müssen, ist die Schaltflächeneinstellungen wie folgt zu ändern:

Schaltflächentextgröße: 30px
Schaltflächensymbol: siehe Screenshot (dies ist das Symbol, das die für die Schaltfläche verwendete Symbolschrift ersetzt)
Farbe des Schaltflächensymbols: #0c71c3 (diese sollte der Farbe entsprechen, die für den Schaltflächentext verwendet wird)
Platzierung der Schaltflächensymbole: Links
Textfarbe für Schaltflächen-Hover: rgba(255,255,255,0) (dies ist vollständig transparent, um die Schriftart des Schaltflächensymbols beim Schweben auszublenden)
Benutzerdefiniertes Padding: 1em links, 1em rechts (dieses Padding überschreibt das Standard-Padding der Schaltfläche und verhindert, dass es beim Schweben erweitert wird)

Jetzt müssen wir nur noch den Rand für das before-Element im benutzerdefinierten CSS überschreiben. Gehen Sie zur Registerkarte Erweitert und geben Sie das folgende CSS in das vorherige Feld ein:

margin-left: 0 !important;

Jetzt wird Ihr Schaltflächensymbol durch das Hover-Symbol beim Hover ersetzt.

Erstellen Sie perfekt kreisende Symbolschaltflächen, die mit der Schaltflächentextgröße skaliert werden

Kreis-Schaltflächen-Designs funktionieren sehr gut für einzelne Symbolschaltflächen. Und wenn Sie das Innenleben des Schaltflächenmodulabstands verstehen, können Sie perfekt runde Schaltflächen erstellen, die entsprechend der Schaltflächentextgröße skaliert werden.

Der Trick besteht darin, Ihren Button mit der Längeneinheit „em“ zu platzieren. Diese Längeneinheit ist relativ zu Ihrer Schaltflächentextgröße. Wenn Ihre Schaltflächentextgröße also 30px beträgt, ist 1em auch 30px (2em wären 60px usw.). Wenn wir dies wissen, müssen wir nur sicherstellen, dass unsere Polsterung um unseren Knopf auf allen 4 Seiten gleich ist. Aber was Sie vielleicht nicht bedacht haben, ist, dass die Textzeilenhöhe der Schaltfläche standardmäßig 1,7 cm beträgt. Das bedeutet, dass wir dies berücksichtigen müssen, wenn wir unsere oberen und unteren Padding-Werte hinzufügen.

Für diejenigen unter Ihnen, die die Mathematik hinter den Padding-Werten kennen möchten, die zum Erstellen von Kreisschaltflächen erforderlich sind, gehen Sie wie folgt vor:

Stellen Sie für den linken und rechten Abstand beide auf 1em ein. Dies bedeutet, dass unsere gesamte Schaltflächenbreite 90px (oder 3em) beträgt, weil…

30px linker Abstand + 30px Symbolschrift + 30px rechter Abstand = 90px insgesamt

Die Höhe der Schaltflächentextzeile beträgt 1,7 em, was 170 % der Schaltflächentextgröße (30 Pixel) entspricht, die 51 Pixel entspricht.

Stellen Sie für die obere und untere Polsterung beide auf 0,65 em ein. 0,65em entspricht 65% der Schaltflächentextgröße (30px), was 19,5px entspricht.

Deswegen…

19,5 Pixel oberer Abstand + 51 Pixel Zeilenhöhe + 19,5 Pixel unterer Abstand = 90 Pixel insgesamt

Das heißt, wenn der Schaltflächentext auf 30 Pixel festgelegt ist, beträgt die Gesamtgröße der Schaltfläche 90 x 90 Pixel (ein perfektes Quadrat). Tatsächlich kann man sich das so vorstellen. Was auch immer Sie als Schaltflächentextgröße festlegen, die Gesamtgröße der Schaltfläche beträgt das Dreifache dieses Wertes. Ein 40px-Schaltflächentext erzeugt also eine Schaltfläche, die 120px mal 120px groß ist und so weiter.

Im Moment hat die Schaltfläche die richtigen Abmessungen, ist aber immer noch quadratisch. Alles, was wir tun müssen, ist einen Randradius von 50% hinzuzufügen, um die quadratische Schaltfläche in eine perfekte Kreisschaltfläche zu verwandeln.

Hier ist, was Sie brauchen, um Ihre Schaltfläche in eine Kreisschaltfläche zu ändern:

Knopfrandradius: 50%
Benutzerdefinierte Polsterung: 0,65em oben, 0,65em unten, 1em rechts, 1em links

Vergessen Sie nicht, Sie können die Textgröße der Schaltfläche anpassen und die Schaltfläche bleibt perfekt kreisförmig, da die Auffüllung an die Größe des Textes angepasst wird.

Hinzufügen von Symbolschaltflächen zu Ihrem Divi-Layout

Divi macht es einfach, einzelne Symbolschaltflächen hinzuzufügen und an das Design jedes vorgefertigten Layouts anzupassen.

In diesem Beispiel zeige ich Ihnen, wie Sie dem Layout der Bed & Breakfast-Startseite eine einzelne Symbolschaltfläche hinzufügen.

Um das Layout zu Ihrer Seite hinzuzufügen, öffnen Sie das Einstellungsmenü, indem Sie auf das violette Symbol unten auf der Seite klicken (stellen Sie sicher, dass der Visual Builder aktiviert ist). Klicken Sie dann auf das Symbol Aus Bibliothek laden. Wählen Sie das Layout der Bed & Breakfast-Startseite aus und klicken Sie auf die Schaltfläche „Dieses Layout verwenden“, um das Layout auf der Seite bereitzustellen.

Hinzufügen einer Symbolschaltfläche zu einem Bild

Angenommen, Sie möchten eine kleine Symbolschaltfläche hinzufügen, um die Ecke eines Bildes für einen zusätzlichen CTA zu überlagern, der auf ein bestimmtes Produkt oder eine bestimmte Dienstleistung verweist. Sie müssen lediglich ein Schaltflächenmodul unter dem Bild hinzufügen und es so anpassen, dass es die Symbolschrift enthält und das Bild mit einem benutzerdefinierten Abstand überlappt.

Suchen Sie den Abschnitt „Über uns“ auf dem Homepage-Layout. Fügen Sie dann ein Tastenmodul direkt unter einem der Bilder hinzu, die verwendet werden, um das „Doppelzimmer“ zu zeigen (es ist das erste in der ersten Spalte der dreispaltigen Reihe).

Öffnen Sie dann die Schaltflächeneinstellungen und geben Sie ein großes „P“ in das Schaltflächentextfeld ein. Dies ändert sich in unser Symbol, sobald Sie die Elegant-Schriftart als Button-Schriftart auswählen.

Um einen schnellen Einstieg in die Anpassung des Designs der Schaltfläche an das Layout zu erhalten, speichern Sie Ihre Schaltflächeneinstellungen und suchen Sie die Schaltfläche „Jetzt buchen“ im oberen Bereich des Layouts. Öffnen Sie die Schaltflächeneinstellungen und kopieren Sie die Schaltflächenstile, indem Sie mit der rechten Maustaste auf den Titel der Schaltflächenoptionen klicken und die Option "Schaltflächenstile kopieren" aus der Liste auswählen.

Klicken Sie nun mit der rechten Maustaste auf das Schaltflächenmodul, das Sie unter dem Bild hinzugefügt haben, und wählen Sie "Schaltflächenstile einfügen".

Aktualisieren Sie dann die Schaltflächeneinstellungen wie folgt:

Button-Schriftart: Elegante Schriftart
Breite des Tastenrahmens: 0px
Schaltflächensymbol anzeigen: NEIN

Dann fügen wir unsere raffinierte benutzerdefinierte Polsterung hinzu, um sicherzustellen, dass der Button ein perfektes Quadrat ist:

Benutzerdefinierte Polsterung: 0,65em oben, 0,65em unten, 1em links, 1em rechts

Um die Schaltfläche so zu positionieren, dass sie die rechte untere Ecke des Bildes überlappt, müssen Sie zunächst den unteren Rand des obigen Bildmoduls entfernen. Öffnen Sie die Bildmoduleinstellungen des Bildes direkt über der Schaltfläche und setzen Sie den unteren Rand auf 0px.

Jetzt müssen wir die Schaltfläche mit einem benutzerdefinierten negativen Randwert gleich der Höhe der Schaltfläche über das Bild ziehen. Dazu müssen wir die Höhe unseres Buttons bestimmen. Wie bereits in diesem Beitrag erwähnt, können wir mit der benutzerdefinierten Auffüllung die genaue Größe unserer Schaltfläche basierend auf der aktuellen Schaltflächentextgröße ermitteln. Da die Schaltflächentextgröße 20px beträgt, wissen wir, dass die Höhe unserer Schaltfläche 3em (3-fache der Schaltflächentextgröße) beträgt, was 60px entspricht. Daher müssen wir einen benutzerdefinierten Rand für unsere Schaltfläche wie folgt festlegen:

Benutzerdefinierter Rand: -60px Oben

Und dann können wir unsere Schaltfläche rechts positionieren, indem wir die Schaltflächenausrichtung nach rechts anpassen.

Jetzt haben wir ein funktionierendes Design für unser Bild und unsere Schaltfläche. Alles, was wir tun müssen, ist, allen Bildern im Abschnitt dieselbe Schaltfläche hinzuzufügen.

Da wir den unteren Rand des Bildes entfernt haben, können wir diese Änderung mithilfe von Stilen erweitern problemlos auf alle Bilder im Abschnitt anwenden. Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie „Bildstile erweitern“.

Wählen Sie im Popup „Stile erweitern“ die Option „Dieser Abschnitt“ für die Option „Durchgehend“ und klicken Sie auf die Schaltfläche „Erweitern“. Jetzt haben alle Bilder einen unteren Rand von 0px.

Der letzte Schritt besteht darin, die Button-Module einfach unter jedes der Bilder zu kopieren und einzufügen.

Hier ist das endgültige Design.

Und weil wir die richtigen Abstandstechniken verwendet haben, bleibt die Schaltfläche auch auf dem Handy an Ort und Stelle…

Mit dem Tastenmodul verfügbare Symbole

Da der Schaltflächentext des Schaltflächenmoduls auf die auf der Tastatur verfügbaren Zeichen beschränkt ist, müssen Sie diese Tasten durchsuchen, um die verfügbaren Symbole für jede Taste zu finden. Eine einfache Möglichkeit besteht darin, ein Schaltflächenmodul mit der Schaltflächenschriftart Elegant Font zu erstellen und die Zeichen in das Schaltflächentextfeld einzugeben.

Hier ist ein Screenshot der Zeichen mit dem entsprechenden Schriftartsymbol:

Wenn Sie diesen Vorgang als einschränkend empfinden, können Sie jederzeit ein Textmodul verwenden, um Symbolverknüpfungen mit den hier aufgeführten Unicodes zu erstellen.

Abschließende Gedanken

Die Verwendung der Elegant Icon Font mit dem Button-Modul von Divi ist eine bequeme Möglichkeit, einzelne Icon-Buttons für Ihre Website zu erstellen. Dies öffnet einige Türen, um mit den Moduleinstellungen kreativ zu werden, um Ihre Schaltfläche mit einzigartigen Textstilen, Hover-Effekten und mehr anzupassen. Ich mag besonders diese benutzerdefinierten Tastenabstände, die sicherstellen, dass die Tasten die Form eines perfekten Quadrats oder Kreises annehmen.

Es gibt unzählige Verwendungsmöglichkeiten für Symbolschaltflächen. Hoffentlich wird der Anwendungsfall, den ich behandelt habe, ein wenig Inspiration für Ihre eigenen Projekte liefern.

Weitere Ideen finden Sie unter Verwendung der Elegant Icon-Schriftart oder wie Sie eine Icon-Schriftart in Ihre Website einbetten.

Ich würde gerne einige Ideen von Ihnen in den Kommentaren unten veröffentlichen.

Danke schön!