Icone in Elementor - Come ottimizzarle

Elementor ti offre una vasta gamma di strumenti per progettare il tuo sito WordPress, uno degli elementi basilari è l'icona. Le icone non sono solo elementi decorativi, possono anche migliorare l'esperienza dell'utente in modo funzionale e aiutare a comunicare informazioni importanti in un colpo d'occhio. Scopri come puoi applicare e personalizzare le icone in Elementor per valorizzare il tuo sito web.

Principali conclusioni

• Le icone sono elementi versatili che possono svolgere sia funzioni artistiche che informative.
• Puoi personalizzare le icone in modo individuale, tra cui colore, dimensioni, forma e animazione.
• Un'opzione di collegamento consente di utilizzare le icone in modo efficace per la navigazione.

Guida passo passo

Passaggio 1: Aggiungere un'icona

Per inserire un'icona nella tua sezione, trascina il widget dell'icona nell'area desiderata della tua pagina. Vedrai un'icona preselezionata, di solito una stella.

Passaggio 2: Cambiare icona

Fai clic sull'icona esistente per aprire la finestra di selezione. Qui puoi scegliere tra una varietà di icone. Ad esempio, seleziona un'icona di taxi per associare un tema specifico al tuo contenuto.

Passaggio 3: Selezionare il tipo di icona

Elementor offre tre tipi di icone: icone regolari, icone piene e icone di marchi. Le icone regolari di solito hanno solo un contorno, mentre le icone piene sono completamente riempite. Le icone marchio corrispondono a loghi noti, come ad esempio quelli di Amazon o Apple.

Passaggio 4: Personalizzare le impostazioni di visualizzazione

Puoi personalizzare la visualizzazione della tua icona in vari modi: tramite "Impilato" (completamente riempito), "Incorniciato" (con contorno) o "Predefinito" (lo sfondo mostrato). Scegli l'opzione che meglio si adatta all'estetica del tuo sito web.

Passaggio 5: Personalizzare dimensioni e forma dell'icona

Un altro punto importante è la forma dell'icona. Puoi scegliere se deve essere circolare o quadrata. Un cerchio è spesso percepito come armonioso, mentre un quadrato lascia un'impressione grafica diversa.

Passaggio 6: Impostare il collegamento

Per creare interattività, puoi impostare un collegamento. Ad esempio, inserisci l'indirizzo della tua homepage in modo che i visitatori vengano reindirizzati lì al clic sull'icona.

Passaggio 7: Personalizzare lo stile

Nell'opzione "Stile" hai la possibilità di impostare il colore primario e secondario. Per effetti di hover, puoi anche decidere come i colori dovrebbero cambiare. Ad esempio, cambia il colore primario in rosso e il colore secondario in nero.

Passaggio 8: Definire gli effetti hover

Se desideri intensificare l'interattività, puoi aggiungere effetti di animazione all'elemento di hover. Questi includono opzioni come "Push" o "Grow". Scegli un effetto desiderato per migliorare l'esperienza dell'utente.

Passaggio 9: Definire dimensioni e spaziatura

Puoi regolare le dimensioni dell'icona mentre lo spazio, anche chiamato padding, determina quanto spazio c'è tra l'icona e il suo bordo interno. Sperimenta con questi valori per trovare il giusto equilibrio desiderato.

Passaggio 10: Collegare i valori

Se desideri apportare impostazioni personalizzate per angoli diversi di un'icona, puoi collegare i valori o regolarli separatamente. I valori collegati assicurano che le modifiche vengano applicate contemporaneamente su tutti i lati.

Passaggio 11: Controllare le impostazioni avanzate

Nelle impostazioni avanzate troverai le stesse opzioni delle impostazioni di base. Assicurati che tutto sia configurato correttamente per garantire una visualizzazione coerente sulla tua pagina.

Riepilogo

In questa guida hai imparato i passaggi fondamentali per aggiungere e personalizzare le icone in Elementor. Dalla selezione dell'icona al colore, dimensione e link – con queste tecniche puoi creare siti web che sono sia esteticamente gradevoli che funzionali.