Come utilizzare il widget Elementor Loop Grid su WordPress con HappyAddons

Progettare siti Web visivamente accattivanti e ben funzionali è un must per chiunque possa creare coinvolgimento, attirare pubblico e incentivare le vendite. Per semplificare questo processo, strumenti di web design come Elementor e i suoi componenti aggiuntivi introducono continuamente funzionalità e moduli innovativi.

Loop Grid è un widget così nuovo che Elementor e i suoi componenti aggiuntivi hanno sviluppato e rilasciato per noi di recente. L'innovativo widget ti consente di creare e visualizzare i tuoi contenuti in layout a griglia splendidamente organizzati.

Non preoccuparti se non sai molto di questo widget in dettaglio. In questo post tutorial, tratteremo una guida passo passo su come utilizzare il widget Elementor Loop Grid su WordPress con HappyAddons. Spero che troverai questo tutorial utile e interessante.

Cos'è una griglia ad anello in Elementor?

Loop Grid è un widget Elementor multifunzionale che ti consente di creare layout dinamici per visualizzare diversi tipi di contenuti sul tuo sito web e personalizzarli in qualsiasi momento. Questo widget è particolarmente utile per visualizzare post di blog, prodotti e contenuti del portfolio in formato griglia.

Questo widget è molto utile per visualizzare contenuti dinamici. Non appena vengono pubblicati nuovi post, prodotti o contenuti desiderati, questi vengono visualizzati automaticamente tramite il widget senza inserimento manuale. Puoi creare modelli unici per mostrare il contenuto come desideri.

Nella prossima sezione spiegheremo come utilizzare il widget su WordPress. Continua a leggere!

Come utilizzare il widget della griglia Loop di Elementor

Devi avere i seguenti plugin installati per utilizzare questo widget sul tuo sito web. Ottienili cliccando sui link allegati di seguito.

• Elementor
• HappyAddons
• HappyAddons Pro

Una volta pronti, inizia a seguire i passaggi del tutorial come descritto.

Passaggio 01: trascina e rilascia il widget della griglia del loop sulla tua pagina

Apri la pagina in cui desideri aggiungere il widget. Quindi, scegli una sezione in cui aggiungere il widget.

Digita Happy Loop Grid nella casella di ricerca del pannello Elementor. Una volta visualizzato il widget, trascinalo nell'area desiderata della tela.

Passaggio 02: crea un modello di griglia ad anello

Dopo aver aggiunto il widget, ti verrà chiesto di selezionare un modello di loop. Se hai già un modello già pronto, puoi selezionarlo. Altrimenti, devi crearne uno da zero.

Quindi, per creare da zero, fai clic sul pulsante Crea modello .

Verrai indirizzato a una nuova pagina. Fai clic sul pulsante Aggiungi nuovo mentre è selezionata la scheda Modello loop.

Dai un nome al modello . Ad esempio, lo abbiamo chiamato "Loop Template One". Quindi, premi il pulsante Crea modello .

Verrà aperta una nuova tela. Anche in questo caso, puoi trascinare e rilasciare i widget che desideri progettare il layout del tuo modello Loop Grid.

Consulta questa guida su come creare un popup sui siti Web Elementor.

Passaggio 03: progettare un layout per il modello di griglia ad anello

Supponiamo di creare questa griglia ad anello per mostrare dinamicamente i post del nostro blog. Quindi utilizzeremo i widget del post per creare il modello.

# Pubblica immagine in primo piano

La visualizzazione delle immagini delle funzionalità dei post è un must nella sezione della griglia dei post. Per fare ciò, trova il widget e rilascialo sulla tela.

#Informazioni sui post

Aggiungendo il widget Informazioni sul post, puoi mostrare l'autore del post, la data di pubblicazione e quando è stato pubblicato. È meglio aggiungere il widget sotto l'immagine in primo piano.

Se desideri rimuovere qualsiasi elemento del widget, fai semplicemente clic sull'icona a forma di croce (x) accanto ad esso. Allo stesso modo, per aggiungere un nuovo elemento, fare clic sul pulsante + Aggiungi elemento .

Vieni alla scheda Stile . In questa scheda troverai le opzioni per modificare il colore, lo spessore e l'allineamento dei testi e delle icone del widget.

# Titolo del post

Trascina e rilascia il widget Titolo del post sotto il widget Informazioni sul post.

Nella scheda Contenuto, troverai le opzioni per personalizzare il tag HTML, le dimensioni e l'allineamento. Apportare le modifiche necessarie secondo necessità.

Vieni alla scheda Stile . Puoi stilizzare il colore del titolo e la tipografia come desideri.

# Estratto del post

Aggiungendo il widget Estratto post nel modello, puoi visualizzare il riepilogo o l'estratto dei rispettivi post all'interno della sezione Griglia loop. Trova e aggiungi il widget Estratto post sotto il titolo.

Allo stesso modo, come mostrato sopra, puoi personalizzare il colore del testo e la tipografia dalla scheda Stile .

Passaggio 04: ottimizza il layout del modello per i dispositivi mobili

È necessario ottimizzare il layout del modello per tutti i tipi di dispositivi (tablet e telefoni cellulari) oltre ai desktop. In caso contrario, gli utenti di altri dispositivi non avranno una buona esperienza durante l'esplorazione di questo widget da dispositivi mobili e tablet.

Quindi, per ottimizzare il layout del modello, fai clic sull'opzione Modalità reattiva nel piè di pagina del pannello Elementor. Sul modello verrà visualizzata una barra superiore, inclusa l'opzione per passare da una modalità all'altra del dispositivo (desktop, tablet e telefono cellulare).

Ora passa a diverse modalità del dispositivo e verifica se il layout del modello è perfetto per diversi dispositivi particolari. Se non sono perfetti, ridimensiona e personalizza gli elementi del modello secondo necessità.

Si spera che, in questo modo, sia possibile rendere il modello reattivo per tutte le dimensioni dello schermo.

Ecco una guida sugli aspetti da considerare durante la realizzazione di un sito mobile responsive.

# Pubblica il modello

Una volta terminato, pubblica il modello facendo clic sul pulsante Pubblica nel pannello Elementor.

Passaggio 04: accedi all'area di disegno principale e seleziona il modello di loop

Vieni alla tela principale di Elementor. Seleziona la sezione Griglia ad anello . Nella sezione Layout troverai l'opzione Scegli un modello di loop .

Digita il nome con cui salvi il modello. Una volta digitato, il modello apparirà in tempo reale. Fare clic sul modello per visualizzarlo nell'area di disegno.

Una volta selezionato il modello Loop Grid, verranno visualizzati i post pubblicati in un formato griglia come l'immagine seguente.

La griglia potrebbe sembrare scomoda poiché viene fornita con le impostazioni predefinite. Ora puoi personalizzare ulteriormente il suo layout.

Passaggio 05: personalizza e stilizza la sezione della griglia ad anello

Dalla sezione Layout, seleziona il numero di colonna, il post per pagina e la stessa altezza . Effettuare la configurazione necessaria secondo necessità.

Per questo tutorial abbiamo mantenuto tre colonne e tre post per pagina.

# Configura query

Successivamente, vai alla sezione Query .

Puoi visualizzare contenuti da diverse fonti nel widget Loop Grid. Per impostazione predefinita, i post vengono visualizzati in formato griglia. Ma puoi visualizzare pagine o pagine di destinazione se lo desideri.

Fai clic sull'icona a discesa accanto all'opzione Tipo di post. Seleziona il tipo di contenuto che desideri.

Devi salvare ogni post con un tag o una categoria. Se desideri visualizzare solo il contenuto di un autore, tag o categoria specifici, fai clic sull'icona + più sotto Includi per.

Seleziona Autori o Termini . Puoi anche sceglierli entrambi.

Una volta selezionate le opzioni Includi per, digita i nomi degli autori e i termini nei rispettivi campi. Immediatamente, il contenuto verrà filtrato e solo i contenuti di questo specifico autore e termine verranno visualizzati nella griglia del loop.

Configura le altre opzioni di query come desideri. Spero che tu possa farli da solo.

Passaggio 06: configurare l'opzione di impaginazione per la sezione Griglia di loop

Espandi la sezione Impaginazione e carica altro .

Fai clic sull'icona a discesa accanto a Impaginazione . Seleziona l'opzione che desideri.

Abbiamo selezionato Numeri + Precedente/Successivo . Nell'immagine puoi vedere che questa opzione di impaginazione è stata visualizzata sotto il widget.

Passaggio 07: stilizza il layout del widget Loop Grid

Vai alla scheda Stili . Troverai le opzioni per personalizzare e stilizzare il layout, la casella degli oggetti e l'impaginazione del widget.

Per prima cosa espandiamo la sezione Layout . Ti consentirà di configurare il gap di colonna e il gap di riga . Fallo se necessario.

Allo stesso modo, espandi la sezione Casella oggetto . È possibile aggiungere riempimento , tipo di sfondo (colore o immagine), ombra del riquadro, tipi di bordo e raggio del bordo .

Per questo tutorial abbiamo aggiunto il riempimento, un raggio e un colore di sfondo. Fai lo stesso anche tu.

Allo stesso modo, puoi stilizzare le opzioni di colore, tipografia, riempimento, raggio, spazio e impaginazione del widget.

Nota: sembra un po' stridente, vero? In questa fase della progettazione, potresti scoprire che il modello della griglia ad anello deve essere stilizzato e personalizzato un po' di più. Ma come fare? Viene mostrato nel passaggio successivo.

Passaggio 08: ripersonalizzare il modello della griglia del loop

Per prima cosa devi trovare il modello. Come hai progettato con HappyAddons, vai alla dashboard di WordPress . Quindi, vai su HappyAddons > Theme Builder > Modello di loop .

Trova il modello e aprilo con l'opzione Modifica con Elementor .

Ad esempio, abbiamo cambiato la tipografia del testo Continua a leggere >> .

Una volta terminato, aggiorna le modifiche.

Passaggio 09: visualizzare in anteprima le modifiche

Vai di nuovo alla tela principale. Seleziona l' icona a discesa . Quindi, fai clic sull'opzione Salva bozza .

Una volta salvata la bozza, ricaricare la tela . Vedrai le modifiche sulla pagina come hai apportato al modello.

Pertanto, puoi personalizzare il modello Loop Grid in qualsiasi momento.

Passaggio 10: pubblicare il progetto della griglia ad anello

Se tutto va bene, la tua sezione Loop Grid è già pronta per la pubblicazione. Fai clic sul pulsante Pubblica nella parte inferiore del pannello Elementor.

Nota: assicurati di aver ottimizzato perfettamente il widget per la reattività mobile, come ti abbiamo mostrato sopra ottimizzando il modello Loop Grid. Anche qui il procedimento sarà lo stesso.

Casi d'uso comuni del widget Elementor Loop Grid

Finora abbiamo descritto cos'è il widget Loop Grid e come utilizzarlo sui tuoi siti Web Elementor. Diamo ora una rapida occhiata ad alcuni casi d'uso cruciali del widget in cui può fare un'impressione inestimabile.

1. Layout del blog

Elementor Loop Grid semplifica i layout del blog in quanto ti consente di visualizzare i post in una griglia dinamica e gradevole. Puoi personalizzare il modo in cui apparirà il contenuto (post o pagine), inclusi titoli dei post, estratti, immagini, metadati e altro per garantire un aspetto coerente.

Scopri come progettare un modello di post sul blog con Elementor.

2. Griglie di prodotto

La Loop Grid ha un valore inestimabile sui siti di eCommerce per visualizzare i prodotti su una griglia pulita e ordinata. Ti consente di mostrare immagini, prezzi e descrizioni dei prodotti in modo che i clienti possano vivere una buona esperienza mentre esplorano i prodotti sul tuo sito.

3. Vetrina del portafoglio

Il widget Loop Grid ti consente di organizzare disegni, articoli, casi di studio e parti del portfolio in un layout accattivante. Puoi anche modificare la griglia per adattarla al tuo marchio in modo che il tuo portfolio possa essere messo in evidenza per i tuoi clienti e dipendenti.

Scopri come creare un sito portfolio.

4. Elenco eventi

Puoi organizzare i tuoi eventi in forma grafica con Loop Grid. Ti consente di elencare visivamente le informazioni sugli eventi come date, luoghi e descrizioni in modo che le persone possano scoprire rapidamente cosa sta succedendo.

5. Elenchi di servizi

Puoi anche offrire i tuoi servizi in un formato a griglia con opzioni di stile. Puoi mostrare elementi chiave come titoli dei servizi, descrizioni e foto in modo che i clienti possano vedere facilmente ciò che hai da offrire a colpo d'occhio.

Chiusura

Ci auguriamo che ora tu conosca i dettagli del widget Elementor Loop Grid. Una volta che sai come utilizzare bene il widget, puoi creare infinite possibilità di design per il tuo sito web. Con le sue funzionalità intuitive e la facilità d'uso, puoi lasciare un impatto professionale sul tuo sito web ai visitatori incantati.

Abbiamo fatto del nostro meglio per coprire tutto ciò che potresti cercare in questo post. Se scopri che ci siamo persi qualcosa, faccelo sapere attraverso la casella dei commenti qui sotto. Puoi anche lasciare una chat nella casella di supporto se desideri saperne di più sul nostro prodotto.

Alla fine, grazie per il tuo tempo e per essere stato con noi fino alla fine. Divertitevi, buona lettura!