De quoi aurez-vous besoin

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

Ajouter une mise en page

Pour ce didacticiel, j’utilise la mise en page Don de bienfaisance du pack de présentation de bienfaisance. Pour ajouter la mise en page prédéfinie à votre page, créez d’abord une nouvelle page et donnez à votre page un titre. Ensuite, déployez le générateur visuel. Sélectionnez l’option «Choisir une structure prédéfinie». Dans la fenêtre contextuelle Téléchargement de la bibliothèque, sélectionnez le pack de mise en page de charité et cliquez pour utiliser la page Faire un don.

Partager le menu déroulant

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

Ajoutez une section et une ligne pour votre menu contextuel

Pour commencer, nous devons ajouter une nouvelle section en haut de votre page. Ajoutez ensuite une ligne avec une mise en page trois-quarts dans une colonne.

Partager le menu déroulant

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

Partager le menu déroulant

Partager le menu déroulant

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

Bordure personnalisée: 0 pixels en haut, 0 pixels en bas

Pour faire correspondre l’accordéon à la disposition de la mise en page, copiez l’un des modules à bascule utilisés sur la page et collez-le dans la ligne avec votre accordéon (la position n’a pas d’importance, nous le garderons ici temporairement). Nous allons maintenant utiliser la fonction d’extension de style 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 sur le titre de la catégorie de symboles et sélectionnez «Développer les styles de symboles» dans la liste.

Partager le menu déroulant

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

Partager le menu déroulant

Cliquez ensuite avec le bouton droit sur les styles de bascule et sélectionnez « Développer les styles de bascule » dans la liste.

Partager le menu déroulant

Développez ensuite pour étendre les styles de bascule à tous les modules d’accordéon de la section.

Partager le menu déroulant

Cliquez ensuite avec le bouton droit sur le texte du titre et sélectionnez «Développer les styles de texte du titre» dans la liste.

Partager le menu déroulant

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

Partager le menu déroulant

Une fois les styles développés, vous pouvez supprimer le module bascule.

Maintenant, allez dans votre module accordéon et donnez-lui un fond blanc.

Partager le menu déroulant

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

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

Partager le menu déroulant

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. Cette colonne entière de texte agit comme une étiquette dépassant du côté de la page de sorte que lorsque vous déplacez le pointeur de la souris, le reste de la ligne (avec l’accordéon) apparaît.

Partager le menu déroulant

Mettez ensuite à jour les paramètres de conception du texte comme suit:

Taille de la police du texte:
Texte dans gazon Police: TT
Couleur du texte du texte: #ffffff
Texte Taille du texte: 16px
Espacement des lettres de texte: 1px
Alignement du texte: centre
Désactiver sur: téléphone, tablette

Vous ne pouvez pas voir le texte à ce stade car nous n’avons pas ajouté de couleur d’arrière-plan à la ligne. Notez également que nous avons désactivé le module sur le téléphone et la tablette. En fait, nous allons désactiver la fonction de survol du menu sur le téléphone afin que l’étiquette de menu ne soit plus nécessaire.

Façonnez la ligne et prolongez-la pendant que vous survolez

Il est maintenant temps de styliser notre gamme. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants:

Couleur de fond: # 26c699
Largeur personnalisée: 320px
Largeur de gouttière: 1
Compensation des hauteurs de colonne: OUI

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

La bordure personnalisée est la clé de la fonctionnalité de l’effet de survol. Si vous définissez la marge gauche sur le bureau à -241 pixels, la colonne de droite avec le menu texte apparaîtra. Lors du survol, la marge de gauche revient à 0px pour afficher la colonne de gauche de la ligne avec le menu accordéon.

Rembourrage personnalisé: 0px vers le haut, 0px vers le bas
Coins arrondis: 10 px en haut à droite, 10 px en bas à droite

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

justify-content: center;

Partager le menu déroulant



Source link

Recent Posts