Cum se Creează un Meniu Popup Receptiv

Notă! Unele linkuri de pe această pagină pot fi linkuri afiliate, ceea ce înseamnă că, dacă alegeți să efectuați o achiziție, pot câștiga un mic comision fără costuri suplimentare pentru dvs. Apreciez foarte mult sprijinul dvs.!

Loading

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:

  1. Este captivant, funcțional și frumos
  2. Este receptiv pe mobil

Proiectați Popup-ul și Conținutul Acestuia

  1. 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.)
  2. 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

  1. Lățime: Setată la 85vw
  2. Suprapunere: Ascundeți
  3. Animație de intrare: Fade In
  4. Durata animației: 2 secunde

Popup > Fila Stil

Pop-up

Box Shadow: Setați-le așa cum doriți.

Butonul de închidere

  1. Poziție verticală: 4
  2. Culoare: setați culoarea la #878787
  3. 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

  1. Lățimea conținutului: lățime completă
  2. 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.

Sfat:
Acum este un moment bun pentru a ajusta setările mobile ale titlurilor.

Creați restul elementelor de meniu

  1. Faceți clic dreapta pe mânerul Widgetului Titlu și alegeți Duplicare.
  2. Repetați duplicarea pentru câte elemente de meniu aveți nevoie.
  3. 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.

  1. Sub Secțiune > Aspect > Lățime, setați Lățime completă.
  2. Sub Secțiune > Aspect > Decalaj coloane, setați Fără decalaj.
  3. Sub Secțiune > Avansat > Padding, setați 30 pentru Sus, 70 pentru Dreapta, 50 pentru Jos și 70 pentru Stânga.
  4. 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

  1. Editați elementele rețelei sociale după cum este necesar.
  2. Skin: Minimal
  3. Aliniere: Stânga

Butoane de distribuire > Stil

  1. Dimensiunea butonului: 1
  2. 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

  1. Culoare de fundal: setată la #000000 (negru)
  2. A doua culoare: setată la #000000 (negru)
Notă:
Deși noua culoare de fundal a fost setată, nu o veți vedea încă, deoarece nu există încă conținut în coloană.

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

  1. Margin: setată la 130 numai pentru partea de jos
  2. 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

  1. Faceți clic pe X din extrema dreaptă a câmpurilor Nume și Mesaj, deoarece avem nevoie doar de e-mail pentru acest exemplu.
  2. Dimensiune de intrare: Medie
  3. E-mail > Conținut > Lățimea coloanei: 80%

Buton de trimitere

  1. Dimensiune: Medie
  2. Lățimea coloanei: 20%
  3. Alinierea: dreapta
  4. Pictogramă: Săgeată lungă la dreapta

Formular > Stil

Formă

  1. Column Gap: 0
  2. Row Gap: 0

Câmp

  1. Culoare text: alb
  2. Culoare de fundal: Transparent
  3. Culoare chenar: alb
  4. Lățimea chenarului: 1 numai pentru partea de jos
  5. Tipografie > Dimensiune: 10

Buton

  1. Culoare de fundal: Transparent
  2. Culoare text: Alb
  3. Chenar: Solid
  4. Lățimea chenarului: 1 numai pentru partea de jos
  5. 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

  1. Culoare text: negru (#000000)
  2. 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)

  1. Culoare: rgba(0,0,0,0.21)
  2. Umbră casetă > Orizontală: 0
  3. Box Shadow > Vertical: 10
  4. Box Shadow > Blur: 30
  5. Box Shadow > Spread: -10 (negativ 10)
  6. Poziție: Contur

Box Shadow (Hover)

  1. Culoare: rgba(0,0,0,0.21)
  2. Umbră casetă > Orizontală: 0
  3. Umbră casetă > Verticală: 15
  4. Box Shadow > Blur: 40
  5. Box Shadow > Spread: -10 (negativ 10)
  6. Poziție: Contur

Trageți într-un Widget Imagine sub titlu

Imagine

Nu alegeți încă o imagine

  1. Dimensiune imagine: Complet
  2. Aliniere: Stânga

Acum faceți clic dreapta pe mânerul Widgetului Titlu , duplicați-l și ajustați stilul widgetului duplicat.

Titlu > Stil

  1. Mărime: 15
  2. 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.

  1. 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ă.
  2. Pentru fiecare coloană, editați widget-ul Imagine, alegând o imagine. Chiar și imaginile .gif funcționează bine aici.
  3. 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

  1. 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

  1. Link: faceți clic pe pictograma Dynamic și selectați Acțiuni > Popup
  2. Faceți clic din nou pe Popup și sub Acțiune, alegeți Comutați Popup
  3. Î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.

Bonus:
Adăugați efecte de animație de intrare pe oricare dintre widget-urile dvs. pentru a adăuga efecte interesante. Doar editați un widget, accesați fila Avansat, alegeți una dintre animațiile de intrare enumerate acolo.

Pentru confortul dvs. urmăriți acest tutorial și în format Video. Video creat de echipa de asistență Elementor.

Notă! Ați găsit util acest articol? Atunci veți aprecia sprijinul oferit de Elementor în realizarea acestui tutorial. Experimentați construcția unui site cu Elementor astăzi și obțineți un site web modern, pre-securizat, pre-optimizat. Alegeți licența care vi se potrivește astăzi, treceți la versiunea Pro.

Documentație adițională

S-ar putea să te intereseze și:

Despre Admin Staff

Comunitatea WordPress este un Blog strict Educativ pentru utilizatorii de WordPress. Nu este Agenție de WEB, Publicitate sau Marketing! Dacă sunteți firmă și aveți nevoie de sfaturi vă ajut cu plăcere, pentru contracte de colaborare, vă rog contactați agenții specializate, care vă pot oferi documentația fiscală necesară. Sunt pasionat de WordPress și tot ce se leagă de mediul online din 2011, scriu din pasiune și-mi place să ajut, doar prin prisma acestui fapt că-mi place să fac bine oamenilor care au aceeași pasiune. Blog-ul este monetizat prin link-uri de afiliere și Google Adsense, unde se plătesc taxe legale de către platformele respective. Dacă dorești să susții acest blog, sunt deschis pentru donații. Vă mulțumesc pentru înțelegere! George CRIȘAN , Administrator Comunitatea WordPress!

Lasă un comentariu