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 drsquoavoir une vision cohérente des recettes qursquoils publient. La solution commune est drsquoutiliser un plug in de carte de recette, mais cela implique des limites de conception. Maintenant, avec Divi Theme Builder, pouvez créer votre propre modèle de carte de recette à utiliser dans tout votre site et blog. Avec lrsquoaide du plug in Advanced Custom Fields (ACF), il est plus facile que jamais de concevoir une carte de recette unique et réutilisable. Dans nous montrerons comment créer un modèle de carte de recette avec un contenu dynamique. Avec les paramètres Divi Theme Builder, 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 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 lrsquoonglet 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 lrsquoé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 lrsquoé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 lrsquoen tête de recette: 30
Ensuite, créez un champ pour lrsquoauteur. É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 Lrsquoimage de recette ajoute maintenant un champ drsquoimage. Étiquette du champ: recette type de champ Image: Image requise?: Crsquoest exact. Le titre de lrsquoingrédient de recette est suivi du titre de lrsquoingrédient. Étiquette du champ: Élément de recette titre type de champ: description du texte: il suffit drsquoé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 drsquoécran ci dessous.
En cliquant sur lrsquoicône contenu dynamique, pouvez ajouter au module Divi le contenu de la façon drsquoaccé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 lrsquoé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, avez besoin drsquoune catégorie appelée recette pour assigner un modèle. Ajoutez le à lrsquoonglet 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 gt recettes. Ensuite, cliquez sur le bouton créer un modèle. 4. Construire une entité définie par lrsquoutilisateur cliquez sur Ajouter une entité globale et sélectionnez ajouter une entité définie par lrsquoutilisateur. 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 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 drsquoarrière plan. Couleur de fond: gris clair De plus, redimensionnez dans lrsquoonglet conception. Largeur: 100% largeur maximale: 100% Ajouter une première ligne structure de colonne ajouter une nouvelle ligne en utilisant une colonne. Redimensionner avant drsquoajouter 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 lrsquoespacement. Remplissage supérieur + inférieur: 0,5 VW remplissage gauche: 10 VW Visibilité Enfin, sur lrsquoonglet 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 drsquoabord, 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 lrsquoajouterons plus tard. Lrsquoarrière plan ajoute une couleur drsquoarrière plan au formulaire. Couleur de fond: vert chaux Lrsquoé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 drsquoespacement 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 drsquoarô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 drsquoajouter des modules. Largeur de gouttière personnalisée: 2 largeur: 80% largeur maximale: 100% Lrsquoespacement supprime également lrsquoespacement supérieur par défaut. Marge supérieure: 0vw Visibilité Enfin, ajustez la visibilité dans lrsquoonglet 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 lrsquoonglet 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 drsquoimage de contenu dynamique au contenu de la colonne 1 Ajouter un module drsquoimage de contenu dynamique à lrsquoimage 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 drsquoun module de contenu de poste. Ajouter une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionner avant drsquoajouter un module, redimensionnez la ligne. Largeur de gouttière personnalisée: 2 largeur: 100% largeur maximale: 80% Lrsquoespacement change le prochain réglage drsquoespacement. Remplissage gauche + droite: 0vw Colonne configurer 1 colonne de modélisation de fond pour correspondre à lrsquoonglet recette ci dessus. Drsquoabord, ajoutez lrsquoarrière plan. Couleur de fond: blanc Lrsquoespacement 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 drsquoespacement. Remplissage en haut + en bas: 2vw à gauche + à droite: Bureau: 4vw tablette + téléphone: 6vw voulez changer la couleur drsquoune ligne de guillemets de bloc ou drsquoun lien, pouvez le faire sous la couleur drsquoaccent du personnalisateur de sujet. 4. Utilisez les paramètres du plug in ACF et le modèle drsquoonglet recette pour modifier créer des messages pour insérer des champs personnalisés ouverts ou ajouter des messages. Sous la zone de contenu, trouverez tous les champs personnalisés du modèle de carte de recette. Pour recréer ce pain drsquoavocat, 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 lrsquohuile 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 drsquoavocat cuit 100 g. Haricots cuits 10 g bourgeons verts 1 oignon haché 30 G corne drsquoagneau hachée 1 citron coupé en une demi goutte drsquohuile drsquoolive 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 lrsquoavocat, retirer la pulpe et écraser avec une fourchette. Presser le jus de citron sur lrsquoavocat et assaisonner de sel. Embrouillez lrsquoavocat sur le toast. Saupoudrer de haricots, de bourgeons et drsquoéchalotes hachées. Assaisonner de sel. Ajouter le fromage de chèvre haché. Enduire enfin drsquohuile drsquoolive. Nrsquooubliez pas drsquoajouter un titre à votre billet. Recettes de toast à lrsquoavocat Ajouter du contenu, sélectionner