So erstellen Sie mit Divi . ein Blurb-Menü bei Hover/Click für Ihre Seite

Veröffentlicht: 2019-07-03

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie ein atemberaubendes Klappmenü erstellen, das sich erweitert, sobald Sie mit der Maus darauf fahren oder darauf klicken. Wir beginnen zunächst mit einigen allgemeinen Schritten. Wir fahren fort, indem wir Menüelemente mit Blurb-Modulen hinzufügen, und wir schließen damit ab, dass Sie zwischen einem Hover- oder Klick-Effekt wählen können.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Schwebemodus

Desktop

Klappenmenü

Handy, Mobiltelefon

Klappenmenü

Klicken Sie auf Modus

Desktop

Klappenmenü

Handy, Mobiltelefon

Klappenmenü

1. Leere Seite erstellen & Sightseeing-Landing Page hochladen

Neue leere Seite hinzufügen und Divi Builder aktivieren

Als erstes müssen Sie eine neue leere Seite erstellen. Geben Sie Ihrer Seite einen Titel und wechseln Sie zu Divi Builder.

Klappenmenü

Sightseeing-Landingpage hochladen

Nachdem Sie den Divi Builder aktiviert haben, laden Sie das Landingpage-Layout des Sightseeing-Layout-Pakets hoch.

Klappenmenü

2. Neuen regulären Abschnitt am Ende der Seite hinzufügen

Sobald die primäre Menüleiste ausgeblendet ist, können wir mit dem Hinzufügen des Klappmenüs beginnen. Dazu fügen wir am Ende unserer Seite einen neuen regulären Abschnitt hinzu.

Klappenmenü

Hintergrundfarbe

Öffnen Sie die Abschnittseinstellungen und fügen Sie eine leicht transparente weiße Hintergrundfarbe hinzu.

  • Hintergrundfarbe: rgba(255,255,255,0.98)

Klappenmenü

Abstand

Wechseln Sie zur Registerkarte Design und entfernen Sie alle standardmäßigen oberen und unteren Polster des Abschnitts.

  • Obere Polsterung: 0px
  • Untere Polsterung: 0px

Klappenmenü

Standard-Box-Schatten

Fügen Sie dem nächsten Abschnitt einen Kastenschatten hinzu.

  • Stärke der Box-Schattenunschärfe: 18px
  • Schattenfarbe: #383838

Klappenmenü

Hoverbox-Schatten

Und ändern Sie die Stärke der Box-Schattenunschärfe beim Schweben.

  • Stärke der Box-Schattenunschärfe: 1000px

Klappenmenü

Abschnittsüberläufe ausblenden & Z-Index erhöhen

Wir werden die Abschnittsgrößeneinstellungen verwenden, damit diese Technik funktioniert, aber um sicherzustellen, dass nichts den Abschnittscontainer überschreitet, müssen wir die Überläufe ausblenden. Wir erhöhen auch den Z-Index, um sicherzustellen, dass der Abschnitt auf dem Rest der Seite oben bleibt.

  • Horizontaler Überlauf: Versteckt
  • Vertikaler Überlauf: Versteckt
  • Z-Index: 9999

Klappenmenü

3. Stellen Sie sicher, dass der gesamte Inhalt des Abschnittsmenüs mit Vw erstellt wurde und über alle Bildschirmgrößen in eine Höhe von 100 Viewports passt

Zeile 1 hinzufügen

Spaltenstruktur

Nachdem Sie die grundlegenden Abschnittseinstellungen vorgenommen haben, ist es an der Zeit, alle Inhalte hinzuzufügen, die im Menü angezeigt werden sollen. Sie können jedes gewünschte Design mit den Designelementen und integrierten Optionen von Divi erstellen, aber Sie müssen sicherstellen, dass alles über alle Bildschirmgrößen auf eine Höhe von 100 VH passt. Um dies zu erreichen, verwenden wir während des gesamten Erstellungsprozesses die Breiteneinheit des Ansichtsfensters und optimieren die Werte für verschiedene Bildschirmgrößen. Beginnen Sie damit, Ihrem Abschnitt eine neue Zeile hinzuzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Klappenmenü

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und stellen Sie sicher, dass sie die gesamte Breite des Abschnitts einnehmen.

  • Benutzerdefinierte Dachrinnenbreite verwenden: Ja
  • Dachrinnenbreite: 1
  • Breite: 100%
  • Maximale Breite: 100%

Klappenmenü

Abstand

Gehen Sie zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

  • Obere Polsterung: 0px
  • Untere Polsterung: 0px

Klappenmenü

Textmodul zur Spalte hinzufügen

Symbol hinzufügen

Fahren Sie fort, indem Sie der Spalte der Zeile ein Textmodul hinzufügen. Fügen Sie das '='-Symbol zum Inhaltsfeld hinzu oder verwenden Sie ein beliebiges anderes Symbol Ihrer Wahl.

Klappenmenü

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe des Moduls.

  • Hintergrundfarbe: #000000

Klappenmenü

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie auch die Texteinstellungen.

  • Textschriftart: Open Sans
  • Textausrichtung: Mitte
  • Textfarbe: #ffffff
  • Textgröße: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
  • Textzeilenhöhe: 1em

Klappenmenü

Abstand

Wir fügen auch oben und unten im Modul etwas Platz hinzu, indem wir die folgenden benutzerdefinierten Padding-Werte verwenden:

  • Obere Polsterung: 2.5vw (Desktop), 3.5vw (Tablet), 5vw (Telefon)
  • Untere Polsterung: 2.5vw (Desktop), 3.5vw (Tablet), 5vw (Telefon)

Klappenmenü

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine zweite Zeile mit der folgenden Spaltenstruktur hinzufügen:

Klappenmenü

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.

  • Benutzerdefinierte Dachrinnenbreite verwenden: Ja
  • Dachrinnenbreite: 1
  • Breite: 100%
  • Maximale Breite: 100%

Klappenmenü

Abstand

Gehen Sie zu den Abstandseinstellungen und fügen Sie als nächstes einige benutzerdefinierte obere und untere Polster hinzu.

  • Obere Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
  • Untere Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)

Klappenmenü

Anzeige

Um sicherzustellen, dass beide Spalten auf kleineren Bildschirmgrößen nebeneinander bleiben, fügen wir dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzu. 

display: flex;

Klappenmenü

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Es ist Zeit, mit dem Hinzufügen der Menüpunkte zu beginnen! Fügen Sie der ersten Spalte der Zeile ein neues Blurb-Modul hinzu und geben Sie Inhalte Ihrer Wahl ein.

Klappenmenü

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Klappenmenü

Link hinzufügen

Und geben Sie einen Seitenlink ein, der zum Menüpunkt passt.

  • Titellink-URL: #

Klappenmenü

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen entsprechend:

  • Symbolfarbe: #ff3314
  • Symbolplatzierung: Oben
  • Symbolschriftgröße verwenden: Ja
  • Symbolschriftgröße: 2vw (Desktop), 3vw (Tablet), 4vw (Telefon)

Klappenmenü

Einstellungen für Titeltext

Ändern Sie auch die Einstellungen für den Titeltext.

  • Titelschriftart: PT Serif
  • Titelschriftart: Unterstreichen
  • Farbe der Titelunterstreichung: #ff3314
  • Ausrichtung des Titeltextes: Mitte
  • Titeltextgröße: 1,8 vw (Desktop), 2,3 vw (Tablet), 3,3 vw (Telefon)

Klappenmenü

Textkörpereinstellungen

Ändern Sie dann die Textkörpereinstellungen.

  • Körperschriftart: Lato
  • Ausrichtung des Textkörpers: Mitte
  • Textkörperfarbe: #c6c6c6
  • Textgröße: 0,9 vw (Desktop), 1,7 vw (Tablet), 2,1 vw (Telefon)
  • Körperlinienhöhe: 1.8em

Klappenmenü

Größe

Und ändern Sie die Breite des Moduls über verschiedene Bildschirmgrößen hinweg mit den folgenden Werten:

  • Breite: 60 % (Desktop), 65 % (Tablet), 80 % (Telefon)

Klappenmenü

Animation

Wir entfernen auch die Symbolanimation in den Animationseinstellungen.

  • Symbolanimation: Keine Animation

Klappenmenü

Blurb-Modul klonen und Duplikat in Spalte 2 platzieren

Sobald Sie das Blurb-Modul fertiggestellt haben, können Sie es klonen und das Duplikat in die zweite Spalte der Zeile einfügen.

Klappenmenü

Kopie ändern

Stellen Sie sicher, dass Sie die Kopie ändern.

Klappenmenü

Icon ändern

Zusammen mit dem Symbol.

Klappenmenü

Link ändern

Und der Seitenlink, der zum neuen Menüpunkt passt.

Klappenmenü

Zeile zweimal klonen

Nachdem Sie beide Blurb-Module in der Reihe abgeschlossen haben, können Sie die gesamte Reihe zweimal klonen.

Klappenmenü

Ändern Sie Kopie, Symbol und Link für jedes Blurb-Duplikat einzeln

Stellen Sie sicher, dass Sie die Kopie, das Symbol und den Link für jeden der Klappenmenüelemente einzeln ändern.

Klappenmenü

4. Abschnitt klebrig machen

Standard

Nachdem Sie alle Elemente, die Sie Ihrem Abschnitt anzeigen möchten, hinzugefügt haben, können Sie den Abschnitt oben links auf Ihrer Seite festhalten, indem Sie die folgenden zwei Zeilen CSS-Code zum Hauptelement des Abschnitts hinzufügen: 

position: fixed;
top: 0;

Klappenmenü

Schweben (Wichtig!)

Aktivieren Sie die Hover-Option auf dem Hauptelement des Abschnitts und stellen Sie sicher, dass der Abschnitt auch in diesem Zustand klebrig bleibt. 

position: fixed;

Klappenmenü

5. Wählen Sie eine Methode: A) Menü beim Hover oder B) Menü beim Klicken

A) Menü auf Hover

Standard-Abschnittsgröße

Im nächsten Teil des Tutorials müssen Sie eine bevorzugte Methode auswählen. ein Menü bei Mauszeiger oder Klick. Das Hover-Menü verhält sich auf kleineren Geräten wie ein Klickmenü. Wenn Sie sich für die Hover-Option entscheiden, öffnen Sie die Abschnittseinstellungen erneut, gehen Sie zu den Größeneinstellungen und ändern Sie die Breite und Höhe Ihres Menüs entsprechend:

  • Breite: 8vw (Desktop), 12vw (Tablet), 20vw (Telefon)
  • Höhe: 7,4 vw (Desktop), 12 vw (Tablet), 16 vw (Telefon)

Klappenmenü

Größe des Hover-Abschnitts

Ändern Sie die Werte beim Bewegen des Mauszeigers, um ein erweiterbares Menü zu erstellen.

  • Breite: 80%
  • Höhe: 100vh

Klappenmenü

B) Menü auf Klick

CSS-Klasse zum Textmodul hinzufügen

Wenn Sie ein Menü wünschen, das sich nur beim Klicken öffnet, müssen Sie das Textmodul öffnen, das das Menüsymbol enthält. Gehen Sie zur Registerkarte "Erweitert" und fügen Sie eine benutzerdefinierte CSS-Klasse hinzu.

  • CSS-Klasse: fullwidth-open

Klappenmenü

CSS-Klasse zum Abschnitt hinzufügen

Öffnen Sie als nächstes die Abschnittseinstellungen und fügen Sie eine andere CSS-Klasse hinzu.

  • CSS-Klasse: smooth-trans

Klappenmenü

Abschnittsdimensionierung

Als nächstes ändern wir die Breite und Höhe unseres Abschnitts.

  • Breite: 8vw (Desktop), 12vw (Tablet), 20vw (Telefon)
  • Höhe: 7,4 vw (Desktop), 12 vw (Tablet), 16 vw (Telefon)

Klappenmenü

Code zur Seite hinzufügen

Neue Zeile am Ende des Abschnitts hinzufügen

Um den Umschalteffekt zu erzeugen, benötigen wir nun ein wenig JQuery- und CSS-Code. Beginnen Sie mit dem Hinzufügen eines Codemoduls zu einer neuen Zeile am unteren Rand Ihres Abschnitts.

Klappenmenü

Codemodul zum Abschnitt hinzufügen und JQuery-Umschaltcode einfügen

Kopieren Sie die folgenden Zeilen des JQuery-Codes und fügen Sie sie in das Codefeld ein: 

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

Klappenmenü

Benutzerdefinierten CSS-Code zu den Seiteneinstellungen hinzufügen

Öffnen Sie als nächstes die Seiteneinstellungen und fügen Sie die folgenden Zeilen CSS-Code hinzu: 

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Klappenmenü

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Schwebemodus

Desktop

Klappenmenü

Handy, Mobiltelefon

Klappenmenü

Klicken Sie auf Modus

Desktop

Klappenmenü

Handy, Mobiltelefon

Klappenmenü

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein schönes Klappenmodul erstellen, das sich durch Klicken/Hover (je nach Vorliebe) erweitert. Dies ist eine großartige Möglichkeit, Ihrem Menü zusätzliche Interaktivität hinzuzufügen und gleichzeitig ein reaktionsschnelles Ergebnis über alle Bildschirmgrößen hinweg aufrechtzuerhalten. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.