Springe zum Hauptinhalt

So erstellen Sie ein segmentiertes kreisförmiges Menü mit Divi Blurbs

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.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]

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.

segment divi divi menü

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

  1. Wenn Sie dies noch nicht getan haben, installieren und aktivieren Sie das installierte Divi-Design (oder das Divi Builder-Plug-In, wenn Sie das Divi-Design nicht verwenden).
  2. Erstellen Sie eine neue Seite in WordPress und bearbeiten Sie die Seite im Frontend mit Divi Builder (visueller Konstruktor).

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

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

Abgerundete Ecke Divi Linie

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 den Inhalt des ersten Klappentextes mit einem Titel und einem Symbol.

  • 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 Summary Moduls

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.

Änderung des Rand- und Dimensionszusammenfassungsmoduls

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

Neigungsumwandlung

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

segment divi divi menü

Inhalte entsperren

In Wirklichkeit möchten wir nur die Form des Klappentextes neigen, um die Form des Segments zu erstellen, nicht den internen Inhalt (dh das Symbol und den Text). Da dies jedoch nicht möglich ist, reicht es aus, dem Klappentextinhalt eine Transformationseigenschaft hinzuzufügen, die den Bias-Effekt umkehrt, sodass er normal erscheint. Wechseln Sie dazu zur Registerkarte Erweitert und fügen Sie das folgende benutzerdefinierte CSS hinzu:

Inhalt Änderung CSS-Modul wieder aufnehmenCSS-Klappentext:

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]

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 den Fehler eines Moduls

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

Ändern Sie den Lebenslauf des CSS-Divi-Rotationsmoduls des Moduls

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:

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]

  • Verwenden Sie das Symbol: JA
  • Symbol: Plus-Symbol (siehe Screenshot)

Änderung des Symbols für die Modulzusammenfassung

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

Ändern Sie das Divi-Modul für den Lebenslauf

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

Menü Divi transformieren

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

Änderung 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 Line 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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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

CSS personalisiert 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.

Divi Modul AnimationDas 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.

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
1 Aktien
Aktie1
tweet
Registrieren