So erstellen Sie ein benutzerdefiniertes eCommerce-Mega-Menü mit Divis Theme Builder

Beim Erstellen einer E-Commerce-Website mit Divi und WooCommerce gibt es unzählige Möglichkeiten, das allgemeine Erscheinungsbild Ihrer Website anzupassen. Mit den WooCommerce-Modulen von Divi in ​​Kombination mit dem Divi Theme Builder können Sie Vorlagen für Ihre Produktseiten, Kategorieseiten und mehr erstellen. Aber abgesehen davon, dass Ihre Website-Struktur und die WooCommerce-Seiten für den Start bereit sind, ist es auch wichtig, an die Navigationserfahrung der Besucher zu denken. Das Menü, das Sie für Ihre eCommerce-Website erstellen, gibt den Ton für das Kaufverhalten Ihrer Besucher auf Ihrer Website an.

Damit Ihre E-Commerce-Website ihr volles Potenzial entfalten kann, zeigen wir Ihnen, wie Sie mit Divis Theme Builder ein benutzerdefiniertes E-Commerce-Megamenü erstellen. Wir bauen alles visuell mit den integrierten Elementen von Divi und verwenden die Elemente als Dropdowns mit etwas Code. Mit diesem Ansatz können Sie jede Art von eCommerce-Megamenü für die von Ihnen erstellten eCommerce-Websites erstellen! Sie können die JSON-Datei auch kostenlos herunterladen.

Lasst uns anfangen.

Vorschau

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

Desktop

Handy, Mobiltelefon

Laden Sie das eCommerce Mega-Menü-Layout KOSTENLOS herunter

Um das kostenlose eCommerce-Mega-Menü-Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

So laden Sie die JSON-Datei hoch

Entpacken Sie den komprimierten Ordner, den Sie oben herunterladen konnten. Navigieren Sie dann zu Ihrer WordPress-Website > Divi > Divi-Bibliothek und laden Sie die JSON hoch.

Sobald Ihr Layout in der Divi-Bibliothek gespeichert ist, können Sie zum Divi Theme Builder navigieren und das gespeicherte Layout importieren, indem Sie auf „Globalen Header hinzufügen“ oder „Benutzerdefinierten Header hinzufügen“ klicken und „Globalen/Benutzerdefinierten Header erstellen“ auswählen. Gehen Sie in der Divi-Bibliothek zur Registerkarte „Ihre gespeicherten Layouts“, wählen Sie das Layout aus, das Sie im vorherigen Schritt hochgeladen haben, und speichern Sie alle Änderungen im Divi-Theme-Builder.

Um auf Anhieb ein funktionierendes Menü zu haben, müssen Sie den ersten Teil dieses Tutorials unten durchgehen; Hinzufügen der CSS-Klassen zu Menüpunkten auf individueller Ebene. Sie müssen auch eine der CSS-Klassen im Codemodul aktivieren, wie in Teil 5 dieses Tutorials gezeigt. Wenn die Symbole nicht richtig angezeigt werden, überprüfen Sie den Symbolinhalt im Codemodul. Die Symbole müssen den Inhalt „\4c“ und „\21“ enthalten, wie Sie im Druckbildschirm unten sehen können.

1. CSS-Klassen zu Menüelementen hinzufügen

Gehen Sie zu Menüs in der Darstellung

Im ersten Teil dieses Tutorials weisen wir den Menüpunkten, denen wir ein Dropdown-Megamenü hinzufügen möchten, zwei verschiedene CSS-Klassen zu. Gehen Sie dazu zu den Menüs in den Darstellungseinstellungen Ihres WordPress-Dashboards.

CSS-Klassenoption aktivieren

Stellen Sie sicher, dass die CSS-Klassenoption oben aktiviert ist, indem Sie die Bildschirmoptionen umschalten und die CSS-Klassenoption aktivieren.

Fügen Sie aufeinanderfolgende CSS-Klassen zu Menüelementen hinzu, die ein Dropdown-Menü benötigen

Jeder der Menüpunkte, denen Sie ein Dropdown-Megamenü zuweisen möchten, benötigt zwei CSS-Klassen. Erstens eine allgemeine CSS-Klasse, die als „erste Ebene“ bezeichnet wird. Die zweite CSS-Klasse enthält am Ende eine fortlaufende Nummer, „first-level-1“, „first-level-2“, „first-level-3“ usw.

• Erstes Menüelement mit Dropdown-Menü: first-level first-level-1
• Zweiter Menüpunkt mit Dropdown-Menü: First-Level First-Level-2
• Dritter Menüpunkt mit Dropdown-Menü: First-Level First-Level-3

2. Erstellen Sie einen globalen Header mit Divis Theme Builder

Gehen Sie zu Divi Theme Builder und beginnen Sie mit dem Erstellen des globalen Headers

Sobald Ihre Menüpunkte eingerichtet sind, ist es an der Zeit, zu Divi zu wechseln. Wir erstellen einen neuen globalen Header, indem wir zu unserem Divi Theme Builder navigieren und auf „Globalen Header hinzufügen“ klicken. Wir werden den globalen Header von Grund auf neu erstellen.

Abschnitt #1 Einstellungen

Abstand

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und entfernen Sie alle standardmäßigen oberen und unteren Polster.

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

Sichtweite

Blenden Sie diesen Abschnitt als nächstes auf Tablet und Telefon aus. Wir behalten diesen Abschnitt nur bei größeren Bildschirmgrößen bei, um sicherzustellen, dass das Navigationserlebnis bei kleineren Bildschirmgrößen nicht überwältigend wird.

Zeile 1 hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 95%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie Ihr Logo hoch.

Abstand

Gehen Sie zur Design-Registerkarte des Moduls und fügen Sie einen oberen Rand hinzu.

• Höchste Marge: 3%

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Weiter zur nächsten Spalte. Fügen Sie ein Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Oswald
• Schriftstärke des Textes: Mittel
• Textschriftart: Großbuchstaben
• Textfarbe: #000000
• Textgröße: 19px

Abstand

Fügen Sie auch etwas oberen und unteren Rand hinzu.

• Höchste Marge: 5%
• Untere Marge: 5%

Textmodul zweimal klonen & Duplikate in Spalte 3 & 4 platzieren

Kopie ändern

Nachdem Sie das erste Textmodul in Spalte 2 fertiggestellt haben, können Sie es zweimal klonen und die Duplikate in Spalte 3 und 4 platzieren. Stellen Sie sicher, dass Sie den Inhalt in beiden Duplikatmodulen ändern.

Abschnitt 2 hinzufügen

Abstand

Fügen Sie einen weiteren Abschnitt direkt unter dem vorherigen hinzu. Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

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

Zeile 2 hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

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

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Grenze

Gehen Sie dann zu den Rahmeneinstellungen und wenden Sie einen oberen und unteren Rahmen an.

• Breite des oberen Rands:
  • Desktop: 2px
  • Tablet & Telefon: 0px
• Breite des unteren Rands: 2px
• Rahmenfarbe: #ff6600

Menümodul zur Spalte hinzufügen

Menü auswählen

Fügen Sie der Spalte der Zeile ein Menümodul hinzu und wählen Sie ein Menü Ihrer Wahl aus.

Logo auf Tablet und Telefon hinzufügen

Fügen Sie dann ein Logo auf Tablet und Telefon hinzu, indem Sie die Reaktionsoptionen aktivieren und Ihre Logo-Bilddatei hochladen. Lassen Sie den Desktop-Bereich leer.

Elemente

Wir aktivieren auch die Einkaufswagen- und Suchsymbole.

• Warenkorb-Symbol anzeigen: Ja
• Suchsymbol anzeigen: Ja

Menütexteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Menütexteinstellungen wie folgt:

• Menüschrift: Oswald
• Menüschriftart: Großbuchstaben
• Menütextfarbe: #000000
• Menütextgröße: 19px

Texteinstellungen des Dropdown-Menüs

Wir ändern auch die Farbe der Dropdown-Menüzeile.

• Farbe der Dropdown-Menüzeile: #ffffff

Symboleinstellungen

Zusammen mit den Symboleinstellungen.

• Farbe des Einkaufswagensymbols: #ff6600
• Farbe des Suchsymbols: #ff6600
• Farbe des Hamburger-Menüsymbols: #ff6600

CSS-Klasse

Vervollständigen Sie die Einstellungen des Moduls, indem Sie eine CSS-Klasse hinzufügen. Wir werden diese CSS-Klasse später im Tutorial verwenden, wenn wir den Code hinzufügen.

• CSS-Klasse: category-menu

3. Erstellen Sie eine Dropdown-Zeile in der Kopfzeilenvorlage

Neuen Abschnitt hinzufügen (dem Dropdown des ersten Menüelements gewidmet)

Größe

Nachdem wir unser Menü eingerichtet haben, ist es an der Zeit, zum nächsten Teil des Tutorials überzugehen, der sich der Erstellung der eCommerce-Megamenü-Dropdowns widmet. Um das erste Dropdown-E-Commerce-Megamenü zu erstellen, fügen wir einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und stellen Sie sicher, dass Breite und maximale Breite in den Größeneinstellungen auf 100 % eingestellt sind.

• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

CSS-Klasse

Fügen Sie dann zwei CSS-Klassen hinzu. Die Nummer am Ende der zweiten CSS-Klasse ist dieselbe Nummer wie die Nummer, die für den ersten Menüpunkt im ersten Teil dieses Tutorials verwendet wurde.

• CSS-Klasse: Dropdown-Menü Dropdown-Menü-1

Neue Zeile zum Abschnitt hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Größe

Wechseln Sie zur Registerkarte Design der Zeile und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

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

Grenze

Und wenden Sie einen unteren Rand an.

• Breite des unteren Rands: 2px
• Farbe des unteren Rands: #ff6600

Spalte 1 & 2 Einstellungen

Als nächstes öffnen Sie die Einstellungen von Spalte 1 und 2 einzeln.

Abstand

Fügen Sie beiden Spalten die folgenden Responsive-Padding-Werte hinzu:

• Obere Polsterung:
  • Desktop & Tablet: 10%
  • Telefon: 5%
• Untere Polsterung:
  • Desktop & Tablet: 10%
  • Telefon: 5%
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Hauptelement-CSS

Zusammen mit einer Zeile CSS-Code. Dies hilft uns, die Spalten auch auf kleineren Bildschirmgrößen nebeneinander zu platzieren.

width: 50% !important

Spalte 3 Einstellungen

Hintergrund mit Farbverlauf

Weiter zu den Einstellungen von Spalte 3. Wenden Sie den folgenden Verlaufshintergrund an:

• Farbe 1: rgba(0,0,0,0.08)
• Farbe 2: #0a0a0a
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrundbild

Laden Sie als nächstes ein Hintergrundbild Ihrer Wahl hoch.

Hauptelement-CSS

Fügen Sie der Spalte mit einer Zeile CSS-Code einen rechten Rand hinzu.

margin-right: 10px !important;

Sichtweite

Um sicherzustellen, dass unser Dropdown-Menü für Mobilgeräte nicht zu überwältigend ist, blenden wir diese gesamte Spalte auf Tablets und Telefonen aus.

Spalte 4 Einstellungen

Hintergrund mit Farbverlauf

Als nächstes haben wir die vierte Spalte. Fügen Sie den gleichen Farbverlaufshintergrund hinzu.

• Farbe 1: rgba(0,0,0,0.08)
• Farbe 2: #0a0a0a
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrundbild

Laden Sie auch hier ein Hintergrundbild hoch.

Sichtweite

Und blenden Sie die Spalte auf Tablet und Telefon aus.

Textmodul zu Spalte 1 hinzufügen

Produktkategorienamen zum Inhaltsfeld hinzufügen

Zeit, Module hinzuzufügen! Sie können in dieser Dropdown-Liste alles platzieren, was Sie möchten. Wir verwenden Textmodule, beginnend mit einem ersten in Spalte 1. Fügen Sie einen Kategorienamen hinzu.

Produktkategorie-Link hinzufügen

Fügen Sie als nächstes den Link zu dieser Kategorie hinzu.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Oswald
• Textschriftart: Großbuchstaben
• Textfarbe: #000000
• Textgröße:
  • Desktop: 22px
  • Tablet: 18px
  • Telefon: 16px
• Text-Buchstaben-Abstand: -0.6px
• Textzeilenhöhe: 2,4 em

Grenze

Fügen Sie auch einen unteren Rand hinzu.

• Breite des unteren Rands: 2px
• Farbe des unteren Rands:
  • Standard: rgba(0,0,0,0)
  • Schweben: #ff6600

Klonen und ändern Sie das Textmodul so oft wie nötig

Sobald Sie den ersten abgeschlossen haben, können Sie ihn beliebig oft klonen und die Duplikate auf Spalte 1 und 2 verteilen.

Titel und Links der Produktkategorie ändern

Stellen Sie sicher, dass Sie alle Produktkategorienamen und -links ändern.

Textmodul zu Spalte 3 hinzufügen

Name der Produktkategorie hinzufügen

Weiter zur dritten Spalte. Fügen Sie ein neues Textmodul hinzu und fügen Sie den Produktkategorienamen ein.

Produktkategorie-Link hinzufügen

Fügen Sie auch den Link hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Oswald
• Schriftstärke des Textes: Fett
• Textschriftart: Großbuchstaben
• Textfarbe: #ffffff
• Textgröße: 3.4vw
• Textzeilenhöhe: 1em

Position

Positionieren Sie auch das Modul neu.

• Position: Absolut
• Ort: Unten links
• Vertikaler Versatz: 2%
• Horizontaler Versatz: 2%

Textmodul in Spalte 3 klonen & Duplikat in Spalte 4 platzieren

Sie können das Textmodul in Spalte 3 klonen und das Duplikat in Spalte 4 platzieren.

Name und Link der Produktkategorie ändern

Stellen Sie sicher, dass Sie den Namen der Produktkategorie zusammen mit dem Link ändern.

Gesamten Abschnitt klonen, um ihn als Dropdown für andere Menüelemente wiederzuverwenden

Sobald Sie das Dropdown-Menü für den ersten Abschnitt erstellt haben, können Sie es zweimal klonen.

Alle Produktkategorienamen und Links ändern

Ändern Sie alle Produktkategorienamen in den neuen Dropdowns.

Abschnitts-CSS-Klassen nacheinander ändern

Zusammen mit dem letzten Abschnitt CSS-Klasse für jedes Duplikat. Stellen Sie sicher, dass Sie einer fortlaufenden Reihenfolge folgen.

• CSS-Klasse: Dropdown-Menü Dropdown-Menü-2

• CSS-Klasse: Dropdown-Menü Dropdown-Menü-3

4. CSS- und JQuery-Code hinzufügen

Neues Codemodul über dem Menümodul hinzufügen

Nachdem wir nun alle Menüelemente eingerichtet haben, ist es an der Zeit, die Dropdown-Menüs des eCommerce-Megamenüs in unserem Menü zu platzieren. Dazu fügen wir einem neuen Codemodul Code hinzu. Platzieren Sie dieses Codemodul direkt über dem Menümodul Ihres zweiten Abschnitts.

CSS-Code einfügen

Öffnen Sie das Code-Modul und fügen Sie die folgenden CSS-Codezeilen zwischen den Style-Tags hinzu, wie Sie im Druckbildschirm unten sehen können :

/* Enable class below once you're done editing the menu */ 
   
/*
.dropdown-menu {
visibility: hidden;
}
*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: 0px;
right: auto;
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #FF6600; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}

JQuery-Code einfügen

Fügen Sie den JQuery-Code zwischen Skript-Tags hinzu, wie Sie auch im Druckbildschirm unten sehen können .

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. Aktivieren Sie die CSS-Klasse, wenn Sie mit der Anpassung des Menüs fertig sind

Sobald Sie alle Dropdown-Bereiche angepasst haben, müssen Sie nur noch eines tun: sie auf den ersten Blick ausblenden. Dadurch wird verhindert, dass das Dropdown-Menü beim Laden der Seite angezeigt wird. Sobald Sie diese CSS-Klasse aktivieren, werden die Dropdown-Abschnitte im Visual Builder nicht mehr angezeigt, Sie können jedoch im Wireframe-Modus darauf zugreifen und/oder die CSS-Klasse vorübergehend deaktivieren, wenn Sie Änderungen an Ihren Dropdown-Abschnitten vornehmen. Um die Klasse zu aktivieren, entfernen Sie die Klammern '/* */' am Anfang und am Ende der CSS-Klasse.

6. Speichern Sie die Änderungen am Divi Theme Builder

Nachdem Sie den globalen Header ausgefüllt haben, stellen Sie sicher, dass Sie alle Änderungen im Divi Theme Builder speichern, bevor Sie das Ergebnis auf Ihrer Website anzeigen!

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein benutzerdefiniertes eCommerce-Megamenü in Divis Theme Builder erstellen. Wir haben die Dropdowns mit den integrierten Elementen von Divi erstellt und mit etwas Code kombiniert, der dabei hilft, das Menü entsprechend mit den Dropdowns zu verbinden. Dieser Ansatz ermöglicht es Ihnen, Ihr eCommerce-Dropdown-Menü über verschiedene Bildschirmgrößen hinweg vollständig anzupassen, ohne ein Plugin zu verwenden! Sie konnten auch die JSON-Datei herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

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.