Cum să creați un șablon de card de rețetă cu Divi Theme Builder

Publicat: 2019-11-26

Bloggerii de produse alimentare și creatorii de rețete știu cât de important este să ai un aspect consecvent față de rețetele pe care le publică. O soluție obișnuită este utilizarea unui plugin pentru carduri de rețetă, dar care vine cu limitări de proiectare. Acum, cu Divi Theme Builder, puteți crea propriul șablon de card de rețetă pentru a fi utilizat pe tot site-ul și blogul dvs. Cu ajutorul pluginului Advanced Custom Fields (ACF), proiectarea unui card de rețetă unic și reutilizabil este mai ușoară ca niciodată.

În această postare, vă vom arăta cum să creați un șablon de card de rețetă cu conținut dinamic. Prin utilizarea setărilor Divi Theme Builder, designul poate fi aplicat postărilor de blog care includ rețete, selectând acea categorie specifică. Sperăm că acest tutorial vă va inspira să creați propriul stil de cărți de rețetă cu câmpurile dvs. personalizate.

Să aruncăm o privire asupra aspectului designului pe diferite dimensiuni de ecran.

Previzualizare șablon card de rețetă

Să aruncăm o privire asupra aspectului designului pe diferite dimensiuni de ecran.

Desktop

Comprimat

Mobil

1. Descărcați și instalați pluginul Advanced Custom Fields

Căutați și instalați

Găsiți pluginul ACF căutând „Câmpuri personalizate avansate” în bara de căutare a pluginului, instalați-l și activați-l.

Adăugați un nou grup de câmp

Faceți clic pe fila ACF și selectați „adăugați un nou”. Denumiți grupul „Card de rețetă”. Adăugați câmpurile personalizate unul câte unul prin butonul „Adăugați câmp”.

Adăugați câmpuri personalizate

Pentru fiecare câmp personalizat, faceți clic pe butonul „Adăugați câmp”. Fiecare poate fi personalizat pentru un tip diferit de conținut. Lista de mai jos specifică eticheta și tipul pentru fiecare câmp. Adăugați cuvântul „rețetă” la începutul fiecărei etichete de câmp, astfel încât să fie ușor de găsit atunci când construiți modulele. Numele câmpului se va completa automat după ce ați adăugat eticheta.

Titlul rețetei

Începeți cu titlul rețetei.

  • Etichetă câmp: Titlu rețetă
  • Tipul câmpului: Text
  • Obligatoriu ?: Da
  • Text substituent: titlul rețetei
  • Limita de caractere: 30

Autor rețetă

Apoi, creați un câmp pentru autor.

  • Etichetă câmp: Autor rețetă
  • Tipul câmpului: Text
  • Obligatoriu ?: Da
  • Text substituent: autor

Timp de pregătire a rețetei

Urmați acest lucru cu timpul de pregătire.

  • Etichetă de câmp: Timp de pregătire a rețetei
  • Tipul câmpului: Număr
  • Obligatoriu ?: Da
  • Text substituent: ##
  • Prepend: Prep Time:
  • Atașați: min.

Porții de rețete

Apoi, porțiile.

  • Etichetă de câmp: Porții de rețetă
  • Tipul câmpului: Număr
  • Obligatoriu ?: Da
  • Text substituent: ##
  • Prepend: Porții:

Sfat de aromă de rețetă

Adăugați un câmp de vârf de aromă.

  • Etichetă de câmp: Sfat de aromă de rețetă
  • Tipul câmpului: Text
  • Obligatoriu ?: Da
  • Prepend: Sfat de aromă:
  • Limita de caractere: 40

Imagine rețetă

Acum, adăugați câmpul de imagine.

  • Etichetă de câmp: Imagine rețetă
  • Tipul câmpului: Imagine
  • Obligatoriu ?: Da

Rețetă Ingrediente Titlu

Apoi, titlul ingredientelor.

  • Etichetă câmp: Titlu ingrediente rețetă
  • Tipul câmpului: Text
  • Instrucțiuni: scrieți la fel ca textul substituent.
  • Obligatoriu ?: Da
  • Text substituent: ingrediente

Lista de ingrediente a rețetei

Urmați acest lucru cu lista de ingrediente.

  • Etichetă de câmp: Lista ingredientelor rețetei
  • Tipul câmpului: zonă de text
  • Instrucțiuni: Adăugați un spațiu după fiecare articol
  • Obligatoriu ?: Da
  • Rânduri: 8
  • Linii noi: adăugați automat <br>

Titlu pregătire rețetă

Pe lângă ultimul, titlul pregătirii.

  • Etichetă de câmp: Titlul pregătirii rețetei
  • Tipul câmpului: Text
  • Instrucțiuni: scrieți la fel ca textul substituent.
  • Obligatoriu ?: Da
  • Text substituent: Pregătire

Lista de pregătire a rețetei

În cele din urmă, lista de pregătire.

  • Etichetă de câmp: Listă de pregătire a rețetei
  • Tipul câmpului: zonă de text
  • Instrucțiuni: Adăugați un spațiu după fiecare articol
  • Obligatoriu ?: Da
  • Rânduri: 10
  • Linii noi: adăugați automat <br>

Publicați grupul de câmp

Publică grupul de câmp. Fereastra grupului dvs. de câmpuri ar trebui să arate ca imaginea de mai jos.

Cum să accesați conținutul pluginului ACF pentru șablonul de card de rețetă din The Divi Builder

Câmpurile personalizate avansate pot fi adăugate la un modul Divi făcând clic pe pictograma conținut dinamic. Această pictogramă se află în colțul din dreapta sus al casetei de conținut. Așa arată:

2. Creați un nou șablon de card de rețetă cu Divi Builder

Divi Theme Builder Steps

1. Creați o categorie de rețete

Aveți nevoie de o categorie numită „rețete”, astfel încât să îi puteți atribui șablonul. Adăugați-l în fila Categorie prin tabloul de bord.

2. Deschideți Divi Theme Builder și adăugați un șablon nou

Deschideți generatorul de teme Divi și adăugați un șablon nou.

3. Adăugați un corp global

Faceți clic pe „adăugați corp global” și atribuiți șablonul postărilor din anumite categorii> rețete. Apoi, faceți clic pe butonul „creați șablonul”.

4. Construiți corp personalizat

Faceți clic pe „adăugați corp global” și selectați „adăugați corp personalizat”.

3. Recreați proiectarea cardului de rețetă folosind conținut dinamic

Adăugați o secțiune nouă

Acum, putem începe să proiectăm șablonul de card de rețetă. Când se deschide constructorul Divi, selectați „construiți de la zero”. Începeți prin adăugarea unei noi secțiuni.

fundal

În setările secțiunii, adăugați o culoare de fundal.

  • Culoare fundal: Gri deschis # redat

Dimensionare

De asemenea, reglați dimensiunea în fila de proiectare.

  • Lățime: 100%
  • Lățime maximă: 100%

Adăugați primul rând

Structura coloanei

Adăugați un rând nou cu o coloană.

Dimensionare

Înainte de a adăuga module, ajustați setările de dimensionare ale rândului.

  • Lățime maximă: 90%

Setări coloană

fundal

Personalizați setările coloanei din interiorul rândului. Mai întâi, adăugați o culoare de fundal.

  • Culoare fundal: alb #ffffff

Frontieră

Apoi, modificați stilurile de margine.

  • Colțuri rotunjite: 1vw toate cele patru colțuri
  • Stiluri de frontieră: toate cele patru laturi
  • Lățime: 5 px
  • Culoare: Foarte gri închis # 333333

Adăugați un modul text cu conținut dinamic

Conţinut

După ce ați completat setările de rând și coloană, este timpul să adăugați module. Începeți prin adăugarea unui modul text. În fereastra de conținut, selectați conținutul dinamic pentru titlul rețetei. Odată selectat, faceți clic pe pictograma roată și introduceți fragmente H1.

  • Corp: titlul rețetei
  • Setări corp:
    • Înainte: <H1>
    • După: </H1>

Text de antet

Apoi, stilizați setările textului H1 în consecință:

  • Nivel de titlu: H1
  • Font: Orienta
  • Greutate: îndrăzneț
  • Aliniere: centru
  • Culoare: Foarte gri închis # 3d3d3d
  • Mărimea:
    • Desktop: 3vw
    • Tabletă: 4vw
    • Telefon: 5vw
  • Spațierea literelor: 3 px
  • Înălțimea liniei: 1,5em

Spațiere

Modificați și valorile de spațiere.

  • Marja inferioară:
    • Desktop: -1vw
    • Tabletă: -2vw
    • Telefon: -5vw
  • Căptușeală superioară:
    • Desktop + Tabletă: 1vw
    • Telefon: 2vw
  • Căptușeală inferioară: 0vw
  • Căptușeala stânga + dreapta:
    • Desktop + Tabletă: 3vw
    • Telefon: 4vw

Adăugați al 2-lea modul de text cu conținut dinamic

Conţinut

Adăugați un al doilea modul text și selectați conținutul dinamic pentru autorul rețetei.

  • Corp: Autor rețetă

Text

Apoi, stilizați textul.

  • Font: Encode Sans
  • Culoare: Foarte gri închis # 3d3d3d
  • Mărimea:
    • Desktop: 1.4vw
    • Tabletă: 2.4vw
    • Telefon: 3vw
  • Aliniere: centru

Spațiere

Apoi, reglați distanța.

  • Marja superioară: 1,5vw
  • Căptușeală superioară:
    • Desktop + Tabletă: 0vw
    • Telefon: 2vw
  • Căptușeală inferioară: 2vw
  • Căptușeala stânga + dreapta:
    • Desktop: 2vw
    • Tabletă + telefon: 3vw

Adăugați al doilea rând

Structura coloanei

Acum, adăugați un al doilea rând folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și ajustați setările de dimensionare în consecință:

  • Lățimea jgheabului: 2
  • Lățime: 90%
  • Lățime maximă: 100%
  • Alinierea rândurilor: la stânga

Spațiere

Apoi, distanța.

  • Căptușeală superioară + inferioară: 0,5vw
  • Căptușeală stângă: 10vw

Vizibilitate

În cele din urmă, în fila avansată, reglați vizibilitatea.

  • Overflow orizontal: vizibil
  • Overflow vertical: vizibil

Coloana 1 + 2 + 3 Setări

Frontieră

Stilizați toate cele trei coloane în același mod. Mai întâi, accesați setările de frontieră și efectuați câteva modificări. Repetați pentru toate cele trei coloane.

  • Colțuri rotunjite: 1vw toate cele patru colțuri
  • Stiluri de frontieră: toate cele patru laturi
  • Lățime: 5 px
  • Culoare: Foarte gri închis # 333333

Transforma

Pentru a oferi designului un efect de plutire, reglați setările de transformare după cum urmează. Repetați pentru toate cele trei coloane.

  • Scară de transformare la plimbare: 105% x 105%

Adăugați un modul de text în coloana 1

Conţinut

Adăugați un modul text și lăsați fereastra de conținut goală pentru moment. Vom adăuga asta mai târziu.

fundal

Adăugați o culoare de fundal modulului.

  • Culoare fundal: Verde lime # b1e88d

Text de antet

Stilați setările textului H5 în continuare.

  • Nivel de titlu: H5
  • Font H5: Orienta
  • Culoare H5: Foarte gri închis # 3d3d3d
  • Dimensiune H5:
    • Desktop: 1vw
    • Tabletă: 2.3vw
    • Telefon: 3.3vw
  • Aliniere: centru

Spațiere

În cele din urmă, ajustați valorile spațierii după cum urmează.

  • Căptușeală superioară:
    • Desktop: 1vw
    • Tabletă: 1,5vw
    • Telefon: 3.5vw
  • Căptușeală inferioară:
    • Desktop: 0,5vw
    • Tabletă + telefon: 1,5vw
  • Căptușeala stânga + dreapta:
    • Desktop: 2vw
    • Tabletă + telefon: 3vw

Duplicați modulul text din coloana 1 de două ori și treceți la coloanele 2 și 3

În vizualizarea wireframe, copiați modulul text din prima coloană. Apoi, mutați duplicatele în coloana 2 și 3.

Adăugați conținut dinamic la modulul text din coloana 1

Adăugați conținut dinamic pentru timpul de pregătire și reglați setările.

  • Corp: Timp de pregătire a rețetei
  • Setări corp:
    • Înainte: <H5> Timp de pregătire:
    • După: min. </H5>

Adăugați conținut dinamic la modulul text din coloana 2

Adăugați conținut dinamic pentru porții de rețete și reglați setările.

  • Corp: Porții de rețete
  • Setări corp:
    • Înainte: <H5> Porții:
    • După: </H5>

Adăugați conținut dinamic la modulul text din coloana 3

Adăugați conținutul dinamic pentru vârful aromelor și reglați setările.

  • Corp: Sfat de aromă de rețetă
  • Setări corp:
    • Înainte: <H5> Sfat de aromă:
    • După: </H5>

Adăugați al treilea rând

Structura coloanei

Acum adăugați al treilea rând folosind următoarea structură de coloane:

Dimensionare

Înainte de a adăuga module, reglați dimensiunea rândului.

  • Lățime personalizată a jgheabului: 2
  • Lățime: 80%
  • Lățime maximă: 100%

Spațiere

De asemenea, ștergeți marja superioară implicită.

  • Marja superioară: 0vw

Vizibilitate

În cele din urmă, ajustați vizibilitatea în fila avansată.

  • Overflow orizontal: vizibil
  • Overflow vertical: vizibil

Coloana 1 + 2 + 3 Setări

Frontieră

Stilizați toate cele trei coloane în același mod, începând cu setările de margine. Repetați pentru coloanele 2 și 3.

  • Colțuri rotunjite: 1vw toate cele patru colțuri
  • Stiluri de frontieră: toate cele patru laturi
  • Lățime: 5 px
  • Culoare: Foarte gri închis # 333333

Transforma

Continuați adăugând o transformare cu mouse-ul în fila de proiectare. Repetați pentru coloanele 2 și 3.

  • Scară de transformare la plimbare: 105% x 105%

Adăugați un modul de imagine cu conținut dinamic în coloana 1

Conţinut

Adăugați un modul de imagine cu conținut dinamic pentru imaginea rețetei.

  • Imagine: Imagine rețetă

Adăugați un modul de text cu conținut dinamic în coloana 2

Conţinut

Acum, adăugați un modul text cu conținut dinamic pentru titlul ingredientelor. Faceți clic pe pictograma roată și introduceți fragmente H3 după cum urmează.

  • Corpul textului: Titlul ingredientelor rețetei
  • Setări corp:
    • Înainte: <H3>
    • După: </H3>

Text de antet

Apoi, stilizați textul antetului.

  • Nivel de titlu: H3
  • H3Font: Orienta
  • Culoare H3: gri foarte închis # 3d3d3d
  • Dimensiune H3:
    • Desktop: 1,6vw
    • Tabletă: 2vw
    • Telefon: 5.5vw
  • Aliniere: centru

Spațiere

Completați modulul ajustând spațiul.

  • Marja inferioară: 0vw
  • Căptușeală superioară:
    • Desktop: 2vw
    • Tabletă: 3vw
    • Telefon: 4vw
  • Căptușeala stânga + dreapta:
    • Desktop: 2vw
    • Tabletă + telefon: 3vw

Adăugați modulul divizor în coloana 2

Linia

Adăugați un modul divizor și stilizați-l după cum urmează.

  • Culoare: Verde Lime # b1e88d

Dimensionare

Apoi reglați valorile de dimensionare.

  • Greutate: 5 px
  • Lățime: 40%
  • Aliniere: la stânga

Spațiere

În cele din urmă, reglați spațiul.

  • Marja superioară: 0vw

Adăugați un modul de text cu conținut dinamic în coloana 2

Conţinut

Adăugați un modul text cu conținut dinamic pentru lista de ingrediente. Faceți clic pe pictograma roată din fila conținut dinamic și activați codul HTML brut.

  • Corpul textului: Lista ingredientelor rețetei
  • Setări corp: activați HTML brut

Text

Apoi, stilizați textul după cum urmează.

  • Font: Encode Sans
  • Culoare: Foarte gri închis # 333333
  • Mărimea:
    • Desktop: 0,9vw
    • Tabletă: 2vw
    • Telefon: 3vw

Spațiere

De asemenea, reglați distanța.

  • Marja superioară:
    • Desktop: -1vw
    • Tabletă: -3vw
    • Telefon: -5vw
  • Căptușeală superioară:
    • Desktop + Tabletă: 0vw
  • Căptușeală inferioară:
    • Desktop: 3vw
    • Tabletă + telefon: 4vw
  • Căptușeala stânga + dreapta:
    • Desktop: 3vw
    • Tabletă: 4vw
    • Telefon: 5vw

Duplicați toate modulele din coloana 2 și mutați în coloana 3

În vizualizarea wireframe, copiați toate modulele din coloana a doua. Mutați modulele duplicate în coloana a treia în aceeași ordine.

Adăugați conținut dinamic în primul modul de text din coloana 3

Adăugați conținutul dinamic pentru titlul pregătirii.

  • Corp: Titlu pregătire rețetă

Adăugați conținut dinamic în al 2-lea modul de text din coloana 3

De asemenea, adăugați conținutul dinamic pentru lista de pregătiri la ultimul modul de text al coloanei.

  • Corp: Listă de pregătire a rețetei

Adăugați al 4-lea rând

Structura coloanei

Pentru a completa șablonul, avem nevoie de un modul de conținut post. Adăugați un rând nou folosind următoarea structură de coloane:

Dimensionare

Înainte de a adăuga un modul, ajustați dimensiunea rândului.

  • Lățimea jgheabului personalizată: 2
  • Lățime: 100%
  • Lățime maximă: 80%

Spațiere

Modificați apoi setările de spațiere.
  • Căptușeala stânga + dreapta: 0vw

Setări coloana 1

fundal

Stiluați coloana pentru a se potrivi cu cartea de rețetă de mai sus. Mai întâi, adăugați un fundal.

  • Culoare fundal: alb #ffffff

Spațiere

De asemenea, reglați distanța.

  • Garnitura stânga: 0vw

Frontieră

Nu în ultimul rând, modificați setările de margine.

  • Colțuri rotunjite: 1vw toate cele patru colțuri
  • Stiluri de frontieră: toate cele patru laturi
  • Lățime: 5 px
  • Culoare: Foarte gri închis # 333333

Lăsați Coloana 2 goală.

Adăugați un modul de conținut pentru postare în coloana 1

Text

Adăugați un modul de conținut de postare în coloana unu și stilizați textul pentru a se potrivi cu șablonul de card de rețetă.

  • Font: Encode Sans
  • Culoare: Foarte gri închis # 333333
  • Mărimea:
    • Desktop: 0,9vw
    • Tabletă: 2vw
    • Telefon: 3vw
  • Înălțimea liniei: 2em

Titlul 1 Text

  • Font: Orienta
  • Culoare: Foarte gri închis # 333333
  • Mărimea:
    • Desktop: 2vw
    • Tabletă: 5vw
    • Telefon: 6vw

Titlul 2 Text

  • Font: Orienta
  • Culoare: Foarte gri închis # 333333
  • Mărimea:
    • Desktop: 1,8vw
    • Tabletă: 4,5vw
    • Telefon: 5.5vw

Titlul 3 Text

  • Font: Orienta
  • Culoare: Foarte gri închis # 333333
  • Mărimea:
    • Desktop: 1,6vw
    • Tabletă: 4,5vw
    • Telefon: 5vw

Spațiere

Pentru a se potrivi cu stilul cărții de rețetă, reglați valorile spațierii.

  • Căptușeală superioară + inferioară: 2vw
  • Căptușeala stânga + dreapta:
    • Desktop: 4vw
    • Tabletă + telefon: 6vw

Dacă doriți să schimbați culoarea liniei blockquote sau a culorii link-ului, puteți face acest lucru în personalizatorul temei sub culoare accent.

4. Editați / creați o postare utilizând setările de plugin ACF și șablonul de card de rețetă

Introduceți câmpuri personalizate

Deschideți sau adăugați o postare. Sub zona de conținut, veți găsi toate câmpurile personalizate pentru șablonul cardului de rețetă. Pentru a recrea acest design de pâine prăjită de avocado, completați câmpurile după cum urmează.

Titlul rețetei:

  • Pâine prăjită Supergreen Vegan Avocado

Autor rețetă:

  • Magdalena Swifter - www.veganchef.com

Timp de pregătire a rețetei:

  • 15

Portii de retete:

  • 3

Sfat pentru aromă de rețetă:

  • Folosiți fulgi de sare de mare și ulei extravirgin

Imagine rețetă:

  • Avocado Toast Image

Ingrediente pentru rețetă Titlu:

  • Ingrediente

Lista ingredientelor rețetei:

  • 3 felii de pâine integrală
  • 1 Avocado copt
  • 100g. Fasole fierte
  • 10g. Varza verde
  • 1 Ceapă de primăvară tocată
  • 30g. Brânză Feta mărunțită
  • 1 lămâie tăiată în jumătate
  • Cremă de ulei de măsline
  • Se presară sare de mare

Titlul preparatelor pentru rețetă:

  • Pregătirea

Lista preparatelor pentru rețete:

  • 1. Prajeste feliile de paine dupa bunul plac.
  • 2. Deschideți avocado, scoateți pulpa, amestecați cu o furculiță.
  • 3. Strângeți zeama de lămâie peste avocado, condimentați cu sare.
  • 4. Întindeți piureul de avocado peste pâine prăjită.
  • 5. Presărați fasolea, mugurii și ceapa de primăvară tocată.
  • 6. Condimentați cu sare.
  • 7. Adăugați brânză feta mărunțită.
  • 8. Finalizați cu ulei de măsline.

Acordați postării un titlu

Titlu

Nu uitați să adăugați un titlu la postarea dvs.

  • Rețetă de pâine prăjită cu avocado

Adăugați conținut, selectați o categorie și adăugați o imagine recomandată

Scrieți sau inserați conținutul postării de blog în editorul obișnuit. Selectați categoria de rețete și adăugați o imagine prezentată.

Previzualizare șablon card de rețetă

Încă o dată, să aruncăm o privire din nou la cum arată postarea finalizată cu șablonul de card de rețetă pe diferite ecrane.

Desktop

Comprimat

Mobil

Este o folie!

Să trecem repede în revistă pașii pe care i-am făcut pentru a realiza acest șablon de rețetă.

  1. Instalați pluginul ACF.
  2. Configurați un grup de câmpuri de cărți de rețetă.
  3. Adăugați câmpuri personalizate.
  4. Creați un șablon nou și atribuiți-l postărilor de blog din categoria „rețete”.
  5. Utilizați conținut dinamic din câmpurile ACF din module.
  6. Creați sau editați o postare de blog completând câmpurile.
  7. Adăugați conținut de postare pe blog.

Deoarece acest design a fost creat ca un șablon cu conținut dinamic, acesta va rămâne consecvent în toate postările de bloguri de rețete care utilizează câmpurile personalizate ale pluginului ACF. Sperăm că acest design al șabloanelor de rețete inspiră tot felul de șabloane de rețete noi și inovatoare pentru blogurile dvs. legate de alimentație. Spuneți-ne părerile dvs. în comentarii.