Comment créer un design de menu de restaurant collant avec Divi

Si vous créez un site Web de restaurant, il y a de fortes chances que vous souhaitiez également y inclure un menu de restaurant. Maintenant, si vous cherchez un moyen créatif de le faire dans Divi, vous allez adorer ce tutoriel. Aujourd'hui, nous allons vous montrer comment utiliser les options collantes intégrées de Divi pour créer un menu de restaurant collant. Le design que nous créons divise les éléments de votre menu par catégorie et permet aux visiteurs de voir dans quelle catégorie ils se trouvent ! Vous pourrez également télécharger le fichier JSON gratuitement.

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

1. Créer une structure d'élément

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : rgba(255 252 244,0,6)

Image de fond

Téléchargez ensuite une image de fond de motif. Vous pouvez trouver celui que nous avons utilisé dans le dossier zippé que vous pouvez télécharger au début de cet article.

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : en haut au centre
• Répétition de l'image d'arrière-plan : Répéter X (horizontal)

Espacement

Modifiez ensuite les paramètres d'espacement.

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

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur:
  • Ordinateur de bureau et tablette : 80 %
  • Téléphone : 95 %
• Largeur maximale : 1580px
• Alignement des lignes : Centre

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu H3

Il est temps d'ajouter des modules, en commençant par un premier module de texte dans la colonne 1. Ajoutez du contenu H3 de votre choix.

Paramètres de texte H3

Passez à l'onglet de conception du module et modifiez les paramètres de texte H3 en conséquence :

• Titre 3 Police : Karla
• Titre 3 Poids de la police : gras
• Titre 3 Taille du texte :
  • Ordinateur de bureau et tablette : 45 pixels
  • Téléphone : 35px
• En-tête 3 Espacement des lettres : -2px
• Rubrique 3 Hauteur de ligne : 1,2 em

Espacement

Ajoutez ensuite des valeurs de remplissage en haut et en bas.

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

Ajouter le module de texte n° 2 à la colonne 1

Ajouter du contenu

Ensuite, ajoutez un autre module de texte juste en dessous du précédent avec le contenu de votre choix.

Paramètres de texte

Modifiez les paramètres de texte du module comme suit :

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

Espacement

Complétez les paramètres du module en modifiant les paramètres d'espacement en conséquence :

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

Ajouter un module d'image à la colonne 1

Télécharger une image

Le dernier module dont nous avons besoin dans la colonne 1 est un module Image. Ajoutez une image de votre choix.

Dimensionnement

Ajoutez une largeur maximale aux paramètres de dimensionnement.

• Largeur maximale : 250 px

Espacement

Et complétez les paramètres du module en appliquant les valeurs de remplissage réactif suivantes aux paramètres d'espacement :

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

Ajouter le module Blurb à la colonne 2

Ajouter du contenu

Passez à la colonne 2. Ajoutez un module Blurb avec le contenu de votre choix.

Couleur de l'arrière plan

Utilisez ensuite une couleur de fond blanc.

• Couleur d'arrière-plan : #ffffff

Paramètres du texte du titre

Passez à l'onglet de conception du module et modifiez les paramètres du texte du titre en conséquence :

• Police du titre : Karla
• Poids de la police du titre : gras
• Couleur du texte du titre : #3a3a3a
• Taille du texte du titre :
  • Bureau : 40 pixels
  • Tablette : 35px
  • Téléphone : 30px
• Espacement des lettres du titre : -2px
• Hauteur de la ligne de titre : 1,2 em

Paramètres du corps du texte

Modifiez également les paramètres du corps du texte.

• Police de caractère : Karla
• Couleur du corps du texte : #3a3a3a
• Taille du corps du texte :
  • Bureau : 18px
  • Tablette : 25px
  • Téléphone : 20px
• Espacement des lettres du corps : -0,5 px
• Hauteur de la ligne du corps : 2 em

Dimensionnement

Ensuite, modifiez les paramètres de dimensionnement comme suit :

• Largeur du contenu : 100 %

Espacement

Ensuite, accédez aux paramètres d'espacement et modifiez les valeurs en conséquence :

• Marge inférieure : 30px
• Rembourrage supérieur : 40 px
• Rembourrage inférieur : 40px
• Rembourrage gauche : 8%
• Rembourrage droit :
  • Ordinateur de bureau : 25 %
  • Tablette & Téléphone : 8%

Frontière

Ensuite, nous appliquerons les paramètres de bordure suivants :

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

Boîte ombre

Nous utilisons également une ombre de boîte.

• Force du flou d'ombre de la boîte: 20px
• Couleur de l'ombre : rgba(0,0,0,0.05)

Titre du texte de présentation CSS

Et nous allons compléter les paramètres du module en ajoutant la ligne de code CSS suivante à la zone CSS du titre de présentation dans l'onglet avancé :

margin-bottom: 20px;

Cloner le module Blurb autant de fois que nécessaire

Une fois que vous avez terminé le premier module Blurb, vous pouvez le cloner autant de fois que vous le souhaitez.

Modifier tout le contenu en double

Assurez-vous de modifier tout le contenu en double.

2. Appliquer des effets collants

Ouvrez le module de texte n° 1 dans la colonne 1

Maintenant que tous les éléments sont en place, nous pouvons nous concentrer sur l'effet collant. Pour ce faire, nous allons ouvrir le premier module de texte dans la colonne 1.

Rendre le module collant

Passez à l'onglet avancé et appliquez les paramètres persistants suivants :

• Position collante : coller au sommet
• Limite collante inférieure : ligne
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles collants : oui

Styles collants pour le module

Couleur de l'arrière plan

Maintenant que notre module est devenu collant, nous pouvons lui appliquer des styles collants. Tout d'abord, ajoutez une couleur de fond collante noire.

• Couleur de fond collante : #000000

Couleur du texte

Ensuite, changez la couleur du texte collant H3 en blanc.

• Sticky Heading 3 Couleur du texte : #ffffff

Espacement

Et complétez les styles collants en ajoutant les valeurs de remplissage collantes réactives suivantes :

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

3. Cloner la ligne entière pour la réutilisation

Une fois que vous avez terminé les étapes collantes, vous pouvez réutiliser la ligne entière autant de fois que vous le souhaitez.

Modifier tout le contenu en double

Assurez-vous de modifier tout le contenu en double et c'est tout !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec votre prochain site Web de restaurant. Plus précisément, nous vous avons montré comment créer un menu de restaurant collant qui vous permet de présenter tous les éléments de manière interactive. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.