Schaltflächen mit ikonischen Schriftarten haben in der Welt des Webdesigns viele Verwendungsmöglichkeiten. Da ikonische Schriftarten in Farben und Design klar bleiben, wenn sie auf verschiedene Größen skaliert werden, ist es eine gute Idee, sie in Schaltflächen zu verwenden. Und das Erstellen einer Schaltfläche mit ikonischen Schriftarten in Divi ist mit den Schriftarten aus der Bibliothek recht einfach. " ElegantIcons". In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit dem Divi-Schaltflächenmodul Symbolschriftarten verwenden können, um eine einzelne Symbolschaltfläche zu erstellen.
Einige der Highlights dieses Tutorials sind:
- Wie verwenden ElegantIcons Hinzufügen eines Symbols als Schaltflächentext
- So fügen Sie Polsterung und Rahmenradius hinzu, damit die Schaltfläche wie ein perfektes Quadrat oder ein perfekter Kreis aussieht
- So ersetzen Sie das Schaltflächensymbol beim Bewegen durch ein anderes Symbol
- So positionieren Sie ein Schaltflächensymbol, um ein Bild zu überlagern
- und mehr ...
Übersicht
Hier ist eine Vorschau auf das, was kommt ...
Was brauchst du?
Für dieses Tutorial werde ich Folgendes verwenden:
- Divi Theme (offensichtlich)
- Stilvolle Gussikonen, ein Tutorial an Elegantes Thema ist viel genauer. Sobald Sie die Zip-Datei aus dem Blog-Beitrag heruntergeladen haben, ziehen wir sie in die Schriftartdatei eleganticons.ttf, um sie als benutzerdefinierte Schriftart für unser Schaltflächenmodul zu verwenden.
- Die Bed & Breakfast-Homepage (kostenlos bei Divi Builder erhältlich)
Fangen wir an!
Fügen Sie Ihrem Tastenmodul die Schriftart Elegant Icons hinzu
Fügen Sie ein Schaltflächenmodul hinzu
Erstellen Sie zunächst eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie "Von Grund auf neu erstellen". Fügen Sie nach der Bereitstellung des Visual Builders eine Spaltenzeile zum Abschnitt hinzu und fügen Sie der Zeile ein Schaltflächenmodul hinzu.
Ziehen Sie die stilvolle Symbolschrift
Um das Farbenspiel zu bekommen ElegantFontsSie können herunterladen diese Schriftart pack über diesen Link. Extrahieren Sie es Inhalt Öffnen Sie die ZIP-Datei und suchen Sie die eleganten Symbolschriftdateien, indem Sie zu elegant_font > HTML CSS > class navigieren. Ziehen Sie dann die Datei „ElegantIcons.ttf“ auf Ihren Computer und legen Sie sie im Visual Builder ab.
Dadurch wird das Modal "Schrift automatisch herunterladen" aufgerufen. Klicken Sie einfach auf den Download-Button, um die Schriftart in Divi Builder herunterzuladen.
Jetzt haben Sie Zugriff auf die stilvolle Symbolschrift, wenn Sie eine Mod-Schrift im Visual Builder anpassen.
Gehen Sie zu den Einstellungen des Schaltflächenmoduls und aktualisieren Sie die Schriftart der Schaltfläche mit der neuen Schriftart Elegant Icon, die Sie gerade heruntergeladen haben. Es wird in der Liste der Symbole unter "Benutzerdefinierte Schriftarten" angezeigt.
Möglicherweise stellen Sie fest, dass Ihr Schaltflächentext in eine Reihe von Symbolen umgewandelt wurde. In der Tat hat jedes Zeichen, das in den Texteingabebereich der Schaltfläche eingegeben wird, jetzt ein Symbol, 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 Nummer 5 für Ihren Schaltflächentext ein, um einen rechten Chevron-Pfeil zu erhalten.
Tauschen Sie die Schaltflächensymbole beim Hover aus
Wie Sie wissen, enthält das Schaltflächenmodul die Option, beim Hover Symbole hinzuzufügen. Wir können diese Funktion verwenden, um die Symbolschrift durch das Hover-Symbol zu ersetzen und einen schönen Hover-Effekt zu erzielen. Alles was wir tun müssen, ist die Tasteneinstellungen wie folgt zu ändern:
Schaltfläche Textgröße: 30px Schaltflächensymbol: siehe Screenshot (dies ist das Symbol, das das für die Schaltfläche verwendete Schriftsymbol ersetzt) Symbol Schaltflächenfarbe: # 0c71c3 (sollte mit der für den Schaltflächentext verwendeten Farbe übereinstimmen ) Platzierung des Schaltflächensymbols: Linke Schaltfläche Hover-Textfarbe: rgba (255,255,255,0) (Dies ist vollständig transparent, um die Schriftart des Symbols für die Hover-Schaltfläche auszublenden). Benutzerdefinierte Füllung: 1. links, 1. rechts (diese Füllung ersetzt das Erweitern beim Schweben)
Jetzt müssen wir nur noch den Rand für das vordere Element in der benutzerdefinierten CSS ersetzen. Gehen Sie zur Registerkarte Erweitert und geben Sie den folgenden CSS-Code in das vordere Feld ein:
margin-left: 0 !important; |
Jetzt wird Ihr Schaltflächensymbol durch das Hover-Over-Symbol ersetzt.
Kreative Symbolschaltflächen mit Kreis, skaliert mit der Schaltflächentextgröße
Kreisförmige Schaltflächen eignen sich hervorragend für Schaltflächen mit einzelnen Symbolen. Wenn Sie das Innenleben des Schaltflächenmodulabstands verstehen, können Sie perfekt kreisförmige Schaltflächen erstellen, die auf die Größe des Schaltflächentextes skaliert werden.
Der Trick besteht darin, den Knopf mit der Längeneinheit "em" zu platzieren. Diese Längeneinheit ist relativ zur Größe des Texts auf Ihrer Schaltfläche. Wenn die Textgröße der Schaltfläche 30px beträgt, ist 1em auch 30px (2em ist 60px usw.). Da wir das wissen, müssen wir nur sicherstellen, dass unsere Polsterung um unseren Knopf auf allen 4 Seiten gleich ist. Was Sie jedoch möglicherweise nicht berücksichtigt haben, ist, dass die Höhe der Schaltflächentextzeile standardmäßig 1.7 em beträgt. Dies bedeutet, dass wir dies berücksichtigen müssen, wenn wir unsere oberen und unteren Füllwerte hinzufügen.
Für diejenigen unter Ihnen, die die Mathematik hinter den Füllwerten kennen möchten, die zum Erstellen von Kreisschaltflächen erforderlich sind, gilt Folgendes:
Stellen Sie für die linke und rechte Füllung beide auf 1em ein. Dies bedeutet, dass die Gesamtbreite Ihrer Schaltfläche 90px (oder 3em) beträgt, weil ...
30px-Auffüllung links + 30px für Schriftart-Symbol + 30px-Auffüllung rechts = 90px gesamt
Die Höhe der Schaltflächentextzeile beträgt 1.7 em, was 170% der Schaltflächentextgröße (30 Pixel) entspricht, was 51 Pixel entspricht.
Stellen Sie für die obere und untere Polsterung beide auf 0,65 em ein. 0.65em entspricht 65% der Textgröße der Schaltfläche (30 Pixel), was 19.5 Pixel entspricht.
So ...
19.5px obere Polsterung + 51px Linienhöhe + 19.5px untere Polsterung = 90px gesamt
Dies bedeutet, dass wenn der Schaltflächentext auf 30 Pixel eingestellt ist, die Gesamtgröße der Schaltflächen 90 x 90 Pixel beträgt (ein perfektes Quadrat). In der Tat können Sie es so sehen. Unabhängig von der Textgröße der Schaltfläche beträgt die Gesamtgröße der Schaltfläche das Dreifache des Werts. Aus 3px-Schaltflächentext wird also eine 40px x 120px-Schaltfläche usw. erstellt.
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 ändern.
Hier ist, was Sie brauchen, um Ihre Schaltfläche zu einem Kreis zu ändern:
Rahmenradius-Schaltfläche: 50%
Benutzerdefinierte Polsterung: 0.65em oben, 0.65em unten, 1em gerade, 1em links
Denken Sie daran, dass Sie die Textgröße der Schaltfläche anpassen können und die Schaltfläche genau wie die Textgrößenfüllung in einem Kreis bleibt.
Hinzufügen von Schaltflächen auf Divi
Mit Divi können Sie ganz einfach eindeutige Symbolschaltflächen hinzufügen und anpassen, um sie an das Design eines vordefinierten 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 lila Symbol unten auf der Seite klicken (stellen Sie sicher, dass der visuelle Generator 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 mit einem zusätzlichen CTA zu überlagern, der sich auf ein bestimmtes Produkt oder eine bestimmte Dienstleistung bezieht. Alles, was Sie tun müssen, ist, ein Schaltflächenmodul unter dem Bild hinzuzufügen und es so anzupassen, dass es die Schriftart des Symbols enthält und das Bild mit benutzerdefiniertem Abstand überlappt.
Suchen Sie auf der Startseite nach dem Abschnitt "Über uns". Fügen Sie dann ein Schaltflächenmodul direkt unter einem der Bilder hinzu, die zur Darstellung des "Doppelzimmers" verwendet werden (das erste in der ersten Spalte der dreispaltigen Zeile).
Öffnen Sie dann die Schaltflächeneinstellungen und geben Sie ein großes "P" in das Schaltflächentextfeld ein. Dies ändert sich in unserem Symbol, sobald Sie die fantastischen Hintergrundsätze wie die Schaltflächenschrift auswählen.
Um das Schaltflächendesign schnell an das Layout anzupassen, speichern Sie Ihre Schaltflächeneinstellungen und suchen Sie die Schaltfläche "Jetzt buchen" oben im Layout. Ö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 Modul, das Sie unter dem Bild hinzugefügt haben, und wählen Sie "Schaltflächenstil einfügen".
Aktualisieren Sie dann die Schaltflächeneinstellungen wie folgt:
Schriftart Button: Awesome Font
Schriftart-Schaltfläche Rahmenbreite: 0px
Schaltflächensymbol anzeigen: NEIN
Dann fügen Sie unsere clevere benutzerdefinierte Polsterung hinzu, sodass der Knopf ein perfektes Quadrat ist:
Benutzerdefinierte Füllung: 0.65em Oben, 0.65em Unten, 1em Links, 1em Rechts
Um die Schaltfläche so zu positionieren, dass sie die untere rechte Ecke des Bildes abdeckt, müssen Sie zuerst den unteren Rand des obigen Bildmoduls entfernen. Öffnen Sie die Einstellungen des Image Image-Moduls direkt über der Schaltfläche und setzen Sie den unteren Rand auf 0 Pixel.
Jetzt müssen wir die Schaltfläche mit einem benutzerdefinierten negativen Randwert über das Bild ziehen, der der Höhe der Schaltfläche entspricht. Dazu müssen wir die Höhe unserer Schaltfläche bestimmen.
Wie bereits in diesem Artikel erwähnt, können wir anhand der benutzerdefinierten Füllung die genaue Größe unserer Schaltfläche anhand der aktuellen Größe des Schaltflächentextes ermitteln. Da die Schaltflächentextgröße 20px beträgt, wissen wir, dass unsere Schaltflächenhöhe 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 Ausrichtung der Schaltfläche rechts anpassen.
Jetzt haben wir ein funktionierendes Design für unser Bild und unseren Button. Alles, was wir tun müssen, ist, allen Bildern in diesem Abschnitt dieselbe Schaltfläche hinzuzufügen.
Da wir den unteren Rand des Bildes entfernt haben, können wir diese Änderung mit der Option "Stile 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 Dialogfeld "Stile erweitern" für die Option "Über" die Option "Dieser Abschnitt" aus und klicken Sie auf die Schaltfläche "Erweitern". Jetzt haben alle Bilder einen unteren Rand von 0 Pixel.
Der letzte Schritt besteht einfach darin, die Button-Module unter jedem Bild zu kopieren und einzufügen.
Hier ist das endgültige Design.
Und da wir die richtigen Abstandstechniken verwendet haben, bleibt der Knopf 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 untersuchen, um die verfügbaren Symbole zu finden, die jeder Taste zugeordnet sind. Eine einfache Möglichkeit, dies zu tun, besteht darin, ein Schaltflächenmodul zu erstellen, dessen Schaltflächenschrift auf elegante Schriftart eingestellt ist, und die Zeichen in das Schaltflächentextfeld einzugeben.
Hier ist ein Screenshot der Zeichen mit dem entsprechenden Schriftsymbol:
Wenn Sie diese Liste etwas erschöpfend finden, können Sie jederzeit ein Textmodul verwenden, um Symbollinks mit den aufgelisteten Unic-Codes zu erstellen. Sie finden hier .
Abschließende Gedanken
Die Verwendung eleganter Symbole mit dem Schaltflächenmodul von Divi ist eine bequeme Möglichkeit, einzigartige Schaltflächen für Sie zu erstellen Website. Dies öffnet der Kreativität die Tür mit Moduleinstellungen, um Ihre Schaltfläche mit einzigartigen Textstilen, Hover-Effekten und mehr anzupassen. Ich mag besonders die benutzerdefinierten Tastenabstandswerte, 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 das in diesem Tutorial behandelte Verwendungsbeispiel Ihre eigenen Projekte inspirieren.
