Elementor è un potente Page Builder per WordPress che ti permette di creare siti web accattivanti senza conoscenze di programmazione. Uno degli elementi più utili in Elementor è la Icon-List. Con questa funzione puoi presentare le informazioni in modo visivamente accattivante, che sia per liste di attività, link ai social media o altri contenuti. In questa guida ti mostro passo dopo passo come creare e personalizzare una icon-list.
Concetti principali
- Con l'Icon-List puoi aggiungere facilmente elementi visivi.
- Ogni voce può essere personalizzata con testo, icone e link.
- Lo stile e il layout della lista sono flessibili.
Istruzioni passo dopo passo
Passo 1: Aprire Elementor e aggiungere Icon-List
Per prima cosa apri l'editor di Elementor sul sito web con cui stai lavorando. Cerca nell'area dei widget di Elementor l'opzione "Icon-List". Trascina questo widget nella sezione desiderata della tua pagina.
Passo 2: Personalizzare gli elementi della Icon-List
Una volta posizionato il widget, vedrai alcune voci di lista di default. Puoi modificare il numero di icone e righe di testo utilizzando le opzioni appropriate nel menu a sinistra. Clicca su "Voce di lista 1" per modificare il testo. Ad esempio, puoi inserire "YouTube".
Passo 3: Selezionare le icone
Per selezionare un'icona appropriata per ciascuna voce della lista, fai clic sull'area dell'icona. Si aprirà una finestra in cui potrai scegliere da una vasta libreria. Cerca "YouTube" e aggiungi l'icona desiderata.
Passo 4: Aggiungere link
Puoi assegnare un link a ciascuna voce di lista. Per farlo, fai clic sul campo "Link" accanto al testo e aggiungi l'URL corrispondente, ad esempio il link al tuo canale YouTube.
Passo 5: Personalizzare il layout
Ora puoi configurare le opzioni di layout. Scegli tra "Inline" e "Larghezza intera". Decidi come desideri visualizzare la tua icon-list per adattarla allo stile generale del tuo sito web.
Passo 6: Personalizzare lo stile
Vai alla scheda "Stile" per modificare l'aspetto della tua icon-list. Qui puoi impostare la distanza tra le righe, regolare l'allineamento e attivare eventuali elementi separatori. Ad esempio, puoi scegliere una linea tratteggiata come separatore per un aspetto elegante.
Passo 7: Personalizzare i colori
Puoi cambiare i colori delle tue icone e del testo. Ad esempio, scegli un colore verde quando si passa sopra l'elemento con il mouse. Questo crea un effetto di ombreggiatura interattivo che attirerà l'attenzione dei tuoi visitatori.
Passo 8: Impostare le dimensioni del testo e la tipografia
Per assicurarti che le dimensioni del testo si abbiano visivamente con le icone, modifica la dimensione del testo nella scheda "Testo". Ad esempio, imposta la grandezza su 25 e scegli un colore del testo appropriato per ottenere un effetto visivo armonioso.
Passo 9: Anteprima e salvataggio
Se sei soddisfatto della tua icon-list, clicca su "Salva" per applicare le modifiche. Controlla l'anteprima per vedere com'è la lista sul frontend.
Passo 10: Testare la funzionalità
Testa i link sulla tua pagina pubblicata per assicurarti che tutto funzioni come desiderato. Verifica anche che gli effetti al passaggio del mouse vengano visualizzati correttamente per garantire l'interattività.
Riepilogo
In questo tutorial hai imparato come creare passo dopo passo una lista di icone accattivante e funzionale con Elementor per WordPress. Devi solo apportare alcune semplici personalizzazioni per adattare la lista al tuo stile e ottimizzare l'esperienza dell'utente.
Domande frequenti
Come posso aggiungere un nuovo elemento alla lista di icone?Puoi semplicemente fare clic sull'icona "+" nel widget della lista di icone per aggiungere un nuovo elemento.
Posso cambiare le icone dopo averle aggiunte?Sì, puoi personalizzare ogni icona in qualsiasi momento facendo clic sull'elemento della lista corrispondente.
Come posso cambiare i colori delle icone?Nell'area di stile dell'editor di Elementor, puoi personalizzare i colori delle icone e del testo.
Posso aggiungere link ai social media?Sì, ogni voce della lista può essere associata a un link, ideale per i social media.
Esiste una funzione di anteprima in Elementor?Sì, puoi visualizzare un'anteprima delle tue modifiche prima di salvarle.
