Comment créer un menu contextuant flottant avec DIVI

par | Déc 30, 2018 | Divi | 2 commentaires

Cet article est la traduction de How to Create a Floating Pop-out Menu in Divi

L’ajout d’un menu flottant à votre site Web permettra aux visiteurs d’accéder facilement à votre menu à tout moment de votre page. Ceci est idéal pour les menus de navigation secondaires qui complètent votre navigation principale en haut de votre page. Il vous permet également d’afficher des menus spécifiques au contenu de votre page. Par exemple, vous souhaiterez peut-être un menu de sous-navigation personnalisé pour votre page de services, qui fournisse des liens vers tous vos services.

Dans ce tutoriel, je vais vous montrer comment créer un menu contextuel flottant dans Divi. L’idée de base est de tirer parti du module accordéon de Divi pour la fonctionnalité de menu, puis d’ajouter une personnalisation avancée à une rangée pour la faire flotter à gauche de la page et la faire apparaître lorsque vous survolez une partie de la rangée.

Commençons!

Aperçu

Voiici un aperçu de la conception et des fonctionnalités que nous allons construire dans ce tutoriel :

Ce dont vous aurez besoin

Pour ce tutoriel, vous aurez besoin des éléments suivants:

  • Le thème de Divi
  • La mise en page de la charité pour le don provenant du pack pour la mise en page de la charité (disponible gratuitement dans Divi Builder)

Ajout de la mise en page

Pour ce didacticiel, je vais utiliser la mise en page Don de charité du pack de présentation pour organismes de bienfaisance. Pour ajouter la mise en page prédéfinie à votre page, créez d’abord une nouvelle page et attribuez un titre à votre page. Ensuite, déployez le constructeur visuel. Sélectionnez l’option “Choisir une structure prédéfinie”. À partir de la fenêtre contextuelle de chargement depuis la bibliothèque, sélectionnez le Charity Layout Pack et cliquez pour utiliser la page Faire un don.

menu déroulant divi

Une fois la mise en page ajoutée à la page, vous êtes prêt à commencer!

Ajouter la section et la ligne pour votre menu contextuel

Pour commencer, nous devons ajouter une nouvelle section en haut de votre page. Ajoutez ensuite une ligne avec une disposition des trois quarts sur une colonne.

menu déroulant divi

Dans la colonne de gauche, ajoutez un nouveau module accordéon. Mettez à jour (ou créez) trois accordéons au total. Pour le contenu de chaque accordéon, ajoutez un titre (il servira d’élément de menu de catégorie pour votre sous-menu de navigation. Et dans la zone de contenu, créez quelques liens (chacun sur une ligne distincte) pour servir d’éléments de sous-menu.

menu déroulant divi

menu déroulant divi

Donnez à chacun de vos accordéons une marge personnalisée:

Marge personnalisée: 0px en haut, 0px en bas

Pour que l’accordéon corresponde à la structure de la présentation, copiez l’un des modules de bascule utilisés sur la page et collez-le à l’intérieur de la rangée avec votre accordéon (l’emplacement importe peu, nous le conservons ici temporairement). Nous allons maintenant utiliser la fonction d’extension de styles de Divi pour étendre les styles de la bascule à notre nouvel accordéon. Pour ce faire, ouvrez les paramètres de bascule, cliquez avec le bouton droit de la souris sur le titre de la catégorie d’icônes et sélectionnez «étendre les styles d’icônes» dans la liste.

menu déroulant divi

Puis sélectionnez pour étendre les styles d’icônes à tous les accordéons de la section.

menu déroulant divi

Ensuite, cliquez avec le bouton droit sur les styles de bascule et sélectionnez «étendre les styles de bascule» dans la liste.

menu déroulant divi

Choisissez ensuite d’étendre les styles de basculement à tous les modules accordéon de la section.

menu déroulant divi

Ensuite, faites un clic droit sur le texte du titre et sélectionnez «étendre les styles de texte du titre» dans la liste.

menu déroulant divi

Choisissez ensuite d’étendre les styles de texte de titre à tous les modules accordéon de la section.

menu déroulant divi

Maintenant que les styles sont étendus, vous pouvez supprimer le module à bascule.

Allez maintenant dans votre module d’accordéon et donnez-lui un fond blanc.

menu déroulant divi

Et terminez la conception de l’accordéon avec ce qui suit:

Marge personnalisée: 20px en haut, 20px en bas, en 
bas Largeur de la bordure: 1px (définissez toutes les autres largeurs de bordure sur 0px)

menu déroulant divi

Maintenant votre module d’accordéon est prêt!

Dans la colonne de droite, ajoutez un module de texte avec le mot «menu» comme contenu. Toute cette colonne avec le texte nous servira d’étiquette qui dépassera du côté de la page, de sorte que lorsque vous la survolerez, le reste de la ligne (avec l’accordéon) apparaîtra.

menu déroulant divi

Puis mettez à jour les paramètres de conception de texte comme suit:

Poids de la police du texte: 
Texte en gras Style de police: TT 
Texte du texte Couleur: #ffffff 
Taille du texte du texte: 16px 
Espacement des lettres du texte: 1px 
Orientation du texte: centre 
Désactiver sur: Téléphone, Tablette

Vous ne pourrez pas voir le texte à ce stade car nous n’avons pas ajouté le fond de couleur à notre ligne. Notez également que nous avons désactivé le module sur le téléphone et la tablette. En effet, nous allons désactiver la fonctionnalité de survol du menu sur le mobile, de sorte que le libellé du menu ne sera plus nécessaire.

Styliser la ligne et l’étendre en survol

Il est maintenant temps de commencer à dénommer notre rangée. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants:

Couleur de fond: # 26c699 
Largeur sur mesure: 320px 
Largeur de gouttière: 1 
Égalisation des hauteurs de colonne: OUI

Marge personnalisée (bureau): -241px à gauche 
Marge personnalisée (survolée): 0px à gauche 
Marge personnalisée (tablette): 10% à gauche, 10% à droite

La marge personnalisée est la clé de la fonctionnalité de l’effet de survol. En définissant la marge gauche sur -241px sur le bureau, la colonne de droite avec le menu texte est visible. En survol, la marge de gauche revient à 0px pour afficher la colonne de gauche de la ligne avec le menu accordéon.

Rembourrage sur mesure: 0px en haut, 0px en bas 
Coins arrondis: 10px en haut à droite, 10px en bas à droite

Au lieu d’utiliser un remplissage personnalisé pour centrer verticalement le texte du menu, nous pouvons utiliser quelques extraits de CSS personnalisés pour centrer verticalement le contenu de la colonne 2. Sous l’onglet Avancé, ajoutez le code CSS suivant sous l’élément principal Colonne 2:

display: flex;
flex-direction: column;
justify-content: center;

menu déroulant divi

Divi WordPress Theme

Véronique Carriou

Véronique Carriou

Webmaster

Je suis là pour vous aider ! Un site internet à taille humaine. Je serai heureuse de vous guider et de vous aider à paraître en ligne.

J'ai une prédilection pour les thèmes proposés par Elegant Themes, propres, claires, faciles à mettre à jour, l'équipe n'a qu'un objectif vous faciliter la vie !

DIVI 3.0

Une nouvelle version de DIVI Publié sur Elegantthemes le 12 Février par Nick Roach dans Changements dans les thèmes / Corrections de bugs Non seulement nous voulons Divi soit un thème qui permet à tout à chacun de construire quoi que ce qu’il veut, nous voulons...

DIVI 2.0

Nouveau thème DIVI 2.0 Voici le plus intelligent et le plus souple des thèmes de la collection d’elegantthemes. Divi 2.0 est un thème puissant qui permet de modifier en temps réel l’emplacement et la conception de votre site internet. Avec plus de 30 modules dont...

Domaine de Canon

Le site des cabanes de Canon a évolué en 3 sites internet : https://cabane-insolite.com https://ferme-pedagogique.fr/ https://produit-ferme-biologique.fr/ Le principe est de bien séparer les 3 thématiques du Domaine de Canon, tout en conservant un univers qui lui...

Domaine des Vaulx

Mise en ligne d'une toute nouvelle version du site internet du Domaine des Vaulx. Venez découvrir la Mayenne et en profiter pour dormir dans les arbres, se reposer en chambre d'hôtes ou se réunir en famille dans l'un des gîtes.   Intégration des widgets de...

Mobile friendly

Google met à votre disposition une page de test pour évaluer votre site internet et savoir si votre site est « mobile friendly » (adapté aux mobiles). Voici quelques critères : – Absence de logiciels peu utilisés sur les appareils mobiles, comme Flash. – Texte...

Comment créer un menu contextuant flottant avec DIVI

Cet article est la traduction de How to Create a Floating Pop-out Menu in Divi L'ajout d'un menu flottant à votre site Web permettra aux visiteurs d'accéder facilement à votre menu à tout moment de votre page. Ceci est idéal pour les menus de navigation...

14 conseils de rédaction SEO

14 Conseils de rédaction SEO pour remonter sur les moteurs de rechercheCette article est la traduction du 14 SEO Copywriting Tips to Impress Both Search Engines and Readers La rédaction SEO est une compétence essentielle pour tous ceux qui...

10 supplémentaires pour DIVI

Cet article est la traduction d'un article posté par l'Equipe d'Elegantthemes. J'ai pensé que cet article traitant de 10 plugin complémentaires pour Divi méritait d'être largement diffusé. La communauté Divi s'est améliorée et élargie de façons...

Child Theme Wizard

Permettre de modifier un thème sans perdre le thème original avec Child Theme Wizard L'Assistant Enfant Thème (Child Theme) vous permet de créer un nouveau thème enfant (Child Theme) sans avoir besoin d'outils supplémentaires, directement depuis l'interface...

Facebook Feed

Je suis là pour vous aider ! Un site internet à taille humaine. Je serai heureuse de vous guider et de vous aider à paraître en ligne. J'ai une prédilection pour les thèmes proposés par Elegant Themes, propres, claires, faciles à mettre à jour, l'équipe...