Cum se utilizează Elementor Loop Grid Widget pe WordPress cu HappyAddons

Proiectarea de site-uri web atrăgătoare din punct de vedere vizual și bine funcționale este o necesitate pentru oricine pentru a crea implicare, a atrage publicul și a stimula vânzările. Pentru a simplifica acest proces, instrumentele de web design precum Elementor și suplimentele sale introduc continuu funcții și module inovatoare.

Loop Grid este un widget atât de nou pe care Elementor și suplimentele sale l-au dezvoltat și lansat pentru noi foarte recent. Widgetul inovator vă permite să vă creați și să afișați conținutul în machete de grilă frumos organizate.

Nu vă faceți griji dacă nu știți prea multe despre acest widget în detaliu. În această postare tutorial, vom acoperi un ghid pas cu pas despre cum să utilizați widgetul Elementor Loop Grid pe WordPress cu HappyAddons. Sper că veți găsi acest tutorial atât util, cât și interesant.

Ce este o grilă de buclă în Elementor?

Loop Grid este un widget Elementor multifuncțional care vă permite să creați machete dinamice pentru a afișa diferite tipuri de conținut pe site-ul dvs. și să le personalizați în orice moment. Acest widget este deosebit de util în afișarea postărilor de blog, a produselor și a conținutului portofoliului în format grilă.

Acest widget este foarte util pentru afișarea conținutului dinamic. De îndată ce postări noi, produse sau conținut dorit sunt publicate, acestea sunt afișate automat prin intermediul widgetului fără introducere manuală. Puteți crea șabloane unice pentru a afișa conținutul după cum doriți.

În secțiunea următoare, vom explica cum să utilizați widgetul pe WordPress. Continuați să citiți!

Cum se utilizează Elementor Loop Grid Widget

Trebuie să aveți următoarele pluginuri instalate pentru a utiliza acest widget pe site-ul dvs. web. Obțineți-le făcând clic pe linkurile atașate mai jos.

• Elementor
• HappyAddons
• HappyAddons Pro

Odată ce sunt gata, începeți să urmați pașii tutorialului așa cum este descris.

Pasul 01: trageți și plasați widgetul Loop Grid pe pagina dvs

Deschideți pagina în care doriți să adăugați widget-ul. Apoi, decideți asupra unei secțiuni pentru a adăuga widget-ul.

Introduceți Happy Loop Grid în caseta de căutare din panoul Elementor. Odată ce apare widget-ul, trageți-l și plasați-l în zona dorită a pânzei.

Pasul 02: Creați un șablon de grilă de buclă

După adăugarea widget-ului, vi se va cere să selectați un șablon de buclă. Dacă aveți deja un șablon gata făcut, îl puteți selecta. În caz contrar, trebuie să creați unul de la zero.

Deci, pentru a crea de la zero, faceți clic pe butonul Creare șablon .

Veți fi direcționat către o pagină nouă. Faceți clic pe butonul Add New în timp ce fila Loop Template este selectată.

Dați un nume șablonului . De exemplu, l-am numit „Loop Template One”. Apoi, apăsați butonul Creare șablon .

Se va deschide o pânză nouă. Din nou, puteți trage și plasa widget-urile pe care doriți să proiectați aspectul șablonului dvs. Loop Grid.

Consultați acest ghid despre cum să creați un pop-up pe site-urile web Elementor.

Pasul 03: Proiectați un aspect pentru șablonul grilă buclă

Să presupunem că vom crea această grilă de buclă pentru a prezenta în mod dinamic postările noastre de blog. Deci, vom folosi widget-urile de post pentru a crea șablonul.

# Postați imaginea recomandată

Afișarea imaginilor caracteristice postărilor este o necesitate în secțiunea grilă de postări. Pentru a face acest lucru, găsiți widgetul și plasați-l pe pânză.

# Postați informații

Adăugând widget-ul Informații despre postare, puteți afișa autorul postării, data publicării și când a fost publicată. Este mai bine să adăugați widget-ul sub imaginea prezentată.

Dacă doriți să eliminați orice element al widget-ului, faceți clic pe pictograma cruce (x) de lângă acesta. În mod similar, pentru a adăuga un element nou, faceți clic pe butonul + Adăugați element .

Accesați fila Stil . Veți avea opțiuni în această filă pentru a schimba culoarea, grosimea și alinierea textelor și pictogramelor widget-ului.

# Titlul postării

Trageți și plasați widgetul Titlul postării sub widgetul Informații postați.

În fila Conținut, veți avea opțiuni pentru a personaliza eticheta HTML, dimensiunea și alinierea. Faceți modificările necesare după cum este necesar.

Accesați fila Stil . Puteți stiliza culoarea titlului și tipografia după cum doriți.

# Postați extras

Adăugând widget-ul Post Extras în șablon, puteți afișa rezumatul sau extrasul postărilor respective în secțiunea Loop Grid. Găsiți și adăugați widgetul Post Extras sub titlu.

În același mod, așa cum se arată mai sus, puteți personaliza culoarea textului și tipografia din fila Stil .

Pasul 04: Optimizați aspectul șablonului pentru dispozitivele mobile

Trebuie să optimizați aspectul șablonului pentru toate tipurile de dispozitive (tablete și telefoane mobile) alături de desktop-uri. În caz contrar, utilizatorii de pe alte dispozitive nu vor avea o experiență bună atunci când explorează acest widget de pe dispozitive mobile și tablete.

Așadar, pentru a optimiza aspectul șablonului, faceți clic pe opțiunea Mod receptiv din subsolul panoului Elementor. Pe șablon va apărea o bară de sus, inclusiv opțiunea de a comuta între diferite moduri de dispozitiv (desktop, tabletă și telefon mobil).

Acum, comutați la diferite moduri de dispozitiv și vedeți dacă aspectul șablonului este perfect pentru diferite dispozitive particulare. Dacă nu este perfect, redimensionați și personalizați elementele șablonului după cum este necesar.

Sperăm că, făcând acest lucru, puteți face șablonul să răspundă pentru toate dimensiunile de ecran.

Iată un ghid despre lucrurile pe care trebuie să le luați în considerare atunci când faceți un site adaptabil pentru dispozitive mobile.

# Publicați șablonul

După ce ați terminat, publicați șablonul făcând clic pe butonul Publicare din panoul Elementor.

Pasul 04: veniți la pânza principală și selectați șablonul de buclă

Vino la pânza principală Elementor. Selectați secțiunea Loop Grid . Sub secțiunea Aspect , veți găsi opțiunea de a alege un șablon de buclă .

Introduceți numele cu care salvați șablonul. Odată tastat, șablonul va apărea în timp real. Faceți clic pe șablon pentru a-l afișa pe pânză.

Odată ce șablonul Loop Grid este selectat, acesta va afișa postările dvs. publicate într-un format de grilă ca imaginea de mai jos.

Grila poate părea incomodă, deoarece vine cu setări implicite. Acum îi puteți personaliza în continuare aspectul.

Pasul 05: Personalizați și stilizați secțiunea Loop Grid

Din secțiunea Aspect, selectați numărul coloanei, postarea pe pagină și înălțimea egală . Faceți configurația necesară după cum este necesar.

Am păstrat trei coloane și trei postări pe pagină pentru acest tutorial.

# Configurați interogarea

După aceea, accesați secțiunea Interogare .

Puteți afișa conținut dintr-o varietate de surse în widgetul Loop Grid. În mod implicit, postările sunt afișate în format grilă. Dar puteți afișa pagini sau pagini de destinație dacă doriți.

Faceți clic pe pictograma drop-down de lângă opțiunea Post Type. Selectați tipul de conținut dorit.

Trebuie să salvați fiecare postare cu o etichetă sau categorie. Dacă doriți să afișați numai conținut de la un anumit autor, etichetă sau categorie, faceți clic pe pictograma + plus de sub Includeți prin.

Selectați Autori sau Termeni . Puteți alege și pe amândouă.

După ce opțiunile Includere sunt selectate, tastați numele și termenii autorilor în câmpurile respective. Instantaneu, conținutul va fi filtrat și numai conținutul acestui autor și termen specific va fi afișat în grila de buclă.

Configurați celelalte opțiuni de interogare după cum doriți. Sper că le poți face singur.

Pasul 06: Configurați opțiunea de paginare pentru secțiunea Loop Grid

Extindeți secțiunea Paginare și încărcare mai mult .

Faceți clic pe pictograma drop-down de lângă Pagination . Selectați opțiunea dorită.

Am selectat Numbers + Previous/Next . Puteți vedea în imagine că această opțiune de paginare a fost afișată sub widget.

Pasul 07: stilizați aspectul widgetului Loop Grid

Accesați fila Stiluri . Veți găsi opțiuni pentru a personaliza și stiliza aspectul, caseta de articole și paginarea widget-ului.

Mai întâi să extindem secțiunea Aspect . Vă va permite să configurați decalajul de coloane și decalajul de rânduri . Faceți acest lucru după cum este necesar.

În mod similar, extindeți secțiunea Caseta cu articole . Puteți adăuga umplutură , tip de fundal (culoare sau imagine), umbră casetă, tipuri de chenar și rază de margine .

Pentru acest tutorial, am adăugat căptușeală, o rază și o culoare de fundal. Fă și tu același lucru.

În același mod, puteți stiliza opțiunile de culoare, tipografie, umplutură, rază, spațiu și paginare ale widget-ului.

Notă: Pare puțin țipând, nu? În această etapă a designului, este posibil să descoperiți că șablonul grilă de buclă trebuie să fie stilizat și personalizat puțin mai mult. Dar cum se face? Este afișat în pasul următor.

Pasul 08: Re-personalizați șablonul de grilă de buclă

În primul rând, trebuie să găsiți șablonul. După cum ați proiectat cu HappyAddons, accesați tabloul de bord WordPress . Apoi, navigați la HappyAddons > Theme Builder > Loop Template .

Găsiți șablonul și deschideți-l cu opțiunea Editare cu Elementor .

De exemplu, am schimbat tipografia textului Continuă citirea >> .

Odată terminat, actualizați modificările.

Pasul 09: Previzualizați modificările

Mergeți din nou la pânza principală. Selectați pictograma drop-down . Apoi, faceți clic pe opțiunea Salvare schiță .

Odată ce schița este salvată, reîncărcați pânza . Veți vedea modificările pe pagină așa cum le-ați făcut pe șablon.

Astfel, puteți personaliza oricând șablonul Loop Grid.

Pasul 10: Publicați designul grilei buclei

Sperăm că secțiunea dvs. Loop Grid este deja gata de publicare. Faceți clic pe butonul Publicare din partea de jos a panoului Elementor.

Notă: asigurați-vă că ați optimizat perfect widget-ul pentru capacitatea de răspuns mobil, așa cum v-am arătat mai sus în optimizarea șablonului Loop Grid. Procesul va fi același și aici.

Cazuri de utilizare obișnuite ale widget-ului Elementor Loop Grid

Până acum, am descris ce este widgetul Loop Grid și cum să îl utilizați pe site-urile dvs. Elementor. Să aruncăm acum o privire rapidă la câteva cazuri de utilizare cruciale ale widget-ului în care poate face o impresie neprețuită.

1. Aspecte blog

Elementor Loop Grid simplifică aspectul blogului, deoarece vă permite să redați postări într-o grilă dinamică și plăcută. Puteți personaliza modul în care va apărea conținutul (postări sau pagini), inclusiv titlurile postărilor, fragmente, imagini, metadate și altele, pentru a asigura un aspect coeziv.

Aflați cum să creați un șablon de postare de blog cu Elementor.

2. Grile de produse

Loop Grid este de neprețuit pe site-urile de comerț electronic pentru a afișa produsele pe o grilă îngrijită și ordonată. Vă permite să afișați imagini, prețuri și descrieri ale produselor, astfel încât clienții să se poată bucura de o experiență bună în timp ce explorează produsele de pe site-ul dvs.

3. Vitrina portofoliului

Widgetul Loop Grid vă permite să vă aranjați desenele, articolele, studiile de caz și piesele din portofoliu într-un aspect convingător. Puteți chiar să schimbați grila pentru a se potrivi cu brandingul dvs., astfel încât portofoliul dvs. să poată fi evidențiat pentru clienții și angajații dvs.

Aflați cum să creați un site de portofoliu.

4. Listări de evenimente

Vă puteți organiza evenimentele într-o formă grafică cu Loop Grid. Vă permite să enumerați vizual informațiile despre evenimente, cum ar fi datele, locurile și descrierile, astfel încât oamenii să poată afla rapid ce urmează.

5. Listări de servicii

De asemenea, vă puteți oferi serviciile într-un format de grilă cu opțiuni de stil. Puteți afișa elemente cheie, cum ar fi titlurile serviciilor, descrierile și fotografiile, astfel încât clienții să poată vedea cu ușurință ceea ce aveți de oferit dintr-o privire.

Închiderea

Sperăm că acum cunoașteți dezavantajele widget-ului Elementor Loop Grid. Odată ce știi cum să folosești bine widgetul, poți crea posibilități infinite de design pentru site-ul tău. Cu funcțiile sale intuitive și ușurința în utilizare, puteți lăsa un impact profesional asupra site-ului dvs. web vizitatorilor captivi.

Am făcut tot posibilul pentru a acoperi tot ceea ce ați putea căuta în această postare. Dacă descoperiți că am omis ceva, anunțați-ne prin caseta de comentarii de mai jos. De asemenea, puteți lăsa un chat în caseta de asistență dacă doriți să aflați mai multe despre produsul nostru.

La final, vă mulțumim pentru timpul acordat și pentru că ați fost alături de noi până la sfârșit. Bucură-te, lectură plăcută!