Creare un Layout dinamico per le Ricette con DIVI è ancora più semplice con il nuovo Theme Builder di Elegant Themes. Il produttore del tema infatti ha regalato uno strumento utile per tutti gli utenti che vogliono personalizzare ancora di più il proprio sito. Blog di ricette, portali di cucina: ogni articolo può avere uno stile unico e allo stesso tempo interessante agli occhi degli utenti. Noi di Wp Win abbiamo pensato per te una guida su come creare un Layout dinamico per le Ricette renderà la vita facile a tutti i webmaster amatoriali e non! Scopriamo di seguito che cosa ci occorre prima di iniziare e tutti i passaggi.
Sommario
Strumenti necessari:
- Divi Theme Builder
- ACF (Advanced Custom Fields)
Il primo lo dovresti già conoscere, mentre il secondo è un plugin WordPress che trovi con facilità nella repository ufficiale.
Anteprima
Prima di immegergerci nel tutorial su come creare un Layout per le ricette, diamo uno sguardo a quale sarà il risultato che otterremo, sia per quanto riguarda il Theme Builder sia per scoprire lato utente quale sarà lo stile che regaleremo ai nostri navigatori.
Builder
Post
Scarica subito il Layout per le Ricette
Abbiamo pensato anche a te che hai fretta di arrivare alla fine di questo tutorial senza perdere tempo. Puoi fare il download in modo gratuito e utilizzarlo tutte le volte che vuoi. Per scaricare sul tuo pc o laptop il contenuto, segui i passaggi che trovi qui di seguito.
Installazione di ACF e creazione dei campi personalizzati
Una volta installato il plugin, vedrai comparire sul menu di sinistra la voce Campi Personalizzati. Nel sottomenu trovi invece fra le tre opzioni la possibilità di aggiungere un nuovo gruppo, ciò che vogliamo fare insomma. Ti si aprirà l’interfaccia per creare da zero il nuovo campo personalizzato: la prima cosa da fare è scegliere un nome: ti consigliamo di definirlo in modo chiaro, in modo da renderlo differente da eventuali categorie e tag che hai già creato all’interno del tuo sito. Nel nostro caso abbiamo scelto Ricetta Template. Prima di passare alle voci successive clicca sul primo pulsante che trovi ovvero Aggiungi Campo.
Titolo
Comparirà un frame in cui inserire alcune voci che a prima vista ti sembreranno forse assurde. Ne andremo a compilare solo alcune, quelle che ci interessano, tralasciando invece altre più specifiche.
- Etichetta Campo
- Tipo di Campo
- Richiesto?
- Testo segnaposto
- Limite carattere
Puoi guardare l’immagine qui di seguito per intuire come muoverti e compilare i vari box.
Autore
Prima di chiudere tutto clicca di nuovo su Aggiungi Campo e pensiamo al box autore. Le voci da compilare sono le seguenti:
- Etichetta Campo – Ricetta Autore
- Tipo di Campo – Testo
- Richiesto? – sì
- Testo Segnaposto – Autore
Tempi di preparazione
Aggiungiamo un altro campo per i tempi richiesti per la preparazione della nostra ricetta:
- Etichetta – Ricetta Preparazione Tempo
- Tipo di Campo – Numero
- Richiesto? – sì
- Testo Segnaposto – ##
- Anteponi – Tempo richiesto:
- Accodare – min.
Porzioni e Consigli
Uno degli altri dettagli che di solito trovi nei template delle ricette di cucina riguarda il numero di porzioni. Aggiungiamo un altro campo seguendo queste direttive:
- Etichetta – Ricetta Porzioni
- Tipo di Campo – Numero
- Richiesto? – sì
- Testo segnaposto – ##
- Anteponi – Porzioni:
Di solito ogni Chef/Cuoco/Appassionato regala alcuni consigli utili su come preparare le ricette al meglio. Una piccola variante per esempio oppure un suggerimento sul tipo di accessori da cucina da utilizzare. Pensiamo quindi anche a questo particolare ideando un nuovo campo di testo per rendere più ricco il nostro post. Tieni presente però che siamo solo all’inizio della guida su come creare un Layout per le Ricette. Facciamo poi questi cambiamenti:
- Etichetta – Ricetta Consigli
- Tipo di Campo – Testo
- Richiesto? – sì
- Anteponi – Consigli:
- Limite Carattere – 40:
L’immagine
Passiamo all’immagine:
- Etichetta – Ricetta Immagine
- Tipo – Immagine
- Richiesto? – sì
Come puoi notare, la voce Dimensione Anteprima ti suggerisce già l’utilizzo della grandezza Media 300×300. A tua discrezione scegliere un’anteprima più grande o più piccola, a seconda delle tue esigenze. In questo caso abbiamo scelto di lasciare le impostazioni di base perchè ci saranno utili per creare il layout delle ricette con Divi.
Ingredienti, etichetta e lista
Ora non possiamo che pensare agli ingredienti, il cuore di ogni ricetta che si rispetti. Compila in questo modo:
- Etichetta – Ricetta Ingredienti Titolo
- Tipo di Campo – Testo
- Istruzioni – Scrivi lo stesso testo usato per il segnaposto
- Richiesto? – sì
- Segnaposto – Ingredienti
- Limite Carattere – 40
E anche alla lista degli ingredienti:
- Etichetta – Ricetta Ingredienti Lista
- Tipo di Campo – Area di testo
- Istruzioni –
- Richiesto? – sì
- Righe – 8
- Nuove linee – Aggiungi automaticamente <br>
La preparazione
Siamo arrivati al penultimo passaggio: il titolo della preparazione. Aggiungiamo un campo secondo questi requisiti:
- Etichetta Campo – Ricetta Preparazione Titolo
- Tipo di Campo – Testo
- Istruzioni – Scrivi lo stesso testo usato per il segnaposto
- Richiesto? – sì
- Testo Segnaposto – Preparazione
E ora la lista necessaria per la preprazione:
- Etichetta Campo – Ricetta Preparazione Lista
- Tipo di Campo – Area di testo
- Istruzioni – Inserisci uno spazio dopo ogni parola
- Richiesto? – sì
- Righe – 10
- Nuove linee – Aggiungi automaticamente <br>
Adesso ritorna all’inizio della pagina e clicca su Pubblica per rendere attivo l’intero gruppo. Controlla l’immagine qui di seguito per vedere se corrisponde a ciò che ti apparirà una volta completati tutti questi passaggi. Come puoi notare, abbiamo creato tutti i campi necessari per completare la prima parte del Layout per le Ricette. Entriamo nel dettaglio!
Se il tuo blog prevede qualche ricetta e si occupa anche di altro in generale (strumenti di cucina, vlog, ecc), allora avrai già pensato alle categorie da assegnare alle schede tecniche, magari una generica categoria ricetta. Oppure il tuo sito parla solo di ricette e in questo caso avrai pensato a monte ad una struttura più specifica, dividendo ogni articolo magari in ricette senza uova, ricette senza latte e via dicendo. In questo caso ricordati che nei passaggi successivi dovrai inserire tutte le categorie a cui vuoi assegnare il layout di Divi per le ricette.
Adesso possiamo pensare al Divi Theme Builder, creando la grafica generale per le nostre ricette. Clicca sul Generatore di Temi e inserisci un nuovo Modello. Ti si aprirà la finestra delle impostazioni che ti mostreremo fra poco nell’immagine: dovrai attivare questo particolare layout solo per gli articoli presenti nelle categorie dedicate alla cucina. Come puoi notare nell’esempio sono presenti anche altre categorie che non hanno nulla a che vedere con la cucina e che quindi non vogliamo modificare.
Quando hai terminato, clicca su Crea Modello e poi su Aggiungi corpo personalizzato. Infine seleziona Crea corpo personalizzato perchè non ci interessa utilizzare i contenuti presenti nella nostra Libreria.
Come creare il Layout per le Ricette: i dettagli
Fino ad ora abbiamo pensato alla base per realizzare il nostro Layout per le ricette con Divi. Adesso è arrivato finalmente il momento di creare la parte grafica! Segui tutti i passaggi che trovi qui di seguito per costruire la tua paginetta.
La sezione
Dopo aver selezionato Build From Scratch nella schermata principale, il tema ci dirotterà in automatico alla prima riga. Facciamo un passo indietro e chiudiamo la scheda delle righe, cliccando invece sulla rotellina delle impostazioni della prima sezione. Rimaniamo su Contenuti e inseriamo uno sfondo bianco oppure lasciamolo vuoto. Aggiustiamo anche il Dimensionamento in Design portando al 100% sia la Larghezza Massima che la voce successiva, Larghezza massima.
La prima riga
Ora possiamo pensare al contenuto, aggiungendo una riga. Scegliamo il design con una singola colonna e prima di aggiungere il modulo portiamo al 90% la Larghezza Massima in Design/Dimensionamento. Torniamo indietro nella scheda Contenuti e clicchiamo sulla rotellina alla sinistra della voce Colonna per aprire il submenu. Scegliamo di inserire uno sfondo bianco (#ffffff).
Il bordo
Creiamo un bordo in Design, portando a 1vw tutti e quattro gli angoli. Lo spessore dovrà essere di 5px e il colore potrebbe essere bianco, ma solo se lo sfondo che hai scelto per l’intera pagina è colorato. Se invece hai scelto il bianco nei passaggi precedenti, puoi evitare di creare il bordo.
Il Testo
Ora possiamo inserire un modulo testo all’interno di questa prima riga. All’interno verrà inserito il titolo della nostra ricetta: come? In Contenuti/Testo cancelliamo il paragrafo che il tema inserisce di default e clicchiamo sui tre dischetti in alto a destra.
Si aprirà un altro submenu con l’elenco di tutti i titoli dinamici da utilizzare, fra cui anche quelli che abbiamo creato con ACF. Scegliamo Ricetta Titolo e nella tendina successiva specifichiamo che si tratta di un H1.
Andiamo quindi in Design/Testo del Sottotitolo e assicuriamoci di lavorare sull’H1:
- Font – Orienta
- Luce Soffusa – Testo in grassetto
- Allineamento – Centrale
- Colore – Grigio scuro (#3d3d3d)
- Dimensioni – 3vw Desktop, 4vw Tablet, 5vw Telefono
- Spaziatura – 3px
- Interlinea – 1.5em
Spaziatura
Inseriamo un po’ di spazio per migliorare l’aspetto del titolo:
- Margine In Fondo -1vw Desktop, -2vw Tablet, -5vw Telefono
- Padding In Cima 1vw Desktop e Tablet, 2vw Telefono
- Padding In Fondo 0vw
- Padding Sinistra e Destra 3vw Desktop e Tablet, 4vw Telefono
Secondo modulo di testo
Aggiungiamo un altro modulo di testo al di sotto di quello appena completato. Selezioniamo come contenuto dinamico Ricetta Autore e modifichiamo i seguenti parametri in Design/Testo:
- Font – Encode Sans
- Colore – #3d3d3d
- Dimensione 1.4vw (Desktop), 2.4 (Tablet), 3vw (Telefono)
- Allineamento – Centrale
Spaziatura
In Design/Spaziatura facciamo altre modifiche:
- Margine In Cima – 1.5vw
- Padding In Cima – 0vw (Desktop e Tablet), 3vw (Telefono)
- Padding In Fondo – 2vw
- Padding Sinistra e Destra – 2vw (Desktop), 3vw (Tablet e Telefono)
Seconda Riga
Per continuare a realizzare il nostro Layout per ricette con Divi dovremo inserire una seconda riga. Ci sarà utile per creare le colonne con i vari dettagli. Scegli il modello che vedi nell’immagine qui sotto, con due box piccoli a sinistra e uno più grande a destra.
Prima di andare avanti e pensare ai moduli, facciamo qualche modifica a Design/Dimensionamento:
- Attiva Personalizzate Grondaia Larghezza
- Spaziatura Colonne – 2
- Larghezza Massima – 90%
- Larghezza massima – 100%
- Allineamento – Sinistra
Rimaniamo nella stessa scheda e passiamo alla voce Spaziatura:
- Padding In Cima e In Fondo – 0.5vw
- Padding Sinistra – 10vw
In Avanzate/Visibilità selezioniamo questi valori:
- Overflow orizzontale – visibile
- Overflow verticale – visibile
Le Colonne
Torniamo indietro in Contenuti, clicchiamo sulla rotellina della prima colonna e andiamo in Design/Bordo per aggiungere 1vw a tutti e quattro gli angoli. Spessore 5px, colore bianco (solo se hai lo sfondo di un altro colore). In Trasformare cambiamo invece la Scala, attivando la casella dell’Hover (detto anche Librarsi), portando entrambi i valori da 100% a 105%.
Per far sì che ogni colonna abbia gli stessi valori torniamo in Contenuti, clicchiamo sui tre pallini che troviamo in fondo alla prima colonna e selezioniamo Copia Modulo Stili. Seguiamo la stessa procedura per le altre due colonne, scegliendo però Incolla Modulo Stili.
Prima Colonna
Adesso passiamo alla prima colonna, inserendo un modulo di testo. Scegliamo come sfondo il colore verde chiaro e andiamo subito su Design/Testo del sottotitolo, selezionando H5:
- Font – Orienta
- Colore – #3d3d3d
- Allineamento Centrale
- Dimensioni 1vw (Desktop), 2.3vw (Tablet), 3.3vw (Telefono)
Aggiungiamo un po’ di spazio:
- Padding In Cima – 1vw(Desktop), 1.5vw (Tablet), 3.5vw (Telefono)
- Padding In Fondo – 0.5vw (Desktop), 1.5vw (Tablet e Telefono)
- Padding Sinistra e Destra – 2vw (Desktop), 3vw (Tablet e Telefono)
Adesso copiamo il primo modulo e incolliamolo nelle colonne 2 e 3 oppure duplichiamo il primo e spostiamo il contenuto nelle altre colonne.
Contenuto Colonne
Ogni colonna dovrà avere al suo interno un testo diverso, come sempre scelto in modo dinamico. Nella prima colonna inseriamo Ricetta Preparazione Tempo, inserendo <h5>Tempo richiesto: prima e min.</h5> dopo. Aggiungi anche uno spazio in uno dei due campi, alla fine del primo testo o all’inizio del secondo.
Nella seconda colonna mettiamo invece il testo dinamico per le preparazioni, inserendo <h5>Porzioni: in Prima e </h5> in Dopo. La terza colonna è destinata ai Consigli dello Chef. Il testo dinamico è quindi Ricetta Consigli con <h5>Consigli: in Prima e </h5> in Dopo.
Terza Riga
Salviamo tutto e inseriamo un’altra riga al di sotto di questa. Le colonne dovranno avere un box più largo a sinistra e due più piccoli a destra. In pratica è la scelta successiva a quella fatta in precedenza.
Dimensionamento e Spaziatura
Prima di inserire i moduli, facciamo delle modifiche alle dimensioni della riga (Design/Dimensionamento):
- Attiva Personalizzate Grondaia Larghezza
- Spaziatura Colonne 2
- Larghezza Massima 80%
- Larghezza massima 100%
In Spaziatura portiamo invece solo il Margine In Cima a 0vw e poi attiviamo la visibilità orizzontale e verticale come abbiamo fatto prima. I due parametri si trovano in Avanzate/Visibilità .
Bordo
Pensiamo quindi al bordo delle nostre tre colonne, variando all’inizio solo i parametri della prima. Per farlo, andiamo su Contenuti e clicchiamo sulla rotellina delle impostazioni della prima colonna. Poi andiamo in Design/Bordo:
- 1vw ai quattro angoli
- Spessore 5px
- Colore bianco
In Trasformare modifichiamo invece l’Hover della scala, portando il suo valore a 105% per x e y. Quindi salviamo tutto e copiamo gli stili della prima colonna, incollandoli nella seconda e terza.
Contenuti Terza riga
Passiamo ora ai contenuti di ogni box. Nella prima colonna possiamo mettere l’immagine, visto che occupa più spazio delle ‘gemelle’. Come sempre il contenuto dovrà essere dinamico.
Colonna 1, immagine dinamica
Aggiungiamo quindi il modulo immagine. Di default il tema inserisce un’immagine standard, ma ricordiamoci che a noi interessa come sempre il contenuto dinamico che abbiamo creato nella prima parte di questa guida su come realizzare un Layout per le ricette con Divi. Per farlo dobbiamo prima cancellare il contenuto d’esempio cliccando sull’icona del cestino, poi selezionare i tre dischetti e scegliere Ricetta Immagine dall’elenco successivo.
Colonna 2, il titolo degli Ingredienti
Nella seconda colonna inseriamo un modulo di testo e peschiamo dai contenuti dinamici il nostro Ricetta Ingredienti Titolo. Prima <h3> e Dopo </h3>, poi salva.
In Design/Testo del Sottotitolo selezioniamo H3 e cambiamo i parametri:
- Font – Orienta
- Colore – #3d3d3d
- Allineamento – Centrale
- Dimensioni 1.6vw (Desktop), 2vw (Tablet), 5.5vw (Telefono)
Spaziatura
Inseriamo un po’ di spazio in Design/Spaziatura:
- Margine In Cima – 0vw
- Padding In Cima – 2vw (Desktop), 3vw (Tablet), 4vw (Telefono)
- Padding Sinistra e Destra 2vw (Desktop), 3vw (Tablet e Telefono)
Modulo separatore
Abbiamo bisogno di un altro contenuto per creare una sorta di divisione: cosa c’è di meglio se non un modulo separatore? Aggiungiamolo alla seconda colonna e scegliamo il colore verde chiaro in Design/Linea. Poi spostiamoci in Dimensionamento:
- Spessore – 5px
- Larghezza Massima – 40%
- Allineamento – Sinistra
In Spaziatura portiamo invece a 0vw il valore del Margine In Cima.
La lista Ingredienti
Aggiungiamo un altro modulo di testo e scegliamo come contenuto dinamico Ricetta Ingredienti Lista e nel sottomenu successivo abilitiamo solo la casella Abilita HTML non elaborato.
Poi andiamo su Design/Testo per fare alcuni cambiamenti:
- Font – Encode Sans
- Colore – #333333
- Dimensioni – 0.9vw (Desktop), 2vw (Tablet), 3vw (Telefono)
Spaziatura
Modifichiamo un po’ lo spazio:
- Margine In Cima:
- Desktop -1vw
- Tablet -3vw
- Telefono -5vw
- Padding In Cima – 0vw Desktop e Tablet, auto Telefono
- Padding In Fondo:
- Desktop – 3vw
- Tablet e Telefono – 4vw
- Padding Sinistra e Destro:
- Desktop – 3vw
- Tablet – 4vw
- Phone – 5vw
Adesso puoi duplicare tutti e tre i moduli nella colonna 3.
Quarta riga
Siamo quasi giunti alla fine, ma prima di scoprire i passaggi conclusivi su come creare un Layout per ricette con Divi abbiamo bisogno di aggiungere un’altra riga al di sotto della precedente. I parametri sono i seguenti.
Dimensionamento
Attiva Personalizzate Grondaia e sposta a due il numero di colonne. La Larghezza Massima dovrà essere al 100% mentre quella massima all’80%. In Spaziatura modifica solo il valore del Padding Destro e Sinistro portando entrambi a 0vw.
Colonna 1
Clicca sulla rotellina della prima colonna per accedere alle impostazioni e scegli il colore bianco per lo sfondo nella scheda Contenuti. In Design/Spaziatura porta invece a 0vw il solo valore del Padding di sinistra. In Bordo aumenta a 1vw tutti e quattro gli angoli e poi:
- Spessore 5px
- Colore #333333
Lascia le impostazioni della colonna 2 così come sono, salva tutto e aggiungi un modulo testo nella prima colonna. Modifica quindi i parametri in Design/Testo:
- Font – Encode Sans
- Colore – #333333
- Dimensioni:
- Desktop 0.9vw
- Tablet 2vw
- Telefono 3vw
- Interlinea – 2em
Cambiamo anche i dettagli del Testo del sottotitolo:
H1
- Font – Orienta
- Colore #333333
- Dimensioni:
- Desktop 2vw
- Tablet 5vw
- Telefono 6vw
H2
- Font – Orienta
- Colore #333333
- Dimensioni:
- Desktop 1.8vw
- Tablet 4.5vw
- Telefono 5.5vw
H3
- Font – Orienta
- Colore #333333
- Dimensioni:
- Desktop 1.6vw
- Tablet 4.5vw
- Telefono 5vw
Spaziatura
Modifichiamo alcuni particolari per migliorare lo spazio attorno al testo:
- Padding In Cima e In Fondo – 2vw
- Padding Sinistro e Destro:
- Desktop 4vw
- Tablet e Telefono 6vw
Dove va a finire il testo del post?
Sia chiaro: fino ad ora abbiamo scoperto solo i passaggi per realizzare un Layout per le Ricette. Diamo per scontato che non ci saranno solo tabelle e titoli, ma anche una spiegazione esaustiva su come eseguire i vari passaggi. E questo riguarda sia gli articoli già creati sia quelli che vogliamo iniziare ad offrire al nostro pubblico online. Per inserire il testo del post, occorre solo aggiungere una nuova riga o sezione da due box. Perchè? Diamo per scontato che uno di questi conterrà il testo nudo e crudo della nostra ricetta, mentre nell’altro potremo inserire Widget e pubblicità . In questo tutorial ci occuperemo per ora solo del primo spazio: se cerchi come inserire una sidebar, ti suggeriamo di dare un’occhiata alla nostra guida su come creare un blog con Divi.
Il modulo Pubblica Contenuto
Una piccola premessa: i due box dovranno essere di dimensioni diverse. Va da sè che la larghezza maggiore andrà assegnata al testo e quella minore ai Widget. Scegli quindi se posizionare il post a destra o a sinistra della pagina, poi aggiungi un modulo Pubblica Contenuto nello spazio che preferisci. Nell’esempio teniamo in considerazione il lato sinistro e facciamo alcune modifiche:
- Font Orienta
- Dimensioni 18px
Tutto qua!
Conclusioni
Adesso sai tutto su come creare un Layout per le Ricette con Divi. Siamo sicuri che potrà esserti utile, soprattutto se sceglierai di non regalare ai tuoi navigatori uno stile preconfezionato. Migliorare sempre di più lo stile del nostro sito e renderlo unico potrebbe davvero fare la differenza! Se hai ancora dubbi o richieste, lasciaci un messaggio utilizzando il form che trovi qui sotto e ti risponderemo il più presto possibile.