Meniu Popup Receptiv
Creați un meniu popup receptiv care se lansează de la un buton de meniu din antetul site-ului dvs. În acest articol veți învăța cum să creați un Meniu Popup receptiv care:
- Este captivant, funcțional și frumos
- Este receptiv pe mobil
Proiectați Popup-ul și Conținutul Acestuia
- Accesați Șabloane > Ferestre Pop-up > Adăugați nou și dați un nume noii ferestre pop-up. (O metodă alternativă este să apăsați CMD+E sau CTRL+E pentru a deschide Finder, căutați Popup, alegeți Add New Popup și dați-i un nume.)
- Alegeți un șablon pop-up pre-proiectat sau închideți suprapunerea Bibliotecă și proiectați-vă pop-up-ul de la zero. Pentru acest exemplu, s-a proiectat al lor, dar puteți găsi acest șablon și în Biblioteca dvs. de șabloane Elementor Pro Popups. Doar căutați „meniu” în biblioteca Popups pentru a-l găsi.
Popup > fila Aspect
- Lățime: Setată la 85vw
- Suprapunere: Ascundeți
- Animație de intrare: Fade In
- Durata animației: 2 secunde
Popup > Fila Stil
Pop-up
Box Shadow: Setați-le așa cum doriți.
Butonul de închidere
- Poziție verticală: 4
- Culoare: setați culoarea la #878787
- Marime: 35
Popup > Fila Avansat
Preveniți închiderea prin suprapunere: da
Acum, adăugați o secțiune cu două coloane.
Proiectați Prima coloană
Secțiune > Aspect
- Lățimea conținutului: lățime completă
- Decalaj coloane: fără decalaj
Trageți un Widget Secțiune interioară în prima coloană.
Sub Secțiune > Aspect > Decalaj coloane, setați Fără decalaj.
Sub Secțiune > Avansat, setați Padding de 70 px de jur împrejur.
Secțiune > Avansat
Padding: 70 pentru sus, jos, stânga și dreapta.
Trageți un Widget Titlu în prima coloană.
Sub Stil > Tipografie, setați dimensiunea la 60 și sub Greutate, setați la 100.
Creați restul elementelor de meniu
- Faceți clic dreapta pe mânerul Widgetului Titlu și alegeți Duplicare.
- Repetați duplicarea pentru câte elemente de meniu aveți nevoie.
- Editați textul Titlu pentru fiecare Widget Titlu pentru a eticheta corect fiecare element de meniu
Adăugați un buton în meniu
Trageți un Widget Button sub elementele de meniu și stilați-l după cum doriți.
Sub fila Avansat > Margini, Setați la 70 pentru partea de sus, apoi faceți clic pe pictograma fereastra de vizualizare receptivă, faceți clic pe pictograma Mobile și setați marja Mobile la 40 pentru partea de sus.
Trageți un alt Widget Secțiune interioară în prima coloană de sub Buton.
- Sub Secțiune > Aspect > Lățime, setați Lățime completă.
- Sub Secțiune > Aspect > Decalaj coloane, setați Fără decalaj.
- Sub Secțiune > Avansat > Padding, setați 30 pentru Sus, 70 pentru Dreapta, 50 pentru Jos și 70 pentru Stânga.
- Acum, faceți clic dreapta pe un mâner de coloană și selectați Ștergere pentru a șterge una dintre coloane, lăsându-vă doar cu una.
Adăugați butoane de partajare în meniu
Trageți un widget Butoane de partajare (Pro) în coloană.
Butoane de partajare > Conținut
- Editați elementele rețelei sociale după cum este necesar.
- Skin: Minimal
- Aliniere: Stânga
Butoane de distribuire > Stil
- Dimensiunea butonului: 1
- Culoare: Culoare personalizată și alegeți Negru (#000000)
Proiectați a doua coloană
Faceți clic dreapta pe mânerul coloanei pentru a edita setările coloanei.
Coloană > Stil
Fundal
- Culoare de fundal: setată la #000000 (negru)
- A doua culoare: setată la #000000 (negru)
Creați Formularul Newsletter Subscribe – Call To Action
Trageți un widget Secțiune interioară în această coloană.
Faceți clic dreapta pe un ghid de coloană și selectați Ștergere pentru a șterge una dintre coloane, lăsându-vă doar cu una.
Secțiune interioară > Avansat
- Margin: setată la 130 numai pentru partea de jos
- Padding: setată la 70 pentru sus, 60 pentru dreapta, 70 pentru jos și 60 pentru stânga
Trageți un widget de titlu în coloană
Ajustați textul titlului (adică Înscrieți-vă pentru buletinul nostru informativ) și dimensiunea textului, culoarea etc. după cum este necesar.
Trageți un Widget Form (Pro) sub titlu
Formular > Conținut
Câmpuri formular
- Faceți clic pe X din extrema dreaptă a câmpurilor Nume și Mesaj, deoarece avem nevoie doar de e-mail pentru acest exemplu.
- Dimensiune de intrare: Medie
- E-mail > Conținut > Lățimea coloanei: 80%
Buton de trimitere
- Dimensiune: Medie
- Lățimea coloanei: 20%
- Alinierea: dreapta
- Pictogramă: Săgeată lungă la dreapta
Formular > Stil
Formă
- Column Gap: 0
- Row Gap: 0
Câmp
- Culoare text: alb
- Culoare de fundal: Transparent
- Culoare chenar: alb
- Lățimea chenarului: 1 numai pentru partea de jos
- Tipografie > Dimensiune: 10
Buton
- Culoare de fundal: Transparent
- Culoare text: Alb
- Chenar: Solid
- Lățimea chenarului: 1 numai pentru partea de jos
- Culoare chenar: Alb
Creați afișajul produselor
Trageți un alt Widget Secțiune interioară în această coloană de sub formular.
Secțiune interioară > Avansat
Padding: Setată la 30 numai pentru dreapta
Receptiv
Ascunde pe mobil: Ascunde
Secțiune interioară > Aspect
Decalaj coloane: fără decalaj
Faceți clic dreapta pe un ghid de coloană și selectați Ștergere pentru a șterge una dintre coloane, lăsându-vă doar cu una.
Editați Coloana
Coloană > Avansat
Margin: Setați -60 (minus 60) numai pentru stânga
Faceți clic dreapta pe mânerul Widgetului de antet și copiați titlul titlului buletinului informativ și apoi inserați-l în această coloană.
Titlu > Stil
- Culoare text: negru (#000000)
- Greutate: 700
Titlu > Avansat
Margin: setată la 20 numai pentru stânga
Coloană > Stil
Fundal
Culoare: alb (#ffffff)
Bordură
Raza chenarului: 5 pentru toate părțile
Box Shadow (Normal)
- Culoare: rgba(0,0,0,0.21)
- Umbră casetă > Orizontală: 0
- Box Shadow > Vertical: 10
- Box Shadow > Blur: 30
- Box Shadow > Spread: -10 (negativ 10)
- Poziție: Contur
Box Shadow (Hover)
- Culoare: rgba(0,0,0,0.21)
- Umbră casetă > Orizontală: 0
- Umbră casetă > Verticală: 15
- Box Shadow > Blur: 40
- Box Shadow > Spread: -10 (negativ 10)
- Poziție: Contur
Trageți într-un Widget Imagine sub titlu
Imagine
Nu alegeți încă o imagine
- Dimensiune imagine: Complet
- Aliniere: Stânga
Acum faceți clic dreapta pe mânerul Widgetului Titlu , duplicați-l și ajustați stilul widgetului duplicat.
Titlu > Stil
- Mărime: 15
- Greutate: 300
Acum schimbați formularea pentru fiecare.
Faceți clic dreapta pe mânerul coloanei și duplicați-l de două ori, astfel încât să aveți un total de 3 coloane.
- Editați coloana pentru coloanele din mijloc și ultima, modificând marginile din Coloană > Avansat la -40 pentru Marginea din stânga în coloana din mijloc și -20 pentru Marginea din stânga în ultima coloană.
- Pentru fiecare coloană, editați widget-ul Imagine, alegând o imagine. Chiar și imaginile .gif funcționează bine aici.
- Ajustați textul și marginile după cum este necesar.
Ajustați pentru Mobil
Editați fiecare dintre secțiunile interioare din coloana din stânga
Secțiune interioară > Avansat
- Padding: 25 pentru toate părțile
Faceți clic pe pictograma roată din stânga jos a panoului pentru a reveni la Setările pop-up.
Setări pop-up > Aspect
Latime: 100vw
Formular
Setați câmpul de e-mail și lățimea butonului de trimitere la 80% și, respectiv, 20%.
Setați opțiunile de publicare
Faceți clic pe butonul Publicați. Nu există condiții, declanșatoare sau reguli avansate pentru acest pop-up, așa că faceți clic pe butonul Salvare și închidere.
Editați Șablonul de Antet creat de Elementor al Site-ului dvs.
Accesați Templates > Theme Builder > Anteturi > Selectați antetul dvs. și faceți clic pe Editare cu Elementor
Faceți clic pe mânerul Widgetului butonului meniu pentru a edita widgetul, dacă există, sau pentru a crea unul nou.
Buton
- Link: faceți clic pe pictograma Dynamic și selectați Acțiuni > Popup
- Faceți clic din nou pe Popup și sub Acțiune, alegeți Comutați Popup
- În câmpul Popup, căutați și selectați popup-ul pe care tocmai l-ați creat.
Faceți clic pe butonul Actualizare pentru a salva modificările șablonului antet.
Totul este gata. Accesați site-ul dvs. live, faceți clic pe butonul Meniu din antetul dvs. și vedeți noul Meniu Pop-up Receptiv în acțiune.
Pentru confortul dvs. urmăriți acest tutorial și în format Video. Video creat de echipa de asistență Elementor.