Comment créer un modèle de carte de recette avec Divi Theme Builder

Publié: 2019-11-26

Les blogueurs culinaires et les créateurs de recettes savent à quel point il est important d'avoir un regard cohérent sur les recettes qu'ils publient. Une solution courante consiste à utiliser un plug-in de carte de recette, mais cela comporte des limitations de conception. Désormais, avec le Divi Theme Builder, vous pouvez créer votre propre modèle de fiche de recette à utiliser sur votre site et votre blog. Avec l'aide du plugin Advanced Custom Fields (ACF), la conception d'une carte de recette unique et réutilisable est plus facile que jamais.

Dans cet article, nous allons vous montrer comment créer un modèle de fiche de recette avec un contenu dynamique. En utilisant les paramètres de Divi Theme Builder, la conception peut être appliquée aux articles de blog qui incluent des recettes en sélectionnant cette catégorie spécifique. Nous espérons que ce tutoriel vous inspirera pour créer votre propre style de fiches de recettes avec vos propres champs personnalisés.

Jetons un coup d'œil à l'apparence du design sur différentes tailles d'écran.

Aperçu du modèle de carte de recette

Jetons un coup d'œil à l'apparence du design sur différentes tailles d'écran.

Bureau

Tablette

Mobile

1. Téléchargez et installez le plugin Advanced Custom Fields

Rechercher et installer

Trouvez le plugin ACF en recherchant 'Advanced Custom Fields' dans la barre de recherche du plugin, installez-le et activez-le.

Ajouter un nouveau groupe de champs

Cliquez sur l'onglet ACF et sélectionnez « ajouter un nouveau ». Nommez le groupe « Carte de recettes ». Ajoutez les champs personnalisés un par un via le bouton « Ajouter un champ ».

Ajouter des champs personnalisés

Pour chaque champ personnalisé, cliquez sur le bouton « Ajouter un champ ». Chacun peut être personnalisé pour un type de contenu différent. La liste ci-dessous spécifie le libellé et le type de chaque champ. Ajoutez le mot « recette » au début de chaque étiquette de champ afin qu'il soit facile à trouver lors de la création des modules. Le nom du champ se remplira automatiquement une fois que vous aurez ajouté l'étiquette.

Titre de la recette

Commencez par le titre de la recette.

  • Libellé du champ : Titre de la recette
  • Type de champ : Texte
  • Obligatoire ? : Oui
  • Texte d'espace réservé : Titre de la recette
  • Limite de caractères : 30

Auteur de la recette

Ensuite, créez un champ pour l'auteur.

  • Libellé du champ : auteur de la recette
  • Type de champ : Texte
  • Obligatoire ? : Oui
  • Texte d'espace réservé : auteur

Temps de préparation de la recette

Suivez cela avec le temps de préparation.

  • Libellé du champ : temps de préparation de la recette
  • Type de champ : nombre
  • Obligatoire ? : Oui
  • Texte d'espace réservé : ##
  • Préparatifs : Temps de préparation :
  • Ajouter : min.

Portions de recettes

Ensuite, les portions.

  • Libellé du champ : portions de la recette
  • Type de champ : nombre
  • Obligatoire ? : Oui
  • Texte d'espace réservé : ##
  • Préfixer : Portions :

Astuce de saveur de recette

Ajoutez un champ de conseil de saveur.

  • Étiquette de champ : Astuce de saveur de recette
  • Type de champ : Texte
  • Obligatoire ? : Oui
  • Préfixe : Astuce de saveur :
  • Limite de caractères : 40

Image de la recette

Maintenant, ajoutez le champ d'image.

  • Libellé du champ : Image de la recette
  • Type de champ : Image
  • Obligatoire ? : Oui

Titre des ingrédients de la recette

Ensuite, le titre des ingrédients.

  • Libellé du champ : Titre des ingrédients de la recette
  • Type de champ : Texte
  • Instructions : écrivez simplement la même chose que le texte de l'espace réservé.
  • Obligatoire ? : Oui
  • Texte d'espace réservé : Ingrédients

Liste des ingrédients de la recette

Suivez cela avec la liste des ingrédients.

  • Libellé du champ : liste des ingrédients de la recette
  • Type de champ : zone de texte
  • Instructions : Ajoutez un espace après chaque élément
  • Obligatoire ? : Oui
  • Rangées : 8
  • Nouvelles lignes : ajoutez automatiquement <br>

Titre de la préparation de la recette

Avant-dernier, le titre de la préparation.

  • Libellé du champ : Titre de la préparation de la recette
  • Type de champ : Texte
  • Instructions : écrivez simplement la même chose que le texte de l'espace réservé.
  • Obligatoire ? : Oui
  • Texte d'espace réservé : préparation

Liste de préparation de recettes

Enfin, la liste de préparation.

  • Libellé du champ : liste de préparation des recettes
  • Type de champ : zone de texte
  • Instructions : Ajoutez un espace après chaque élément
  • Obligatoire ? : Oui
  • Rangées : 10
  • Nouvelles lignes : ajoutez automatiquement <br>

Groupe de champs de publication

Publiez le groupe de champs. Votre fenêtre de groupe de champs devrait ressembler à la capture d'écran ci-dessous.

Comment accéder au contenu du plugin ACF pour le modèle de carte de recette dans le Divi Builder

Les champs personnalisés avancés peuvent être ajoutés à un module Divi en cliquant sur l'icône de contenu dynamique. Cette icône se trouve dans le coin supérieur droit de la zone de contenu. Voilà à quoi ça ressemble :

2. Créez un nouveau modèle de carte de recette avec Divi Builder

Étapes du générateur de thème Divi

1. Créer une catégorie de recettes

Vous avez besoin d'une catégorie nommée « recettes » pour pouvoir lui attribuer le modèle. Ajoutez-le dans l'onglet catégorie via le tableau de bord.

2. Ouvrez Divi Theme Builder et ajoutez un nouveau modèle

Ouvrez le générateur de thème Divi et ajoutez un nouveau modèle.

3. Ajouter un corps global

Cliquez sur « ajouter un corps global » et attribuez le modèle aux publications dans des catégories spécifiques > recettes. Ensuite, cliquez sur le bouton « Créer un modèle ».

4. Construire un corps personnalisé

Cliquez sur « Ajouter un corps global » et sélectionnez « Ajouter un corps personnalisé ».

3. Recréez la conception de la carte de recette à l'aide de contenu dynamique

Ajouter une nouvelle section

Maintenant, nous pouvons commencer à concevoir le modèle de fiche de recette. Lorsque le constructeur Divi s'ouvre, sélectionnez « construire à partir de zéro ». Commencez par ajouter une nouvelle section.

Fond

Dans les paramètres de la section, ajoutez une couleur d'arrière-plan.

  • Couleur de fond : gris clair #ededed

Dimensionnement

Ajustez également la taille dans l'onglet conception.

  • Largeur : 100 %
  • Largeur maximale : 100 %

Ajouter la 1ère ligne

Structure des colonnes

Ajoutez une nouvelle ligne avec une colonne.

Dimensionnement

Avant d'ajouter des modules, ajustez les paramètres de dimensionnement de la ligne.

  • Largeur maximale : 90 %

Paramètres de colonne

Fond

Personnalisez les paramètres de colonne à l'intérieur de la ligne. Tout d'abord, ajoutez une couleur d'arrière-plan.

  • Couleur de fond : Blanc #ffffff

Frontière

Ensuite, modifiez les styles de bordure.

  • Coins arrondis : 1vw aux quatre coins
  • Styles de bordure : les quatre côtés
  • Largeur : 5px
  • Couleur : Gris très foncé #333333

Ajouter un module de texte avec du contenu dynamique

Teneur

Une fois que vous avez terminé les paramètres de ligne et de colonne, il est temps d'ajouter des modules. Commencez par ajouter un module de texte. Dans la fenêtre de contenu, sélectionnez le contenu dynamique du titre de la recette. Une fois sélectionné, cliquez sur l'icône d'engrenage et saisissez les extraits H1.

  • Corps : Titre de la recette
  • Paramètres du corps :
    • Avant : <H1>
    • Après :</H1>

Texte d'en-tête

Ensuite, stylisez les paramètres de texte H1 en conséquence :

  • Niveau de titre : H1
  • Police : Orienta
  • Poids : gras
  • Alignement : Centre
  • Couleur : gris très foncé #3d3d3d
  • Taille:
    • Ordinateur de bureau : 3vw
    • Tablette : 4vw
    • Téléphone : 5vw
  • Espacement des lettres : 3px
  • Hauteur de ligne : 1.5em

Espacement

Modifiez également les valeurs d'espacement.

  • Marge inférieure :
    • Ordinateur de bureau : -1vw
    • Tablette : -2vw
    • Téléphone : -5vw
  • Rembourrage supérieur :
    • Ordinateur de bureau + tablette : 1vw
    • Téléphone : 2vw
  • Rembourrage inférieur: 0vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau + tablette : 3vw
    • Téléphone : 4vw

Ajouter un 2e module de texte avec contenu dynamique

Teneur

Ajoutez un deuxième module de texte et sélectionnez le contenu dynamique pour l'auteur de la recette.

  • Corps : Auteur de la recette

Texte

Ensuite, stylisez le texte.

  • Police : Encoder Sans
  • Couleur : gris très foncé #3d3d3d
  • Taille:
    • Ordinateur de bureau : 1.4vw
    • Tablette : 2.4vw
    • Téléphone : 3vw
  • Alignement : Centre

Espacement

Ensuite, ajustez l'espacement.

  • Marge supérieure : 1.5vw
  • Rembourrage supérieur :
    • Ordinateur de bureau + tablette : 0vw
    • Téléphone : 2vw
  • Rembourrage inférieur : 2vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 3vw

Ajouter une 2e rangée

Structure des colonnes

Maintenant, ajoutez une deuxième ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et ajustez les paramètres de dimensionnement en conséquence :

  • Largeur de gouttière : 2
  • Largeur: 90%
  • Largeur maximale : 100 %
  • Alignement des lignes : à gauche

Espacement

Ensuite, l'espacement.

  • Rembourrage supérieur + inférieur : 0.5vw
  • Rembourrage gauche : 10vw

Visibilité

Enfin, dans l'onglet avancé, ajustez la visibilité.

  • Débordement horizontal : Visible
  • Débordement vertical : visible

Colonne 1 + 2 + 3 Paramètres

Frontière

Stylisez les trois colonnes de la même manière. Tout d'abord, allez dans les paramètres de bordure et apportez quelques modifications. Répétez l'opération pour les trois colonnes.

  • Coins arrondis : 1vw aux quatre coins
  • Styles de bordure : les quatre côtés
  • Largeur : 5px
  • Couleur : Gris très foncé #333333

Transformer

Pour donner à la conception un effet de survol, ajustez les paramètres de transformation comme suit. Répétez l'opération pour les trois colonnes.

  • Échelle de transformation au survol : 105 % x 105 %

Ajouter un module de texte à la colonne 1

Teneur

Ajoutez un module de texte et laissez la fenêtre de contenu vide pour le moment. Nous ajouterons cela plus tard.

Fond

Ajoutez une couleur d'arrière-plan au module.

  • Couleur de fond : vert citron #b1e88d

Texte d'en-tête

Stylisez ensuite les paramètres de texte H5.

  • Niveau de titre : H5
  • Police H5 : Orienta
  • Couleur H5 : Gris très foncé #3d3d3d
  • Taille H5 :
    • Ordinateur de bureau : 1vw
    • Tablette : 2.3vw
    • Téléphone : 3.3vw
  • Alignement : Centre

Espacement

Enfin, ajustez les valeurs d'espacement comme suit.

  • Rembourrage supérieur :
    • Ordinateur de bureau : 1vw
    • Tablette : 1.5vw
    • Téléphone : 3.5vw
  • Rembourrage inférieur :
    • Ordinateur de bureau : 0,5 vw
    • Tablette + Téléphone : 1.5vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 3vw

Dupliquer le module de texte de la colonne 1 deux fois et passer aux colonnes 2 et 3

Dans la vue filaire, dupliquez le module de texte dans la première colonne. Ensuite, déplacez les doublons dans les colonnes 2 et 3.

Ajouter du contenu dynamique au module de texte dans la colonne 1

Ajoutez le contenu dynamique pour le temps de préparation et ajustez les paramètres.

  • Corps : Temps de préparation de la recette
  • Paramètres du corps :
    • Avant : <H5>Temps de préparation :
    • Après : min.</H5>

Ajouter du contenu dynamique au module de texte dans la colonne 2

Ajoutez le contenu dynamique pour les portions de recette et ajustez les paramètres.

  • Corps : portions de la recette
  • Paramètres du corps :
    • Avant : <H5>Portions :
    • Après : </H5>

Ajouter du contenu dynamique au module de texte dans la colonne 3

Ajoutez le contenu dynamique pour l'astuce de saveur et ajustez les paramètres.

  • Corps : Astuce de saveur de recette
  • Paramètres du corps :
    • Avant : <H5>Astuce de saveur :
    • Après : </H5>

Ajouter une 3e rangée

Structure des colonnes

Ajoutez maintenant la troisième ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Avant d'ajouter des modules, ajustez la taille de la ligne.

  • Largeur de gouttière personnalisée : 2
  • Largeur: 80%
  • Largeur maximale : 100 %

Espacement

Supprimez également la marge supérieure par défaut.

  • Marge supérieure : 0vw

Visibilité

Enfin, ajustez la visibilité dans l'onglet avancé.

  • Débordement horizontal : Visible
  • Débordement vertical : visible

Colonne 1 + 2 + 3 Paramètres

Frontière

Stylez les trois colonnes de la même manière, en commençant par les paramètres de bordure. Répétez l'opération pour les colonnes 2 et 3.

  • Coins arrondis : 1vw aux quatre coins
  • Styles de bordure : les quatre côtés
  • Largeur : 5px
  • Couleur : Gris très foncé #333333

Transformer

Continuez en ajoutant une transformation de survol dans l'onglet Conception. Répétez l'opération pour les colonnes 2 et 3.

  • Échelle de transformation au survol : 105 % x 105 %

Ajouter un module d'image avec un contenu dynamique à la colonne 1

Teneur

Ajoutez un module d'image avec un contenu dynamique pour l'image de la recette.

  • Image : Image de la recette

Ajouter un module de texte avec contenu dynamique à la colonne 2

Teneur

Maintenant, ajoutez un module de texte avec un contenu dynamique pour le titre des ingrédients. Cliquez sur l'icône d'engrenage et entrez les extraits H3 comme suit.

  • Corps du texte : Ingrédients de la recette Titre
  • Paramètres du corps :
    • Avant : <H3>
    • Après : </H3>

Texte d'en-tête

Ensuite, stylisez le texte du titre.

  • Niveau de titre : H3
  • Police H3 : Orienta
  • Couleur H3 : Gris très foncé #3d3d3d
  • Taille H3 :
    • Ordinateur de bureau : 1.6vw
    • Tablette : 2vw
    • Téléphone : 5.5vw
  • Alignement : Centre

Espacement

Complétez le module en ajustant l'espacement.

  • Marge inférieure : 0vw
  • Rembourrage supérieur :
    • Ordinateur de bureau : 2vw
    • Tablette : 3vw
    • Téléphone : 4vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 3vw

Ajouter le module diviseur à la colonne 2

Ligne

Ajoutez un module de séparation et stylisez-le comme suit.

  • Couleur : Vert citron #b1e88d

Dimensionnement

Ajustez ensuite les valeurs de dimensionnement.

  • Poids : 5 pixels
  • Largeur : 40 %
  • Alignement : à gauche

Espacement

Enfin, ajustez l'espacement.

  • Marge supérieure : 0vw

Ajouter un module de texte avec contenu dynamique à la colonne 2

Teneur

Ajoutez un module de texte avec un contenu dynamique pour la liste des ingrédients. Cliquez sur l'icône d'engrenage dans l'onglet de contenu dynamique et activez le HTML brut.

  • Corps du texte : liste des ingrédients de la recette
  • Paramètres du corps : activer le HTML brut

Texte

Ensuite, stylisez le texte comme suit.

  • Police : Encoder Sans
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 0.9vw
    • Tablette : 2vw
    • Téléphone : 3vw

Espacement

Ajustez également l'espacement.

  • Marge supérieure:
    • Ordinateur de bureau : -1vw
    • Tablette : -3vw
    • Téléphone : -5vw
  • Rembourrage supérieur :
    • Ordinateur de bureau + tablette : 0vw
  • Rembourrage inférieur :
    • Ordinateur de bureau : 3vw
    • Tablette + Téléphone : 4vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau : 3vw
    • Tablette : 4vw
    • Téléphone : 5vw

Dupliquer tous les modules de la colonne 2 et passer à la colonne 3

Dans la vue filaire, dupliquez tous les modules de la deuxième colonne. Déplacez les modules dupliqués dans la troisième colonne dans le même ordre.

Ajouter du contenu dynamique dans le 1er module de texte de la colonne 3

Ajoutez le contenu dynamique pour le titre de préparation.

  • Corps : Titre de la préparation de la recette

Ajouter du contenu dynamique dans le 2e module de texte de la colonne 3

Ajoutez également le contenu dynamique de la liste des préparations au dernier module de texte de la colonne.

  • Corps : Liste de préparation des recettes

Ajouter une 4e rangée

Structure des colonnes

Pour compléter le modèle, nous avons besoin d'un module de contenu de publication. Ajoutez une nouvelle ligne à l'aide de la structure de colonnes suivante :

Dimensionnement

Avant d'ajouter un module, ajustez la taille de la ligne.

  • Largeur de gouttière personnalisée : 2
  • Largeur : 100 %
  • Largeur maximale : 80 %

Espacement

Modifiez ensuite les paramètres d'espacement.
  • Rembourrage Gauche + Droite : 0vw

Paramètres de la colonne 1

Fond

Stylisez la colonne pour qu'elle corresponde à la fiche de recette ci-dessus. Tout d'abord, ajoutez un arrière-plan.

  • Couleur de fond : Blanc #ffffff

Espacement

Ajustez également l'espacement.

  • Rembourrage gauche : 0vw

Frontière

Enfin, modifiez les paramètres de bordure.

  • Coins arrondis : 1vw aux quatre coins
  • Styles de bordure : les quatre côtés
  • Largeur : 5px
  • Couleur : Gris très foncé #333333

Laissez la colonne 2 vide.

Ajouter un module de contenu de publication à la colonne 1

Texte

Ajoutez un module de contenu de publication à la première colonne et stylisez le texte pour qu'il corresponde au modèle de fiche de recette.

  • Police : Encoder Sans
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 0.9vw
    • Tablette : 2vw
    • Téléphone : 3vw
  • Hauteur de ligne : 2 em

Titre 1 Texte

  • Police : Orienta
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 2vw
    • Tablette : 5vw
    • Téléphone : 6vw

Titre 2 Texte

  • Police : Orienta
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 1.8vw
    • Tablette : 4.5vw
    • Téléphone : 5.5vw

Titre 3 Texte

  • Police : Orienta
  • Couleur : Gris très foncé #333333
  • Taille:
    • Ordinateur de bureau : 1.6vw
    • Tablette : 4.5vw
    • Téléphone : 5vw

Espacement

Pour correspondre au style de la fiche de recette, ajustez les valeurs d'espacement.

  • Rembourrage supérieur + inférieur : 2vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau : 4vw
    • Tablette + Téléphone : 6vw

Si vous souhaitez modifier la couleur de la ligne de citation ou de la couleur du lien, vous pouvez le faire dans le personnalisateur de thème sous la couleur d'accent.

4. Modifier / Créer un article à l'aide des paramètres du plugin ACF et du modèle de carte de recette

Saisir des champs personnalisés

Ouvrez ou ajoutez un article. Sous la zone de contenu, vous trouverez tous les champs personnalisés pour le modèle de fiche de recette. Afin de recréer cette conception de toast à l'avocat, remplissez les champs comme suit.

Titre de la recette :

  • Toast à l'avocat végétalien Supergreen

Auteur de la recette :

  • Magdalena Swifter – www.veganchef.com

Temps de préparation de la recette :

  • 15

Portions de la recette :

  • 3

Astuce de saveur de recette :

  • Utilisez des flocons de sel de mer et de l'huile extra vierge

Image de la recette :

  • Image de toast à l'avocat

Titre des ingrédients de la recette :

  • Ingrédients

Liste des ingrédients de la recette :

  • 3 tranches de pain de blé entier
  • 1 avocat mûr
  • 100g. Fèves Cuites
  • 10g. Pousses Vertes
  • 1 oignon de printemps haché
  • 30g. Fromage Feta émietté
  • 1 citron coupé en deux
  • Un filet d'huile d'olive
  • Saupoudrer de sel de mer

Titre des préparations de recettes :

  • Préparation

Liste des préparations de recettes :

  • 1. Faites griller les tranches de pain à votre convenance.
  • 2. Ouvrir l'avocat, retirer la pulpe, écraser à la fourchette.
  • 3. Pressez le jus de citron sur l'avocat, salez.
  • 4. Étalez la purée d'avocat sur les toasts.
  • 5. Saupoudrer les fèves, les pousses et la ciboule hachée.
  • 6. Assaisonner avec du sel.
  • 7. Ajouter le fromage feta émietté.
  • 8. Terminez avec de l'huile d'olive.

Donnez un titre à la publication

Titre

N'oubliez pas d'ajouter un titre à votre message.

  • Recette de toast à l'avocat

Ajouter du contenu, sélectionner une catégorie et ajouter une image en vedette

Écrivez ou insérez le contenu de l'article de blog dans l'éditeur régulier. Sélectionnez la catégorie de recettes et ajoutez une image en vedette.

Aperçu du modèle de carte de recette

Encore une fois, revoyons à quoi ressemble le message terminé avec le modèle de fiche de recette sur différents écrans.

Bureau

Tablette

Mobile

C'est un Wrap !

Passons en revue rapidement les étapes que nous avons suivies pour réaliser cette conception de modèle de carte de recette.

  1. Installez le plug-in ACF.
  2. Configurez un groupe de champs de fiche de recette.
  3. Ajouter des champs personnalisés.
  4. Créez un nouveau modèle et attribuez-le aux articles de blog dans la catégorie « recettes ».
  5. Utilisez le contenu dynamique des champs ACF dans les modules.
  6. Créez ou modifiez un article de blog en remplissant les champs.
  7. Ajouter du contenu de billet de blog.

Étant donné que cette conception a été créée en tant que modèle avec un contenu dynamique, elle restera cohérente dans tous les articles de blog de recettes qui utilisent les champs personnalisés du plug-in ACF. Nous espérons que cette conception de modèle de carte de recettes inspirera toutes sortes de modèles de recettes nouveaux et innovants pour vos blogs liés à l'alimentation. Faites-nous part de vos réflexions dans les commentaires.