Möchten Sie ein Divi-Mega-Menü mit Bildern zur Veranschaulichung haben? Inhalt aus der Speisekarte? Folgen Sie unserem Tutorial zum Hinzufügen von Bildern zu einem Mega-Menü?
Wir lieben es, online mit Bildern zu interagieren. Vor diesem Hintergrund ist es sinnvoll, ein Bild zu Ihrer hinzuzufügen Website wenn möglich.
Außerdem ist das Hinzufügen von Bildern in einem Mega-Menü eine weitere großartige Gelegenheit, Ihren Benutzern die Interaktion zu bieten, die sie benötigen.
Bilder verbessern auch das Menü, indem sie ihre Aufmerksamkeit erregen, um den Navigationsprozess weiter zu vereinfachen.
Übersicht
Bevor wir zu diesem Tutorial springen, werfen wir einen Blick auf das Ergebnis, das wir erreichen möchten.
Erstellung des Mega-Menüs
Um zu beginnen, müssen wir zuerst das Menü erstellen.
Für dieses Beispiel erstellen wir ein übergeordnetes Hauptmenüelement mit dem Namen „Mega-Menü“ mit vier Untermenüpunkten unten. Jeder der vier Untermenüpunkte hat drei Unter-Untermenüpunkte.
Gehen Sie zum WordPress-Dashboard und klicken Sie dann auf Auftritte> Menüs
Klicken Sie auf 'Neues Menü erstellen', geben Sie ihm einen Namen und klicken Sie auf 'Menü erstellen'.
Stellen Sie sicher, dass Sie die Menüeigenschaft CSS-Klassen aktivieren, indem Sie auf die Registerkarte klicken Optionen Bildschirm oben rechts auf dem Menübildschirm und überprüfen CSS-Klassen.
Sie können nun Ihre Menüpunkte zu dem neu erstellten Menü hinzufügen.
Lassen Sie uns zuerst den Menüeintrag erstellen, der allen anderen Menüeinträgen übergeordnet ist. Dies ist der Link, der Ihr Mega-Menü beim Hover anzeigt.
Um diesen Menüpunkt zu erstellen, erstellen Sie einen benutzerdefinierten Link mit den folgenden Parametern:
- URL: http://#
- Navigationstitel: Mega-Menü
- CSS-Klassen: Mega-Menü
Ordnen/ziehen Sie nun die vier Menüpunkte (jeweils mit drei eigenen Unterpunkten) so an, dass sie Unterpunkte des übergeordneten Haupt-Megamenü-Links werden.
Sobald die Links zum Menü hinzugefügt wurden, scrollen Sie nach unten zu 'Gerichte des Menüs' am unteren Rand des Menübildschirms und wählen Sie aus 'Hauptmenü' für Anzeigeort. Klicken Sie abschließend auf 'Menü speichern'
So sieht unsere Mega-Speisekarte bisher aus:
Hinzufügen von Bildern zum Mega-Menü
Jetzt, da das Menü fertig ist, ist es an der Zeit, die Bilder hinzuzufügen.
Lesen Sie auch: Wie veröffentliche ich Blog-Beiträge in DIVI?
Holen Sie sich die Bilder
Beginnen Sie mit vier Bildern. Diese Bilder sollten sich auf die vier Untermenüpunkte beziehen (Über uns, Servicebereitstellung, unsere Arbeit und Kontakt).
Verwenden Sie einen Fotoeditor, um jedes Bild zu verkleinern und auf eine Breite von 500 Pixel und eine Höhe von 300 Pixel zuzuschneiden.
Fügen Sie diese Bilder der WordPress-Bibliothek hinzu. Klicke auf Medien > Hinzufügen.
Ziehen Sie Ihre Bilder auf die Seite, um sie hinzuzufügen, oder klicken Sie auf „Dateien auswählen'
Fügen Sie Bilder in das Mega-Menü ein
Kehren Sie zur Menüseite im WordPress-Dashboard zurück.
In diesem Beispiel lautet der Link oben in der ersten Spalte " Um ".
Klicken Sie auf den Pfeil rechts neben dem Element " Um ". Fügen Sie im Feld Navigationsbezeichnung das gewünschte Bild mit dem HTML-Tag hinzu img direkt vor dem Text " Um ". Das Image-Tag sollte so aussehen:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Um die URL des Bildes zu finden, gehen Sie zu Medien > Medienbibliothek, klicken Sie auf das Bild, das Sie hinzufügen möchten.
Im Popup-Fenster Anhangsangaben, suchen Sie die URL im rechten Abschnitt und klicken Sie dann auf 'URL in die Zwischenablage kopieren'
Gehen Sie nun zurück zum Menüpunkt Konfiguration " Um " auf der Menüseite und ersetzen Sie den Text "Bild-URL einfügen" indem Sie Ihre Bild-URL mit einfügen Strg + v.
Vor dem Verlassen der Konfigurationsoptionen für den Menüpunkt " Um ", suchen Sie das Textfeld CSS-Klassen und geben Sie die Klasse „mega-link“ ein.
Auf diese Weise können wir später benutzerdefinierte Stile hinzufügen.
Wiederholen Sie diesen Vorgang, um die folgenden drei Bilder zu jedem der Untermenüpunkte mit der Klasse „Mega-Link“ hinzuzufügen. (In diesem Beispiel sind die verbleibenden drei Elemente „Leistungserbringung“, „Unsere Arbeit“ et " Kontaktiere uns ".)
Ergebnis
Greifen Sie auf Ihre Webseite und bewegen Sie den Mauszeiger über den Mega-Menü-Link. Jetzt sollte Ihr Mega-Menü so aussehen:
Beachten Sie, dass, wenn Sie mit der Maus über jedes der Bilder fahren, die Bilder mit dem Untermenüelement direkt darunter eingeblendet werden. Dies liegt daran, dass das Bild Teil dieses Links ist. Wenn Sie darauf klicken, gelangen Sie zur zugehörigen URL.
Letzter Schliff
Fügen Sie für diesen letzten Schritt einige benutzerdefinierte CSS zum Menü hinzu, um die Textschrift größer und zentriert zu machen. Geben Sie auch einen Randradius um das Bild herum, damit es sauberer aussieht.
Gehen Sie im WordPress-Dashboard zu Divi> Themenoptionen .
Scrollen Sie nach unten zum Feld Benutzerdefiniertes CSS, geben Sie das CSS unten ein und klicken Sie darauf 'Änderungen speichern' :
.mega-link > a {
text-align: center;
font-size: 20px !important;
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 3px;
}
.mega-link > a img {
margin-bottom: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Endergebnis
Du bist fertig !
Wenn Sie alle Schritte in diesem Tutorial befolgt haben, sollten Sie hier das Ergebnis erhalten.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Sie haben ein Divi-Mega-Menü mit Bildern, ohne ein Plugin verwenden zu müssen. Dieser Menütyp eignet sich besonders gut für Websites. e-commerce die viele davon haben Inhalt und erfordern Produktbilder. Wir hoffen, dass dieses Tutorial für Ihre nächsten Divi-Projekte nützlich sein wird.
Wenn Sie weitere Elemente benötigen, um Ihre Projekte zur Erstellung von Websites abzuschließen, lesen Sie auch unseren Leitfaden zum Thema WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Aber inzwischen, Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
