Möchten Sie kreativ werden, indem Sie ein erweiterbares Sticky-Menü erstellen, wenn Sie mit der Maus darüber fahren? Divi ?
In diesem Tutorial zeigen wir Ihnen, wie Sie mit der Maus ein erweiterbares Sticky-Menü erstellen von Divis Mechanic Layout Pack .
Wir behandeln zwei verschiedene Beispieldesigns, die Sie von Grund auf neu erstellen und auf jede Art von Design anwenden können Website die du erschaffst!
Das Menü wird beim Hover auf dem Desktop angezeigt und beim Klicken auf Mobilgeräten aktiviert.
Lassen Sie uns gehen!
Übersicht
Bevor wir in dieses Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.
Beispiel 1
Desktop-Computer
Mobil
Laden Sie DIVI jetzt herunter!!!
Beispiel 2
Desktop-Computer
Mobil
Laden Sie DIVI jetzt herunter!!!
Allgemeine Schritte
Feste Navigation deaktivieren
Greifen Sie auf die Divi-Designoptionen zu
Wir beginnen mit einigen allgemeinen Schritten. Diese Schritte sind für beide Beispiele gleich und erforderlich, um das gewünschte Ergebnis zu erzielen.
Wenn Sie vorhaben, ein erweiterbares Sticky-Menü am unteren Rand Ihrer Seite zu verwenden, sollten Sie die Hauptmenüleiste oben weglassen.
Lesen Sie auch: So erstellen Sie benutzerdefinierte Bildüberlagerungen in Divi
Dafür müssen Sie gehen Divi >> Themenoptionen aus dem WordPress-Dashboard
Feste Navigation deaktivieren
Dort müssen Sie deaktivieren „Feste Navigationsleiste“ um sicherzustellen, dass oben auf Ihrer Seite kein Platz mehr vorhanden ist.
- Feste Navigationsleiste: Deaktiviert
Blenden Sie die Hauptmenüleiste auf der Seite aus
Seiteneinstellungen öffnen
Gehen Sie zu der Seite, auf der Sie das erweiterbare Sticky-Menü hinzufügen möchten, und öffnen Sie die Seiteneinstellungen.
Fügen Sie benutzerdefiniertes CSS hinzu
Blenden Sie das Hauptmenü aus, indem Sie Ihrer Seite die folgenden CSS-Codezeilen hinzufügen.
#main-header {
display: none;
}
Fügen Sie am Ende der Seite einen neuen Abschnitt hinzu
Unabhängig davon, welches Beispiel Sie neu erstellen möchten, bleiben einige der grundlegenden Schritte gleich. Der erste Schritt besteht darin, unten auf der Seite einen regulären Abschnitt hinzuzufügen.
Abstand
Öffnen Sie Abschnittseinstellungen und ändern Sie die folgenden Einstellungen im Tab Design unter Option Abstand.
- Polsterung (oben und unten): 0px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Sizing
Öffnen Sie, ohne noch Module hinzuzufügen, die Linieneinstellungen und ändern Sie die folgenden Einstellungen in der Registerkarte Design unter Option Größe
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 100 %
- Maximale Breite: 100 %
Abstand
Entfernen Sie dann standardmäßig alle oberen und unteren Polsterungen unter der Option Abstand.
- Polsterung (oben und unten): 0px
Hauptelement
Wir lassen zu, dass die gesamte Zeile am Ende unserer Seite bleibt, indem wir dem Hauptzeilenelement zwei einfache Zeilen CSS-Code hinzufügen.
bottom: 0px;
position: fixed;
Z-Index
Und wir stellen sicher, dass die Zeile (und das Textmodul, das wir in den nächsten Schritten hinzufügen) über allem bleibt Inhalt der Seite durch Erhöhen des Z-Index, Erweitern Sie die Option Position.
- Z-Index: 99
Codemodul zur Spalte hinzufügen
Fügen Sie CSS-Code zwischen Style-Tags hinzu
Der letzte Teil der allgemeinen Schritte besteht darin, der neuen Zeile ein Codemodul hinzuzufügen. Der CSS-Code, den wir in diesem Code-Modul hinzufügen, hilft uns, den aufschlussreichen Effekt beim Hover zu erzielen.
Siehe auch: So erstellen Sie ein Spinning-Wheel-Menü beim Hover in Divi
Fügen Sie die folgenden CSS-Codezeilen in das Modul ein:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Beispieldesign Nr. 1
Fügen Sie der Spalte ein Textmodul hinzu
Inhalt hinzufügen
Nachdem wir nun alle Schritte durchlaufen haben, können wir uns auf die beiden verschiedenen Designbeispiele konzentrieren, beginnend mit dem ersten!
Fügen Sie der Spalte Ihrer Zeile ein Textmodul hinzu. In der Gegend von Inhaltverwenden wir den Absatzstil, um den Text anzuzeigen '≡Menü'.
Wir platzieren dann alle Menüpunkte in einer ungeordneten Liste. Wir werden auch einen Link zu jedem der Seitentitel einzeln hinzufügen.
Standard-Hintergrundfarbe
Gehen Sie zu den Hintergrundeinstellungen des Moduls und ändern Sie die Hintergrundfarbe.
- Hintergrund: #ffffff
Hintergrundfarbe beim Hover
Ändern Sie diese Hintergrundfarbe beim Hover.
- Hintergrund (Hover): rgba(255,255,255,0.83)
Hintergrund mit Farbverlauf
Und fügen Sie auch einen Standardverlaufshintergrund hinzu.
- Farbe links: rgba(255,255,255,0)
- Rechte Farbe: #ffffff
- Position rechts: 60 %
Standardeinstellungen für Text
Fahren Sie fort, indem Sie zur Registerkarte gehen Design und Ändern der Texteinstellungen.
- Textschriftart: Khand
- Schriftdicke: fett
- Textfarbe: #021827
- Textgröße: 3vh
- Ausrichtung: Mitte
Einstellungen für Schwebetext
Ändern Sie einige der Hover-Texteinstellungen.
- Textfarbe (Hover: rgba(255,255,255,0)
- Textgröße (Hover): 0vh
Texteinstellungen verknüpfen
Gehen Sie als Nächstes zu den Linktexteinstellungen und ändern Sie die Linktextfarbe.
- Linktextfarbe: #000000
Standardwerte auflisten (Desktop)
Wechseln Sie zu den Standardeinstellungen für den Listentext und passen Sie ihn nach Ihren Wünschen an. Stellen Sie sicher, dass Sie '0px' für die Textgröße im Standardzustand verwenden.
- Schriftart für ungeordnete Liste: Khand
- Listenschriftstil: TT
- Listentextausrichtung: zentriert
- Ungeordnete Textfarbe: rgba(255,255,255,0)
- Textgröße der ungeordneten Liste: 0px
- Listentextgewicht: 0em
- Position des ungeordneten Listenstils: Innen
Hover-Listeneinstellungen
Ändern Sie dann einige der Werte beim Hover, damit Menüelemente angezeigt werden können.
- Listentextfarbe (Hover): #000000
- Textgröße der ungeordneten Liste (Hover): 2vh
- Texthöhe der ungeordneten Liste (Hover): 2,1 em
Standardabstand (Desktop)
Gehen Sie dann zu den Abstandseinstellungen (Option Abstand) und dem Textmodul eine Form geben.
- Rand (links und rechts): 45vw (Desktop), 39vw (Tablet), 33vw (Telefon)
- Polsterung (oben und unten): 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
Schwebeabstand
Ändern Sie dieselben Werte beim Hover.
- Rand (links und rechts): 14vw
- Polsterung (oben und unten): 8vw
Standardrahmen (Desktop)
Gehen Sie zu den Randeinstellungen und stellen Sie sicher, dass jede der abgerundeten Ecken einen Wert von „0px“ hat.
Grenze beim Schweben
Aktivieren Sie Hover-Optionen an abgerundeten Ecken und ändern Sie die Werte nach oben links und oben rechts.
- Oben links: 50vw
- Oben rechts: 50vw
Schattenkiste
Fahren Sie fort, indem Sie dem Modul mit einem Kastenschatten Tiefe verleihen. Dadurch wird sichergestellt, dass das Menü auf der Seite nicht unbemerkt bleibt.
- Feldschatten-Unschärfestärke: 1000px
- Schattenfarbe: rgba (0,0,0,0.68)
CSS-Klasse
Wir fügen dem Modul auch eine CSS-Klasse hinzu.
- CSS-Klasse: dt-Menü
Übergänge
Verringern Sie schließlich die Übergangsdauer in den Übergangseinstellungen.
- Übergangsdauer: 100 ms
Beispieldesign Nr. 2
Fügen Sie der Spalte ein Textmodul hinzu
Inhalt hinzufügen
Kommen wir zum zweiten Beispiel! Hier werden wir wieder hinzufügen '≡Menü' Verwendung des Absatztextstils und Menüelemente unter Verwendung einer ungeordneten Liste. Wir werden auch einen Link zu jedem der Menüpunkte einzeln hinzufügen.
Standardhintergrundfarbe (Desktop)
Gehen Sie zu den Hintergrundeinstellungen und ändern Sie die Hintergrundfarbe.
- Hintergrund: #ffffff
Hintergrundfarbe beim Hover
Ändern Sie die Hintergrundfarbe beim Hover.
- Hintergrund (Hover): #f71535
Standardtexteinstellungen (Desktop)
Dann gehen Sie auf die Registerkarte Design und nehmen Sie einige Änderungen am Erscheinungsbild des Textes vor.
- Textschriftart: Khand
- Schriftdicke: fett
- Textfarbe: #021827
- Textgröße: 3vh
Hovertext-Einstellungen
Ändern Sie diese Einstellungen beim Hover.
- Textfarbe (Hover): rgba(255,255,255,0)
- Textgröße (Hover): 0vh
Texteinstellungen verknüpfen
Gehen Sie zu den Texteinstellungen und ändern Sie die Linktextfarbe.
- Linktextfarbe: #ffffff
Standardeinstellungen für Listentext
Ändern Sie auch die Designeinstellungen der ungeordneten Listenelemente.
- Schriftart für ungeordnete Liste: Khand
- Schriftstil für ungeordnete Liste: TT
- Listentextausrichtung: zentriert
- Textfarbe der ungeordneten Liste: rgba(255,255,255,0)
- Listentextgröße: 0px
- Ungeordnete Listenzeilenhöhe: 0em
- Position des ungeordneten Listenstils: Innen
Hover-Listeneinstellungen
Und ändern Sie einige dieser Werte beim Hover.
- Textfarbe der ungeordneten Liste: #ffffff
- Listentextgröße: 2vh
- Zeilenhöhe der ungeordneten Liste: 2,1 em
Standardabstand (Desktop)
Gehen Sie dann zu den Abstandseinstellungen und geben Sie dem Modul etwas Platz.
- Rand (rechts): 88 vw (Desktop und Tablet), 71 vw (Telefon)
- Polsterung (oben): 6 vw (Desktop)), 10 vw (Tablet), 18 vw (Telefon)
- Polsterung (unten): 4 vw (Desktop), 10 vw (Tablet), 12 vw (Telefon)
- Linke Polsterung: 1vw
Schwebeabstand
Werte beim Hover ändern.
- Rand (rechts): 59vw
- Polsterung: (Oben)13vw, (Unten)8vw, (Links)1vw, (Rechts)13vw
Grenze
Und um dieses Viertelkreisdesign zu erstellen, ändern wir den oberen rechten Rand in den Randeinstellungen.
- Oben rechts: 50vw
Schattenkiste
Wir fügen auch einen Kastenschatten hinzu, um Tiefe auf der Seite zu erzeugen.
- Box-Schattenunschärfe-Stärke: 1000px
- Schattenfarbe: rgba (0,0,0,0.68)
CSS-Klasse
Als nächstes fügen wir der Registerkarte eine CSS-Klasse hinzu Fortgeschrittener.
- CSS-Klasse: dt-Menü
Übergänge
Und verringern Sie die Dauer des Übergangs auf der Registerkarte Fortgeschrittener um einen schnellen Übergang zu schaffen.
- Übergangsdauer: 100 ms
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Beispiel # 1
Büro
Mobil
Laden Sie DIVI jetzt herunter!!!
Beispiel # 2
Desktop-Computer
Mobil
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie ein erweiterbares Sticky-Menü mit erstellen des Divi Mechanic Layout Packs. Wir haben zwei verschiedene Designbeispiele behandelt, die Sie ändern und für jeden Typ verwenden können Website die du erschaffst!
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Projekte inspirieren wird. Divi. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
