Creați un Popup pentru Pagina de Arhivă a Magazinului
Cum să Creați un Popup pentru Pagina de Arhivă a Magazinului? Creați o fereastră popup care se integrează perfect în paginile dvs. de arhivă de produse, făcând popup să se simtă ca un element de design natural.
În acest articol veți învăța cum să creați o fereastră Popup pentru Pagina de Arhivă a Magazinului și care:
- Se îmbină în mod natural cu site-ul dvs.
- Afișează pe pagina corespunzătoare categoriei/arhivei de produse
Șabloane de arhivă de produse pentru proiectare
- Accesați WooCommerce > Categorii și creați categorii de produse dacă nu ați făcut-o deja.
- Accesați Șabloane > Creator de teme și creați un șablon de arhivă pentru fiecare categorie de produse. Asigurați-vă că imaginea categoriei dvs. este poziționată într-o zonă care se va coordona cu pop-up-ul pe care îl proiectați, deoarece va fi parte integrantă a întregului efect animat.
Setați opțiunile de publicare ale șabloanelor de arhivă de produse
- Pentru fiecare șablon, setați Condițiile de afișare să includă: Categorii de produse > căutați și selectați categoria relevantă pentru fiecare.
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. Deoarece această fereastră pop-up se va integra strâns cu designul șabloanelor de arhivă de produse, cel mai bine este să vă proiectați propriul dvs. șablon.
- Proiectați conținutul pop-up având în vedere categoria. Lăsați o zonă în partea de sus a ferestrei pop-up cu un spațiu liber, astfel încât imaginea șablonului de arhivă să o suprapună frumos.
- În Setări Pop-up > Aspect, setați Animația intrării la Slide In Left.
- În Setări Pop-up > Avansat, setați Dezactivați derularea paginii la Da.
Setați opțiunile de publicare
- Accesați Setări de publicare > Condiții și setați Include > WooCommerce > Categorii de produse > căutați și selectați categoria relevantă.
- Accesați Declanșatoare și setați Direcția de derulare la Jos și la 8% din derulare. Desigur, ajustați procentul pentru a se potrivi designului dvs., astfel încât fereastra pop-up să se coordoneze cu locul în care aveți imaginea categoriei dvs. afișată pe pagina de arhivă a produsului.
- Accesați Reguli avansate și setați Afișare numai pe dispozitive pe Desktop, deoarece acest concept de design nu va funcționa la fel de bine pe laptop sau mobil. Puteți crea oricând diferite ferestre pop-up și scheme de design pentru acele dispozitive, dacă doriți.
Ajustați șablonul de arhivă de produse
- Accesați Șabloane > Creator de teme pentru a edita șablonul de arhivă de produse care va folosi acest pop-up.
- Editați widgetul de imagine de categorie și accesați fila Avansat și setați Z-Index la 10.000. Acest lucru va permite ca imaginea categoriei să apară deasupra suprapunerii și ferestrei pop-up.
Repetați pașii pentru fiecare categorie de produse, creând un pop-up relevant pentru fiecare. Asigurați-vă că fiecare fereastră pop-up se concentrează pe un produs din categorie care se potrivește bine cu imaginea categoriei. Utilizați Condiții pentru a atribui fiecare fereastră pop-up pe care o proiectați categoriei de produse.
Totul este gata. Acum vizitați paginile live ale categoriilor de produse și vedeți cât de perfect se îmbină ferestrele pop-up cu arhivele dvs.
Pentru confortul dvs. urmăriți acest tutorial și în format Video. Video creat de echipa de asistență Elementor.
