Comment créer un menu surdimensionné pour votre page recettes en utilisant le pack de mise en page de la recette alimentaire de Divi

Pas la page. Partie 2: créer une catégorie Étape 1: aller à la catégorie maintenant, créons une catégorie de messages avant de créer des messages. Pour ce faire, allez au tableau de bord WordPress > posts > catégories. Étape 2: ajouter une catégorie de parents la première catégorie que vous devez ajouter est la catégorie principale. Par exemple, dans cet exemple, nous utilisons le petit déjeuner et le déjeuner comme principales catégories. Ajoutez un titre de catégorie et assurez – vous que l’option de catégorie principale est définie à aucune. Étape 3: Ajoutez des sous – catégories et attribuez – les à la catégorie principale. Selon la catégorie principale, vous pouvez ajouter n’importe quel nombre de sous – catégories. Il suffit de s’assurer que chaque fois qu’une sous – catégorie est ajoutée, la catégorie principale correcte lui est assignée. Partie 3: créer un billet à partir de la mise en page de la recette Étape 1: ajouter un nouveau billet maintenant que nous avons notre propre catégorie, il est temps de créer un billet de recette. Nous allons vous montrer comment créer des messages à partir de zéro, puis vous pouvez réutiliser la mise en page que nous allons enregistrer pour créer plus de messages de recette. Étape 2: après avoir ajouté un message, assignez un titre, une image de premier plan et une (des) Catégorie (s) au message, assignez un titre au message, Téléchargez l’image de premier plan et sélectionnez la catégorie principale et la Sous – catégorie qui correspondent au message de recette. Étape 3: modifier les paramètres Divi post pour s’assurer que la mise en page de la recette est affichée comme nous le voulons, nous utiliserons les paramètres Divi post suivants:
Mise en page: pleine largeur (Ceci supprimera la barre latérale sur le billet) titre du billet: caché (nous ajouterons le titre du billet dans Visual Builder) Étape 4: Passez maintenant à Visual Builder, passez à Visual Builder, où nous allons changer l’apparence. Étape 5: charger la disposition de la recette – la première chose à faire dans la construction visuelle
Er charge la disposition de la recette. Cliquez sur le cercle en bas de la page, allez à l’icône plus et faites défiler l’onglet mise en page par défaut jusqu’à ce que vous trouviez le paquet de mise en page de la recette alimentaire. Une fois arrivé, sélectionnez la mise en page de la recette et cliquez sur utiliser cette mise en page. Étape 6: supprimer la section héros la section héros de cette section ne contient pas de titre de poste. Cependant, nous voulons qu’il apparaisse automatiquement sur nos pages. C’est pourquoi nous allons supprimer cette section héros et en créer une nouvelle. Étape 7: ajouter une section pleine largeur au lieu d’utiliser une section standard, utiliser une section pleine largeur. Étape 8: ajouter une image de premier plan comme image de fond d’une section après avoir ajouté une largeur totale d’image, utiliser l’image de premier plan comme arrière – plan et effectuer les réglages suivants:
Taille de l’image de fond: emplacement de l’image de fond de la couverture: image de fond répétitive centrée: image de fond mélangée non répétitive: multiplication (cela aidera à fusionner l’image de fond et la couleur de fond que nous ajouterons à l’étape suivante) Étape 9: ajouter une superposition de couleur de fond en sélectionnant le gris, vous pouvez décider à quel point vous voulez que l’image (et le texte) soit lisible. Nous utilisons \
Remplissage supérieur: 85 Px remplissage inférieur: 140 px Étape 11: ajouter la liste complète des titres d’article à la section complète maintenant que nous avons modifié la section complète au besoin, nous pouvons ajouter la liste complète des titres d’article à la section complète
Tout le contenu de cette section. Ceci affichera automatiquement le titre de votre message et tous ses éléments. Étape 12: modifier les paramètres du texte bien sûr, nous voulons que ce formulaire de titre de poste complet corresponde au reste de notre site. C’est pourquoi nous allons d’abord appliquer les paramètres suivants aux sous – catégories de texte:
Couleur du texte: orientation du texte clair: Centre Étape 13: modifier les paramètres du texte du titre, puis ouvrir la Sous – catégorie du texte du titre et appliquer les paramètres suivants: Police du titre: cormorant garamond police du titre poids: titre normal taille du texte: 53px Étape 14: modifier les paramètres du métatexte nous apporterons également quelques modifications mineures à la Sous – catégorie du texte du métatexte: métapolice: cormorant garamond poids du métatexte: taille normale du métatexte: 18px Étape 15: enregistrer la mise en page dans la Bibliothèque Divi nous avons terminé l’édition de la mise en page de la recette! Bien sûr, vous devez modifier le reste en fonction de la recette, mais vous pouvez réutiliser cette mise en page au lieu de recommencer à zéro. Pour réutiliser cette mise en page, cliquez sur l’icône circulaire au bas de la page et ajoutez la mise en page à la bibliothèque en lui assignant le nom de mise en page approprié. Partie 3: créer un menu personnalisé Étape 1: Allez au menu et créez un nouveau menu une fois que vous avez ajouté tous les messages requis au site, vous pouvez commencer à créer votre propre menu personnalisé qui apparaîtra sur la page recettes. Allez d’abord au menu, créez un nouveau menu et nommez le menu. Étape 2: ajouter une catégorie primaire ouvrez l’onglet catégories et ajoutez la catégorie primaire au nouveau menu que vous créez. Étape 3: ajouter une sous – catégorie comme premier élément de sous – menu ensuite, vous pouvez également ajouter une sous – catégorie. Assurez – vous que
Ensuite, ouvrez la Sous – catégorie arrière – plan et spécifiez la couleur d’arrière – plan # ffb8ad pour le module. Étape 6: paramètres du lien ensuite, allez à l’onglet conception de ce module de menu pleine largeur et appliquez les paramètres suivants à la Sous – catégorie du lien: active Link color: # FFFFFF drop – down text color: # ffffffff Move Menu text color: # ffffffff Text Direction: Center Étape 7: paramètres du menu déroulant faites défiler l’onglet conception vers le bas, ouvrez la Sous – catégorie du menu déroulant et appliquez les modifications suivantes: couleur de fond du menu déroulant: # ff7864couleur de ligne du menu déroulant: # FFFFFF couleur de fond du menu mobile: # ff7864 Étape 8: paramètres du texte du menu nous devons également modifier les paramètres du texte de ce menu en allant dans la Sous – catégorie du texte du menu et en appliquant les modifications suivantes (correspondant à l’ensemble du paquet de mise en page): caractères du menu: cormoran garamond menu font Weight: bold menu text size: 18px menu text color: # FFFFFF Étape 9: ajouter un CSS personnalisé à l’option sujet la dernière chose que nous devons faire est d’ajouter un code CSS personnalisé pour obtenir exactement le même résultat que l’exemple. Pour ce faire, allez au tableau de bord WordPress > Split > options de thème > faites défiler vers le bas jusqu’à ce que vous trouviez Custom CSS et ajoutez la ligne de code CSS suivante:. Navigation du menu plein écran Li. Super Menu > UL > LI > A: premier enfant {
Bordure inférieure: 1px solide # FFFFFF;
Taille de la police: 20px;
Bord supérieur: 15px;
Conversion de texte: Majuscules;
Remplir le fond: 20px;
}
– Oui. Et _ pb fullwidth menu 0. Et _ pb fullwidth menu. Navigation Li UL {
Rayon limite: 5px;
Haut de l’emballage: 10px;
Alignement du texte: centré;
} Dans ce blog de cas d’utilisation, nous vous montrons comment créer un super menu personnalisé pour vos recettes et catégories et l’ajouter à la page d