Möchten Sie ein originelles Divi-Menü in Form eines rotierenden Rads beim Schweben erstellen?
Das Erstellen eines sich drehenden Menürads beim Schweben ist eine unterhaltsame Möglichkeit, nützliche Links auf Ihrem zu präsentieren Website. Dies wäre eine großartige Möglichkeit, mehrere Handlungsaufforderungen in einem Header bereitzustellen, um Benutzer dorthin zu leiten, wo sie hin müssen. Und es wäre auch ein cooles Unterkategoriemenü für Ihr Blog.
In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi ein rotierendes Menürad beim Hover erstellen. Dies kann mit einer Kombination aus integrierten Divi-Optionen und einigen benutzerdefinierten CSS-Schnipseln erfolgen.
Übersicht
Bevor wir in dieses Tutorial gehen, werfen wir einen Blick auf das Ergebnis, das wir erreichen möchten.
Laden Sie DIVI jetzt herunter!!!
Erstellen Sie eine neue Seite mit Divi Builder
Um zu beginnen, benötigen Sie Folgendes:
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.
Design des rotierenden Menürads in Divi
Erstellen Sie Abschnitt und Linie 1
Fügen Sie im standardmäßig vorhandenen Abschnitt eine Zeile mit der folgenden Spaltenstruktur hinzu.
Dann fügen Sie der Zeile einen Textbaustein mit folgendem Inhalt hinzu.
Aktualisieren Sie als Nächstes das Textdesign wie folgt:
- Textschriftart: Share Tech
- Textbuchstabenabstand: 1px
- Überschrift 2 Textgröße: 8vw
Fügen Sie Zeile 2 hinzu, um das Rad zu bauen
Als nächstes müssen wir eine neue Zeile zu einer Spalte unterhalb von Zeile 1 hinzufügen.
Bevor wir unsere Textbausteine für unsere Links hinzufügen, müssen wir unsere Linie als Rad gestalten. An der Reihe sind viele Optimierungen erforderlich, um unser Raddesign zu erstellen.
Lesen Sie auch: So zeigen Sie Inhalte auf dem Hover-Abschnittsteiler in Divi an
Öffnen Sie zunächst die Row 2-Einstellungen und aktualisieren Sie Folgendes:
- Hintergrundfarbe: #02366b
- Farbverlauf linker Hintergrund: rgba(0,0,0,0.45)
- Verlaufsfarbe des rechten Hintergrunds: #02366b
- Verlaufstyp: Kreisförmig
- Radiale Richtung: Mitte
- Ausgangslage: 36 %
- Endposition: 0%
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 500px
- Maximale Breite: 500 Pixel (Desktop), automatisch (Tablet und Telefon)
- Höhe: 500 Pixel (Desktop), automatisch (Tablet und Telefon)
- Padding (Desktop): 0px (oben und unten)
- Polsterung (Tablet und Telefon): 20 Pixel (oben, unten und links)
- Marge (Telefon): -10 % (Rechts)
Wir müssen sowohl die Höhe als auch die Breite der Linie auf 500 Pixel einstellen, damit es ein perfektes Quadrat ist. Auf diese Weise können wir ihm mit der Option für abgerundete Ecken (Randradius) von Divi eine perfekte kreisförmige Form geben.
- Abgerundete Ecken: 50 %
Als nächstes können wir eine weitere Ebene des Kreisdesigns hinzufügen, indem wir einen Kastenschatten wie folgt verwenden:
- Feld-Schattenunschärfe-Stärke: 0px
- Box-Schattenverbreitungsstärke: 210px
- Schattenfarbe: rgba (2,54,107,0.66)
Als Nächstes fügen wir ein kleines CSS-Snippet hinzu, um den Inhalt unserer Zeile vertikal zu zentrieren. Unter der Registerkarte Fortgeschrittener, fügen Sie das folgende benutzerdefinierte CSS im Hauptelement hinzu.
display:flex;align-items:center;
Links hinzufügen
Jeder Link im Rad wird mit einem Modul erstellt Text. Wir werden insgesamt sechs Module erstellen Text. Fünf der Module Text enthält die Links für das Rad und die andere enthält den Titel des Menüs.
Erstellen Sie zunächst ein neues „Text“-Modul.
Aktualisieren Sie als Nächstes die Texteinstellungen wie folgt:
- Body: „Element 1“
- Textschriftart: Share Tech
- Textfarbe: #ffffff
- Größe: 16px (Standard), 20px (Hover)
- Buchstabenabstand: 1px
- Textzeilenhöhe: 60px
- Breite: 250 Pixel (Desktop), automatisch (Tablet und Telefon)
- Höhe: 60px
- Polsterung (links): 20px
Speichern Sie die Einstellungen vorerst. Dann den Textbaustein 4 Mal duplizieren, um insgesamt 5 Textbausteine zu erstellen.
Positionierung von Textlinks/Modulen
Wir sind jetzt bereit, unsere Glieder entlang des Umfangs des Rads zu positionieren. Dazu aktualisieren wir jedes Modul Text mit Transformationsoptionen, die das Modul an Ort und Stelle verschieben/übersetzen und drehen.
Entdecken Sie auch: So erstellen Sie ein Fluid-Spaltenraster beim Schweben in Divi
Um dies zu erleichtern, verwenden Sie den Wireframe-Anzeigemodus und beschriften Sie die Textmodule, beginnend mit Link 1 oben bis Link 5 unten.
1-Link
Wir beginnen mit der Bearbeitung von Link 1. Öffnen Sie die Textmoduleinstellungen für Link 1 und aktualisieren Sie Folgendes:
- Transform Translate (Y-Achse): 120 px (Desktop), 0 px (Tablet und Telefon)
- Transform Rotate (Z-Achse): 60 Grad (Desktop), 0 px (Tablet und Telefon)
- Herkunft: 50 % (Mitte rechts)
2-Link
Öffnen Sie die Textbausteineinstellungen für Link 2 und aktualisieren Sie Folgendes:
- Transformieren
- Übersetzen (Y-Achse): 60 Pixel (Desktop), 0 Pixel (Tablet und Telefon)
- Drehung der Z-Achse: 30 Grad (Desktop), 0 Pixel (Tablet und Telefon)
- Herkunft: 50 % (Mitte rechts)
3-Link
Da sich der Textbaustein für Link 3 in der Mitte befindet, können wir ihn stehen lassen.
4-Link
Öffnen Sie die Textbausteineinstellungen für Link 2 und aktualisieren Sie Folgendes:
- Transformieren:
- Y-Achse übersetzen: -60px (Desktop), 0px (Tablet und Telefon)
- Drehung der Z-Achse: -30 Grad (Desktop), 0 Pixel (Tablet und Telefon)
- Herkunft: 50 % (Mitte rechts)
5-Link
Öffnen Sie die Textbausteineinstellungen für Link 2 und aktualisieren Sie Folgendes:
- Transformieren:
- Y-Achse übersetzen: -120px (Desktop), 0px (Tablet und Telefon)
- Drehung der Z-Achse: -60 Grad (Desktop), 0 Pixel (Tablet und Telefon)
- Herkunft: 50 % (Mitte rechts)
Sehen wir uns nun das bisherige Ergebnis an. Beachten Sie, wie die Links/Texte in den Textbausteinen perfekt entlang des Kreisumfangs verlaufen.
Menübezeichnung hinzugefügt
Um die Menübeschriftung hinzuzufügen, müssen wir zusätzlich zu den fünf bereits vorhandenen Textmodulen ein weiteres Textmodul hinzufügen. Fahren Sie fort und fügen Sie über Link 1 ein neues Textmodul hinzu.
Aktualisieren Sie als Nächstes den Textinhalt wie folgt:
Menu
Um das Design zu beschleunigen, kopieren Sie dann die Textmodulstile für Link 3 und fügen Sie diese Modulstile in das neue Textmodul ein.
Aktualisieren Sie dann Folgendes:
- Textzeilenhöhe: 300 Pixel (Desktop), 20 Pixel (Tablet und Telefon)
- Höhe: Standardeinstellung wiederherstellen (auto)
- Transformationsrotation (Z-Achse): 180 Grad (Desktop), 0 Grad (Tablet und Telefon)
- Transformationsursprung: 50 % (Mitte rechts)
Sobald dies erledigt ist, müssen wir dem Modul Menu Label Text eine absolute Position zuweisen. Fügen Sie dazu dem Hauptelement das folgende benutzerdefinierte CSS hinzu:
position: absolute!important;
Finden Sie jetzt das Ergebnis heraus. Sie sollten sehen, dass der Menüpunkt rechts vom Rad auf dem Kopf steht.
Spinning-Hover-Effekt zu Linie/Rad hinzugefügt
Um der Zeile den Rotations-Hover-Effekt hinzuzufügen, aktualisieren Sie die Zeileneinstellungen wie folgt:
- Transformationsrotation (Z-Achse): 180 Grad (Desktop), 0 Grad (Hover), 0 Grad (Tablet und Telefon)
Aktualisieren Sie als Nächstes die Übergangseinstellungen wie folgt:
- Übergangsdauer: 450 ms
- Geschwindigkeitskurvenübergang: Ease-in-Out
Beobachten Sie nun, wie sich das Rad dreht, wenn Sie darüber schweben.
Erstellen eines zweispaltigen Layouts für den Abschnitt
Derzeit besteht das Layout aus zwei übereinander gestapelten einspaltigen Zeilen. Wir können jedoch die flex CSS-Eigenschaft verwenden, um die beiden Linien horizontal auszurichten.
Dazu können wir dem Abschnitt einen kleinen Ausschnitt aus benutzerdefiniertem CSS hinzufügen. Sobald dies erledigt ist, müssen wir den Abstand ein wenig anpassen, um die Dinge genau richtig zu machen.
Öffnen Sie die Abschnittseinstellungen und fügen Sie dem Hauptelement das folgende benutzerdefinierte CSS hinzu:
display:flex;
Abstand Zeile 1 aktualisieren
Aktualisieren Sie als Nächstes die Größe und den Abstand von Zeile 1 wie folgt:
- Breite: 40 % (Desktop)
- Spielraum (Desktop): 5 % übrig
Endergebnis
Nun sehen wir uns das Endergebnis an.
Laden Sie DIVI jetzt herunter!!!
Alternatives Halbraddesign
Ein schönes alternatives Design besteht darin, die rechte Hälfte des Rads an der Außenseite des Abschnitts auszublenden, sodass die Links ausgeblendet und dann beim Schweben angezeigt werden.
Gehen Sie dazu vor und duplizieren Sie den gesamten Abschnitt, der die gerade erstellte Zeichnung enthält.
Aktualisieren Sie im Duplikatabschnitt die Parameter in Zeile 1 wie folgt:
- Breite: 70 % (Desktop)
Aktualisieren Sie als Nächstes die Parameter in Zeile 2, um das Rad wie folgt aus dem Abschnitt zu schieben:
- Rand: -250px rechts
Wir müssen -250px verwenden, da die Gesamtbreite des Rades 500px beträgt und wir genau die Hälfte der Linie ausblenden möchten.
Setzen Sie dann die Sichtbarkeit des Abschnitts wie folgt auf ausgeblendet:
- Horizontaler Überlauf: Ausgeblendet
- Vertikaler Überlauf: Ausgeblendet
Hier ist das Endergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Ein Drehlenkerrad ist eines dieser stilvollen Designelemente, die in Eingriff gebracht werden können Besucher mit einem subtilen und einzigartigen Hover-Effekt. Und es ist ziemlich erstaunlich, wie einfach dieses Design mit den integrierten Designeinstellungen von Divi erstellt werden kann.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. 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.
...
