Comment créer un menu Blurb au survol/clic pour votre page avec Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer un superbe menu de présentation qui se développe une fois que vous le survolez ou cliquez dessus. Nous allons d'abord commencer par passer en revue quelques étapes générales. Nous continuerons en ajoutant des éléments de menu à l'aide des modules Blurb et nous terminerons en vous permettant de choisir entre un effet de survol ou de clic.

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.

Mode de survol

Bureau

Mobile

Cliquez sur Mode

Bureau

Mobile

1. Créez une page vierge et téléchargez la page de destination Sightseeing

Ajouter une nouvelle page vierge et activer Divi Builder

La première chose à faire est de créer une nouvelle page vierge. Donnez un titre à votre page et passez à Divi Builder.

Télécharger la page de destination touristique

Une fois que vous avez activé Divi Builder, téléchargez la mise en page de la page de destination du pack de mise en page Sightseeing.

2. Ajouter une nouvelle section régulière au bas de la page

Une fois la barre de menu principale masquée, nous pouvons commencer à ajouter le menu de présentation. Pour ce faire, nous allons ajouter une nouvelle section régulière au bas de notre page.

Couleur de l'arrière plan

Ouvrez les paramètres de la section et ajoutez une couleur de fond blanc légèrement transparent.

• Couleur d'arrière-plan : rgba (255,255,255,0.98)

Espacement

Passez à l'onglet Conception et supprimez tout le rembourrage supérieur et inférieur par défaut de la section.

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

Ombre de boîte par défaut

Ajoutez une ombre de boîte à la section suivante.

• Force du flou d'ombre de la boîte: 18px
• Couleur de l'ombre : #383838

Ombre de la boîte de survol

Et modifiez la force du flou de l'ombre de la boîte en survol.

• Force du flou d'ombre de la boîte: 1000px

Masquer les débordements de section et augmenter l'index Z

Nous utiliserons les paramètres de dimensionnement de section pour faire fonctionner cette technique, mais pour nous assurer que rien ne dépasse le conteneur de section, nous devrons masquer les débordements. Nous augmentons également l'index Z pour nous assurer que la section reste en tête du reste de la page.

• Débordement horizontal : masqué
• Débordement vertical : caché
• Indice Z : 9999

3. Assurez-vous que tout le contenu du menu de section est créé à l'aide de Vw et s'adapte à une hauteur de fenêtre de 100 sur toutes les tailles d'écran

Ajouter la ligne n° 1

Structure des colonnes

Une fois que vous avez terminé les paramètres de base de la section, il est temps d'ajouter tout le contenu que vous souhaitez afficher dans le menu. Vous pouvez créer n'importe quel design à l'aide des éléments de conception et des options intégrées de Divi, mais vous devez vous assurer que tout s'adapte à une hauteur de « 100vh » sur toutes les tailles d'écran. Pour ce faire, nous allons utiliser l'unité de largeur de la fenêtre tout au long du processus de construction et ajuster les valeurs sur différentes tailles d'écran. Commencez par ajouter une nouvelle ligne à votre section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et assurez-vous qu'il occupe toute la largeur de la section.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Passez aux paramètres d'espacement et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter un module de texte à la colonne

Ajouter un symbole

Continuez en ajoutant un module de texte à la colonne de la ligne. Ajoutez le symbole '=' dans la zone de contenu ou n'hésitez pas à utiliser tout autre symbole de votre choix.

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan du module.

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

Paramètres de texte

Passez à l'onglet Conception et modifiez également les paramètres de texte.

• Police de texte : Open Sans
• Alignement du texte : Centre
• Couleur du texte : #ffffff
• Taille du texte : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Hauteur de la ligne de texte : 1 em

Espacement

Nous ajoutons également de l'espace en haut et en bas du module en utilisant les valeurs de remplissage personnalisées suivantes :

• Rembourrage supérieur : 2.5vw (ordinateur de bureau), 3.5vw (tablette), 5vw (téléphone)
• Rembourrage inférieur : 2.5vw (ordinateur de bureau), 3.5vw (tablette), 5vw (téléphone)

Ajouter la ligne n° 2

Structure des colonnes

Continuez en ajoutant une deuxième ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Passez aux paramètres d'espacement et ajoutez ensuite un rembourrage personnalisé en haut et en bas.

• Rembourrage supérieur : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)

Affichage

Pour nous assurer que les deux colonnes restent côte à côte sur des écrans de plus petite taille, nous allons ajouter une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter les éléments du menu ! Ajoutez un nouveau module Blurb à la première colonne de la ligne et saisissez le contenu de votre choix.

Sélectionnez l'icône

Choisissez ensuite une icône.

Ajouter un lien

Et entrez un lien de page qui correspond à l'élément de menu.

• URL du lien du titre : #

Paramètres des icônes

Passez à l'onglet Conception et modifiez les paramètres de l'icône en conséquence :

• Couleur de l'icône : #ff3314
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)

Paramètres du texte du titre

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

• Police du titre : PT Serif
• Style de police du titre : Souligné
• Couleur de soulignement du titre : #ff3314
• Alignement du texte du titre : Centre
• Taille du texte du titre : 1.8vw (ordinateur de bureau), 2.3vw (tablette), 3.3vw (téléphone)

Paramètres du corps du texte

Ensuite, modifiez les paramètres du corps du texte.

• Police de caractère : Lato
• Alignement du corps du texte : Centre
• Couleur du corps du texte : #c6c6c6
• Taille du corps du texte : 0.9vw (ordinateur de bureau), 1.7vw (tablette), 2.1vw (téléphone)
• Hauteur de la ligne du corps : 1,8 em

Dimensionnement

Et modifiez la largeur du module sur différentes tailles d'écran en utilisant les valeurs suivantes :

• Largeur : 60 % (ordinateur de bureau), 65 % (tablette), 80 % (téléphone)

Animation

Nous supprimons également l'animation de l'icône dans les paramètres d'animation.

• Animation d'icône : aucune animation

Cloner le module Blurb et placer le doublon dans la colonne 2

Une fois que vous avez terminé le module Blurb, vous pouvez le cloner et placer le doublon dans la deuxième colonne de la ligne.

Modifier la copie

Assurez-vous de changer la copie.

Changer l'icône

Avec l'icône.

Modifier le lien

Et le lien de page qui correspond au nouvel élément de menu.

Cloner la ligne deux fois

Une fois que vous avez terminé les deux modules Blurb de la ligne, vous pouvez cloner la ligne entière deux fois.

Modifier la copie, l'icône et le lien pour chaque duplicata de Blurb individuellement

Assurez-vous de modifier individuellement la copie, l'icône et le lien pour chacun des éléments du menu de présentation.

4. Rendre la section collante

Défaut

Une fois que vous avez ajouté tous les éléments que vous souhaitez afficher à votre section, vous pouvez faire en sorte que la section reste en haut à gauche de votre page en ajoutant les deux lignes de code CSS suivantes à l'élément principal de la section :

position: fixed;
top: 0;

Survolez (Important !)

Activez l'option de survol sur l'élément principal de la section et assurez-vous que la section reste également collante dans cet état.

position: fixed;

5. Choisissez une méthode : A) Menu au survol ou B) Menu au clic

A) Menu au survol

Dimensionnement de section par défaut

Dans la prochaine partie du didacticiel, vous devrez choisir une méthode préférée ; un menu au survol ou au clic. Le menu de survol se comportera comme un menu de clic sur les appareils plus petits. Si vous décidez de choisir l'option de survol, ouvrez à nouveau les paramètres de la section, accédez aux paramètres de dimensionnement et modifiez la largeur et la hauteur de votre menu en conséquence :

• Largeur : 8vw (ordinateur de bureau), 12vw (tablette), 20vw (téléphone)
• Hauteur : 7.4vw (ordinateur de bureau), 12vw (tablette), 16vw (téléphone)

Dimensionnement de la section de survol

Modifiez les valeurs au survol pour créer un menu extensible.

• Largeur: 80%
• Hauteur: 100vh

B) Menu au clic

Ajouter une classe CSS au module de texte

Si vous voulez un menu qui s'ouvre en cliquant uniquement, vous devrez ouvrir le module de texte contenant le symbole du menu. Accédez à l'onglet avancé et ajoutez une classe CSS personnalisée.

• Classe CSS : pleine largeur ouverte

Ajouter une classe CSS à la section

Ouvrez ensuite les paramètres de la section et ajoutez une classe CSS différente.

• Classe CSS : transformation en douceur

Dimensionnement des sections

Nous modifions ensuite la largeur et la hauteur de notre section.

• Largeur : 8vw (ordinateur de bureau), 12vw (tablette), 20vw (téléphone)
• Hauteur : 7.4vw (ordinateur de bureau), 12vw (tablette), 16vw (téléphone)

Ajouter du code à la page

Ajouter une nouvelle ligne au bas de la section

Maintenant, pour créer l'effet de bascule, nous allons avoir besoin d'un peu de code JQuery et CSS. Commencez par ajouter un module de code à une nouvelle ligne au bas de votre section.

Ajouter un module de code à la section et insérer du code de basculement JQuery

Copiez les lignes suivantes de code JQuery et collez-les dans la zone de code :

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

Ajouter un code CSS personnalisé aux paramètres de la page

Enfin, ouvrez ensuite les paramètres de la page et ajoutez les lignes de code CSS suivantes :

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

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.

Mode de survol

Bureau

Mobile

Cliquez sur Mode

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer un magnifique module de présentation qui se développe au clic/survol (selon vos préférences). C'est un excellent moyen d'ajouter une interactivité supplémentaire à votre menu tout en maintenant un résultat réactif sur toutes les tailles d'écran. Si vous avez des questions ou des suggestions, assurez-vous de 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.