Cum să încorporați galeriile Divi în comutare pentru a crea un meniu de restaurant personalizat

Utilizarea comutatorilor pe pagina dvs. web este o modalitate excelentă de a vă organiza conținutul într-un mod curat și concis. Acest lucru vă poate ajuta să îmbunătățiți experiența utilizatorului, reducând defilarea și oferind utilizatorului mai mult control asupra a ceea ce vrea să vadă pe pagina dvs. Un meniu de restaurant online este un bun exemplu în care comutatoarele pot funcționa bine. Un utilizator poate găsi cu ușurință elementul de meniu care îi place și face clic pe element pentru mai multe informații.

În acest tutorial, vă voi arăta cum să creați câteva comutatoare intuitive și mobile pentru meniul restaurantului dvs. folosind comutatoare Divi. Vă voi arăta chiar și cum optimizați comutarea pentru mobil și încorporați galeriile de imagini Divi în interiorul conținutului de comutare pentru a prezenta fotografii uimitoare cu anumite feluri de mâncare.

Să începem.

Înainte și după

Iată o scurtă privire despre înainte și după proiectarea meniului restaurantului pe care îl vom construi.

Inainte de

După

Noțiuni de bază

Înlocuirea afișajului galeriei WordPress cu afișajul galeriei Divi

Divi vă permite să înlocuiți afișajul implicit al Galeriei WordPress cu un afișaj al Galeriei Divi. Deci, ori de câte ori creați o galerie WordPress și o încorporați în pagina dvs., galeria va fi afișată ca o galerie utilizând modulul Divi Gallery. Acest lucru vă permite să adăugați galerii de imagini Divi la orice modul din Divi Builder (mai multe despre acest lucru mai târziu). Pentru a implementa această modificare, navigați la Divi> Opțiuni temă. Sub fila General, faceți clic pentru a activa opțiunea Divi Gallery.

Setarea culorii accentului tematic (opțional)

Deoarece vom introduce o galerie Divi într-un modul de comutare, culoarea pictogramei care se afișează atunci când treceți peste o imagine din galerie va moșteni automat culoarea de accent pe care ați setat-o ​​pentru tema Divi. Puteți seta culoarea accentului temei din tabloul de bord WordPress navigând la Divi> Personalizator temă> Setări generale> Setări aspect. Sub Setări aspect, actualizați culoarea accesului la temă la următoarele:

Culoarea accentului tematic: # a06d51

Aceasta este culoarea care se va potrivi cu aspectul meniului de panificație pe care îl vom folosi pentru acest tutorial.

Actualizarea dimensiunii implicite a pictogramei în Customizerul modulului (opțional)

Pentru acest design, m-am gândit că ar fi util să afișez o pictogramă de comutare mai mare atunci când utilizați modulul Divi Toggle. Puteți modifica dimensiunea implicită a modulului Toggle navigând la Divi> Modul personalizator. Apoi selectați Modulul de comutare din listă și actualizați dimensiunea pictogramei după cum urmează:

Comutați la dimensiunea pictogramei: 32

Configurarea noii pagini cu aspectul paginii din meniul de panificație

Pentru început, va trebui să creați o pagină nouă, să dați un titlu paginii dvs. și să implementați Divi Builder. Selectați opțiunea „Alegeți un aspect premade”.

Din fereastra pop-up de încărcare din bibliotecă, alegeți pachetul de aspect de brutărie, apoi faceți clic pentru a utiliza aspectul paginii de meniu de brutărie.

Odată ce aspectul a fost încărcat în pagină, publicați pagina. Apoi faceți clic pe butonul „Build on Front End”. și apoi publicați pagina. Apoi faceți clic pentru a construi pe partea frontală.

După ce ați terminat, sunteți gata să începeți proiectarea meniului!

Implementarea designului meniului restaurantului personalizat cu comutatoare Divi și galerii de imagini

Proiectarea unui element de meniu Comută

Cu Divi Builder activ în partea din față, adăugați un modul Toggle sub modulul text cu subtitlul pe care scrie „Sweet Tooth”.

Pentru moment, puteți lăsa conținutul simulat implicit utilizat pentru titlul și conținutul corpului. Dar va trebui să adăugați un preț pentru elementul de meniu din conținutul corpului filei. Faceți clic pe fila Text (în loc de Visual) și adăugați următorul html sub textul implicit curent.

<h5>$8.00</h5>

Apoi începeți să actualizați setările de comutare după cum urmează:

• Culoare pictogramă: # a06d51
• Deschideți comutați culoarea textului: # 333333
• Comutare închisă Culoare text: # 333333
• Comutare închisă Culoare fundal: #ffffff

• Titlu Font: Patua One
• Greutatea fontului titlului: Bold
• Titlu Stil Font: TT
• Spațierea literelor de titlu: 1 px
• Înălțimea liniei de titlu: 4em
• Împletire personalizată: 0 px sus, 0 px jos

Pentru a mări suprafața care poate fi făcută clic pe titlul de comutare, înălțimea liniei de titlu este mărită, iar umplutura de sus și de jos este eliminată.

Acum să adăugăm o margine stângă la comutatorul nostru.

• Lățimea marginii stânga: 5 px
• Culoare margine stângă: # a06d51

Adăugarea unei galerii de imagini la modulul Toggle

După cum sa menționat mai devreme, când activați opțiunea Divi Gallery în Opțiunile temei Divi, o încorporare a galeriei WordPress va lua stilul unei galerii Divi. Acest lucru vă permite să încorporați o galerie de imagini în stil Divi în orice modul. Pentru acest exemplu, dorim să adăugăm câteva imagini în interiorul modulului de comutare pentru a afișa câteva imagini ale unui anumit element din meniul restaurantului. Pentru a face acest lucru, deschideți setările de comutare și faceți clic pe butonul Adăugați media de deasupra casetei de conținut.

În fereastra pop-up Media Library, selectați fila Creați galerie din stânga. Apoi selectați imaginile pe care doriți să le utilizați pentru galerie și faceți clic pe „Creați o galerie nouă”.

În secțiunea Editare galerie a ferestrei pop-up, ignorați setările galeriei, deoarece stilurile galeriei Divi vor suprascrie aceste setări ale galeriei WordPress. Apoi faceți clic pe butonul Inserare galerie.

Aceasta plasează un cod scurt al galeriei în conținutul modulului de comutare. Dacă doriți ca galeria să fie afișată după textul curent al corpului, asigurați-vă că plasați codul scurt după conținut.

Reglarea căptușirii rândurilor pentru smartphone

Conținutul va deveni destul de strâns odată cu spațiul actual al aspectului premade. Trebuie să actualizăm setările rândurilor pentru a crea mai mult spațiu pe smartphone. Pentru a face acest lucru, deschideți setările rândului care conține comutatorul meniului restaurantului și actualizați următoarele:

• Completare personalizată (telefon): 0 px la stânga, 0 px la dreapta

Duplicați comutatorul după cum este necesar

Pentru a adăuga mai multe elemente de meniu, pur și simplu copiați modulul Comutare și actualizați conținutul cu text și galerii noi de imagini, după cum este necesar. După aceea, puteți șterge elementele de meniu originale care au venit cu aspectul premade.

Rezultat final

Acum să verificăm rezultatul final al designului.

Modificarea numărului de coloane din galerie

În mod implicit, galeria are un aspect care rămâne trei coloane pe toate lățimile și dispozitivele browserului. Cu toate acestea, cu efectul lightbox, utilizatorii vor putea vedea o versiune mai mare atunci când fac clic pe elementul galeriei. Deci, imaginile mai mici pot funcționa în continuare. Dar, dacă doriți să modificați numărul de coloane, puteți adăuga oricând un mic fragment de CSS. Pentru acest exemplu, voi schimba galeria pentru a afișa imaginile în două coloane. Pentru a face acest lucru, deschideți mai întâi setările de comutare și adăugați o clasă CSS personalizată după cum urmează:

Clasa CSS: două col-gal

Apoi deschideți setările paginii și adăugați următoarele CSS personalizate:

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

Schimbarea culorii suprapunerii Galeriei de imagini în Modulul de personalizare

Dacă doriți să schimbați culoarea suprapunerii cu elementul galeriei fără a fi nevoie să utilizați CSS personalizat, puteți modifica setările implicite pentru modulul galerie din Customizerul modulului. Pentru a face acest lucru, navigați la Divi> Module Customizer. Apoi faceți clic pe modulul Galerie și schimbați culoarea suprapunerii cu mouse-ul la orice doriți.

Gânduri finale

Din fericire, acest tutorial suscită o inspirație pentru modul de utilizare a modulului Divi Toggle pentru a crea niște meniuri minunate pentru restaurante. Ca bonus, este posibil să fi învățat un nou truc pentru a încorpora unele galerii Divi în orice modul dorit (nu doar pentru a comuta). Singura limitare este personalizarea numărului de coloane pe care doriți să le afișeze în încorporarea galeriei. Cu toate acestea, puteți adăuga un mic fragment de CSS personalizat pentru a vă pune pe drumul cel bun.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!