Come creare un modello di scheda ricetta con Divi Theme Builder

I food blogger e i creatori di ricette sanno quanto sia importante avere uno sguardo coerente alle ricette che pubblicano. Una soluzione comune consiste nell'utilizzare un plug-in per schede ricette, ma ciò comporta limitazioni di progettazione. Ora, con Divi Theme Builder, puoi creare il tuo modello di scheda di ricette da utilizzare in tutto il tuo sito e blog. Con l'aiuto del plug-in Advanced Custom Fields (ACF), la progettazione di una scheda ricetta unica e riutilizzabile è più facile che mai.

In questo post, ti mostreremo come creare un modello di scheda ricetta con contenuto dinamico. Utilizzando le impostazioni di Divi Theme Builder, il design può essere applicato ai post del blog che includono ricette selezionando quella categoria specifica. Speriamo che questo tutorial ti ispiri a creare il tuo stile di schede ricetta con i tuoi campi personalizzati.

Diamo un'occhiata a come appare il design su schermi di diverse dimensioni.

Anteprima del modello di scheda della ricetta

Diamo un'occhiata a come appare il design su schermi di diverse dimensioni.

Desktop

Tavoletta

Mobile

1. Scarica e installa il plugin Advanced Custom Fields

Cerca e installa

Trova il plug-in ACF cercando "Advanced Custom Fields" nella barra di ricerca del plug-in, installalo e attivalo.

Aggiungi nuovo gruppo di campi

Fare clic sulla scheda ACF e selezionare "aggiungi nuovo". Denominare il gruppo "Scheda di ricetta". Aggiungi i campi personalizzati uno per uno tramite il pulsante "aggiungi campo".

Aggiungi campi personalizzati

Per ogni campo personalizzato, fai clic sul pulsante "aggiungi campo". Ognuno può essere personalizzato per un diverso tipo di contenuto. L'elenco seguente specifica l'etichetta e il tipo per ogni campo. Aggiungi la parola "ricetta" all'inizio di ogni etichetta di campo in modo che sia facile da trovare quando crei i moduli. Il nome del campo verrà compilato automaticamente una volta aggiunta l'etichetta.

Titolo della ricetta

Inizia con il titolo della ricetta.

• Etichetta del campo: Titolo della ricetta
• Tipo di campo: testo
• Richiesto?: Sì
• Testo segnaposto: titolo della ricetta
• Limite di caratteri: 30

Autore della ricetta

Quindi, crea un campo per l'autore.

• Etichetta del campo: Autore della ricetta
• Tipo di campo: testo
• Richiesto?: Sì
• Testo segnaposto: Autore

Tempo di preparazione della ricetta

Seguilo con il tempo di preparazione.

• Etichetta del campo: Tempo di preparazione della ricetta
• Tipo di campo: Numero
• Richiesto?: Sì
• Testo segnaposto: ##
• Anteponi: Tempo di preparazione:
• Aggiungi: min.

Ricetta Porzioni

Poi, le porzioni.

• Etichetta campo: Ricetta Porzioni
• Tipo di campo: Numero
• Richiesto?: Sì
• Testo segnaposto: ##
• Anteponi: Porzioni:

Suggerimento per il gusto della ricetta

Aggiungi un campo di suggerimenti per il gusto.

• Etichetta del campo: Suggerimento sul sapore della ricetta
• Tipo di campo: testo
• Richiesto?: Sì
• Anteponi: Suggerimento per il gusto:
• Limite di caratteri: 40

Immagine della ricetta

Ora aggiungi il campo immagine.

• Etichetta del campo: immagine della ricetta
• Tipo di campo: Immagine
• Richiesto?: Sì

Ricetta Ingredienti Titolo

Poi, il titolo degli ingredienti.

• Etichetta campo: titolo ingredienti ricetta
• Tipo di campo: testo
• Istruzioni: basta scrivere come testo segnaposto.
• Richiesto?: Sì
• Testo segnaposto: Ingredienti

Lista degli ingredienti della ricetta

Seguilo con la lista degli ingredienti.

• Etichetta del campo: Elenco degli ingredienti della ricetta
• Tipo di campo: area di testo
• Istruzioni: aggiungi uno spazio dopo ogni elemento
• Richiesto?: Sì
• Righe: 8
• Nuove righe: aggiungi automaticamente <br>

Titolo della preparazione della ricetta

Penultimo, il titolo della preparazione.

• Etichetta campo: Titolo preparazione ricetta
• Tipo di campo: testo
• Istruzioni: basta scrivere come testo segnaposto.
• Richiesto?: Sì
• Testo segnaposto: Preparazione

Lista di preparazione delle ricette

Infine, la lista di preparazione.

• Etichetta campo: Lista preparazione ricetta
• Tipo di campo: area di testo
• Istruzioni: aggiungi uno spazio dopo ogni elemento
• Richiesto?: Sì
• Righe: 10
• Nuove righe: aggiungi automaticamente <br>

Pubblica gruppo di campi

Pubblica il gruppo di campi. La finestra del tuo gruppo di campi dovrebbe assomigliare allo screenshot qui sotto.

Come accedere al contenuto del plug-in ACF per il modello di scheda ricetta in Divi Builder

I campi personalizzati avanzati possono essere aggiunti a un modulo Divi facendo clic sull'icona del contenuto dinamico. Questa icona si trova nell'angolo in alto a destra della casella del contenuto. Ecco come appare:

2. Crea un nuovo modello di scheda ricetta con Divi Builder

Passaggi per il generatore di temi Divi

1. Crea una categoria di ricette

È necessaria una categoria denominata "ricette" in modo da potervi assegnare il modello. Aggiungilo nella scheda della categoria tramite la dashboard.

2. Apri Divi Theme Builder e aggiungi un nuovo modello

Apri il generatore di temi Divi e aggiungi un nuovo modello.

3. Aggiungi corpo globale

Fai clic su "aggiungi corpo globale" e assegna il modello ai post in categorie specifiche > ricette. Quindi, fai clic sul pulsante "crea modello".

4. Costruisci un corpo personalizzato

Fare clic su "aggiungi corpo globale" e selezionare "aggiungi corpo personalizzato".

3. Ricrea il design della scheda delle ricette utilizzando il contenuto dinamico

Aggiungi nuova sezione

Ora possiamo iniziare a progettare il modello di scheda delle ricette. Quando si apre Divi builder, seleziona "costruisci da zero". Inizia aggiungendo una nuova sezione.

Sfondo

Nelle impostazioni della sezione, aggiungi un colore di sfondo.

• Colore di sfondo: grigio chiaro #ededed

Dimensionamento

Inoltre, regola le dimensioni nella scheda Design.

• Larghezza: 100%
• Larghezza massima: 100%

Aggiungi la prima riga

Struttura della colonna

Aggiungi una nuova riga con una colonna.

Dimensionamento

Prima di aggiungere moduli, regola le impostazioni di dimensionamento della riga.

• Larghezza massima: 90%

Impostazioni colonna

Sfondo

Personalizza le impostazioni della colonna all'interno della riga. Innanzitutto, aggiungi un colore di sfondo.

• Colore di sfondo: bianco #ffffff

Frontiera

Quindi, modifica gli stili del bordo.

• Angoli arrotondati: 1vw tutti e quattro gli angoli
• Stili di bordo: tutti e quattro i lati
• Larghezza: 5px
• Colore: Grigio Molto Scuro #333333

Aggiungi modulo di testo con contenuto dinamico

Contenuto

Dopo aver completato le impostazioni di riga e colonna, è il momento di aggiungere i moduli. Inizia aggiungendo un modulo di testo. Nella finestra del contenuto, seleziona il contenuto dinamico per il titolo della ricetta. Una volta selezionato, fai clic sull'icona a forma di ingranaggio e inserisci gli snippet H1.

• Corpo: Titolo della ricetta
• Impostazioni del corpo:
  • Prima: <H1>
  • Dopo:</H1>

Testo dell'intestazione

Quindi, modella le impostazioni del testo H1 di conseguenza:

• Livello di intestazione: H1
• Carattere: Orienta
• Peso: grassetto
• Allineamento: Centro
• Colore: grigio molto scuro #3d3d3d
• Taglia:
  • Desktop: 3vw
  • Tablet: 4vw
  • Telefono: 5vw
• Spaziatura lettere: 3px
• Altezza della linea: 1,5 em

Spaziatura

Modifica anche i valori di spaziatura.

• Margine inferiore:
  • Desktop: -1vw
  • Tablet: -2vw
  • Telefono: -5vw
• Imbottitura superiore:
  • Desktop + Tablet: 1vw
  • Telefono: 2vw
• Imbottitura inferiore: 0vw
• Imbottitura sinistra + destra:
  • Desktop + Tablet: 3vw
  • Telefono: 4vw

Aggiungi il secondo modulo di testo con contenuto dinamico

Contenuto

Aggiungi un secondo modulo di testo e seleziona il contenuto dinamico per l'autore della ricetta.

• Corpo: autore della ricetta

Testo

Quindi, modella il testo.

• Carattere: codifica Sans
• Colore: grigio molto scuro #3d3d3d
• Taglia:
  • Desktop: 1.4vw
  • Tablet: 2.4vw
  • Telefono: 3vw
• Allineamento: Centro

Spaziatura

Successivamente, regolare la spaziatura.

• Margine superiore: 1,5 vw
• Imbottitura superiore:
  • Desktop + Tablet: 0vw
  • Telefono: 2vw
• Imbottitura inferiore: 2vw
• Imbottitura sinistra + destra:
  • Desktop: 2vw
  • Tablet + Telefono: 3vw

Aggiungi la seconda riga

Struttura della colonna

Ora aggiungi una seconda riga usando la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della riga e regola le impostazioni di dimensionamento di conseguenza:

• Larghezza grondaia: 2
• Larghezza: 90%
• Larghezza massima: 100%
• Allineamento riga: a sinistra

Spaziatura

Poi, il distanziamento.

• Imbottitura superiore + inferiore: 0,5 vw
• Imbottitura sinistra: 10vw

Visibilità

Infine, nella scheda Avanzate, regola la visibilità.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Impostazioni colonna 1 + 2 + 3

Frontiera

Disegna tutte e tre le colonne allo stesso modo. Per prima cosa, vai alle impostazioni del bordo e apporta alcune modifiche. Ripetere per tutte e tre le colonne.

• Angoli arrotondati: 1vw tutti e quattro gli angoli
• Stili di bordo: tutti e quattro i lati
• Larghezza: 5px
• Colore: Grigio Molto Scuro #333333

Trasformare

Per dare al disegno un effetto al passaggio del mouse, regola le impostazioni di trasformazione come segue. Ripetere per tutte e tre le colonne.

• Scala di trasformazione al passaggio del mouse: 105% x 105%

Aggiungi modulo di testo alla colonna 1

Contenuto

Aggiungi un modulo di testo e lascia vuota la finestra del contenuto per ora. Lo aggiungeremo più tardi.

Sfondo

Aggiungi un colore di sfondo al modulo.

• Colore di sfondo: verde lime #b1e88d

Testo dell'intestazione

Successivamente, modella le impostazioni del testo H5.

• Livello di intestazione: H5
• Carattere H5: Orienta
• Colore H5: grigio molto scuro #3d3d3d
• Dimensione H5:
  • Desktop: 1vw
  • Tablet: 2.3vw
  • Telefono: 3.3vw
• Allineamento: Centro

Spaziatura

Infine, regola i valori di spaziatura come segue.

• Imbottitura superiore:
  • Desktop: 1vw
  • Tablet: 1.5vw
  • Telefono: 3.5vw
• Imbottitura inferiore:
  • Desktop: 0.5vw
  • Tablet + Telefono: 1.5vw
• Imbottitura sinistra + destra:
  • Desktop: 2vw
  • Tablet + Telefono: 3vw

Duplica il modulo di testo dalla colonna 1 due volte e passa alle colonne 2 e 3

Nella vista wireframe, duplica il modulo di testo nella prima colonna. Quindi, sposta i duplicati nelle colonne 2 e 3.

Aggiungi contenuto dinamico al modulo di testo nella colonna 1

Aggiungi il contenuto dinamico per il tempo di preparazione e regola le impostazioni.

• Corpo: tempo di preparazione della ricetta
• Impostazioni del corpo:
  • Prima: <H5>Tempo di preparazione:
  • Dopo: min.</H5>

Aggiungi contenuto dinamico al modulo di testo nella colonna 2

Aggiungi il contenuto dinamico per le porzioni di ricette e regola le impostazioni.

• Corpo: Ricetta Porzioni
• Impostazioni del corpo:
  • Prima: <H5>Porzioni:
  • Dopo: </H5>

Aggiungi contenuto dinamico al modulo di testo nella colonna 3

Aggiungi il contenuto dinamico per la punta del gusto e regola le impostazioni.

• Corpo: ricetta gusto suggerimento
• Impostazioni del corpo:
  • Prima: <H5>Suggerimento aromatico:
  • Dopo: </H5>

Aggiungi 3a riga

Struttura della colonna

Ora aggiungi la terza riga usando la seguente struttura di colonne:

Dimensionamento

Prima di aggiungere qualsiasi modulo, regolare il dimensionamento della riga.

• Larghezza grondaia personalizzata: 2
• Larghezza: 80%
• Larghezza massima: 100%

Spaziatura

Inoltre, cancella il margine superiore predefinito.

• Margine superiore: 0vw

Visibilità

Infine, regola la visibilità nella scheda Avanzate.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Impostazioni colonna 1 + 2 + 3

Frontiera

Disegna tutte e tre le colonne allo stesso modo, a partire dalle impostazioni del bordo. Ripetere per le colonne 2 e 3.

• Angoli arrotondati: 1vw tutti e quattro gli angoli
• Stili di bordo: tutti e quattro i lati
• Larghezza: 5px
• Colore: Grigio Molto Scuro #333333

Trasformare

Continua aggiungendo una trasformazione al passaggio del mouse nella scheda Progettazione. Ripetere per le colonne 2 e 3.

• Scala di trasformazione al passaggio del mouse: 105% x 105%

Aggiungi modulo immagine con contenuto dinamico alla colonna 1

Contenuto

Aggiungi un modulo immagine con contenuto dinamico per l'immagine della ricetta.

• Immagine: immagine della ricetta

Aggiungi modulo di testo con contenuto dinamico alla colonna 2

Contenuto

Ora aggiungi un modulo di testo con contenuto dinamico per il titolo degli ingredienti. Fai clic sull'icona a forma di ingranaggio e inserisci gli snippet H3 come segue.

• Corpo del testo: Titolo degli ingredienti della ricetta
• Impostazioni del corpo:
  • Prima: <H3>
  • Dopo: </H3>

Testo dell'intestazione

Quindi, modella il testo dell'intestazione.

• Livello di intestazione: H3
• H3Font: Orienta
• Colore H3: grigio molto scuro #3d3d3d
• Dimensione H3:
  • Desktop: 1.6vw
  • Tablet: 2vw
  • Telefono: 5.5vw
• Allineamento: Centro

Spaziatura

Completa il modulo regolando la spaziatura.

• Margine inferiore: 0vw
• Imbottitura superiore:
  • Desktop: 2vw
  • Tablet: 3vw
  • Telefono: 4vw
• Imbottitura sinistra + destra:
  • Desktop: 2vw
  • Tablet + Telefono: 3vw

Aggiungi modulo divisore alla colonna 2

Linea

Aggiungi un modulo divisore e modellalo come segue.

• Colore: verde lime #b1e88d

Dimensionamento

Quindi regolare i valori di dimensionamento.

• Peso: 5px
• Larghezza: 40%
• Allineamento: Sinistra

Spaziatura

Infine, regola la spaziatura.

• Margine superiore: 0vw

Aggiungi modulo di testo con contenuto dinamico alla colonna 2

Contenuto

Aggiungi un modulo di testo con contenuto dinamico per l'elenco degli ingredienti. Fare clic sull'icona a forma di ingranaggio nella scheda del contenuto dinamico e abilitare l'HTML non elaborato.

• Corpo del testo: elenco degli ingredienti della ricetta
• Impostazioni corpo: abilita HTML non elaborato

Testo

Quindi, modella il testo come segue.

• Carattere: codifica Sans
• Colore: Grigio Molto Scuro #333333
• Taglia:
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telefono: 3vw

Spaziatura

Inoltre, regola la spaziatura.

• Margine superiore:
  • Desktop: -1vw
  • Tablet: -3vw
  • Telefono: -5vw
• Imbottitura superiore:
  • Desktop + Tablet: 0vw
• Imbottitura inferiore:
  • Desktop: 3vw
  • Tablet + Telefono: 4vw
• Imbottitura sinistra + destra:
  • Desktop: 3vw
  • Tablet: 4vw
  • Telefono: 5vw

Duplica tutti i moduli sulla colonna 2 e passa alla colonna 3

Nella vista wireframe, duplica tutti i moduli nella colonna due. Sposta i moduli duplicati nella colonna tre nello stesso ordine.

Aggiungi contenuto dinamico nel primo modulo di testo nella colonna 3

Aggiungi il contenuto dinamico per il titolo della preparazione.

• Corpo: Titolo della preparazione della ricetta

Aggiungi contenuto dinamico nel secondo modulo di testo nella colonna 3

Inoltre, aggiungi il contenuto dinamico per l'elenco dei preparativi all'ultimo modulo di testo della colonna.

• Corpo: Lista Preparazione Ricetta

Aggiungi la 4a riga

Struttura della colonna

Per completare il modello, abbiamo bisogno di un modulo di contenuto del post. Aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Prima di aggiungere un modulo, regolare il dimensionamento della riga.

• Larghezza grondaia personalizzata: 2
• Larghezza: 100%
• Larghezza massima: 80%

Spaziatura

• Imbottitura sinistra + destra: 0vw

Impostazioni colonna 1

Sfondo

Modella la colonna in modo che corrisponda alla scheda della ricetta sopra. Innanzitutto, aggiungi uno sfondo.

• Colore di sfondo: bianco #ffffff

Spaziatura

Inoltre, regola la spaziatura.

• Imbottitura sinistra: 0vw

Frontiera

Ultimo ma non meno importante, modifica le impostazioni del bordo.

• Angoli arrotondati: 1vw tutti e quattro gli angoli
• Stili di bordo: tutti e quattro i lati
• Larghezza: 5px
• Colore: Grigio Molto Scuro #333333

Lascia la colonna 2 vuota.

Aggiungi modulo contenuto post alla colonna 1

Testo

Aggiungi un modulo di contenuto del post alla colonna uno e modella il testo in modo che corrisponda al modello della scheda della ricetta.

• Carattere: codifica Sans
• Colore: Grigio Molto Scuro #333333
• Taglia:
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telefono: 3vw
• Altezza della linea: 2em

Titolo 1 Testo

• Carattere: Orienta
• Colore: Grigio Molto Scuro #333333
• Taglia:
  • Desktop: 2vw
  • Tablet: 5vw
  • Telefono: 6vw

Titolo 2 Testo

• Carattere: Orienta
• Colore: Grigio Molto Scuro #333333
• Taglia:
  • Desktop: 1.8vw
  • Tablet: 4.5vw
  • Telefono: 5.5vw

Titolo 3 Testo

• Carattere: Orienta
• Colore: Grigio Molto Scuro #333333
• Taglia:
  • Desktop: 1.6vw
  • Tablet: 4.5vw
  • Telefono: 5vw

Spaziatura

Per abbinare lo stile della scheda ricetta, regolare i valori di spaziatura.

• Imbottitura superiore + inferiore: 2vw
• Imbottitura sinistra + destra:
  • Desktop: 4vw
  • Tablet + Telefono: 6vw

Se vuoi cambiare il colore della linea blockquote o il colore del collegamento, puoi farlo nel personalizzatore del tema sotto il colore dell'accento.

4. Modifica/crea post utilizzando le impostazioni del plug-in ACF e il modello di scheda delle ricette

Inserisci campi personalizzati

Apri o aggiungi un post. Sotto l'area del contenuto, troverai tutti i campi personalizzati per il modello di scheda ricetta. Per ricreare questo disegno di avocado toast, compila i campi come segue.

Titolo della ricetta:

• Toast vegano superverde all'avocado

Autore della ricetta:

• Magdalena Swifter – www.veganchef.com

Tempo di preparazione della ricetta:

• 15

Porzioni della ricetta:

• 3

Suggerimento per il sapore della ricetta:

• Usa fiocchi di sale marino e olio extra vergine

Immagine della ricetta:

• Avocado Toast Immagine

Ingredienti della ricetta Titolo:

• ingredienti

Lista degli ingredienti della ricetta:

• 3 fette di pane integrale
• 1 avocado maturo
• 100 grammi. Fave Cotte
• 10 g. germogli verdi
• 1 cipollotto tritato
• 30 g. Feta sbriciolata
• 1 limone tagliato a metà
• Un goccio di olio d'oliva
• Cospargere di sale marino

Titolo della preparazione della ricetta:

• Preparazione

Lista Preparazioni Ricette:

• 1. Tostare le fette di pane a proprio piacimento.
• 2. Aprire l'avocado, togliere la polpa, schiacciare con una forchetta.
• 3. Spremere il succo di limone sull'avocado, condire con sale.
• 4. Spalma la poltiglia di avocado sul pane tostato.
• 5. Cospargere le fave, i germogli e il cipollotto tritato.
• 6. Condire con sale.
• 7. Aggiungi il formaggio feta sbriciolato.
• 8. Finire con olio d'oliva.

Dai un titolo al post

Titolo

Non dimenticare di aggiungere un titolo al tuo post.

• Ricetta Avocado Toast

Aggiungi contenuto, seleziona categoria e aggiungi immagine in primo piano

Scrivi o inserisci il contenuto del post del blog nell'editor normale. Seleziona la categoria delle ricette e aggiungi un'immagine in primo piano.

Anteprima del modello di scheda della ricetta

Ancora una volta, diamo un'altra occhiata a come appare il post finito con il modello di scheda delle ricette su diverse schermate.

Desktop

Tavoletta

Mobile

È un involucro!

Esaminiamo rapidamente i passaggi che abbiamo eseguito per realizzare questo modello di scheda di ricette.

1. Installa il plugin ACF.
2. Imposta un gruppo di campi della scheda ricetta.
3. Aggiungi campi personalizzati.
4. Crea un nuovo modello e assegnalo ai post del blog nella categoria "ricette".
5. Usa contenuto dinamico dai campi ACF nei moduli.
6. Crea o modifica un post sul blog compilando i campi.
7. Aggiungi il contenuto del post sul blog.

Poiché questo design è stato creato come un modello con contenuto dinamico, rimarrà coerente in tutti i post del blog di ricette che utilizzano i campi personalizzati del plug-in ACF. Ci auguriamo che il design di questo modello di scheda delle ricette ispiri tutti i tipi di modelli di ricette nuovi e innovativi per i tuoi blog relativi al cibo. Fateci sapere che ne pensate nei commenti.