Möchten Sie wissen, wie Sie das Icon-Modul von verwenden Divi benutzerdefinierte Symbole erstellen?
Icon-Buttons sind zu einem festen Bestandteil in der Welt des Webdesigns geworden. Symbole bieten prägnante visuelle Handlungsaufforderungen, die sich hervorragend für mobile Geräte eignen, da sie nicht viel Platz beanspruchen. Sie funktionieren auch gut als Umschalt- oder Popup-Schaltflächen, die Benutzer intuitiv erkennen, ohne dass Text erforderlich ist.
Im heutigen Tutorial zeigen wir Ihnen, wie Sie Symbolschaltflächen mit entwerfen Divi. Erstellen Sie eine Symbolschaltfläche in Divi ist ganz einfach und macht Spaß.
Mit dem Icons-Modul können wir aus Hunderten von Icons auswählen und unzählige integrierte Designoptionen nutzen Divi Builder zum Erstellen nahezu jeder Art von Symbolschaltfläche, die Sie sich vorstellen können.
Wir hoffen, dieser Artikel hilft Ihnen beim Erstellen fantastischer Symbolschaltflächen für Ihr nächstes Projekt.
Lassen Sie uns beginnen!
Übersicht
Hier ist ein kurzer Überblick über die Symbolschaltflächen, die wir in diesem Tutorial erstellen werden.
Erstellen Sie eine neue Seite mit Divi Builder
Siehe auch: Divi: So passen Sie den Korb und die Suchsymbole des Moduls „Menü mit voller Breite“ an
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder
klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Erstellen Sie Icon-Buttons mit dem Divi Icons-Modul
Teil 1: Erstellen einer Symbolschaltfläche
Lassen Sie uns zunächst eine einspaltige Zeile zum standardmäßigen regulären Abschnitt hinzufügen.
Fügen Sie dann ein neues Modul hinzu Symbol zur Säule.
Symbol, Link-URL und Hintergrundfarbe
Unter der Registerkarte Inhalt Symbolmoduleinstellungen, aktualisieren Sie Folgendes:
- Symbol: Rechtspfeil (siehe Screenshot)
- Symbol-Link-URL: # (vorerst nur ein Füllwort)
- Hintergrund: #3e22ff
Grenze und Grenzradius
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Abgerundete Ecken: 10px
- Randbreite: 2px
- Randfarbe: #7272ff
Schattenkiste
- Box Shadow: Siehe Screenshot
- Schattenfarbe: rgba(62,34,255,0.48)
Anpassung des anklickbaren Bereichs an die Größe der Symbolschaltfläche
Derzeit erstreckt sich das Symbolmodul über die gesamte Breite des übergeordneten Containers (oder der übergeordneten Spalte). Das bedeutet, dass der anklickbare Bereich größer ist als die eigentliche Symbolschaltfläche.
Um den anklickbaren Bereich an die Größe der Symbolschaltfläche anzupassen, können wir dem Modul eine maximale Breite geben, die der Breite der Symbolschaltfläche entspricht.
In diesem Beispiel beträgt die Gesamtbreite der Schaltfläche 94 Pixel.
Fügen Sie auf der Registerkarte Erweitert dem Hauptelement das folgende benutzerdefinierte CSS hinzu:
max-width: 94px
Hier ist das Ergebnis.
Teil 2: Erstellen Sie eine quadratische Symbolschaltfläche
Um unsere quadratische Symbolschaltfläche zu erstellen, duplizieren Sie die Zeile mit der ersten Symbolschaltfläche, die wir gerade erstellt haben. Dadurch erhalten wir eine doppelte Schaltfläche in der Zeile, mit der wir arbeiten können.
Weisen Sie dem Symbol die gleiche Höhe und Breite zu, während Sie es zentriert halten
Die große Sammlung von Symbolen, die im Symbolmodul verwendet werden können, umfasst sowohl Divi-Symbole als auch Fontawesome-Symbole. Allerdings haben nicht alle Symbole die gleiche Höhe und Breite. Das macht es etwas schwieriger, die genaue Breite und Höhe des Icon-Buttons zu bestimmen.
Um eine perfekt quadratische Schaltfläche zu erstellen, die das Symbol beim Hover aktiviert, können wir benutzerdefiniertes CSS hinzufügen, um eine Höhe und Breite für das Symbol festzulegen und das Symbol mithilfe der CSS Flex-Eigenschaft zu zentrieren.
So geht's
Öffnen Sie zunächst die Einstellungen für doppelte Symbole. Aktualisieren Sie dann das Symbol mit einem neuen Symbol aus der Symbolauswahl.
Entfernen Sie die Polsterung vom Symbolmodul. Dies ist nicht erforderlich, da wir eine Höhe und eine Breite für das Symbol festlegen werden.
Fügen Sie auf der Registerkarte „Erweitert“ das folgende benutzerdefinierte CSS hinzu Icon-Element :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Jetzt hat die Symbolschaltfläche eine Höhe und Breite von 90 Pixeln, was sie zu einem perfekten Quadrat macht. Außerdem richtet die Flex-Eigenschaft das Symbol in der Mitte des Moduls aus. Auf diese Weise können Sie die Symbolgröße im Symbolmodul einfach aktualisieren.
Um diese Schaltfläche zu vervollständigen, geben wir ihr wie folgt einen Hintergrundverlauf und eine weiße Randfarbe:
- Gradientenstopps:
- 0%: #3e22ff
- 100 %: #ff2000
- Rahmenfarbe: #fff
Hier ist das Endergebnis.
Kreisförmige Symbolschaltfläche erstellen
Sobald die Symbolschaltfläche ein perfektes Quadrat ist, ist es einfach, sie kreisförmig zu machen. Aber bevor wir Ihnen diesen einfachen Trick zeigen, wollen wir die vorherige Zeile duplizieren, um mit dem Erstellen unserer kreisförmigen Symbolschaltfläche zu beginnen.
Öffnen Sie nun die Einstellungen für unser neues Duplikat-Symbol und unter dem Reiter Design, aktualisieren Sie den Rahmenradius (oder die abgerundeten Ecken) wie folgt:
- Abgerundete Ecken: 50 %
Und einfach so haben wir eine kreisförmige Symbolschaltfläche!
Um das Design ein wenig zu ändern, geben wir dem Symbolmodul wie folgt eine andere Symbol- und Hintergrundfarbe:
- Symbol: siehe Screenshot
- Hintergrund: #121212
Hier ist das Ergebnis.
Erstellen Sie ein horizontales Symbolschaltflächenmenü
Ein beliebter Trend ist die Verwendung von Symbolen, um ein Symbolmenü zu erstellen, das normalerweise aus mehreren nebeneinander angeordneten Schaltflächen besteht. Dazu können wir die Flex-Eigenschaft verwenden.
Hier ist, wie es geht.
Fügen Sie zuerst eine neue Zeile zu einer Spalte auf der Seite hinzu.
Öffnen Sie die Linieneinstellungen und aktualisieren Sie die Bundstegbreite auf 1.
- Rinnenbreite: 1
Öffnen Sie als Nächstes die Spalteneinstellungen in der Zeile und fügen Sie das folgende benutzerdefinierte CSS zum Hauptspaltenelement hinzu:
display:flex;
align-items:center;
Fügen Sie ein neues Modul hinzu Symbol zur Säule.
Unter der Registerkarte Inhalt Symboleinstellungen, wählen Sie ein Symbol aus und fügen Sie die Link-URL des Symbols hinzu.
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Symbolfarbe: #3e22ff
- Symbolgröße: 40px
- Rand (links und rechts): 10px
- Randbreite: 2px
- Rahmenfarbe: #3e22ff
ANMERKUNG : Der Rand schafft Platz zwischen benachbarten Schaltflächen, sobald wir später weitere hinzufügen.
Unter der Registerkarte Fortgeschrittener, fügen Sie das folgende benutzerdefinierte CSS in das Feld ein Icon-Element (wie wir es zuvor für die quadratische Symbolschaltfläche getan haben):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Wenn wir jetzt neue Symbolschaltflächen hinzufügen, werden sie nebeneinander angezeigt. Um dies zu veranschaulichen, duplizieren wir die vorhandene Symbolschaltfläche dreimal, um insgesamt vier Symbolschaltflächen im horizontalen Menü zu erstellen.
Danach können wir zurückgehen und die Symbole nach Bedarf aktualisieren.
Hier ist das Ergebnis.
Hover-Effekte zur Symbolschaltfläche hinzugefügt
Es ist schwer, über das Design von Symbolschaltflächen zu sprechen, ohne Hover-Effekte zu erwähnen. Sie sind einfach zu lustig, um sie zu ignorieren.
Hintergrundfarbe und Symbolfarbe beim Hover ändern
Das Ändern der Tastenfarben ist ein beliebter und effektiver Hover-Effekt. Beispielsweise können wir die Hintergrundfarbe und die Symbolfarbe gleichzeitig ändern, wenn der Benutzer mit der Maus über die Schaltfläche fährt.
Öffnen Sie dazu die Symbolmoduleinstellungen und aktivieren Sie die Hover-Optionen für die Hintergrundfarbe und wählen Sie eine andere Farbe für den Hover-Status. Dann können Sie dasselbe für das Symbol tun.
In diesem Beispiel ändern wir die Hintergrundfarbe von Weiß auf Blau und das Symbol von Blau auf Weiß.
Ändern Sie das Symbol beim Hover
Ein weiterer Hover-Effekt, der Ihnen gefallen könnte, besteht darin, das Symbol vollständig zu ändern. Dazu können Sie ein anderes Symbol für den Schwebezustand auswählen, wenn Sie ein Symbol in den Symboleinstellungen auswählen.
Symbolschaltflächenskala beim Schweben
Ein schwer zu ignorierender Hover-Effekt ist der Skalierungs-Hover-Effekt. Dadurch wird die Symbolschaltfläche vergrößert oder vergrößert. Der beste Weg, diese Art von Hover-Effekt hinzuzufügen, ist die Verwendung der Transformationsoptionen von Divi. Dadurch kann die Schaltfläche wachsen, ohne die Elemente um sie herum zu beeinflussen.
Um der Symbolschaltfläche einen skalierten Hover-Effekt hinzuzufügen, öffnen Sie die Symboleinstellungen und unter der Registerkarte von Design, suchen Sie nach Transformationsoptionen. Aktivieren Sie Hover-Optionen und weisen Sie dem Hover-Status dann die folgende Transformationsskala zu:
- Transformation Y: 118 %
- Verwandle X: 118 %
Dadurch wird die Symbolschaltfläche um 18 % größer, wenn der Benutzer mit der Maus darüber fährt.
Symbolschaltfläche beim Hover drehen
Das Drehen schwebender Objekte ist immer eine unterhaltsame Mikrointeraktion. Um eine Symbolschaltfläche beim Hover zu drehen, können wir die Option zum Umwandeln und Drehen verwenden. Aber vorher machen wir die Schaltfläche kreisförmig, sodass sich nur das Symbol zu drehen scheint.
Um das Symbol kreisförmig zu machen, vorausgesetzt, die Schaltfläche ist ein Quadrat, aktualisieren Sie einfach die Einstellung für abgerundete Ecken an allen vier Ecken auf 50 %.
Aktualisieren Sie dann die Transformationsoptionen, um den folgenden Transformationsrotationswert in den Hover-Status aufzunehmen:
- Transformieren Rotieren Z: 180 Grad
Werfen wir einen Blick auf unsere 4 Hover-Effekte in Aktion.
Endergebnis
Werfen wir einen Blick auf die Endergebnisse unseres Tutorials.
Lesen Sie auch: Divi: So markieren Sie ein „Blurb“-Modul beim Hovern und verwischen die anderen
Hier sind unsere drei Symbolschaltflächen (Standard, Quadrat und Kreis).
Und hier ist das horizontale Icon-Button-Menü mit Hover-Effekten.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Wissen, wie man Icon-Buttons für a Website ist von wesentlicher Bedeutung. Und wie wir in diesem Tutorial gesehen haben, ist es mit Divi nicht so schwer. Das Icon-Modul von Divi verfügt über eine Reihe integrierter Optionen, die die Tür zu kreativen Icon-Button-Designs öffnen.
Hoffentlich werden Ihnen die Techniken in diesem Artikel dabei helfen, etwas von der Magie Ihrer eigenen Icon-Button-Designs zu entfesseln.
Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
