Ci sono veramente tanti modi per creare un design per i singoli articoli di blog.

In questa lezione andremo a vedere come elemento gestisce in modo veramente potente i temete e ci sblocca una serie di infinite possibilità di design.

Ci siamo lasciati nelle lezioni precedenti con la creazione di tre arti, quattro articoli di blog di esempio e al momento l'articolo di blog a livello di frontend si vedrebbe in questo modo dove c'è un titolo, un sottotitolo, un paragrafo l'immagine che abbiamo scelto nel corpo del messaggio e altro testo nella parte sottostante.

Quindi diciamo un temete molto molto semplice e gode di poco appeal, se vogliamo.

Quindi in questo caso noi andremo a creare un gamete grafico che si andrà ad installare sopra a questo tipo di contenuto e verrà utilizzato per tutti i futuri articoli di blog.

E ovviamente questo è un modo molto molto potente per personalizzare in modo avanzato il design del tuo sito web.

Infatti, ad esempio, abbiamo visto che l'articolo di del blog all'interno del sito di Learn è sviluppato in questo modo dove c'è un titolo c'è la data, ci sono i minuti di lettura c'è un riassunto c'è l'immagine c'è una sorta di indice dei vari articoli e così via.

E poi il corpo del dell'articolo e le informazioni spiegate nel dettaglio.

Quindi, come vedete, ci sono tanti modi di sviluppare temete per i singoli articoli di blog.

Entriamo subito nel pratico.

Questi sono i quattro articoli di esempio che abbiamo caricato precedentemente e per creare un singolo, quindi dell'articolo di blog.

La prima cosa che dobbiamo fare è andare su temete team all'interno del quale, come già sappiamo, possiamo inserire e creare temete per qualsiasi sezione del nostro sito web.

Quello che andremo a fare è aggiungere un temete per articolo singolo.

Quindi articolo singolo clicchiamo su più si aprirà una nuova voce di elemento.

Come al solito elemento ci propone una serie di tete da cui partire.

Quindi, se volete potete anche partire da una base anche per vedere varie possibilità di design e vari esempi che possiamo applicare nel nostro caso.

Noi partiremo da zero, quindi chiudiamo e partiamo da zero.

Allora eccoci qua allora innanzitutto partiamo quindi da un foglio bianco.

Come al solito la prima cosa da fare è cliccare su Impostazioni e andare a modificare il titolo.

Questo vi aiuterà a avere meno confusione nel nei futuri che andrete a creare e a gestire all'interno del vostro sito.

In questo caso lo chiameremo temete.

Articolo singolo blog perfetto.

Poi torniamo sui andiamo un po' analizzare quello che ci permette di fare elemento allora in modo intelligente elemento come sempre ci fornisce quelli che sono i maggiori utilizzati per creare questo tipo di come ad esempio il titolo del post è un che in automatico mostrerà e, um farà vedere nel il titolo che avete inserito nel vostro articolo di blog, poi il riassunto dell'articolo.

Quindi se avete inserito un estratto e un riassunto del vostro articolo di blog, potete posizionarlo dove volete il contenuto del post, ovviamente quindi quello che concretamente avete scritto nel vostro articolo di blog è l'immagine in evidenza che non è altro che l'immagine che avete assegnato.

Poi ci sono altre informazioni, come ad esempio il box autore, quindi verrà mostrato chi ha scritto l'articolo la tabella dei contenuti, quindi una sorta di indice, la possibilità di mostrare commenti, la possibilità di mettere una navigazione tra i post, come ad esempio avanti e indietro, e altre informazioni del post, come ad esempio tac e informazioni di questo tipo.

Poi vedremo come gestirle nel in modo dettagliato.

Quindi a questo punto noi andiamo a inserire nuovi e andiamo a creare il gameplay del nostro singolo articolo.

La prima cosa che andremo ad inserire è il titolo del post.

Ovviamente ripeto apro un'altra parentesi questo tipo di design è quello che ho pensato io per questo tipo di articolo di blog.

Però voi avete massima personalizzazione grafica e dovrà essere coordinata al vostro brand e quindi alla vostra azienda.

Ovviamente sia per quanto riguarda i p, lo stile e i colori.

La prima cosa che andrò a fare, quindi sarà quella di creare una nuova struttura larga al cento per cento, al cui interno andrò ad inserire un articolo eh di blog in questo caso titolo post titolo post lo trasciniamo qua e andiamo a vedere nel dettaglio quello che ci consente di fare elemento.

Allora, come vedete in automatico viene mostrato in modo casuale, in questo caso un titolo di un articolo che è presente all'interno del blog.

Questo serve semplicemente per orientarvi all'interno della creazione del gameplay.

Però se voi volete vedere altri um altre anteprime di altri articoli di blog che avete già caricato, è sufficiente cliccare su impostazioni anteprime impostazioni e andare a selezionare qua l'articolo che volete vedere in anteprima.

Torniamo a noi, quindi a questo punto abbiamo aggiunto questo come vedete non ci sono molte possibilità di customizzazione.

Titolo post mostrerà in automatico il titolo del nostro articolo.

Se volete potete aggiungere un link in questo caso non ci serve.

Il nostro obiettivo è semplicemente far vedere agli utenti del frontend il titolo dell'articolo e potete anche andare a definire una dimensione come il tag h uno h due h tre.

Ovviamente, essendo un titolo va più che bene il tag h t m l h uno.

Potete decidere l'allineamento, ad esempio, quindi l'allineamento centrato a sinistra in base alle vostre preferenze su stile.

Ci sono le classiche opzioni di personalizzazione, come il colore del testo, la tipografia, le ombre, quindi tutto quello che riguarda la parte estetica del vostro fondo.

Ma se avete chiaramente già impostato in modo correttamente tutte le impostazioni di stile all'interno di elemento, qui diciamo che non dovete fare grandi cose, però se volete chiaramente potete anche modificarlo e poi ci sono delle tab avanzate, quindi se volete assegnare un margine sopra, ad esempio volete assegnare magari uno spazio in alto a destra o a sinistra di venti pixel, potete chiaramente fa adesso.

Magari potrebbe potremmo inserire venti okay, poi magari andiamo a modificarlo.

Eventualmente anche inserire un colore all'intera all'intera sezione del blu.

Quindi ad esempio selezio l'intera colonna stile è andata a inserire un colore diverso come un grigio.

Un colore in evidenza, quindi chiaramente anche in base alle vostre preferenze.

In questo caso io utilizzerò un un semplice azzurro chiaro che ho utilizzato nel preset di design di elemento.

Okay, e questa è la prima parte.

Ovviamente ogni articolo di blog parte con il titolo poi una cosa interessante potrebbe essere mostrare subito l'immagine del vostro articolo di blog insieme a una sorta di riassunto.

Infatti, se utilizziamo il immagine in evidenza ora la trasciniamo qua sotto.

Eccola qua come vedete in automatico viene mostrata l'immagine di questo articolo singolo e il il funzionamento di questo in realtà è molto semplice mostra in automatico l'immagine dell'articolo, quindi non dovete fare nient'altro, ma se volete potete modificare l'aspetto estetico come la dimensione se volete inviarla a sinistra centralmente, se volete aggiungere un link insomma, ovviamente ci sono le solite personalizzazioni, ma se il nostro obiettivo è mostrare semplicemente l'immagine potete lasciare di default queste impostazioni su stile, magari l'unica, cosa che potremmo fare in pixel o in percentuale potremmo decidere di diminuire un po' la larghezza in que- in quel caso e in automatico eh veniva mostrata a piena larghezza.

Diciamo che ottocento pixel per avere un un articolo un po' più compatto potrebbe essere um interessante, quindi in questo caso la imposte a ottocento.

Poi andiamo torniamo nei potremmo decidere di inserire anche un riassunto dell'articolo, quindi um semplicemente dare la possibilità all'utente di leggere subito un estratto di quello che tratterà.

Tratteremo poi all'interno di questo articolo.

In questo caso potremmo inserirlo qui sotto se vogliamo, oppure, se vogliamo anche qui sotto.

Però forse è più interessante esattamente qui sotto.

Come vedete, anche in questo caso non potete modificare nessun tipo di impostazione.

Il jet è bloccato perché chiaramente in automatico mostrerà semplicemente il riassunto che avete già inserito nel vostro articolo singolo.

Quando l'avete scritto su stile eventualmente potremmo decidere di centrare ed eventualmente fare una modifica alla dimensione.

Magari potremmo portarlo così a ventiquattro pixel magari e potremmo decidere di inserire un po' di margine ai lati eventualmente di venti pixel, magari venti venti per renderlo un po' più compatto.

Magari facciamo anche trenta e trenta, quindi ho inserito un po' di spazzatura a sinistra e a destra.

Okay, torniamo ai nostri e andiamo nella parte sottostante.

Ovviamente ho inserito titolo una sorta di riassunto immagine.

È giunto il momento di inserire il contenuto del post, quindi trasciniamo il contenuto del post, aspettiamo il caricamento e come vedete in automatico viene inserito tutto quello che abbiamo già inserito precedentemente quando abbiamo scritto l'articolo di blog.

Quindi qui ovviamente non possiamo fare nulla se non quello di modificare lo stile.

Quindi, se vogliamo allineare tutto al centro, se vogliamo allineare a sinistra, io nella maggior parte dei casi preferisco un allineamento a sinistra per dare insomma una maggiore semplicità di lettura all'utente.

Però se vi piace più il centrato o altri tipi di stile, potete chiaramente modificarli.

Colore del testo, tipografia Anche qui potete avere accesso alla massima personalizzazione di design su avanzato.

Solite cose potete decidere un margine se volete inserire magari un rientro sopra.

Abbiamo inserito trenta a destra e trenta a sinistra.

Magari potremmo un po', um scompare.

Okay.

E quindi qui in automatico.

Come vedete, non dovete fare nulla in automatico al sistema mostrerà l'articolo um il contenuto che avete inserito all'interno del vostro articolo.

Tornando su WT potete eventualmente inserire altri tipi di informazioni sotto, come ad esempio la possibilità di inserire le commedie del post navigazione tra un post e l'altro le informazioni del Post.

Adesso le andiamo ad inserire magari in un widget a parte.

A questo punto inserirei una nuova voce, una nuova struttura al cento per cento e vado a inserire box autore.

Aspettiamo il caricamento Okay, okay Una volta che avete trascinato il box autore in automatico lui chiaramente in questo caso ci sono solo io come amministratore del sito web, ma vi mostra chi ha scritto questo articolo.

Come tipo di informazione autore, potete decidere di inserire anche un tipo di um sorgente personalizzato.

In questo caso potete inserire quindi un nome custom sia per il titolo e il sottotitolo, oppure assegnare in automatico le informazioni dell'autore corrente.

Per modificare queste informazioni ve lo faccio vedere velocemente.

Dovete entrare chiaramente nel pannello di WordPress, andare su utenti e cliccare su il vostro profilo, quindi sul nome o su direttamente su modifica e all'interno di questa sezione potete andare ad inserire um varie informazioni come ad esempio nome, cognome e sito web.

Potete qui inserire l'immagine del profilo.

Potete inserire una breve um biografia e sono tutte informazioni che in automatico verranno mostrate in questa sezione.

Se decidete di utilizzare la sorgente autore corrente però, se volete potete anche inserire un autore personalizzato.

In questo caso inserirò magari un'immagine che ho già caricato nei miei um test okay questo qui va più che bene.

Potete inserire titolo, quindi anche il tag potete inserire il link se volete reindirizza da qualche parte la biografia ed eventualmente un pulsante che manda a a una pagina che raccoglie tutti i suoi articoli o eventualmente anche da un'altra parte okay poi vediamo un po' gli altri ad esempio potremmo inserire altre informazioni del post sotto ve le faccio vedere rapidamente e poi voglio farvi vedere anche la navigazione tra i post allora le il naviga- informazioni post mostra in automatico alcune informazioni e dettagli che sono stati inseriti nel post, come ad esempio il nome dell'autore, la data eh l'orario ed eventualmente se ci sono dei commenti se volete, una volta che avete inserito questo potete anche eliminarli.

Ad esempio voi non volete mostrare i commenti ed eventualmente l'orario, ma semplicemente la data e quindi lo andate a personalizzare.

In questo modo, cliccando sul um sul di riferimento, ci sono anche altre opzioni, come ad esempio il tipo di data, e potete modificarlo direttamente da qua e ovviamente anche qui ci sono le solite informazioni legate allo stile, come ad esempio la spazzatura.

Io adesso magari lo vado a personalizzare in modo rapido, potremmo farlo così poi magari potremmo inserirlo in alto.

Possiamo inserire dei divisori eventualmente e potremmo anche inserire magari il colore l'icona potremmo inserire il il, il colore del testo nero e magari l'icona.

Invece la facciamo gruppo più coerente con il mio design.

A questo punto io mi vado a trascinare jet in alto, possiamo fare questo, possiamo fare copia e lo incolliamo qua in alto in ed eccolo qua sicuramente forse ha un appeal um più interessante il fatto di avere titolo riassunto chi ha scritto l'articolo e la data dell'articolo piuttosto che in fondo, quindi sicuramente lo posizionerà in alto in modo più strategico.

L'autore va benissimo sotto eventualmente potremo inserire la possibilità di navigare tra un posto e l'altro in modo più rapido.

Ad esempio trascino il jet navigazione post aspettiamo il caricamento e come vedete in automatico precedente e successivo potete personalizzare nella voce della modifica dei contenuti le etichette.

Quindi, ad esempio io lo modifico in indietro e avanti.

Quindi questo per dare la possibilità all'utente di navigare tramite questa funzione tra un articolo e l'altro avanti e indietro potete decidere la tipologia di freccia se volete.

Potete anche inserire il titolo del post mostrato in anteprima, oppure anche no.

Quindi eh chiaramente dipende dalle vostre esigenze.

E per quanto riguarda lo stile adesso magari andiamo a inserire un tipo di etichetta nera.

Titolo questo non ci interessa.

Ah no? Sì, ci interessa perché l'abbiamo tenuto visibile, quindi magari facciamolo nero la freccia forse potremmo farla no, anche questa nera.

Però magari un po' più grande leggermente.

Facciamola cinquanta pixel ed eventualmente andare solo sull'etichetta farei un font, un po' più sì, un un medio userei un medio.

Oppure potremmo fare direttamente un settecento okay, in modo tale da rendere un po' più visibile la funzione avanti e indietro.

Eventualmente potremmo inserire il box autore qui dentro.

Se vi piace aspettiamo il caricamento oppure, eventualmente anche in un box a parte, potreste magari inserirlo qui dentro con uno sfondo bianco con uno sfondo blu, chiaramente sempre in base alle vostre preferenze.

Magari, um inserire potrebbe potrebbe essere interessante l'idea di inserire all'interno due colonne.

Da una parte viene mostrato il box relativo all'autore dall'altra parte altre informazioni come ad esempio un link un pulsante come vedete con elemento.

Oltre ad ad utilizzare i collegati al um singolo gameplay, ci sono anche tutti gli altri, quindi potete aggiungere delle immagini custom degli editori di testo, un video, un divisore, un pulsante, tutto quello che volete e questo è molto importante perché sarà una sorta di base che viene utilizzata per tutti i singoli articoli.

E questo che cosa significa? Significa che se un giorno avete la necessità di andare a modificare il layout grafico del temete che sia all'interno del titolo, del riassunto, della data o di qualche altro tipo di informazione entrate in questo temete lo modificate e la modifica in automatico verrà replicato su tutti gli articoli di blog.

Quindi non dovete andare a modificare articolo per articolo.

Un altro esempio che vi posso fare è quello di inserire magari all'interno di questa sezione in fondo un box per l'iscrizione alla newsletter per un determinato periodo, ad esempio per tre mesi.

Ma poi, se un giorno i vostri obiettivi strategici dovessero cambiare e avete la necessità di eliminare quel tipo di iscrizione alla newsletter, tornate nel temete con un semplice click tasto destro Eliminate il salvate in automatico viene eliminata su tutti gli articoli, quindi non c'è bisogno di andare ad inserire dei wisi o altri tipi di informazioni contenute all'interno dei singoli articoli.

E questo è un modo molto molto veloce per velocizzare la gestione e la creazione degli articoli di blog e vi fa in modo di concentrarvi solo su quello che è il reale con contenuto dell'articolo.

Infatti, una volta che avrete poi impostato questo singolo, temete l'unica, cosa che dovrete fare è concentrarvi sulla scrittura dell'articolo, quindi andare ad inserire il titolo, il sottotitolo, il riassunto, le immagini ed even e e poi chiaramente il corpo del testo.

Okay, abbiamo creato il nostro temete una volta che avete definito tutto l'asset grafico, dovete andarlo a pubblicare, quindi utilizziamo la funzione in basso a sinistra pubblica come al solito elemento vi chiede dove volete visualizzare il gamete, quindi aggiungiamo una condizione e in questo caso noi vogliamo mostrare questo um su tutti gli articoli, quindi articoli singoli noi andiamo a inserire articolo singolo tutti e salva e chiudi, quindi in questo caso in automatico verrà mostrato su tutti gli articoli di blog.

Okay, ora torniamo nel nostro um di WordPress.

Andiamo su articoli, tutti gli articoli e andiamo a p- ad aprire il um l'articolo di esempio che abbiamo caricato.

Visualizza e andiamo a vedere che cosa succede.

Ed eccolo qua il design è completamente cambiato.

Come vedete rispetta tutti i criteri di che abbiamo inserito titolo, riassunto, autore, data, immagine, corpo del articolo di blog che abbiamo inserito tramite Gutenberg con un h due, un semplice paragrafo di testo con immagine e chiudiamo l'articolo di blog con l'autore e la possibilità di andare indietro e avanti e quindi, come vedete avete sostanzialmente inserito in pochi passaggi un temete personalizzato per il vostro articolo di blog che è molto differente da il classico temete del temete bianco che è un po' um meno invitante a livello di design e questo ovviamente va in automatico su tutti i gli articoli che avete già inserito nel vostro articolo di blog.

In questo caso noi non avevamo inserito l'immagine in evidenza, ma come vedete viene replicato in automatico tutto il contenuto e questo è un'altra delle funzionalità molto molto potenti e avanzate di elemento, perché come abbiamo detto nella fase iniziale di questa lezione, ci sono molte, molte possibilità per creare design per gli articoli di blog, ma se utilizzate questo strumento potente con un tema per elemento, elemento ed elemento pro, avete la possibilità di creare un temete in base ai vostri obiettivi e soprattutto su misura per voi e quindi non avere sostanzialmente il design simile ad altri blog che trovate online perché magari avete comprato un temete che ha quella struttura bloccata e limitata e sulla quale non potete effettuare effettuare nessun tipo di modifica.

Quindi per fare un breve rep abbiamo creato un temete per il singolo articolo di blog per crearlo è molto semplice, in realtà dovete solo decidere che tipo di volete inserire all'interno del singolo articolo.

Per accedere a questa funzione, come al solito, dovete andare su template team builder.

Aggiungerete un nuovo template per gli articoli singoli e una volta che siete all'interno della sezione andate a creare tutto il template customizzato.

Quindi colori, fonte, sezioni di sfondo, immagini di sfondo, tutto quello che volete.

Qui ci sono veramente tante opzioni di personalizzazione.

Una volta che creato la base sostanzialmente di come verrà mostrata la base grafica di come verrà mostrato in fronte il vostro articolo di blog, cliccate su pubblica e decidete le condizioni.

Se volete mostrare su tutti gli articoli di blog selezionate singoli applica su tutti pubblica e il gioco è fatto.