Come accennato nell’articolo precedente, cercheremo ora di mettere in evidenza i concetti “chiave” del sito web.
Generalmente queste informazioni sono riconducibili proprio ai vantaggi relativi a un prodotto, un servizio o qualsiasi altra cosa che possa essere proposta al visitatore.
Per attirare l’attenzione utilizzeremo box icone, ovvero una combinazione di elementi visivi e titoli. In questo modo, anche chi poco predisposto alla lettura avrà la possibilità di captare le informazioni essenziali che vogliamo comunicare.
Tabella dei Contenuti
Individuare i concetti chiave
Come prima cosa è necessario definire con attenzione le informazioni che devono assolutamente incontrare l’attenzione dell’utente.
Non c’è un numero fisso da rispettare, però ti consiglio di individuare da 3 fino 6 concetti chiave.
Un buon inizio, potrebbe essere quello di scrivere una lista con tutti gli aspetti fondamentali sulla tua attività o sito web.
- Crea un sito rapidamente e (quasi) gratis
- Gestisci ogni aspetto in totale autonomia
- Ottimizza il sito per qualsiasi dispositivo
- Aumenta le visite e fai crescere il tuo sito web
- sintetizza ciascun aspetto in poche e semplici parole
- evita ridondanze e ripetizioni
- associa a ciascun punto almeno un vantaggio, un aspetto positivo
- cerca di trovare una sequenza logica
Come usare i box icone
Abbiamo individuato nell’esempio 4 aspetti che sintetizzano in poche parole l’essenza del sito Creare Sito Web Gratis.
Vediamo ora come integrarli nella nostra home page.
Uno dei modi più semplici e veloci è di utilizzare l’elemento Riquadro icona di Elementor.
Inizia a creare una nuova sezione nella tua home page e trascina al suo interno Riquadro icona.
Assegna alla colonna un po’ di rientro (ad esempio 30px).
Clicca (con il pulsante destro del mouse) sull’icona della colonna in alto a sinistra per duplicare la colonna.
Ripeti l’operazione precedente fino a ottenere il numero di colonne desiderate (in questo caso, 4 colonne).
Inserisci i testi e scegli le icone dalla libreria FontAwesome già integrata in Elementor. Per un migliore effetto visivo, fai in modo che ciascun testo occupi lo stesso numero di righe.
Alterna i colori di colonne e testi per rendere la sezione più gradevole.
Animare i riquadri
Ora potremmo dare un po’ di movimento alle icone impostando una breve animazione in ingresso.
Seleziona il Riquardo icona nella prima colonna e vai su AVANZATO > EFFETTI DI MOVIMENTO. Scegli una tra le diverse animazioni a disposizione.
Effettua la stessa operazione anche per i riquadri icone presenti nelle altre colonne, aggiungendo, se lo desideri, un piccolo ritardo nel campo Ritardo Animazione (ms).
In questo esempio, abbiamo selezionato un effetto Fade in, impostando un ritardo di 150 per il secondo riquadro icona, 300 per il terzo e 450 per il quarto.
Personalizzare con icone svg
Non trovi le icone che ti servono oppure cerchi icone alterantive a FontAwesome? Nessun problema, con Elementor Pro hai davvero infinite possibilità.
Seleziona l’elemento riquadro icona e passa il cursore sull’icona caricata, apparirà un pulsante per caricare svg in Elementor (se è la prima volta, ti sarà chiesto di abilitare il caricamento di svg che non è previsto di default in WordPress).
Carica quindi le icone che desideri in formato svg. Le puoi scaricare gratuitamente in molti siti web dedicati.
Ed ecco qui il risultato finale con le icone personalizzate.
Sfruttare le CTA (Call To Action)
Una Call To Action (richiamo all’azione) non è altro che un invito all’utente di compiere una determinata azione all’interno del sito web o landing page.
La CTA consiste in un messaggio univoco che invita l’utente a compiere una specifica azione, come ad esempio: “Clicca qui”, “Prenota subito”, “Scopri di più”, “Acquista ora”, ecc.
Le CTA sono particolarmente utili per “guidare” il comportamento dell’utente e rappresentano un ottimo strumento per raggiungere gli obiettivi che sono alla base del sito stesso (come ad esempio: vendere prodotti, acquisire nuovi contatti, promuovere servizi, aumentare la permanenza sul sito, ecc.).
Nel caso specifico di creare-sito-web-gratis.it, useremo una CTA per sollecitare a consultare la guida su come creare un sito web e poi altre CTA per invitare a scoprire i servizi extra.
In questa seconda parte del tutorial, andremo a creare una CTA mediante un banner a piena ampiezza, giusto al di sotto dei box con le icone appena creati.
Quindi, inizia ad aggiungere una nuova sezione.
Assegna alla sezione un’altezza minima (ad esempio, 400px).
Imposta ora un’immagine di sfondo per il banner. Nel caso dell’esempio, abbiamo aggiunto anche uno sfondo overlay nero con opacità 0,5, in modo da rendere maggiormente leggibile il testo che andremo a sovrapporre sull’immagine.
Come avrai notato, il banner appena aggiunto risulta un po’ impastato con i box sovrastanti. Potrebbe essere una buona idea creare uno stacco tra le due sezioni. Per risolvere, abbiamo quindi aggiunto alla sezione banner un bordo superiore di 10px di colore bianco.
Per dare un’idea di continuità, abbiamo anche applicato un separatore sagomato “freccia” alla parte superiore della sezione.
A questo punto, aggiungi un elemento Intestazione all’interno della sezione. Inserisci un messaggio in grado di incuriosire l’utente.
Infine, aggiungi un elemento Pulsante, personalizzalo come meglio credi (purché sia ben evidente) e non dimenticarti di inserire il link. Come testo per il pulsante, cerca di specificare in modo diretto l’azione che l’utente andrà a compiere.
Quanti CTA prevedere e dove
Non esiste un numero prestabilito di CTA che si dovrebbe prevedere all’interno di una pagina web. Tutto dipende dal contenuto della pagina e dai tuoi obiettivi. Potresti inserire un solo CTA in tutta la pagina oppure uno in ogni sezione.
Comunque sia, cerca di posizionare i tuoi Call to Action in punti strategici, rendili ben visibili e utilizza messaggi che invoglino l’utente a cliccare.
In questo articolo, abbiamo visto come sintetizzare in pochi punti i concetti chiave del sito web e in che modo esporli attraverso box con icone. Abbiamo anche visto cos’è un CTA e come crearne uno all’interno di un banner.
Come al solito, tengo a precisare che questi sono solo semplici esempi. Ciascuna sezione potrebbe assumere migliaia di modalità e forme diverse, in base alla tua creatività e dimestichezza d’utilizzo del plugin Elementor Pro.
