Construisez de magnifiques sites Web WordPress en utilisant Divi et Divi Builder

Comment concevoir un menu de restaurant collant en utilisant Divi

Rifat Tutoriels Divi May 7, 2021

Les menus alimentaires sont une partie très importante d’un site web de restaurant. Parce qu’il fournit à un client une idée globale sur le prix des aliments. Maintenant, si vous voulez faire un menu de restaurant créatif pour votre site Web, vous devriez certainement regarder à l’intérieur Divi.

Aujourd’hui, nous vous mèneons à une conception accrocheuse de menu de restaurant qui a un effet collant - en utilisant l’option collante intégrée de Divi. Notre conception va créer séparer l’ensemble du menu en différentes catégories et permet aux visiteurs o voir dans quelle catégorie ils sont! Alors, faisons-le.

Aperçu de notre conception finale

Jetons un coup d’oeil rapide au résultat final de notre conception d’aujourd’hui.

Vue de bureau

Vue mobile

Création de structure d’éléments

Ajout d’une nouvelle section

Couleur de fond

Ajoutez une nouvelle page de votre tableau de bord et ouvrez-la avec le constructeur Divi. Allez avec « Build From Scratch. » Maintenant, ouvrez les paramètres de section et ajoutez une couleur de fond.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant
  • Couleur de fond: rgba(255,252,244,0.6)

Image de fond

Maintenant, utilisez une image de modèle comme arrière-plan. Il ya beaucoup d’images de modèle disponibles chez Google, alors choisissez l’un de vos choix.

  • Taille de l’image de fond : taille réelle
  • Position de l’image de fond: Top Center
  • Répétition de l’image de fond : Répétition X (horizontale)

Espacement

Modifiez les valeurs d’espacement.

  • Rembourrage supérieur: 150px
  • Rembourrage inférieur: 150px

Ajout d’une nouvelle ligne

Structure de colonne

Ajouter une nouvelle ligne sous l’image à l’aide de la structure de colonne suivante. Choisissez « Régulier » de l’onglet « Nouvelle section ».

Choisissez maintenant la structure de colonne suivante.

Dimensionnement

Maintenant, ouvrez les paramètres de la ligne et modifiez les valeurs telles qu’données ci-dessous.

  • Utilisez la largeur de gouttière personnalisée : Oui
  • Largeur de gouttière: 1
  • Largeur maximale: 1580px
  • Alignement des lignes: Centre

Ajouter le module texte 1 à la colonne 1

Ajouter du contenu H3

Eh bien, maintenant nous allons ajouter des modules à notre structure. Commençons par un module texte dans la colonne 1. Ajoutez du contenu H3 de votre souhait.

Paramètres de texte H3

Allez à l’onglet de conception du module et modifiez les paramètres suivants.

  • Cap 3 Font: Karla
  • Cap 3 Font Weight: Bold
  • Cap 3 Espacement des lettres: -2px
  • Cap 3 Hauteur de ligne: 1.2em

Espacement

Ajoutons un peu de rembourrage en haut et en bas.

  • Rembourrage supérieur: 25px
  • Rembourrage inférieur: 25px

Ajouter le module texte 2 à la colonne 1

Ajouter du contenu

Ajoutez un module texte sous le module précédent et ajoutez quelques mots de votre choix.

Réglage du texte

Modifiez les paramètres des modules.

  • Police de texte: Crimson Pro
  • Couleur du texte: #3a3a3a
  • Taille du texte: 32px

Espacement

Terminez les paramètres du module en modifiant les valeurs d’espacement.

  • Marge supérieure: 20px
  • Marge inférieure: 50px
  • Rembourrage gauche: 5%
  • Rembourrage droit: 5%

Ajouter un module d’image à la colonne 1

Téléchargement d’images

L’élément final dont nous avons besoin dans la colonne 1 est une image. Ajoutez un module d’image, puis ajoutez une image de votre choix.

Dimensionnement

Ajoutez une largeur maximale des paramètres de dimensionnement.

Espacement

Complétez maintenant les paramètres du module en implémentant les modifications suivantes à l’espacement.

  • Marge inférieure: Tablette: 80px, Téléphone: 50px
  • Rembourrage gauche: 5%
  • Rembourrage droit: 5%

Ajouter blurb module à la colonne 2

Ajout de contenu

Ajoutez un peu de contenu de votre choix sur un nouveau module de flou sur la colonne 2. Ce module est un module basé sur le texte qui fournit plus d’informations sur un sujet individuel.

Couleur de fond

Ajouter une couleur de fond blanche de l’onglet contenu.

  • Couleur de fond: #ffffff

Paramètres de texte de titre

Passez maintenant à la section de conception et modifiez les valeurs suivantes.

  • Titre Font: Karla
  • Titre Font Weight: Bold
  • Couleur du texte du titre: #3a3a3a
  • Espacement de lettre de titre : -2px
  • Hauteur de la ligne de titre: 1.2em

Paramètres de texte du corps

Modifiez les paramètres de texte du corps comme mentionné ci-dessous.

  • Titre Font: Karla
  • Couleur du texte du titre: #3a3a3a
  • Espacement de lettre de titre : -0.5px
  • Hauteur de la ligne de titre: 2em

Dimensionnement

Maintenant, modifiez le dimensionnement.

  • Largeur du contenu: 100%

Espacement

Passez aux paramètres d’espacement et modifiez les valeurs en conséquence.

  • Marge inférieure: 30px
  • Rembourrage supérieur: 40px
  • Rembourrage inférieur: 40px
  • Rembourrage gauche: 8%

Frontière

Il est temps d’appliquer les paramètres frontaliers.

  • Largeur de la bordure gauche: 3px
  • Couleur de la bordure gauche: #000000

Ombre de boîte

Nous utilisons aussi une ombre de boîte.

  • Force de flou d’ombre de boîte : 20px
  • Couleur de l’ombre: rgba (0,0,0,05)

Blurb Titre CSS

Pour terminer les paramètres du module, nous devons ajouter la ligne suivante de code CSS à la boîte CSS titre blurb dans l’onglet avancé.

margin-bottom: 20px;

Clone Blurb Module

Maintenant, votre restaurant peut avoir une variété d’articles pour le petit déjeuner. Vous n’avez pas besoin de créer chaque section à partir de zéro parce que Divi vous permet de copier votre module autant de fois que vous en avez besoin. Donc, clonez le module blurb en fonction de votre élément.

Et, puis changer le contenu à l’intérieur des éléments.

Appliquer des effets collants

Module texte 1 dans la colonne 1

Comme nous avons tous les éléments structurés, non, nous nous concentrerons sur l’ajout d’effets collants. Pour cela, ouvrez le premier module texte dans la colonne 1.

Rendre le module collant

Passez à l’onglet avancé et faites les réglages collants suivants :

  • Position collante: S’en tenir au sommet
  • Limite collante inférieure : Ligne
  • Offset Éléments collants environnants: Oui
  • Transition Par défaut et sticky styles: Oui

Style collant pour module

Couleur de fond

Comme nous avons maintenant un module collant, nous pouvons appliquer des styles collants à elle. Tout d’abord, sélectionnez noir comme couleur collante de fond.

  • Couleur collante de fond : #000000

Couleur du texte

Ensuite, modifiez la couleur collante du texte H3 en blanc.

  • Sticky Heading 3 Couleur de texte: #ffffff

Espacement

Et de conclure les styles collants en ajoutant les valeurs de rembourrage collantes réactives suivantes :

  • Rembourrage gauche collant: 5%
  • Rembourrage droit collant : 5%

Cloner toute la ligne pour la réutilisation

Une fois que vous avez terminé avec les effets collants de la section petit déjeuner, vous voudrez peut-être ajouter le déjeuner et la section dîner. Donc, dupliquer toute la ligne pour la réutiliser.

Modifier tout le contenu de la deuxième rangée

Assurez-vous d’avoir modifié le contenu pendant quelques secondes.

Résultat final

Donc, notre conception finale ressemble à ceci.

Vue de bureau

Vue mobile

Conclusion

Aujourd’hui, dans ce post, nous avons essayé de vous montrer comment créatif, vous pouvez personnaliser votre prochain menu du site web avec L’option collante de Divi. Il s’agit d’une excellente façon interactive d’afficher les aliments aux clients. Si vous avez des suggestions ou des demandes de tutoriel, s’il vous plaît partager vos pensées dans la boîte de commentaires. Si vous avez trouvé cet article utile, une part sera belle.