Cum să creați un mega meniu personalizat de comerț electronic cu Divi's Theme Builder

Atunci când creați un site web de comerț electronic folosind Divi și WooCommerce, există o mulțime de moduri de a personaliza aspectul general al site-ului dvs. web. Modulele WooCommerce ale Divi în combinație cu Divi Theme Builder vă permit să creați șabloane pentru paginile dvs. de produse, pagini de categorii și multe altele. Dar, pe lângă asigurarea faptului că structura site-ului dvs. web și paginile WooCommerce sunt pregătite pentru lansare, este important să vă gândiți și la experiența de navigare pe care o vor avea vizitatorii. Meniul pe care îl creați pentru site-ul dvs. de comerț electronic dă tonul comportamentului de cumpărare al vizitatorilor pe site-ul dvs. web.

Pentru a vă ajuta site-ul web de comerț electronic să-și atingă potențialul maxim, vă vom arăta cum să creați un mega meniu personalizat de comerț electronic cu Divi's Theme Builder. Vom construi totul vizual, folosind elementele încorporate ale Divi și le vom folosi ca meniuri derulante cu un anumit cod. Folosind această abordare, veți putea crea orice fel de mega meniu de comerț electronic pentru site-urile de comerț electronic pe care le creați! Veți putea descărca gratuit fișierul JSON.

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați gratuit aspectul Mega Menu Layout eCommerce

Pentru a pune mâna pe aspectul gratuit al mega meniului eCommerce, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Cum se încarcă fișierul JSON

Dezarhivați fișierul zip pe care l-ați putut descărca mai sus. Apoi, navigați la site-ul dvs. WordPress> Divi> Biblioteca Divi și încărcați JSON.

După ce aspectul dvs. este salvat în Biblioteca Divi, puteți naviga la Divi Theme Builder și puteți importa aspectul salvat făcând clic pe „Adăugați antet global” sau „Adăugați antet personalizat” și selectând „Construiți antet global / personalizat”. Accesați fila „Aspectele dvs. salvate” din Biblioteca Divi, selectați aspectul pe care l-ați încărcat în pasul anterior și salvați toate modificările Divi Theme Builder.

Pentru a avea un meniu funcțional chiar lângă bat, vi se va cere să parcurgeți prima parte a acestui tutorial de mai jos; adăugarea claselor CSS la elementele de meniu la nivel individual. De asemenea, va trebui să activați una dintre clasele CSS din modulul de cod, așa cum se arată în partea 5 a acestui tutorial. Dacă pictogramele nu se afișează corect, asigurați-vă că verificați conținutul pictogramei din modulul de cod. Pictogramele trebuie să conțină conținutul „\ 4c” și „\ 21” așa cum puteți observa în ecranul de imprimare de mai jos.

1. Adăugați clase CSS la elementele de meniu

Accesați Meniuri în aparență

În prima parte a acestui tutorial, vom atribui două clase CSS diferite elementelor de meniu la care dorim să adăugăm un meniu drop-down. Pentru aceasta, accesați meniurile din setările de aspect ale tabloului de bord WordPress.

Activați opțiunea CSS Class

Asigurați-vă că opțiunea clasei CSS este activată în partea de sus, comutând opțiunile de ecran și activând opțiunea clase CSS.

Adăugați clase CSS consecutive la articolele din meniu care necesită o listă verticală

Fiecare dintre elementele de meniu cărora doriți să le atribuiți un mega meniu derulant are nevoie de două clase CSS. În primul rând, o clasă CSS generală numită „primul nivel”. A doua clasă CSS conține un număr consecutiv la sfârșitul acesteia, „primul-nivel-1”, „primul-nivel-2”, „primul-nivel-3” etc.

• Primul element de meniu care conține meniul derulant: primul nivel primul-nivel-1
• Al doilea element de meniu care conține meniul derulant: primul nivel primul-nivel-2
• Al treilea element de meniu care conține meniul derulant: primul nivel primul-nivel-3

2. Creați Header Global cu Divi's Theme Builder

Accesați Divi Theme Builder și începeți să creați antet global

Odată ce elementele de meniu sunt la locul lor, este timpul să treceți la Divi. Vom crea un nou antet global navigând la Divi Theme Builder și făcând clic pe „Adăugați un antet global”. Vom construi antetul global de la zero.

Secțiunea # 1 Setări

Spațiere

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și eliminați toate căptușelile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Vizibilitate

Ascundeți această secțiune pe tabletă și telefon în continuare. Menținem această secțiune doar pe dimensiuni de ecran mai mari pentru a ne asigura că experiența de navigare pe dimensiuni de ecran mai mici nu devine copleșitoare.

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 95%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați modulul de imagine în coloana 1

Încărcați sigla

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați sigla.

Spațiere

Treceți la fila de proiectare a modulului și adăugați o marjă de sus.

• Marja superioară: 3%

Adăugați un modul de text în coloana 2

Adauga continut

Treceți la coloana următoare. Adăugați un modul text cu un conținut la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Oswald
• Greutate font text: mediu
• Stil de text text: majuscule
• Culoarea textului: # 000000
• Dimensiune text: 19 px

Spațiere

Adăugați și câteva margini de sus și de jos.

• Marja superioară: 5%
• Marja inferioară: 5%

Clonați modulul de text de două ori și plasați duplicatele în coloanele 3 și 4

Modificare copiere

După ce ați finalizat primul modul de text din coloana 2, îl puteți clona de două ori și plasa duplicatele în coloana 3 și 4. Asigurați-vă că schimbați conținutul în ambele module duplicate.

Adăugați secțiunea 2

Spațiere

Adăugați o altă secțiune chiar sub cea anterioară. Deschideți setările secțiunii și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Apoi, accesați setările de margine și aplicați o margine de sus și de jos.

• Lățimea marginii superioare:
  • Desktop: 2 px
  • Tabletă și telefon: 0 px
• Lățimea marginii inferioare: 2 px
• Culoare margine: # ff6600

Adăugați modulul de meniu în coloană

Selectați Meniu

Adăugați un modul de meniu în coloana rândului și selectați un meniu la alegere.

Adăugați sigla pe tabletă și telefon

Apoi, adăugați o siglă pe tabletă și telefon, activând opțiunile de reacție și încărcând fișierul dvs. de imagine siglă. Lăsați spațiul desktop gol.

Elemente

Activăm și coșul de cumpărături și pictogramele de căutare.

• Afișați pictograma coșului de cumpărături: Da
• Afișați pictograma de căutare: Da

Setări text meniu

Treceți la fila de proiectare și modificați setările pentru textul meniului după cum urmează:

• Font de meniu: Oswald
• Stilul fontului meniului: majuscule
• Culoare text meniu: # 000000
• Dimensiune text meniu: 19 px

Setări text din meniul drop-down

Schimbăm și culoarea liniei meniului derulant.

• Meniu drop-down Culoare linie: #ffffff

Setări pictograme

Împreună cu setările de pictograme.

• Culoare pictogramă coș de cumpărături: # ff6600
• Culoare pictogramă de căutare: # ff6600
• Culoare pictogramă meniu hamburger: # ff6600

Clasa CSS

Completați setările modulului adăugând o clasă CSS. Vom folosi această clasă CSS mai târziu în tutorial când vom adăuga codul.

• Clasa CSS: categorie-meniu

3. Construiți șablonul dropdown Row Inside Header

Adăugați o secțiune nouă (dedicată meniului drop-down pentru primul element de meniu)

Dimensionare

Acum, că avem meniul în poziție, este timpul să treceți la următoarea parte a tutorialului dedicat creării meniurilor drop-down pentru mega meniu eCommerce. Pentru a construi primul meniu derulant mega-eCommerce, vom adăuga o nouă secțiune. Deschideți setările secțiunii și asigurați-vă că lățimea și lățimea maximă sunt setate la 100% în setările de dimensionare.

• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Clasa CSS

Apoi, adăugați două clase CSS. Numărul de la sfârșitul celei de-a doua clase CSS este același număr ca și numărul utilizat pentru primul element de meniu din prima parte a acestui tutorial.

• Clasa CSS: meniu derulant meniu derulant-1

Adăugați un rând nou la secțiune

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și adăugați o culoare de fundal albă.

• Culoare fundal: #ffffff

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați și toate umpluturile implicite, de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Și aplicați o margine inferioară.

• Lățimea marginii inferioare: 2 px
• Culoarea chenarului inferior: # ff6600

Setările coloanelor 1 și 2

Apoi, deschideți setările coloanei 1 și 2 individual.

Spațiere

Adăugați următoarele valori de umplere receptivă la ambele coloane:

• Căptușeală superioară:
  • Desktop și tabletă: 10%
  • Telefon: 5%
• Căptușeală inferioară:
  • Desktop și tabletă: 10%
  • Telefon: 5%
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Element principal CSS

Împreună cu o linie de cod CSS. Acest lucru ne va ajuta să plasăm coloanele una lângă cealaltă și pe dimensiuni de ecran mai mici.

width: 50% !important

Coloana 3 Setări

Fundal de gradient

Accesați setările coloanei 3. Aplicați următorul fundal de gradient:

• Culoare 1: rgba (0,0,0,0,08)
• Culoarea 2: # 0a0a0a
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Încărcați următoarea imagine de fundal la alegere.

Element principal CSS

Și adăugați o margine dreaptă la coloană folosind o linie de cod CSS.

margin-right: 10px !important;

Vizibilitate

Pentru a ne asigura că meniul drop-down mobil nu este prea copleșitor, ascundem întreaga coloană pe tabletă și telefon.

Coloana 4 Setări

Fundal de gradient

Apoi, avem a patra coloană. Adăugați același fundal de gradient.

• Culoare 1: rgba (0,0,0,0,08)
• Culoarea 2: # 0a0a0a
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Încărcați și aici o imagine de fundal.

Vizibilitate

Și ascundeți coloana de pe tabletă și telefon.

Adăugați un modul de text în coloana 1

Adăugați numele categoriei de produse în caseta de conținut

E timpul să adăugați module! Puteți plasa orice doriți în acest meniu derulant. Folosim module de text, începând cu unul din coloana 1. Adăugați un nume de categorie.

Adăugați un link de categorie de produs

Adăugați linkul la această categorie în continuare.

Setări text

Treceți la fila de proiectare și modificați setările de text după cum urmează:

• Font text: Oswald
• Stil de text text: majuscule
• Culoarea textului: # 000000
• Mărimea textului:
  • Desktop: 22 px
  • Tabletă: 18 px
  • Telefon: 16 px
• Spațiere scrisoare text: -0,6px
• Înălțimea liniei de text: 2.4em

Frontieră

Adăugați și o margine de jos.

• Lățimea marginii inferioare: 2 px
• Culoare margine inferioară:
  • Implicit: rgba (0,0,0,0)
  • Plasați cursorul: # ff6600

Clonați și modificați modulul text de câte ori este necesar

După ce ați finalizat-o pe prima, o puteți clona de câte ori doriți și puteți răspândi duplicatele atât în ​​coloana 1, cât și în 2.

Schimbați titlurile și linkurile categoriei de produse

Asigurați-vă că modificați toate numele și linkurile categoriilor de produse.

Adăugați un modul de text în coloana 3

Adăugați numele categoriei de produse

La a treia coloană. Adăugați un nou modul de text și introduceți numele categoriei de produse.

Adăugați un link de categorie de produs

Adăugați și linkul.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Oswald
• Greutatea fontului textului: Bold
• Stil de text text: majuscule
• Culoarea textului: #ffffff
• Dimensiune text: 3.4vw
• Înălțimea liniei de text: 1em

Poziţie

Repoziționați și modulul.

• Poziție: Absolută
• Locație: în partea stângă jos
• Decalaj vertical: 2%
• Decalaj orizontal: 2%

Clonați modulul text în coloana 3 și plasați duplicatul în coloana 4

Puteți clona modulul text în coloana 3 și plasa duplicatul în coloana 4.

Schimbați numele și linkul categoriei de produse

Asigurați-vă că schimbați numele categoriei de produse împreună cu linkul.

Clonați întreaga secțiune pentru reutilizare ca listă derulantă pentru alte elemente de meniu

De îndată ce ați creat prima listă derulantă, o puteți clona de două ori.

Schimbați toate numele și linkurile categoriilor de produse

Schimbați toate numele categoriilor de produse în noile meniuri derulante.

Modificați secțiunile claselor CSS consecutive

Împreună cu ultima secțiune clasa CSS pentru fiecare duplicat. Asigurați-vă că urmați o comandă consecutivă.

• Clasa CSS: meniu derulant meniu derulant-2

• Clasa CSS: meniu derulant meniu derulant-3

4. Adăugați cod CSS și JQuery

Adăugați un nou modul de cod deasupra modulului de meniu

Acum că avem toate elementele de meniu la locul lor, este timpul să plasați meniurile derulante pentru meniul eCommerce în meniul nostru. Pentru a face acest lucru, vom adăuga un cod la un nou modul de cod. Plasați acest modul de cod chiar deasupra modulului de meniu din a doua secțiune.

Introduceți codul CSS

Deschideți modulul de cod și adăugați următoarele linii de cod CSS între etichetele de stil așa cum puteți vedea în ecranul de imprimare de mai jos :

/* 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;
}

Introduceți codul JQuery

Adăugați codul JQuery între etichetele de script așa cum puteți vedea și pe ecranul de imprimare de mai jos .

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. Activați clasa CSS după ce ați terminat Personalizarea meniului

De îndată ce ați terminat de personalizat toate secțiunile drop-down, veți mai avea un lucru de făcut: ascunderea lor la prima vedere. Acest lucru va împiedica afișarea meniului derulant la încărcarea paginii. După ce activați această clasă CSS, nu veți mai vedea secțiunile drop-down din Visual Builder, dar veți putea să le accesați în modul wireframe și / sau să dezactivați temporar clasa CSS atunci când faceți modificări la secțiunile drop-down. Pentru a activa clasa, eliminați parantezele „/ * * /” de la începutul și sfârșitul clasei CSS.

6. Salvați modificările Divi Theme Builder

După ce ați finalizat antetul global, asigurați-vă că salvați toate modificările Divi Theme Builder înainte de a vizualiza rezultatul pe site-ul dvs. web!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un mega meniu personalizat de comerț electronic în Divi's Theme Builder. Am construit drop-down-urile folosind elementele încorporate ale Divi și le-am combinat cu un cod care ajută la conectarea meniului la dropdown-uri în consecință. Această abordare vă permite să vă personalizați complet meniul derulant de comerț electronic, pe diferite dimensiuni de ecran, fără a utiliza un plugin! Ați putut descărca și fișierul JSON. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.