Springe zum Hauptinhalt

So erstellen Sie Schaltflächen mit Symbolen auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Schaltflächen mit Schriftarten-Symbolen haben in der Welt des Webdesigns viele Verwendungsmöglichkeiten. Da Symbolschriftarten bei der Entwicklung zu unterschiedlichen Größen in Farbe und Design gestochen scharf bleiben, ist es eine gute Idee, sie in Schaltflächen zu verwenden. Und das Erstellen einer Schaltfläche mit Schriftarten-Symbolen in Divi ist mit den Schriftarten in der Bibliothek eigentlich ganz einfach. ElegantIcons". In diesem Tutorial zeige ich Ihnen, wie Sie mit dem Divi-Schaltflächenmodul Symbolschriften 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 Polster und einen Rahmenradius hinzu, damit die Schaltfläche die Form eines perfekten Quadrats oder Kreises annimmt
  • So ersetzen Sie das Schaltflächensymbol beim Überfliegen 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 ...

Schaltflächen für Symbolschriftarten

Ändern Sie die Größe einer Divi-Schaltfläche image.gif

Demonstrationsschaltfläche divi list delements.png

Was brauchst du?

Für dieses Tutorial werde ich Folgendes verwenden:

  • Divi-Thema (offensichtlich)
  • Stilvolle Gussikonen, ein Tutorial an Elegantes Thema ist viel genauer. Sobald Sie die ZIP-Datei aus dem Blog-Beitrag heruntergeladen haben, ziehen Sie 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 "Generate From Zero" und fügen Sie nach der Bereitstellung des visuellen Generators dem Abschnitt eine Spaltenzeile und der Zeile ein Schaltflächenmodul hinzu.

Fügen Sie eine Schaltfläche divi builder.jpg hinzu

Ziehen Sie die Schriftart des eleganten Symbols

Um das Farbenspiel zu bekommen ElegantFontsSie können herunterladen diese Schriftart pack über diesen Link. Extrahieren Sie den Inhalt der ZIP-Datei und suchen Sie nach Schriftartdateien für elegante Symbole, indem Sie zur Klasse elegant_font> CSS CSS> navigieren. Ziehen Sie dann die Datei "ElegantIcons.ttf" auf Ihren Computer und legen Sie sie im visuellen Generator ab.

extrahiere die Zip-Datei divi.jpg

Dadurch wird der modale Download der Schriftart automatisch aufgerufen. Klicken Sie einfach auf die Download-Schaltfläche, um die Schriftart in Divi Builder herunterzuladen.

online stellen divi.jpg

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

Wechseln Sie zu den Einstellungen des Tastenmoduls und aktualisieren Sie die Tastenschrift mit der neuen Elegant Icon-Schrift, die Sie gerade heruntergeladen haben. Es wird in der Liste der Symbole unter "Benutzerdefinierte Schriftarten" angezeigt.

Knopf Schriftart divi.jpg

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

Verwendung des Symbols button.jpg

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 5-Nummer für Ihren Schaltflächentext ein, um einen Pfeil im rechten Winkel zu erhalten.

Symbolschaltfläche divi 5.jpg

Austauschknopfikonen auf dem Schwebeflug

Wie Sie wissen, enthält das Schaltflächenmodul die Option, beim Schweben Symbole hinzuzufügen. Mit dieser Funktion können Sie die Symbolschriftart durch das Hover-Symbol ersetzen, um einen schönen Hover-Effekt zu erzielen. Alles was wir tun müssen, ist die Tasteneinstellungen wie folgt zu ändern:

Schaltflächentextgröße: 30px Symbol Schaltfläche: siehe Screenshot (dies ist das Symbol, das die für die Schaltfläche verwendete Symbolschrift ersetzt) ​​Farbe Schaltflächensymbol: # 0c71c3 (dies sollte mit der für den Schaltflächentext verwendeten Farbe übereinstimmen ) Placement-Schaltflächensymbol: Flyover-Textfarbe für die linke Schaltfläche: rgba (255,255,255,0) (Dies ist vollständig transparent, um die Symbolschrift der Hover-Schaltfläche auszublenden.) Benutzerdefinierte Füllung: 1em links, 1em rechts (diese Füllung ersetzt das Erweitern mit der Maus)

Anpassungsknopf divi.jpg

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 Feld ein:

margin-left: 0 ! important;

Fügen Sie einen Knopfrand diiv.png hinzu

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Jetzt wird das Symbol Ihrer Schaltfläche durch das Schwebeflug-Symbol ersetzt.

Demo-Button bei hover.gif ersetzt

Erstellen von Symbolschaltflächen mit einem Kreis, der mit der Textgröße der Schaltfläche skaliert ist

Die Kreistasten eignen sich hervorragend für einzelne Symboltasten. Wenn Sie sich mit den inneren Abständen der Tastenmodule auskennen, können Sie perfekt runde Tasten erstellen, die der Größe des Tastentexts entsprechen.

Der Trick besteht darin, Ihre Taste mit der Längeneinheit "em" zu platzieren. Diese Längeneinheit ist relativ zur Textgröße Ihrer Schaltfläche. Wenn also die Größe des Textes der Schaltfläche 30px ist, ist 1em auch 30px wert (2em ist 60px wert und so weiter ...). Wenn wir das wissen, müssen wir nur sicherstellen, dass unsere Polsterung um unseren Button auf den 4-Seiten gleich ist. Möglicherweise haben Sie jedoch nicht berücksichtigt, dass die Zeilenhöhe des Schaltflächentexts standardmäßig 1.7em ist. 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, sind hier:

Setzen Sie für die linke und rechte Füllung beide auf 1em. 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 Textzeile der Schaltfläche ist 1.7em, was 170% der Textgröße der Schaltfläche (30px) entspricht, die 51px ist.

Setzen Sie für die obere und untere Füllung beide auf 0,65em. 0.65em entspricht 65% der Schaltflächentextgröße (30px), die 19.5px entspricht.

So ...

19.5px obere Polsterung + 51px Linienhöhe + 19.5px untere Polsterung = 90px gesamt

Das heißt, wenn der Schaltflächentext auf 30px gesetzt ist, beträgt die Gesamtgröße der Schaltfläche 90px auf 90px (ein perfektes Quadrat). In der Tat können Sie es so denken. Unabhängig von der Größe des Schaltflächentexts ist die Gesamtgröße der Schaltfläche das 3-fache des Werts. Aus einem Schaltflächentext mit 40-Pixeln wird daher eine Schaltfläche mit 120-Pixeln nach 120-Pixeln usw. erstellt.

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

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

Ändern Sie einen button.png

Denken Sie daran, Sie können die Größe der Schaltfläche Text anpassen und die Schaltfläche wird perfekt im Kreis bleiben, wie das Füllen der Textgröße.

Passen Sie die Größe von button.gif an

Hinzufügen von Schaltflächen auf Divi

Divi erleichtert das Hinzufügen und Anpassen eindeutiger Symbolschaltflächen, 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 Seitenlayout 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 anschließend in der Bibliothek auf das Symbol 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.

Wählen Sie ein Layout divi.png

Hinzufügen einer Symbolschaltfläche zu einem Bild

Angenommen, Sie möchten eine kleine Symbolschaltfläche hinzufügen, um die Ecke eines Bilds einem zusätzlichen CTA zu überlagern, der mit einem bestimmten Produkt oder einer bestimmten Dienstleistung verknüpft ist. Alles, was Sie tun müssen, ist, ein Schaltflächenmodul unter dem Bild hinzuzufügen und es so anzupassen, dass es die Symbolschrift enthält, und sicherzustellen, dass es das Bild mit benutzerdefinierten Abständen überlappt.

Finden Sie den Abschnitt "Über uns" auf der Homepage. Fügen Sie dann ein Tastenmodul direkt unter einem der Bilder ein, mit denen das "Doppelzimmer" dargestellt wird (das erste in der ersten Spalte der dreispaltigen Zeile).

divi.png-Schaltfläche

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Öffnen Sie dann die Einstellungen der Schaltfläche und geben Sie ein großes "P" in das Textfeld der Schaltfläche ein. Dies ändert sich in unserem Symbol, sobald Sie großartige Hintergrundspiele wie die Button-Schriftart auswählen.

divi.png Schaltflächentext

Speichern Sie die Einstellungen Ihrer Schaltflächen und suchen Sie die Schaltfläche "Jetzt buchen" am oberen Rand des Layouts, um schnell mit dem Layout des Schaltflächendesigns zu beginnen. Öffnen Sie die Schaltflächeneinstellungen und kopieren Sie die Schaltflächenstile, indem Sie mit der rechten Maustaste auf den Titel "Schaltflächenoptionen umschalten" 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".

Fügen Sie das style.jpg-Modul ein

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

Schaltflächen für Symbolschriftarten

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

Anpassung der button.png

Jetzt müssen wir die Schaltfläche auf dem Bild mit einem benutzerdefinierten negativen Rand ziehen, der der Höhe der Schaltfläche entspricht. Dazu müssen wir die Höhe unseres Knopfes bestimmen.

Wie weiter oben in diesem Artikel erwähnt, können wir mit der benutzerdefinierten Ausfüllung die genaue Größe unserer Schaltfläche anhand der aktuellen Größe des Schaltflächentexts ermitteln. Da die Größe des Schaltflächentexts 20px ist, wissen wir, dass die Höhe unserer Schaltfläche 3em (3-mal die Größe des Schaltflächentexts) ist, also 60px. Daher müssen wir einen benutzerdefinierten Rand für unsere Schaltfläche wie folgt definieren:

Benutzerdefinierter Rand: -60px Oben

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

Ändern Sie die Ausrichtung einer Divi.png-Schaltfläche

Jetzt haben wir ein funktionales Design für unser Image und unseren Button. Alles, was wir tun müssen, ist, allen Bildern in diesem Abschnitt die gleiche Schaltfläche hinzuzufügen.

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

Bild vergrößern style.jpg

Wählen Sie im Dialogfeld "Formatvorlagen erweitern" die Option "Dieser Abschnitt" aus und klicken Sie auf die Schaltfläche "Erweitern". Jetzt haben alle Bilder einen unteren Rand von 0px.

Der letzte Schritt besteht einfach darin, die Button-Module unter jedem Bild zu kopieren und einzufügen.

Hier ist das endgültige Design.

endgültiger Designknopf divi.png

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Und da wir die richtigen Abstandstechniken verwendet haben, bleibt der Knopf auch auf dem Handy an Ort und Stelle ...

Vorschau-Button auf mobile.png

Über das Tastenmodul verfügbare Symbole

Da der Schaltflächentext des Tastenmoduls 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, dies zu tun, besteht darin, ein Schaltflächenmodul zu erstellen, bei dem die Schaltflächenschrift auf die elegante Schrift eingestellt ist, und die Zeichen in das Textfeld der Schaltfläche einzugeben.

Hier ist ein Screenshot der Charaktere mit dem entsprechenden Schriftsymbol:

Liste der verfügbaren Icons divi.png

Wenn Sie diese Liste nicht vollständig finden, können Sie jederzeit einen Textbaustein verwenden, um Symbolverknüpfungen mit den aufgelisteten Unicodes zu erstellen. hier .

Abschließende Gedanken

Die Verwendung eleganter Symbole mit dem Divi Button-Modul ist eine bequeme Möglichkeit, einzigartige Schaltflächen für Ihre Website zu erstellen. Dies öffnet die Tür zur Kreativität mit Moduleinstellungen, um Ihre Schaltfläche mit einzigartigen Textstilen, Rollover-Effekten und vielem mehr anzupassen. Mir gefallen besonders die Abstandswerte von benutzerdefinierten Schaltflächen, die sicherstellen, dass die Schaltflächen die Form eines perfekten Quadrats oder Kreises haben.

Es gibt unzählige Verwendungsmöglichkeiten für Symbolschaltflächen. Wir hoffen, dass die in diesem Lernprogramm behandelte Beispielverwendung Ihre eigenen Projekte inspiriert.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
6 Aktien
Aktie4
tweet
Registrieren2