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.

Divi segmentiertes kreisförmiges Menü

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

  1. Falls noch nicht geschehen, installieren und aktivieren Sie die Divi-Thema installiert (oder das Plugin Divi Builder, wenn Sie den nicht verwenden Divi-Thema).
  2. 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.

Fügen Sie eine neue Divilinie 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

Teilungslinie mit abgerundeten Ecken

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.

Divi-Kommentarmodul

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

Änderung des Divi-Zusammenfassungsmoduls

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.

Rand und Abmessungen des Änderungszusammenfassungsmoduls

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

Neigungstransformation

  • 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.

Divi segmentiertes kreisförmiges Menü

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:

Änderung des Lebenslaufs des CSS-InhaltsmodulsCSS-Klappentext:

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.

Kopie des Lebenslaufmoduls

Klappentext # 2

Öffnen Sie dann die Blurb # 2-Einstellungen und drehen Sie das Modul wie folgt:

  • Drehung der Z-Achse transformieren: 30deg

Ändern Sie die Bewertung eines Moduls

Dadurch wird Text Nr. 2 vom Mittelpunkt des Kreises im Uhrzeigersinn gedreht.

Änderung des CSS-Moduls Divi Rotationsmodul Lebenslauf

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.

Endergebnis

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 einen neuen Divi-Abschnitt hinzu

Fügen Sie dann dem Abschnitt eine Zeile mit einer Spalte hinzu.

Fügen Sie einer Divi-Spalte einen Abschnitt hinzuErstellen des Klappentext-Symbols für die Schaltfläche

Fügen Sie dann der Zeile ein Klappentextmodul hinzu.

Fügen Sie einen zweiten Abschnitt des Zusammenfassungsmoduls 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)

Symbol für die Zusammenfassung des Änderungsmoduls

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

Änderung des Lebenslauf-Divi-Moduls

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;

Konfiguration im Divi-Abschnittsstil

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

Divi-Menü umwandeln

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

Bearbeiten des Divi-Linienstils

Fügen Sie dann die folgende CSS-Klasse hinzu.

  • CSS-Klasse: has-transform

Um die CSS-Zeile zu transformieren

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%

Divi-Linien-Transformation

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; }}

Benutzerdefinierte CSS-Divi-SeiteHinzufü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.

Divi-Code-Modul einfügenFü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 );

Divi-Modulcode

Endergebnis

Lassen Sie uns das Endergebnis auf einer Live-Seite sehen.

Animations-Divi-ModulDas 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.