{"id":3604,"date":"2021-01-12T15:06:34","date_gmt":"2021-01-12T14:06:34","guid":{"rendered":"https:\/\/creare-sito-web-gratis.it\/?p=3604"},"modified":"2022-02-07T16:16:47","modified_gmt":"2022-02-07T15:16:47","slug":"contenuti-in-evidenza-e-banner","status":"publish","type":"post","link":"https:\/\/creare-sito-web-gratis.it\/contenuti-in-evidenza-e-banner\/","title":{"rendered":"5. Contenuti in evidenza e Banner"},"content":{"rendered":"\t\t
Nell’articolo precedente<\/a>, 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.<\/p> 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.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t In questo tutorial, andremo ad aggiungere in home page due tipologie di contenuti in evidenza: i servizi offerti<\/b> e il blog<\/b>.<\/p> Dopo aver invitato l’utente a visitare la sezione pi\u00f9 importante del sito (nel nostro caso, la guida gratuita), proporremo altri servizi che potrebbero interessarlo.<\/p> Se neanche questi ultimi dovessero far breccia, avremo ancora la possibilit\u00e0 di catturare l’attenzione con le ultime novit\u00e0 del blog.<\/p> Infine, concluderemo la home page con una seconda CTA, volta in questo caso alla richiesta di maggiori informazioni, rimandando direttamente alla sezione dei contatti.<\/p> Per proporre i nostri servizi, utilizzeremo ancora l’elemento Riquadro icona<\/strong> di Elementor Pro<\/a>, gi\u00e0 visto nell’articolo precedente per sintetizzare i concetti chiave del sito.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t Essendo il procedimento molto simile a quello visto nell’articolo Box icone e CTA<\/a>, eviteremo di andare troppo nel dettaglio.<\/p> Innanzitutto, abbiamo creato una sezione con due colonne, optando per un colore di fondo scuro e omogeneo per tutta la sezione.<\/p> 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.<\/p> Oltre a icona e titolo, abbiamo questa volta aggiunto anche un breve testo descrittivo e un pulsante che rimander\u00e0 alla pagina di approfondimento.<\/p> Ecco qui il risultato finale:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t In questo esempio, il contenuto \u00e8 stato predisposto in modo statico<\/b>: abbiamo creato una sezione, l’abbiamo divisa per il numero di colonne in base alle nostre necessit\u00e0 e abbiamo inserito manualmente il contenuto (icone, testi, ecc.).<\/p> Questi tipi di contenuto sono detti statici<\/em>, ovvero restano immutati fino a che non li si modificano in modo diretto.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t 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.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t Inizia a creare una nuova sezione, appena dopo quella dei servizi.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Cerca ora “Post<\/b>” tra gli elementi di Elementor Pro<\/a>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Inserisci l’elemento Post nella nuova sezione.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Ed ecco che vedrai apparire gli ultimi articoli del blog. A questo punto, non resta che personalizzare il widget.<\/p> Per quanto riguarda le impostazioni di layout<\/b>, abbiamo diverse opzioni: possiamo decidere il tipo di “skin” (classico<\/i>, card<\/i> o contenuto completo<\/i>), possiamo poi definire il numero di colonne, il numero di post per pagina, scegliere se mostrare o nascondere l’immagine e molto altro ancora.<\/p> Ecco come appaiono gli articoli dopo solo qualche piccola modica nelle impostazioni di layout.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Per ottenere questo risultato \u00e8 bastato cambiare il tipo di pelle in “Card<\/b>“, eliminare i commenti dal campo Metadati, nascondere l’Avatar e aggiungere un po’ di rientro alla colonna (tab Avanzato).<\/p> Per personalizzare lo stile, seleziona l’elemento Post e passa alla tab Stile<\/b>. Qui troverai numerose opzioni per gestire gli stili dei Layout, Pelle, Immagine e Contenuto.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Lascio ora a te il gusto di provare e sperimentare…<\/p> Le impostazioni Query<\/b> (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 \u00e8 Articoli<\/b>.<\/p> Ma non solo, puoi anche includere o escludere specifiche categorie o specifici articoli e puoi modificarne l’ordinamento.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Le impostazioni Paginazione<\/b> (tab Contenuto) permettono di suddividere gli articoli in pi\u00f9 pagine e di gestirne la navigazione.<\/p> Come funziona la paginazione?<\/b><\/p> Il numero massimo di articoli che vedrai apparire nel widget Post \u00e8 definito in CONTENUTO<\/b> > LAYOUT<\/b> > POST PER PAGINA<\/b>. Se ad esempio sono impostati 6 articoli per pagina e il blog contiene 12 articoli, abilitando la paginazione, apparir\u00e0 la navigazione per due pagine.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t La navigazione avviene in modo dinamico, quindi vengono caricati i post successivi (o precedenti) senza il refresh<\/i> dell’intera pagina.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t Quella dei Contatti \u00e8 una sezione molto importante del sito e per questa ragione pu\u00f2 aver senso prevederla gi\u00e0 in home page.<\/p>\n In alternativa si potrebbe creare una sorta di banner che rimandi alla pagina dedicata.<\/p>\n 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.<\/p>\n Questa volta, per\u00f2, non posizioneremo l’elemento di seguito all’ultima sezione, bens\u00ec di fianco.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t Torna quindi alla sezione degli articoli del blog e aggiungi una colonna. Aumenta poi l’ampiezza della colonna di sinistra (ad esempio al 60%).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t 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).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Assegna un po’ di rientro alla colonna di destra (esempio 50px) e inserisci al suo interno una Sezione Interna<\/b>. Elimina poi una delle due colonne della sezione interna, in modo da mantenerne soltanto una.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Adesso inserisci nella sezione interna appena aggiunta gli elementi Intestazione<\/strong>, Lottie<\/strong> e Pulsante<\/strong>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Seleziona la colonna e personalizzane lo stile. Nell’esempio abbiamo aggiunto uno sfondo sfumato, un bordo di 3px e un’ombra riquadro.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Personalizza come preferisci gli stili dell’intestazione e del pulsante.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Inserisci un’animazione a tua scelta dalla vasta libreria di Lottie Files. Ti baster\u00e0 copiare l’URL dell’animazione e incollarlo nel campo SORGENTE > URL ESTERNO dell’elemento Lottie precedentemente inserito. Clicca questo link<\/a> per maggiori dettagli sull’inserimento di animazioni LottieFiles.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t 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).<\/p> Avrai forse notato che scorrendo verso il basso, il banner andr\u00e0 a finire sopra, lasciando la colonna di destra completamente vuota.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Per evitare tutto ci\u00f2 sar\u00e0 sufficiente fissare in alto<\/strong> la sezione interna. Quindi, selezionala e clicca su AVANZATO<\/b> > EFFETTI DI MOVIMENTO<\/b>. Seleziona “In alto”<\/strong> per il campo Fisso<\/b>. Lascia l’elemento fisso solo su Desktop (rimuovi i tag tablet<\/i> e mobile<\/i>). Infine, imposta l’offset<\/b> per lasciare un po’ di margine in alto.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Come potrai vedere scorrendo la pagina, il banner adesso rester\u00e0 fisso in quella posizione.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Siamo cos\u00ec giunti al termine della nostra home page di esempio.<\/p> In questi articoli abbiamo visto come creare una home page non troppo complessa ma completa e strutturata con una certa logica.<\/p> Spero che questo tutorial ti sia anche servito per acquisire maggiore dimestichezza con WordPress e il plugin Elementor Pro<\/a>. In questo modo potrai creare sezioni e pagine sempre pi\u00f9 belle e in pochissimo tempo.<\/p>\n\t\t\t\tTabella dei Contenuti\t\t\t<\/h4>\n\t\t\t\t\t\t\t
Contenuti in evidenza: servizi offerti<\/h2>
Contenuti in evidenza: articoli del blog<\/h2>
Impostazioni layout post<\/h3>
Personalizzare stili post<\/h3>
Impostazioni query<\/h3>
Impostazioni paginazione<\/h3>
Creare un banner laterale<\/h2>\n
Come creare un banner e posizionarlo<\/h3>\n