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

Les blogueurs et les producteurs de recettes savent combien il est important d’avoir une vision cohérente des recettes qu’ils publient. La solution commune est d’utiliser un plug – in de carte de recette, mais cela implique des limites de conception. Maintenant, avec Divi Theme Builder, vous pouvez créer votre propre modèle de carte de recette à utiliser dans tout votre site et blog. Avec l’aide du plug – in Advanced Custom Fields (ACF), il est plus facile que jamais de concevoir une carte de recette unique et réutilisable. Dans cet article, nous vous montrerons comment créer un modèle de carte de recette avec un contenu dynamique. Avec les paramètres Divi Theme Builder, vous pouvez appliquer le design à un billet de blog contenant une recette en sélectionnant une catégorie spécifique. Nous espérons que ce tutoriel vous inspirera à créer vos propres cartes de recette de style en utilisant vos propres champs personnalisés.
Voyons comment ce design fonctionne sur des écrans de différentes tailles. Prévisualiser le modèle de carte de recette nous permet de voir à quoi ressemble la conception sur différents écrans de taille. Bureau Comprimés Mobile Trouvez le plug – in ACF en recherchant les champs personnalisés avancés dans la barre de recherche du plug – in, puis installez – le et activez – le. Ajouter un nouveau Groupe de champs cliquez sur l’onglet ACF et sélectionnez ajouter un nouveau champ. Nommez le Groupe table de recette. Utilisez le bouton Ajouter des champs pour ajouter des champs personnalisés un par un. Pour ajouter un champ personnalisé à chaque champ personnalisé, cliquez sur le bouton Ajouter un champ. Vous pouvez personnaliser chaque contenu pour différents types de contenu. Le tableau suivant indique l’étiquette et le type de chaque champ. Ajoutez le mot recette au début de chaque étiquette de champ pour faciliter la recherche lors de la création du formulaire. Une fois l’étiquette ajoutée, le nom du champ est automatiquement rempli. Titre de la recette
La recette. Étiquette du champ: titre de la recette type de champ: texte requis?: Est le texte du substituant: limite de caractère de l’en – tête de recette: 30 Ensuite, créez un champ pour l’auteur. Étiquette du champ: auteur de la recette type de champ: texte requis?: Est un texte substituant: auteur Le temps de préparation suit le temps de préparation. Étiquette du champ: temps de préparation de la recette type de champ: numéro requis?: Est le texte du substituant: # # anteponi: temps de préparation: ajouter: minutes. Une partie de la recette, puis une partie. Étiquette du champ: partie recette type de champ: numéro requis?: Est le texte du substituant: # # antenne: Section: Conseils Gustatifs pour la recette ajouter un champ conseils Gustatifs.
Étiquette du champ: conseils de saveur de recette type de champ: texte requis?: Est anteponi: conseils de goût: restrictions de caractère: 40 L’image de recette ajoute maintenant un champ d’image. Étiquette du champ: recette type de champ Image: Image requise?: C’est exact. Le titre de l’ingrédient de recette est suivi du titre de l’ingrédient. Étiquette du champ: Élément de recette titre type de champ: description du texte: il suffit d’écrire comme texte de substituant. Est – ce nécessaire?: Est le texte du substituant: ingrédients Veuillez suivre la liste des ingrédients de la recette. Étiquette du champ: liste des ingrédients de la recette type de champ: zone de texte description: ajouter un espace après chaque élément désiré?: Oui lignes: 8 nouvelles lignes: ajout automatique Nom de la préparation de la formule penultimo, nom de la préparation. Étiquette du champ: titre de la préparation de la recette type de champ: description du texte: Écrit uniquement comme texte de substituant. Est – ce nécessaire?: Est le texte du substituant: préparation Préparation de la liste des recettes Étiquette du champ: liste de préparation de la recette type de champ: la zone de texte est
Truzioni: ajouter un espace après chaque élément désiré?: Oui lignes: 10 nouvelles lignes: ajout automatique Publier les groupes de champs publier les groupes de champs. La fenêtre de votre groupe de champs doit ressembler à la capture d’écran ci – dessous. En cliquant sur l’icône contenu dynamique, vous pouvez ajouter au module Divi le contenu de la façon d’accéder au plug – in modèle de carte de recette ACF dans les champs personnalisés avancés de Divi Builder. Cette icône se trouve dans le coin supérieur droit de la zone de contenu. Voici à quoi il ressemble: 2. Utilisez l’étape Divi Builder pour créer un nouveau modèle de carte de recette pour Divi 1 Theme Builder. Pour créer une catégorie de recette, vous avez besoin d’une catégorie appelée recette pour assigner un modèle. Ajoutez – le à l’onglet catégories via le tableau de bord. 2. Ouvrez Divi Theme Builder et ajoutez un nouveau modèle. Ouvrez Divi Theme Builder et ajoutez un nouveau modèle. 3. Ajouter un corps global cliquez sur « ajouter un corps global » et attribuez le modèle aux messages dans la catégorie spécifique > recettes. Ensuite, cliquez sur le bouton créer un modèle. 4. Construire une entité définie par l’utilisateur cliquez sur Ajouter une entité globale et sélectionnez ajouter une entité définie par l’utilisateur. 3. Utilisez le contenu dynamique pour recréer la conception de la carte de recette et ajouter une nouvelle partie. Maintenant, nous pouvons commencer à concevoir le modèle de carte de recette. Lorsque vous ouvrez Divi Builder, sélectionnez construire à partir de zéro. Commencez par ajouter une nouvelle section. Arrière – plan dans la section paramètres, ajoutez une couleur d’arrière – plan. Couleur de fond: gris clair De plus, redimensionnez dans l’onglet conception. Largeur: 100% largeur maximale: 100% Ajouter une première ligne – structure de colonne ajouter une nouvelle ligne en utilisant une colonne. Redimensionner avant d’ajouter un module, redimensionnez les paramètres de ligne. Largeur maximale: 90% Petit.
Structure de colonne de ligne ajoutez maintenant une deuxième ligne en utilisant la structure de colonne suivante: Redimensionner ouvre les paramètres de ligne et les Redimensionne en conséquence: largeur de la marge: 2 largeur: 90% largeur maximale: 100% alignement de ligne: gauche Puis l’espacement. Remplissage supérieur + inférieur: 0,5 VW remplissage gauche: 10 VW

Visibilité Enfin, sur l’onglet avancé, ajustez la visibilité. Débordement horizontal: débordement vertical visible: visible

Les paramètres de colonne 1 + 2 + 3 dessinent les trois colonnes de la même façon. Tout d’abord, allez à la configuration des limites et faites quelques changements. Répétez pour les trois colonnes. Filet: 1vw tous les styles de bord à quatre coins: toutes les largeurs de bord: 5px couleur: gris très foncé # 333333 Transform pour donner un effet au dessin en vol stationnaire, Ajustez les paramètres de transformation comme suit. Répétez pour les trois colonnes. Échelle de transformation sur le canal de la souris: 105% x 105% Ajouter un formulaire de texte au contenu de la colonne 1 Ajouter un formulaire de texte laisser temporairement la fenêtre de contenu vide. Nous l’ajouterons plus tard. L’arrière – plan ajoute une couleur d’arrière – plan au formulaire. Couleur de fond: vert chaux L’étape suivante du texte du titre simule les paramètres du texte H5. Niveau du titre: H5 caractères H5: couleur de direction H5: gris foncé # 3d3d3d taille H5: Bureau: tablette 1vw: 2.3vw Téléphone: 3.3vw alignement: Centre Enfin, réglez la valeur d’espacement comme indiqué ci – dessous. Remplissage en haut: Bureau: tablette 1vw: 1,5vw Téléphone: 3,5vw remplissage en bas: Bureau: tablette 0,5vw + téléphone: 1,5vw remplissage à gauche + remplissage à droite: Bureau: tablette 2vw + téléphone: 3vw Copiez le formulaire de texte dans la colonne 1 deux fois et passez aux colonnes 2 et 3 dans la vue wireframe pour copier le formulaire de texte dans la première colonne.
Ensuite, déplacez le duplicata dans les colonnes 2 et 3. Ajouter du contenu dynamique au formulaire de texte de la colonne 1 ajouter du contenu dynamique pour le temps de préparation et ajuster les paramètres. Texte: temps de préparation de la recette paramètres du texte: avant: Temps de préparation: après: minutes. Ajouter du contenu dynamique au formulaire de texte de la colonne 2 ajouter du contenu dynamique à la section recette et ajuster les paramètres. Corps: partie recette paramètres du corps: avant: Section: après: Un formulaire texte qui ajoute du contenu dynamique à la colonne 3 ajoute du contenu dynamique aux conseils Gustatifs et ajuste les paramètres. Texte: saveur de la recette prompt Body setting: before: Conseils d’arôme: après:

Ajouter une troisième ligne la structure suivante est maintenant utilisée pour ajouter une troisième ligne:

Redimensionner les lignes avant d’ajouter des modules. Largeur de gouttière personnalisée: 2 largeur: 80% largeur maximale: 100% L’espacement supprime également l’espacement supérieur par défaut. Marge supérieure: 0vw Visibilité Enfin, ajustez la visibilité dans l’onglet avancé. Débordement horizontal: débordement vertical visible: visible

Paramètres de colonne 1 + 2 + 3 la bordure commence par les paramètres de bordure et dessine les trois colonnes de la même façon. Répétez pour les colonnes 2 et 3. Filet: 1vw tous les styles de bord à quatre coins: toutes les largeurs de bord: 5px couleur: gris très foncé # 333333

Conversion passez le curseur sur l’onglet conception et continuez en ajoutant une conversion. Répétez pour les colonnes 2 et 3. Échelle de transformation sur le canal de la souris: 105% x 105% Ajouter un module d’image de contenu dynamique au contenu de la colonne 1 Ajouter un module d’image de contenu dynamique à l’image de recette. Figure: schéma de recette Ajouter un formulaire texte contenant du contenu
Copiez Uli dans la troisième colonne dans le même ordre.

Ajouter du contenu dynamique au premier formulaire de texte de la colonne 3 ajouter du contenu dynamique au titre de préparation. Texte: titre de la recette

Ajoutez du contenu dynamique au deuxième formulaire de texte de la colonne 3. Ajoutez également du contenu dynamique à la liste de préparation au dernier formulaire de texte de la colonne. Texte: liste de préparation des recettes Ajouter une quatrième structure de ligne pour compléter le modèle, nous avons besoin d’un module de contenu de poste. Ajouter une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionner avant d’ajouter un module, redimensionnez la ligne. Largeur de gouttière personnalisée: 2 largeur: 100% largeur maximale: 80% L’espacement change le prochain réglage d’espacement. Remplissage gauche + droite: 0vw Colonne configurer 1 colonne de modélisation de fond pour correspondre à l’onglet recette ci – dessus. D’abord, ajoutez l’arrière – plan. Couleur de fond: blanc L’espacement peut également être ajusté. Remplissage à gauche: 0vw Enfin, changez les paramètres de bordure. Filet: 1vw tous les styles de bord à quatre coins: toutes les largeurs de bord: 5px couleur: gris très foncé # 333333 Laissez la colonne 2 en blanc. Ajouter un formulaire de contenu de poste à la colonne 1 Texte ajouter un formulaire de contenu de poste à la colonne 1 et modéliser le texte pour correspondre au modèle de carte de recette. Caractères: sans code couleur: gris foncé # 333333 taille: Bureau: 0.9vw tablette: 2vw Téléphone: 3vw hauteur de ligne: 2em Titre 1 caractères de texte: couleur orienta: gris très foncé # 333333 taille: Bureau: 2vw tablette: 5vw Téléphone: 6vw titre 2 caractères de texte: couleur orienta: gris très foncé # 333333 taille: Bureau: 1.8vw tablette: 4.5vw Téléphone: 5.5vw titre 3 caractères de texte: couleur orienta: gris très foncé # 333333
E: oriental: gris très foncé # 333333 taille: Bureau: 1.6vw tablette: 4.5vw Téléphone: 5vw

Espacement pour correspondre au style de la carte de recette, ajuster la valeur d’espacement. Remplissage en haut + en bas: 2vw à gauche + à droite: Bureau: 4vw tablette + téléphone: 6vw

Si vous voulez changer la couleur d’une ligne de guillemets de bloc ou d’un lien, vous pouvez le faire sous la couleur d’accent du personnalisateur de sujet. 4. Utilisez les paramètres du plug – in ACF et le modèle d’onglet recette pour modifier \/ créer des messages pour insérer des champs personnalisés ouverts ou ajouter des messages. Sous la zone de contenu, vous trouverez tous les champs personnalisés du modèle de carte de recette. Pour recréer ce pain d’avocat, remplissez les champs suivants. Titre de la recette: Super Green Vegan guacamole toast recette par Magdalena swifter – www.vegancafe.it Temps de préparation de la recette: 15 Recettes: 3 Recettes conseils de saveur: utiliser des tranches de sel de mer et de l’huile extra vierge image de la recette: avocat toast image Ingrédients de la recette titre: liste des ingrédients de la recette: 3 tranches de pain de blé entier 1 tranche d’avocat cuit 100 g. Haricots cuits 10 g bourgeons verts 1 oignon haché 30 G corne d’agneau hachée 1 citron coupé en une demi – goutte d’huile d’olive saupoudrée de sel de Shanghai nom de la recette: liste de préparation Recette: 1. Faites cuire les tranches de pain à votre goût. 2. Ouvrir l’avocat, retirer la pulpe et écraser avec une fourchette. Presser le jus de citron sur l’avocat et assaisonner de sel. Embrouillez l’avocat sur le toast. Saupoudrer de haricots, de bourgeons et d’échalotes hachées. Assaisonner de sel. Ajouter le fromage de chèvre haché. Enduire enfin d’huile d’olive. N’oubliez pas d’ajouter un titre à votre billet. Recettes de toast à l’avocat Ajouter du contenu, sélectionner