Es macht immer Spaß, mit Divis Transformationsoptionen kreativ zu sein. Mit ihnen können Sie erstaunliche Designs abseits der ausgetretenen Pfade erstellen. Und in diesem Tutorial verwandeln wir Divi-Texte in ein wunderschönes segmentiertes kreisförmiges Menü, das beim Klicken wächst und zusammenfällt. Der Trick beim Erstellen segmentierter Bereiche (wie eines Kreisdiagramms) besteht darin, die Neigung der Transformation auf eine ziemlich einzigartige Weise zu verwenden.
Übersicht
Hier ist eine Übersicht über das segmentierte kreisförmige Menü, das wir in diesem Tutorial erstellen werden.
Was Sie brauchen, um loszulegen
Um zu beginnen, müssen Sie Folgendes tun:
- Falls noch nicht geschehen, installieren und aktivieren Sie die Divi-Thema installiert (oder das Plugin Divi Builder, wenn Sie den nicht verwenden Divi-Thema).
- Erstellen Sie eine neue Seite in WordPress und verwenden Sie sie Divi Builder zum Ändern der Seite im Frontend (visueller Builder).
Danach haben Sie eine leere Leinwand, auf der Sie mit dem Entwerfen beginnen können Divi.
Erstellen der Zeile für Menüpunkte
Fügen Sie im regulären Standardabschnitt eine Zeile mit einer Spalte hinzu.
Styling der Reihe
Bevor wir ein Modul hinzufügen, rufen wir die Linie auf, um unsere Kreisform und Hintergrundfarbe zu erhalten. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
- Hintergrundfarbe: #8857f2
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: JA
- Dachrinnenbreite: 1
- Breite: 30em
- Höhe: 30em
- Polsterung: 0px oben, 0px unten
Fügen Sie dann die abgerundeten Ecken und den Schatten der Box hinzu.
Abgerundete Ecken: 50%
Box Shadow: siehe Screenshot
Wir werden zurückkommen, um der Linie einige zusätzliche Anpassungen hinzuzufügen, aber jetzt können wir beginnen, unsere einleitenden Anmerkungen hinzuzufügen.
Erstellen Sie Klappentexte für das Menü
Fügen Sie der Zeile einer Spalte innerhalb der kreisförmigen Zeile neuen Klappentext hinzu.
Klappentext # 1
Aktualisieren Sie die Inhalt des ersten Klappentexts einen Titel und ein Symbol enthalten.
- Titel: Link
- Verwenden Sie das Symbol: JA
- Symbol: siehe Screenshot
Aktualisieren Sie dann die Entwurfsparameter wie folgt:
- Hintergrundfarbe: #773ef2
- Hintergrundfarbe (Hover): #222222
- Symbolfarbe: #ffffff
- Symbol-Schriftgröße: 40px (Desktop), 30px (Tablet)
- Textausrichtung: Mitte
Aktualisieren Sie dann den Textstil des Titels wie folgt:
- Font-Titel: Archivo Narrow
- Titelschriftart: TT
- Titel des Farbtextes: #ffffff
- Text Title Size: 14px (Desktop), 12px (Tablet)
Als nächstes müssen wir den Referenztext mit benutzerdefiniertem CSS positionieren. Gehen Sie zur Registerkarte Erweitert und fügen Sie dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu:
Position: absolut! wichtig; links: 50%; oben: 50%;
Kehren Sie nun zur Registerkarte Design zurück und aktualisieren Sie die Klappentextgröße und den Abstand wie folgt:
- Breite: 15em
- Höhe: 15em
- Rand: -15em übrig
Dadurch wird die untere rechte Ecke des Präsentationstextes direkt in der Mitte des Kreises platziert.
Erstellen des Segments mithilfe der Transformationsoptionen
Um den Klappentext in ein Kreissegment zu verwandeln, werden wir den Klappentext kippen und drehen. Aktualisieren Sie dazu die folgenden Transformationsoptionen:
- Neigung der X-Achse transformieren: 60 Grad
- Ursprung der Transformation: 100% 100% (unten rechts)
Da sich die untere rechte Ecke unseres Klappentextes direkt in der Mitte des Kreises befindet, möchten wir, dass der Ursprung der Transformation auch unten rechts festgelegt wird. Dadurch wird sichergestellt, dass sich die Spitze des schrägen Klappentextes in der Mitte des Kreises befindet und somit zum Segment wird.
Inhalte entsperren
In Wirklichkeit wollen wir nur die Form des Klappentextes neigen, um die Form des Segments zu erzeugen, nicht die Inhalt intern (d. h. das Symbol und der Text). Da dies jedoch nicht möglich ist, müssen wir lediglich eine Transformationseigenschaft hinzufügen Inhalt Klappentext, der den Bias-Effekt umkehrt, sodass er normal erscheint. Gehen Sie dazu zur Registerkarte „Erweitert“ und fügen Sie das folgende benutzerdefinierte CSS hinzu:
transformieren: skew (-60deg) drehen (-75deg); Position: absolut; Höhe: 27em; width: 27em; unten: -13.5em; rechts: -13.5em;
Reduzieren Sie dann den Abstand zwischen dem Symbol und dem Titel, indem Sie den folgenden CSS-Code für das Klappentextbild hinzufügen:
Blurb Image CSS
Rand unten: 15px;
Und jetzt, da sich der Inhaltsbereich des Klappentextes über den Klappentext hinaus erstreckt (obwohl Sie ihn nicht sehen können), müssen wir den Überlauf wie folgt ausblenden:
- Horizontaler Überlauf: versteckt
- Vertikaler Überlauf: versteckt
Wenn wir dies nicht hinzufügen, entsteht ein unerwünschter Überflugbereich.
Erschaffe den Rest der Welt
Um den Rest des Klappentextes zu erstellen, stellen Sie die Drahtgitteransicht bereit und duplizieren Sie den vorhandenen Klappentext fünfmal, um insgesamt 5 identische Klappentextlayouts zu erhalten.
Klappentext # 2
Öffnen Sie dann die Blurb # 2-Einstellungen und drehen Sie das Modul wie folgt:
- Drehung der Z-Achse transformieren: 30deg
Dadurch wird Text Nr. 2 vom Mittelpunkt des Kreises im Uhrzeigersinn gedreht.
Dann können wir den Rest des Präsentationstextes in Schritten von 30 Grad weiter drehen, um einen Halbkreis von Segmenten zu erzeugen.
Drehen Sie den Klappentext # 3
Öffnen Sie die Blurb # 3-Einstellungen und aktualisieren Sie Folgendes:
- Drehung der Z-Achse transformieren: 60deg
Klappentext # 4
Öffnen Sie die Blurb # 4-Einstellungen und aktualisieren Sie Folgendes:
- Drehung der Z-Achse transformieren: 90deg
Drehen Sie den Klappentext # 5
Öffnen Sie die Blurb # 5-Einstellungen und aktualisieren Sie Folgendes:
- Drehung der Z-Achse transformieren: 120deg
Drehen Sie den Klappentext # 6
Öffnen Sie die Blurb # 6-Einstellungen und aktualisieren Sie Folgendes:
- Drehung der Z-Achse transformieren: 150deg
Hier ist das bisherige Ergebnis.
Erstellen der Menüschaltfläche
Um die Menüschaltfläche zu erstellen, reduzieren wir die Größe eines gesamten Abschnitts und verwenden dann ein Präsentationssymbol für das Schaltflächendesign.
Fügen Sie dazu zunächst einen neuen regulären Abschnitt unter dem aktuellen Abschnitt hinzu.
Fügen Sie dann dem Abschnitt eine Zeile mit einer Spalte hinzu.
Erstellen des Klappentext-Symbols für die Schaltfläche
Fügen Sie dann der Zeile ein Klappentextmodul hinzu.
Löschen Sie den Standardinhalt von Titel und Text und verwenden Sie ein Symbol wie folgt:
- Verwenden Sie das Symbol: JA
- Symbol: Plus-Symbol (siehe Screenshot)
Aktualisieren Sie die Einstellungen wie folgt:
- Symbolfarbe: # 222222
- Verwenden Sie die Schriftgröße des Symbols: JA
- Symbol Schriftgröße: 50px
- Bild- / Symbolanimation: keine Animation
Fügen Sie dann dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu, um den Standardrand unter dem Symbol zu entfernen.
CSS Hauptelement
Rand unten: 0px;
Zeilenauffüllung
Entfernen Sie dann die Standardfüllung aus der Zeile.
- Polsterung: 0px oben, 0px unten
Abschnittseinstellungen
Um die Schaltfläche zu vervollständigen, formen wir unseren Abschnitt zu einem Kreis.
Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie die folgenden Elemente:
- Breite: 100px
- Höhe: 100px
- Polsterung: 0px oben, 0px unten
- Abgerundete Ecken: 50%
- Box Shadow: siehe Screenshot
Dann gib ihm einen weißen Hintergrund.
- Hintergrundfarbe: #ffffff
Fügen Sie auf der Registerkarte Erweitert dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu, um die Schaltfläche so zu positionieren, wie sie am unteren Rand des Fensters festgelegt ist.
Position: fest! wichtig; unten: -50px; links: 50%; Rand-links: -50px;
Wir müssen auch eine CSS-Klasse hinzufügen, auf die mit unserer jQuery abgezielt werden kann. Fügen Sie Folgendes hinzu:
- CSS-Klasse: transform_target
Aktualisieren Sie dann den Z-Index (immer noch im selben Fenster), sodass die Schaltfläche über dem Rest des Seiteninhalts bleibt.
- Z-Index: 12
Positionieren der kreisförmigen Menüzeile
Nachdem die Menüschaltfläche vorhanden ist, müssen wir die Zeile mit unserem segmentierten kreisförmigen Menü so positionieren, dass sie auch am unteren Rand der Seite fixiert und zentriert ist und nur die obere Hälfte des Kreises sichtbar ist.
Öffnen Sie dazu die Parameter der Zeile, die das Menülayout enthält, und fügen Sie das folgende benutzerdefinierte CSS hinzu:
CSS Hauptelement
Position: fest! wichtig; unten: -10em; links: 25%; Rand-links: -15em; Rand-unten: -5em;
Aktualisieren Sie den z-Index wie folgt:
- Z-Index: 11
Fügen Sie dann die folgende CSS-Klasse hinzu.
- CSS-Klasse: has-transform
Schließlich müssen wir das kreisförmige Menü mithilfe der Transformationsskala vollständig reduzieren (oder reduzieren). Auf diese Weise können wir den Effekt mit jQuery aktivieren und deaktivieren, wodurch das Menü beim Klicken erweitert und reduziert wird.
Aktualisieren Sie die folgenden Elemente:
- Transformationsmaßstab: 1%
Mit unserem segmentierten kreisförmigen Menü und der Menüschaltfläche müssen Sie lediglich das benutzerdefinierte CSS und jQuery hinzufügen, um die Schaltflächenfunktionalität zu vervollständigen.
Hinzufügen von externem benutzerdefiniertem CSS zu Seiteneinstellungen
Öffnen Sie die Seiteneinstellungen über das Menü unten im Visual Builder und fügen Sie auf der Registerkarte Erweitert das folgende benutzerdefinierte CSS hinzu:
.for-transform, .transform_menu .and-pb-icon, .toggle-transform-animation } .for-transform, .toggle-transform-animation {Schriftgröße: 400px; } .toggle-transform-animation {transform: keine! wichtig; } .transform_target {cursor: pointer; } .toggle-active-target .and_pb_blurb .et-pb-icon {transform: rotateZ (14deg); } @media all und (max-width: 45px) {.to-transform {-webkit-mask-image: -webkit-radial-gradient (weiß, schwarz); } .for-transform, .toggle-transform-animation {Schriftgröße: 980px; }}
Hinzufügen von jQuery mit einem Codemodul
Stellen Sie als Nächstes den Drahtgitter-Anzeigemodus bereit und fügen Sie ein Codemodul unter der Menümenüschaltfläche hinzu.
Fügen Sie dem Modul dann den folgenden Code hinzu.
(function($) { $(document).ready(function(){ $('.transform_menu').click(function(){ $(this).toggleClass('toggle-active-target'); $('.pour-transformer').toggleClass('toggle-transform-animation'); }); }); })( jQuery );
Endergebnis
Lassen Sie uns das Endergebnis auf einer Live-Seite sehen.
Das Menü funktioniert gut mit Ihrer aktuellen Seite oder einem unserer vordefinierten Layouts, die Sie hinzufügen können, indem Sie im Einstellungsmenü auf das Symbol Weitere klicken.
Einstellen der Größe des kreisförmigen Menüs
Das segmentierte kreisförmige Menü besteht aus em Längeneinheiten, die relativ zur Schriftgröße des übergeordneten Körpers sind. Dies erleichtert das Vergrößern und Verkleinern des Menüs. Um die Schriftgröße zu ändern, müssen Sie lediglich die Schriftgrößeneigenschaft der pour-transform-Klasse ändern, die auf die Zeile in dem benutzerdefinierten CSS abzielt, das wir den Seiteneinstellungen hinzugefügt haben.
Abschließende Gedanken
In diesem Tutorial haben wir erklärt, wie Sie in Divi ein segmentiertes kreisförmiges Menü erstellen, indem Sie mit den Transformationsoptionen von Divi kreativ sind. Wir haben auch benutzerdefiniertes CSS für Aufgaben wie feste Positionierung und schrägen Klappentext für Menüelemente verwendet.
Mit JQuery können wir die Skalierungseigenschaft für die Transformation aktivieren und deaktivieren, um den Effekt zum Erweitern und Reduzieren des Menüs zu erstellen, wenn Sie auf die Menüschaltfläche klicken.
Insgesamt denke ich, dass Sie in diesem Tutorial viel Inspiration finden werden.