Nell’articolo precedente, abbiamo illustrato attraverso dei box icone i concetti chiave del sito web e abbiamo predisposto una CTA per stimolare l’utente a visitare una specifica sezione.
A questo punto, trovandoci in home page, potrebbe essere una buona idea suggerire all’utente altri contenuti che potrebbero interessarlo, in modo da indurlo ad approfondire un certo argomento e, quindi, a permanere sul nostro sito.
Tabella dei Contenuti
In questo tutorial, andremo ad aggiungere in home page due tipologie di contenuti in evidenza: i servizi offerti e il blog.
Dopo aver invitato l’utente a visitare la sezione più importante del sito (nel nostro caso, la guida gratuita), proporremo altri servizi che potrebbero interessarlo.
Se neanche questi ultimi dovessero far breccia, avremo ancora la possibilità di catturare l’attenzione con le ultime novità del blog.
Infine, concluderemo la home page con una seconda CTA, volta in questo caso alla richiesta di maggiori informazioni, rimandando direttamente alla sezione dei contatti.
Contenuti in evidenza: servizi offerti
Per proporre i nostri servizi, utilizzeremo ancora l’elemento Riquadro icona di Elementor Pro, già visto nell’articolo precedente per sintetizzare i concetti chiave del sito.
Essendo il procedimento molto simile a quello visto nell’articolo Box icone e CTA, eviteremo di andare troppo nel dettaglio.
Innanzitutto, abbiamo creato una sezione con due colonne, optando per un colore di fondo scuro e omogeneo per tutta la sezione.
Per creare un po’ di stacco, abbiamo poi applicato sulla colonna di sinistra un bordo superiore e destro e sulla colonna di destra un bordo inferiore.
Oltre a icona e titolo, abbiamo questa volta aggiunto anche un breve testo descrittivo e un pulsante che rimanderà alla pagina di approfondimento.
Ecco qui il risultato finale:
In questo esempio, il contenuto è stato predisposto in modo statico: abbiamo creato una sezione, l’abbiamo divisa per il numero di colonne in base alle nostre necessità e abbiamo inserito manualmente il contenuto (icone, testi, ecc.).
Questi tipi di contenuto sono detti statici, ovvero restano immutati fino a che non li si modificano in modo diretto.
Contenuti in evidenza: articoli del blog
Se non hai ancora allestito una sezione blog o news nel tuo sito, puoi rimandare questa parte ad un momento successivo. In alternativa, puoi creare alcuni articoli con testo finto in modo da avere dei contenuti a disposizione.
Inizia a creare una nuova sezione, appena dopo quella dei servizi.
Cerca ora “Post” tra gli elementi di Elementor Pro.
Inserisci l’elemento Post nella nuova sezione.
Ed ecco che vedrai apparire gli ultimi articoli del blog. A questo punto, non resta che personalizzare il widget.
Impostazioni layout post
Per quanto riguarda le impostazioni di layout, abbiamo diverse opzioni: possiamo decidere il tipo di “skin” (classico, card o contenuto completo), possiamo poi definire il numero di colonne, il numero di post per pagina, scegliere se mostrare o nascondere l’immagine e molto altro ancora.
Ecco come appaiono gli articoli dopo solo qualche piccola modica nelle impostazioni di layout.
Per ottenere questo risultato è bastato cambiare il tipo di pelle in “Card“, eliminare i commenti dal campo Metadati, nascondere l’Avatar e aggiungere un po’ di rientro alla colonna (tab Avanzato).
Personalizzare stili post
Per personalizzare lo stile, seleziona l’elemento Post e passa alla tab Stile. Qui troverai numerose opzioni per gestire gli stili dei Layout, Pelle, Immagine e Contenuto.
Lascio ora a te il gusto di provare e sperimentare…
Impostazioni query
Le impostazioni Query (tab Contenuto) permettono di gestire la tipologia di contenuti caricati in modo dinamico. Puoi infatti selezionare il tipo di post (post type) dalla tendina Sorgente. Il post type di default è Articoli.
Ma non solo, puoi anche includere o escludere specifiche categorie o specifici articoli e puoi modificarne l’ordinamento.
Impostazioni paginazione
Le impostazioni Paginazione (tab Contenuto) permettono di suddividere gli articoli in più pagine e di gestirne la navigazione.
Come funziona la paginazione?
Il numero massimo di articoli che vedrai apparire nel widget Post è definito in CONTENUTO > LAYOUT > POST PER PAGINA. Se ad esempio sono impostati 6 articoli per pagina e il blog contiene 12 articoli, abilitando la paginazione, apparirà la navigazione per due pagine.
La navigazione avviene in modo dinamico, quindi vengono caricati i post successivi (o precedenti) senza il refresh dell’intera pagina.
Creare un banner laterale
Quella dei Contatti è una sezione molto importante del sito e per questa ragione può aver senso prevederla già in home page.
In alternativa si potrebbe creare una sorta di banner che rimandi alla pagina dedicata.
Come creare un banner e posizionarlo
Per terminare la nostra home page di esempio, andremo a creare una seconda Call to Action che iniviti l’utente a mettersi in contatto con noi.
Questa volta, però, non posizioneremo l’elemento di seguito all’ultima sezione, bensì di fianco.
Torna quindi alla sezione degli articoli del blog e aggiungi una colonna. Aumenta poi l’ampiezza della colonna di sinistra (ad esempio al 60%).
Cambia il numero di colonne da 3 a 2 per l’elemento Post (in quanto tre colonne risultano ora un po’ troppo strette per visualizzare i post).
Assegna un po’ di rientro alla colonna di destra (esempio 50px) e inserisci al suo interno una Sezione Interna. Elimina poi una delle due colonne della sezione interna, in modo da mantenerne soltanto una.
Adesso inserisci nella sezione interna appena aggiunta gli elementi Intestazione, Lottie e Pulsante.
Seleziona la colonna e personalizzane lo stile. Nell’esempio abbiamo aggiunto uno sfondo sfumato, un bordo di 3px e un’ombra riquadro.
Personalizza come preferisci gli stili dell’intestazione e del pulsante.
Inserisci un’animazione a tua scelta dalla vasta libreria di Lottie Files. Ti basterà copiare l’URL dell’animazione e incollarlo nel campo SORGENTE > URL ESTERNO dell’elemento Lottie precedentemente inserito. Clicca questo link per maggiori dettagli sull’inserimento di animazioni LottieFiles.
Ed ecco che, in pochi e semplici passi, abbiamo creato un banner laterale per rimandare alla pagina dei Contatti (pagina che andremo a creare nella Parte successiva della guida).
Avrai forse notato che scorrendo verso il basso, il banner andrà a finire sopra, lasciando la colonna di destra completamente vuota.
Per evitare tutto ciò sarà sufficiente fissare in alto la sezione interna. Quindi, selezionala e clicca su AVANZATO > EFFETTI DI MOVIMENTO. Seleziona “In alto” per il campo Fisso. Lascia l’elemento fisso solo su Desktop (rimuovi i tag tablet e mobile). Infine, imposta l’offset per lasciare un po’ di margine in alto.
Come potrai vedere scorrendo la pagina, il banner adesso resterà fisso in quella posizione.
Siamo così giunti al termine della nostra home page di esempio.
In questi articoli abbiamo visto come creare una home page non troppo complessa ma completa e strutturata con una certa logica.
Spero che questo tutorial ti sia anche servito per acquisire maggiore dimestichezza con WordPress e il plugin Elementor Pro. In questo modo potrai creare sezioni e pagine sempre più belle e in pochissimo tempo.
Con la home page non abbiamo del tutto finito… Nel prossimo articolo andremo a vedere come la home viene visualizzata sui dispositivi mobile e tablet.
