Comment intégrer des galeries Divi dans des bascules pour créer un menu de restaurant personnalisé

L'utilisation de bascules sur votre page Web est un excellent moyen d'organiser votre contenu de manière claire et concise. Cela peut aider à améliorer l'expérience utilisateur en réduisant le défilement et en donnant à l'utilisateur plus de contrôle sur ce qu'il veut voir sur votre page. Un menu de restaurant en ligne est un bon exemple où les bascules peuvent bien fonctionner. Un utilisateur peut facilement trouver l'élément de menu qu'il aime et cliquer sur l'élément pour plus d'informations.

Dans ce tutoriel, je vais vous montrer comment créer des bascules intuitives et conviviales pour les mobiles pour le menu de votre restaurant à l'aide des bascules Divi. Je vais même vous montrer comment optimiser votre bascule pour mobile et intégrer des galeries d'images Divi à l'intérieur de votre contenu bascule pour présenter de superbes photos de plats spécifiques.

Commençons.

L'Avant et l'Après

Voici un aperçu de l'avant et de l'après pour la conception du menu du restaurant que nous allons construire.

Avant

Après

Commencer

Remplacement de l'affichage de la galerie WordPress par l'affichage de la galerie Divi

Divi vous permet de remplacer l'affichage par défaut de la galerie WordPress par un affichage de la galerie Divi. Ainsi, chaque fois que vous créez une galerie WordPress et que vous l'intégrez à votre page, la galerie s'affiche comme une galerie à l'aide du module Divi Gallery. Cela vous permet d'ajouter des galeries d'images Divi à n'importe quel module du Divi Builder (nous en parlerons plus tard). Pour mettre en œuvre ce changement, accédez à Divi > Options du thème. Sous l'onglet Général, cliquez pour activer l'option Divi Gallery.

Définition de la couleur d'accent de votre thème (facultatif)

Étant donné que nous allons insérer une galerie Divi dans un module à bascule, la couleur de l'icône qui s'affiche lorsque vous survolez une image dans la galerie héritera automatiquement de la couleur d'accent que vous avez définie pour le thème Divi. Vous pouvez définir la couleur d'accent du thème à partir de votre tableau de bord WordPress en accédant à Divi > Personnalisateur de thème > Paramètres généraux > Paramètres de mise en page. Sous Paramètres de mise en page, mettez à jour la couleur d'accès au thème comme suit :

Couleur d'accent du thème : #a06d51

C'est la couleur qui correspondra à la disposition du menu de boulangerie que nous utiliserons pour ce didacticiel.

Mise à jour de la taille de l'icône de bascule par défaut dans le module de personnalisation (facultatif)

Pour cette conception, j'ai pensé qu'il serait utile d'afficher une icône de bascule plus grande lors de l'utilisation du module Divi Toggle. Vous pouvez modifier la taille par défaut du module Toggle en accédant à Divi > Personnalisateur de module. Sélectionnez ensuite le module de basculement dans la liste et mettez à jour la taille de l'icône comme suit :

Basculer la taille de l'icône : 32

Configuration de votre nouvelle page avec la mise en page du menu de boulangerie

Pour commencer, vous devrez créer une nouvelle page, donner un titre à votre page et déployer le Divi Builder. Sélectionnez l'option « Choisir une mise en page prédéfinie ».

Dans la fenêtre contextuelle de chargement à partir de la bibliothèque, choisissez le pack de mise en page de boulangerie, puis cliquez sur pour utiliser la mise en page du menu de boulangerie.

Une fois la mise en page chargée sur la page, publiez votre page. Cliquez ensuite sur le bouton « Build on Front End ». puis publiez votre page. Cliquez ensuite pour construire sur le front-end.

Une fois cela fait, vous êtes prêt à commencer à concevoir le menu !

Implémentation de la conception de menu de restaurant personnalisé avec les bascules Divi et les galeries d'images

Conception d'un élément de menu

Avec le Divi Builder actif sur le front-end, ajoutez un module Toggle sous le module de texte avec le sous-titre qui lit « Sweet Tooth ».

Pour l'instant, vous pouvez laisser le contenu fictif par défaut utilisé pour le titre et le corps du contenu. Mais, vous devrez ajouter un prix pour l'élément de menu dans le contenu du corps de l'onglet. Cliquez sur l'onglet Texte (au lieu de Visuel) et ajoutez le code HTML suivant sous le texte par défaut actuel.

<h5>$8.00</h5>

Ensuite, commencez à mettre à jour les paramètres de bascule comme suit :

• Couleur de l'icône : #a06d51
• Couleur du texte à bascule ouverte : #333333
• Couleur du texte à bascule fermée : #333333
• Couleur d'arrière-plan de la bascule fermée : #ffffff

• Police du titre : Patua One
• Poids de la police du titre : gras
• Style de police du titre : TT
• Espacement des lettres du titre : 1px
• Hauteur de la ligne de titre : 4 em
• Rembourrage personnalisé : 0px en haut, 0px en bas

Afin d'augmenter la zone cliquable du titre à bascule, la hauteur de la ligne de titre est augmentée et les rembourrages supérieur et inférieur sont supprimés.

Ajoutons maintenant une bordure gauche à notre bascule.

• Largeur de la bordure gauche : 5 px
• Couleur de la bordure gauche : #a06d51

Ajout d'une galerie d'images au module de basculement

Comme mentionné précédemment, lorsque vous activez l'option Divi Gallery dans les options du thème Divi, une intégration de la galerie WordPress prendra le style d'une galerie Divi. Cela vous permet d'intégrer une galerie d'images de style Divi dans n'importe quel module. Pour cet exemple, nous souhaitons ajouter des images à l'intérieur du module à bascule pour afficher des images d'un élément de menu de restaurant particulier. Pour ce faire, ouvrez les paramètres de bascule et cliquez sur le bouton Ajouter un média au-dessus de la zone de contenu.

Dans la fenêtre contextuelle de la bibliothèque multimédia, sélectionnez l'onglet Créer une galerie sur la gauche. Sélectionnez ensuite la ou les images que vous souhaitez utiliser pour la galerie et cliquez sur « Créer une nouvelle galerie ».

Dans la section Modifier la galerie de la fenêtre contextuelle, ignorez les paramètres de la galerie, car les styles de la galerie Divi remplaceront ces paramètres de la galerie WordPress. Cliquez ensuite sur le bouton Insérer une galerie.

Cela place un shortcode de galerie dans le contenu du module à bascule. Si vous souhaitez que la galerie s'affiche après le corps du texte actuel, assurez-vous de placer le shortcode après le contenu.

Ajuster le remplissage des lignes pour smartphone

Le contenu deviendra assez serré avec l'espacement actuel de la mise en page prédéfinie. Nous devons mettre à jour les paramètres de ligne pour créer plus d'espace sur le smartphone. Pour ce faire, ouvrez les paramètres de la ligne contenant les bascules de menu de votre restaurant et mettez à jour les éléments suivants :

• Rembourrage personnalisé (téléphone) : 0px à gauche, 0px à droite

Dupliquez la bascule au besoin

Pour ajouter plus d'éléments de menu, dupliquez simplement le module Toggle et mettez à jour le contenu avec de nouvelles galeries de texte et d'images si nécessaire. Après cela, vous pouvez supprimer les éléments de menu d'origine fournis avec la mise en page prédéfinie.

Résultat final

Voyons maintenant le résultat final de la conception.

Modification du nombre de colonnes dans la galerie

Par défaut, la galerie a une disposition qui reste sur trois colonnes sur toutes les largeurs de navigateur et tous les appareils. Cependant, avec l'effet lightbox, les utilisateurs pourront voir une version plus grande en cliquant sur l'élément de la galerie. Ainsi, les images plus petites peuvent toujours fonctionner. Mais, si vous souhaitez modifier le nombre de colonnes, vous pouvez toujours ajouter un petit extrait de CSS. Pour cet exemple, je vais modifier la galerie pour afficher les images en deux colonnes. Pour ce faire, ouvrez d'abord les paramètres de bascule et ajoutez une classe CSS personnalisée comme suit :

Classe CSS : deux-col-gal

Ouvrez ensuite les paramètres de la page et ajoutez le CSS personnalisé suivant :

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

Modification de la couleur de superposition de la galerie d'images dans le module de personnalisation

Si vous souhaitez modifier la couleur de la superposition de survol des éléments de votre galerie sans avoir à utiliser de CSS personnalisé, vous pouvez modifier les paramètres par défaut du module Galerie dans le module de personnalisation. Pour ce faire, accédez à Divi > Personnalisateur de module. Cliquez ensuite sur le module Galerie et modifiez la couleur de superposition du survol comme vous le souhaitez.

Dernières pensées

Espérons que ce didacticiel vous inspirera pour savoir comment utiliser le module Divi Toggle pour créer de superbes menus de restaurant. En prime, vous avez peut-être appris une nouvelle astuce pour intégrer certaines galeries Divi dans n'importe quel module de votre choix (pas seulement des bascules). La seule limitation est de personnaliser le nombre de colonnes que vous souhaitez afficher dans votre galerie intégrée. Cependant, vous pouvez ajouter un petit extrait de CSS personnalisé pour vous mettre sur la bonne voie.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!