Jede Woche liefern wir Ihnen neue Designideen, die Sie für Ihre verschiedenen Projekte verwenden können Divi. Diese Tutorials enthalten in der Regel Anwendungsfälle, die Ihnen bei der Durchführung Ihrer helfen Website auf der oberen Ebene.

Diese Woche im Rahmen unserer Designinitiative Divi In Bearbeitung zeigen wir Ihnen, wie Sie ein schönes schwebendes Übersichtsmenü erstellen, das sich erweitert, sobald Sie mit der Maus darüber fahren oder darauf klicken. Beginnen wir mit einigen allgemeinen Schritten. Wir fahren fort, indem wir Menüelemente mit Blurb-Modulen hinzufügen, und lassen Sie zum Schluss zwischen einem Hover- oder Klick-Effekt wählen.

Lassen Sie uns gehen!

Übersicht

Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick auf das Ergebnis, das wir erhalten können. Dies kann jedoch anders sein, da Sie wahrscheinlich anpassen möchten, was Sie lernen.

1. Erstellen Sie eine leere Seite und verwenden Sie die Sightseeing-Seitenvorlage

Fügen Sie eine neue leere Seite hinzu und aktivieren Sie Divi Builder

Als erstes müssen Sie eine neue leere Seite erstellen. Geben Sie Ihrer Seite einen Titel und fahren Sie fort Divi Baumeister.

Laden Sie eine Touristenzielseite herunter

Wenn Sie Divi Builder aktiviert haben, laden Sie das Zielseitenlayout des Sightseeing Layout Pack herunter.

2. Fügen Sie unten auf der Seite einen neuen regulären Abschnitt hinzu

Sobald die Hauptmenüleiste ausgeblendet ist, können wir das Übersichtsmenü hinzufügen. Zu diesem Zweck fügen wir am Ende unserer Seite einen neuen regulären Abschnitt hinzu.

Hintergrundfarbe

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

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

Abstand

Wechseln Sie zur Registerkarte Design, und entfernen Sie alle standardmäßigen oberen und unteren Polster aus dem Abschnitt.

• Top Polsterung: 0px
• Polsterung unten: 0px

Standardschatten

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

• Box Shadow Blur Force: 18px
• Schattenfarbe: #383838

Schwebekasten Schatten

Und ändern Sie die Unschärfestärke des Schwebefeldschattens.

• Box Shadow Blur Force: 1000px

Abschnittsüberschreitungen ausblenden und den Z-Index erhöhen

Wir werden die Einstellungen für die Abschnittsgröße verwenden, damit diese Technik funktioniert, aber um sicherzustellen, dass nichts über den Abschnittscontainer hinausgeht, müssen wir die Überläufe ausblenden. Wir erhöhen auch den Z-Index, um sicherzustellen, dass der Abschnitt oben auf der restlichen Seite bleibt.

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

3. Konfigurieren Sie die Menügröße so, dass sie allen Bildschirmgrößen entspricht

Fügen Sie die Zeile 1 hinzu

Spaltenstruktur

Sobald Sie die Grundparameter des Abschnitts festgelegt haben, ist es an der Zeit, alle hinzuzufügen Inhalt die Sie im Menü anzeigen möchten. Mit den Designelementen und integrierten Optionen von Divi können Sie jedes gewünschte Design erstellen. Sie müssen jedoch sicherstellen, dass es bei einer Höhe von „100 Pixel“ für alle Bildschirmgrößen perfekt skaliert wird. Dazu verwenden wir während des gesamten Erstellungsprozesses die Breiteneinheit des Ansichtsfensters und passen die Werte an verschiedene Bildschirmgrößen an. Fügen Sie zunächst eine neue Zeile zu Ihrem Abschnitt hinzu und verwenden Sie dabei die folgende Spaltenstruktur:

Sizing

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

• Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

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

• Top Polsterung: 0px
• Polsterung unten: 0px

Fügen Sie einer Spalte einen Textbaustein hinzu

Fügen Sie ein Symbol hinzu

Fahren Sie fort, indem Sie der Zeilenspalte einen Textbaustein hinzufügen. Fügen Sie dem Feld das Symbol „=“ hinzu Inhalt Alternativ können Sie auch ein beliebiges anderes Symbol Ihrer Wahl verwenden.

Hintergrundfarbe

Ändern Sie anschließend die Hintergrundfarbe des Moduls.

• Hintergrundfarbe: #000000

Texteinstellungen

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

• Textschrift: Öffnen Sie Sans
• Textausrichtung: Mitte
• Textfarbe: #ffffff
• Textgröße: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
• Höhe der Textzeile: 1em

Abstand

Wir fügen außerdem oben und unten im Modul Platz hinzu, indem wir die folgenden benutzerdefinierten Füllwerte verwenden:

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

Fügen Sie die 2-Zeile hinzu

Spaltenstruktur

Fügen Sie mit der folgenden Spaltenstruktur eine zweite Zeile hinzu:

Sizing

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie sie die gesamte Bildschirmbreite ausfüllen.

• Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Gehen Sie zu den Abstandseinstellungen und fügen Sie oben und unten eine benutzerdefinierte Füllung hinzu.

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

Anzeige

Um sicherzustellen, dass die beiden Spalten bei kleineren Bildschirmgrößen nebeneinander bleiben, fügen wir dem Hauptzeilenelement eine einzelne Zeile CSS-Code hinzu.

Anzeige: Flex;

Fügen Sie das Blurb-Modul zur 1-Spalte hinzu

Inhalt hinzufügen

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

Wählen Sie das Symbol

Wählen Sie als nächstes ein Symbol.

Ajouter un lien

Geben Sie einen Seitenlink ein, der dem Menüpunkt entspricht.

• URL des Linktitels: #

Symboleinstellungen

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

• Symbolfarbe: # ff3314
• Symbolplatzierung: Oben
• Verwenden Sie die Schriftgröße des Symbols: Ja
• Symbol Schriftgröße: 2vw (Desktop), 3vw (Tablet), 4vw (Telefon)

Einstellungen für den Titeltext

Ändern Sie auch die Texteinstellungen des Titels.

• Titel Polizei: PT Serif
• Titel-Schriftschnitt: Unterstreichen
• Unterstreichungsfarbe des Titels: # ff3314
• Texttitel: Mittige Ausrichtung
• Text Titelgröße: 1.8vw (Desktop), 2.3vw (Tablet), 3.3vw (Telefon)

Body-Text-Einstellungen

Ändern Sie dann die Körpertexteinstellungen.

• Body-Schriftart: Lato
• Ausrichtung des Textkörpers: Mitte
• Haupttextfarbe: # c6c6c6
• Körpertextgröße: 0.9vw (Desktop), 1.7vw (Tablet), 2.1vw (Telefon)
• Körpergröße: 1.8em

Sizing

Ändern Sie die Modulbreite auf verschiedenen Bildschirmgrößen mit den folgenden Werten:

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

Animation

Wir entfernen auch die Symbolanimation in den Animationseinstellungen.

• Icon Animation: Keine Animation

Klonen Sie das Modul und platzieren Sie die Kopie in der 2-Spalte

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

Kopie ändern

Stellen Sie sicher, dass Sie die Kopie ändern. Vergessen Sie nicht, das Symbol und den Link zu ändern.

Klonen Sie die Zeile zweimal

Wenn Sie beide Blurb-Module in der Reihe abgeschlossen haben, können Sie die gesamte Zeile zweimal duplizieren.

Ändern Sie die Kopie, das Symbol und den Link für jede Klappentext-Duplizierung einzeln

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

4. Machen Sie den Abschnitt klebrig

Defekt

Nachdem Sie alle Elemente, die Sie anzeigen möchten, zu Ihrem Abschnitt hinzugefügt haben, können Sie den Abschnitt oben links auf Ihrer Seite beibehalten, indem Sie dem Hauptabschnittselement die folgenden zwei Zeilen CSS-Code hinzufügen. ::

Position: feststehend; oben: 0;

Schweben (Wichtig!)

Aktivieren Sie die Hover-Option für das Hauptelement des Abschnitts und stellen Sie sicher, dass der Abschnitt auch in diesem Zustand klebrig bleibt.

Position: fixiert;

5. Wählen Sie eine Methode: A) Überflugmenü oder B) Klickmenü

A) Schwebendes Menü

Standardgröße des Abschnitts

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

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

Hover-Bereich

Ändern Sie die Rollover-Werte, um ein expandierendes Menü zu erstellen.

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

B) Menü auf Klick

Fügen Sie einem Abschnitt eine CSS-Klasse hinzu

Wenn Sie ein Menü möchten, das nur durch Klicken geöffnet wird, müssen Sie das Textmodul öffnen, das das Menüsymbol enthält. Wechseln Sie zur Registerkarte Erweitert und fügen Sie eine benutzerdefinierte CSS-Klasse hinzu.

• CSS-Klasse: Vollbreitenoffen

Fügen Sie dem Textbaustein eine CSS-Klasse hinzu

Öffnen Sie dann die Parameter des Abschnitts und fügen Sie eine weitere CSS-Klasse hinzu.

• CSS-Klasse: Smooth-Transformation

Abschnittsgröße

Wir ändern dann die Breite und Höhe unseres Abschnitts.

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

Fügen Sie der Seite einen Code hinzu

Fügen Sie am unteren Rand des Abschnitts eine neue Zeile hinzu

Um den Flip-Effekt zu erzeugen, benötigen wir ein bisschen JQuery- und CSS-Code. Fügen Sie zunächst ein Codemodul zu einer neuen Zeile am Ende Ihres Abschnitts hinzu.

Fügen Sie dem Abschnitt ein Codemodul hinzu und fügen Sie einen JQuery-Umschaltcode ein

Kopieren Sie die folgenden Zeilen aus dem JQuery-Code und fügen Sie sie in das Codefeld ein:

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

Fügen Sie Seiteneinstellungen benutzerdefinierten CSS-Code hinzu

Öffnen Sie zu guter Letzt die folgenden Seiteneinstellungen und fügen Sie die folgenden CSS-Codezeilen hinzu:

.smooth-transform-active {height: 100vh; Breite: 80%; } .smooth-transform {-webkit-Transition: Alle 0.5s sind einfach; -moz-Transition: Alle 0.5s leicht gemacht; -o-Übergang: alle 0.5s leicht; -ms-Transition: Alle 0.5s leicht gemacht; Übergang: alle 0.5s leicht; }

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie ein schönes Präsentationsmodul erstellen, das durch Klicken / Bewegen (je nach Ihren Vorlieben) erweitert wird. Dies ist eine großartige Möglichkeit, Ihrem Menü zusätzliche Interaktivität hinzuzufügen und gleichzeitig ein ansprechendes Ergebnis für alle Bildschirmgrößen zu erzielen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im reservierten Bereich unten.