Cum se creează un meniu cu pictograme circulare care se extinde la clic în Divi

Un meniu cu pictograme circulare este o soluție elegantă pentru adăugarea unui meniu simplu pe site-ul dvs. Divi. Acest stil de meniu este intuitiv și funcționează foarte bine ca un meniu fix pentru dispozitivele dvs. mobile. Astăzi, vom arăta cum să creați un meniu cu pictograme circulare în Divi într-un mod care evidențiază cu adevărat capacitățile puternice de design ale Divi Builder. Și vom furniza un fragment JavaScript ușor pentru a deschide și închide meniul pe clic.

Să începem

Trage cu ochiul

Iată o scurtă privire asupra meniului cu pictograme circulare pe care îl vom construi.

Descărcați aspectul meniului Circle Icon GRATUIT

Pentru a pune mâna pe designul acestui tutorial, 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!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi instalată (sau pluginul Divi Builder dacă nu utilizați tema Divi).
2. Creați o pagină nouă în WordPress și activați Divi Builder pentru a edita pagina din partea frontală (vizual build).

Pentru acest tutorial, vom folosi pictogramele încorporate Divi din modulul blurb, deci nu este nevoie de active externe.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Partea 1

Odată ce Divi Builder este activat pentru a edita pagina din partea frontală, adăugați un rând de o coloană la secțiunea obișnuită implicită.

Apoi deschideți setările rândului și adăugați următoarea umplere:

Căptușeală: partea superioară de 300 px

Aceasta este pur și simplu pentru a oferi un spațiu pentru ca elementele de meniu circular să apară la clic.

Crearea pictogramelor meniului cu module Blurb

Blurb # 1

După ce umplutura rândului este la locul său, adăugați un modul de blurb în coloană. Acesta va fi primul din cele 5 blurbs totale pe care le vom adăuga pentru a alcătui meniul nostru cu pictograme circulare. Ne vom referi la aceasta ca blurb # 1.

Apoi actualizați conținutul blurb scoțând titlul și textul corpului. Apoi adăugați o pictogramă la blurb după cum urmează.

Utilizați pictograma: Da
Pictogramă: vezi captura de ecran

În continuare, vom actualiza setările de proiectare după cum urmează:

Culoare pictogramă: # 29a1f2
Pictogramă cerc: DA
Culoare cerc: # 222222
Afișați marginea cercului: DA
Culoarea chenarului cercului: # 29a1f2
Utilizați dimensiunea fontului pictogramei: DA
Pictogramă Dimensiune font: 25 px
Dimensiunea textului corpului: 20 px
Marja: 0 px

Pe lângă stilizarea pictogramei circulare, am adăugat și o dimensiune a textului corpului. Nu există text corporal, dar acest lucru va fi util mai târziu ori de câte ori vom folosi unitatea de lungime em (care este relativă la dimensiunea textului corpului părinte) pentru a spaționa elementele de meniu / blurbs folosind transformarea transformată. Mai multe despre asta mai târziu.

După aceea, scoateți imaginea / pictograma de animație implicită.

Animație imagine / pictogramă: fără animație

Apoi setați indexul Z pentru acest modul la 1, astfel încât să stea deasupra celorlalte care vor sta în spatele acestuia.

Indicele Z: 1

Și, în cele din urmă, scoateți marja de jos implicită sub pictogramă adăugând următorul CSS personalizat în imaginea Blurb.

margin-bottom: 0px;

Blurb # 2

Pentru a crea a doua blurb, pur și simplu dublează blurb # 1.

Apoi deschideți setările pentru noua blurb (blurb # 2) și schimbați pictograma și setați indexul Z înapoi la valoarea implicită (0).

După aceea, să micșorăm pictograma folosind scala de transformare după cum urmează:

Scala de transformare: 70%

Se creează Blurbs # 3, # 4 și # 5

Următoarele trei blurbs pot fi create prin duplicarea blurb # 2 și actualizarea pictogramei pentru fiecare.

Stivuirea Blurbs în aceeași poziție absolută

Starea implicită a meniului nostru va avea toate blurburile într-o poziție absolută, cu cele patru elemente de meniu blurbs stivuite în spatele blurbului pictogramei meniului principal hamburger. Pentru a obține blurbs-urile în aceeași poziție absolută, utilizați caracteristica multiselect (țineți apăsat ctrl / cmd și faceți clic pe fiecare) pentru a selecta toate cele cinci module de blurb. Apoi, deschideți setările pentru una dintre opțiunile selectate pentru a actualiza setările elementului pentru toate cele 5 în același timp.

Apoi adăugați următorul CSS personalizat la elementul principal:

position: absolute !important;
bottom: 20px;
left: 20px;

Aceasta poziționează blurbs în partea stângă jos a rândului.

Poziționarea pictogramelor meniului folosind Transform Translate

Odată ce toate blurburile sunt poziționate pentru starea implicită, putem începe poziționarea elementelor de meniu pentru starea de clic (unde vor ajunge după ce faceți clic pe butonul meniului principal). Pentru a face acest lucru, putem folosi proprietatea de a transforma în cadrul constructorului Divi. Nu există nicio stare de clic disponibilă în generatorul Divi (cum ar fi hover), deoarece acest lucru este gestionat de JavaScript. Așadar, vom poziționa elementele de meniu acolo unde dorim să fie făcute clic acum. Apoi vom folosi Javascript pentru a comuta poziția activată și dezactivată atunci când faceți clic pe butonul meniului principal.

Vrem să menținem blurb # 1 la locul său, deoarece este butonul meniului principal. Cu toate acestea, vrem să mutăm blurb # 2, # 3, # 4 și # 5. Și din moment ce blur-urile noastre sunt acum stivuite în constructorul vizual, haideți să implementăm modul wireframe pentru a actualiza pozițiile pentru fiecare blurb.

Poziția Blurb # 2

Deschideți setările pentru blurb # 2 și actualizați următoarele:

Transformă axa Y Traducere: -10em

Iată noua poziție a blurb # 2.

Poziția Blurb # 3

Deschideți setările pentru blurb # 3 și actualizați următoarele:

Transformă axa Y tradusă: -8.6em
Transformă axa X tradusă: 5em

Iată noua poziție a blurb # 3.

Poziția Blurb # 4

Deschideți setările pentru blurb # 4 și actualizați următoarele:

Transformă axa Y tradusă: -5em
Transformă axa X Traducere: 8.6em

Iată noua poziție a blurb # 4.

Poziția Blurb # 5

Deschideți setările pentru blurb # 5 și actualizați următoarele:

Transformă axa Y Traducere: 0px
Transformă axa X Traducere: 10em

Iată noua poziție a blurb # 5.

Adăugarea de clase CSS personalizate la Blurbs

Pentru ca JavaScript să funcționeze corect, trebuie să adăugăm câteva clase CSS care vor servi drept selectoare pentru stiluri și funcționalități suplimentare.

Adăugați CSS Class la Blurb # 1

În modul de vizualizare wireframe, deschideți setările pentru blurb # 1 și adăugați următoarea clasă CSS:

Clasa CSS: transform_target

Adăugați clase CSS la Blurbs # 2, # 3, # 4 și # 5

Celelalte patru blurbs vor împărți toate aceleași clase CSS, astfel încât să putem utiliza caracteristica multiselectare pentru a selecta Blurb # 2, # 3, # 4 și # 5 și să actualizăm clasa CSS pentru toate cele patru după cum urmează:

Clasa CSS: are-transform toggle-transform-animation

Observați că există două clase CSS separate printr-un spațiu.

Adăugarea CSS extern și JavaScript cu un modul de cod

Odată ce clasele noastre CSS au fost adăugate la blurbs, suntem gata să adăugăm codul nostru la pagină folosind un modul de cod. Pentru a face acest lucru, adăugați un modul de cod sub blurb # 5.

Apoi lipiți următorul cod în modulul de cod:

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

Acesta este CSS-ul extern folosit în combinație cu codul jQuery.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

Și acesta este necesitatea JavaScript pentru a obține elementele din meniul pictogramei circulare pentru a le extinde atunci când faceți clic pe butonul meniu.

Asigurați-vă că păstrați eticheta de style înfășurată în jurul CSS și eticheta de script înfășurată în jurul JavaScript / jQuery.

Verificați rezultatul final al funcționalității pe pagina live.

Adăugarea adreselor URL ale elementelor de meniu

Deoarece acesta este un meniu, cele patru elemente de meniu vor avea nevoie de linkuri / adrese URL. Pentru a adăuga adresele URL necesare pentru fiecare element de meniu, deschideți setările modulului de blurb pentru fiecare dintre cele 4 elemente de meniu și adăugați o adresă URL de modul.

Făcând butonul Meniu lipicios (sau fix)

Deoarece acest meniu este mic și intuitiv pentru dispozitivele mobile, poate doriți să faceți meniul lipicios, astfel încât să rămână fix în partea din stânga jos a browserului.

Pentru a face acest lucru, selectați toate cele cinci blurbs folosind caracteristica multiselectare și apoi actualizați CSS personalizat în elementul principal prin înlocuirea valorii poziției „absolută” cu „fixă”.

position: fixed !important;
bottom: 20px;
left: 20px;

Acum, meniul va rămâne fix în colțul din stânga jos al ferestrei browserului.

Pentru a vă asigura că meniul se află deasupra celuilalt conținut de pe pagină, actualizați indexul z pentru rând după cum urmează:

Indicele Z: 11

Apoi scoateți căptușeala rândului:

Căptușeală: 0 px sus, 0 px jos

Design final

Iată designul final al pictogramei circulare fixe cu un aspect premade.

Și iată-l pe mobil.

Cum se ajustează dimensiunea și spațiul meniului cu ușurință

După cum s-a menționat mai devreme, meniul a fost conceput folosind unitatea de lungime em pentru poziționarea elementului de meniu pe axa x și y (folosind transformarea transformării). Unitatea de lungime em este relativă la dimensiunea textului corpului părinte. Prin urmare, deoarece fiecare dintre modulele noastre de blurb au aceeași dimensiune a textului corpului de 20 px, putem folosi multiselect pentru a schimba textul corpului pentru toate blurbs-urile simultan.

Acest lucru va mări sau micșora distanța dintre elementele de meniu, după cum este necesar.

Și puteți face același lucru și pentru dimensiunea fontului Icon. Pur și simplu utilizați multiselect pentru a regla dimensiunea fontului pictogramei pentru toate elementele de meniu simultan.

Gânduri finale

Cine știa că adăugarea unui meniu fix cu pictogramă circulară la o pagină ar putea fi atât de simplu cu Divi. Este și tipul perfect de meniu pentru mobil! Sigur, sunt necesare câteva fragmente de cod personalizate, dar faptul că puteți proiecta și poziționa starea de clic a elementelor de meniu folosind generatorul vizual este destul de interesant. Nu uitați să explorați diferite culori, dimensiuni și modele de plutire care pot face cu ușurință meniul să se potrivească propriului site web.

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

Noroc!