Want to make creations as awesome as this one?

Eléments structurels Chapitre 5

Transcript

ÉLÉMENTS STRUCTURELS

CHAPITRE 5 : LE MODULE DE MENU DIVI FULLWIDTH

MODULE 4

LE MODULE DE MENU DIVI FULLWIDTH

Thèmes de la Division Construction - http://construction.aspengrovestudios.space/

Doté d'une palette de couleurs vives, le thème pour enfant Construction Divi utilise des accents jaunes éclatants pour attirer les visiteurs du site et mettre en valeur le contenu.

Associé à une utilisation intelligente de l'espace blanc, d'élégantes combinaisons de polices et de subtiles animations aérodynamiques à travers la structure, cela crée un look élégant et professionnel avec un attrait très énergique.

Développé dans le but d'aider les professionnels du service à attirer et à convertir de nouveaux clients, Construction comprend de vastes espaces pour afficher les coordonnées des personnes-ressources, ainsi que des modules d'appel à l'action qui offrent aux téléspectateurs la possibilité d'entrer en contact ou de demander un devis au fournisseur de services.


Comment ajouter, configurer et personnaliser le module de menu Divi pleine largeur

Le module Fullwidth Menu permet de placer un menu de navigation n'importe où sur la page.

Cela peut être utilisé pour ajouter un menu secondaire en bas de la page, ou il peut être utilisé en conjonction avec la fonction Page blanche pour déplacer votre navigation principale vers le bas de la page.

Par exemple, vous pouvez déplacer votre menu en dessous de votre première section pour accueillir les personnes avec une grande image splash. Ceci permet essentiellement à votre navigation d'en-tête de se déplacer autour de la page du constructeur!


Comment ajouter un module de menu pleine largeur à votre page

Avant de pouvoir ajouter un module de menu complet à votre page, vous devez d'abord sauter dans le Divi Builder.

Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous construisez une nouvelle page. Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder.


Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual. Vous pouvez également cliquer sur le bouton Activer Visual Builder lorsque vous naviguez sur votre site

Web si vous êtes connecté à votre tableau de bord WordPress.



Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page. Les nouveaux modules pleine largeur ne peuvent être ajoutés qu' à l'intérieur des sections pleine largeur.


Si vous commencez une nouvelle page, n'oubliez pas d'ajouter d'abord une section pleine largeur à votre page. Nous avons d'excellents tutoriels sur comment utiliser les éléments de section de Divi.



Localisez le module de menu complet dans la liste des modules et cliquez dessus pour l'ajouter à votre page. La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot "menu pleine largeur", puis cliquer sur Entrée pour trouver et ajouter automatiquement le module de menu pleine largeur!

Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Exemple d'utilisation : Ajout d'un menu pleine largeur sous l'en-tête de page

Pour cet exemple, je vais vous montrer comment ajouter un menu pleine largeur sous la section d'en-tête d'une page.

En voici un exemple:

Puisque ce nouveau menu pleine largeur remplacera le menu principal de navigation par défaut, il est nécessaire de sélectionner le modèle de page vierge pour que le menu de navigation par défaut n'apparaisse pas en haut de la page en plus du menu pleine largeur que je vais ajouter.

Pour modifier votre modèle de page, allez dans l'éditeur de page et sélectionnez le modèle "page blanche" dans la zone Attributs de la barre latérale de droite.


Puisque ce module affichera un menu qui existe déjà, il est important que vous ayez déjà créé le menu avant de l'ajouter au module de menu Pleine Largeur.




Menu pleine largeur Options de contenu

Dans l'onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes.

Tout ce qui contrôle ce qui apparaît dans votre module sera toujours trouvé dans cet onglet.

Menu pleine largeur Options de contenu

Sélectionnez un menu à utiliser dans le module.

Menu

Couleur de fond

Menu déroulant

Couleur d'arrière-plan

Couleur d'arrière-plan du menu mobile

Étiquette Admin

Par défaut, le module de menu a une couleur de fond blanche.

Par défaut, les menus déroulants de votre module de menu héritent de la couleur d'arrière-plan définie dans le paramètre précédent.

Sur mobile, le module de menu se transforme en un design différent et plus mobile.

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

Vous pouvez créer de nouveaux menus en utilisant la page Apparences > Menus de votre WordPress Dashboard. Chaque fois que vous créez un nouveau menu, le menu sera sélectionnable dans ce menu déroulant.

Si vous souhaitez utiliser une couleur différente pour l'arrière-plan de votre menu, vous pouvez le sélectionner ici à l'aide du sélecteur de couleurs.

Si vous souhaitez que vos menus déroulants aient leur propre couleur unique, vous pouvez choisir une couleur personnalisée à l'aide de ce paramètre.

Vous pouvez contrôler la couleur d'arrière-plan du menu déroulant mobile indépendamment de son équivalent sur le bureau.

Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.

Menu pleine largeur Options de contenu

Dans l'onglet Design, vous trouverez toutes les options de style du module, telles que les polices de caractères, les couleurs, le dimensionnement et l'espacement.

Options de conception des menus pleine largeur

Sous-menus Ouvrir

Faire des liens

Menu Liens Pleine largeur

Menu déroulant Ligne de menu Couleur

Couleur du texte

Par défaut, tous les sous-menus s'ouvrent dans un menu déroulant sous la barre de menu principale.

Par défaut, les liens de niveau supérieur avec le module de menu sont placés à l'intérieur des limites de la largeur de votre contenu par défaut.

Dans les menus déroulants, les liens sont séparés par une ligne de 1 pixel.

Ici vous pouvez choisir la valeur de votre texte. Si vous travaillez sur un fond foncé, votre texte doit être clair.

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre module. Chaque module Divi dis- pose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.


Si vous placez votre menu vers le bas de la page, et que votre menu contient de longs menus déroulants, vous pouvez souhaiter que ces menus s'ouvrent au-dessus du module de menu afin que le menu ne s'étende pas au-delà de la fenêtre de visualisation du navigateur.

Si vous souhaitez supprimer cette restriction et demander à vos liens d'étendre toute la largeur de la page, en partant de l'extrême gauche de l'écran, vous pouvez activer cette option.

Si vous souhaitez personnaliser la couleur de cette ligne, vous pouvez choisir une couleur personnalisée à l'aide du sélecteur de couleurs dans ce paramètre.

Si vous travaillez sur un fond clair, votre texte doit être sombre.

Menu pleine largeur Options de contenu

Ceci contrôle la façon dont votre texte est aligné dans le module. Vous pouvez choisir en- tre Gauche, Droite et Centré.

Orientation du texte

Couleur du lien actif

Menu déroulant Couleur du texte

Couleur du texte du menu mobile

Police de menu

Les couleurs des liens actifs sont mises en sur-brillance dans le module de menu pour indiquer à l'utilisateur leur emplacement actuel.

Par défaut, le texte dans les menus déroulants du module hérite de la couleur du texte du menu principal.

Par défaut, le texte dans les menus déroulants du module hérite de la couleur du texte du menu principal.

Vous pouvez changer la police de votre police de menu en sélectionnant la police désirée dans le menu déroulant.

Vous pouvez modifier la couleur de sur- brillance utilisée pour ces liens actifs à l'aide de ce paramètre.

Toutefois, vous pouvez changer cette couleur si vous avez défini une couleur d'arrière-plan personnalisée dans le menu déroulant.

Toutefois, vous pouvez changer cette couleur si vous avez défini une couleur d'arrière-plan personnalisée pour le menu mobile.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.


Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Menu pleine largeur Options de contenu

Ici, vous pouvez régler la taille de la police de votre menu.

Taille de police du menu

Menu Texte Couleur

Espacement des lettres du menu

Hauteur de la ligne de menu

Menu Pleine Largeur Options Avancées

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Dans l'onglet Avancé, vous trouverez des options que les concepteurs Web plus expérimentés peuvent trouver utiles, comme les attributs CSS et HTML personnalisés.

Si vous souhaitez changer la couleur du texte de votre numéro, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Si vous souhaitez augmenter l'espace entre chaque lettre du texte de votre numéro, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie si- tué à droite du curseur.

Les champs de saisie prennent en charge différentes unités de me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Ici, vous pouvez appliquer des CSS personnalisés à n'importe lequel des nombreux éléments du module.


Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style.css de votre thème enfant.


Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Menu pleine largeur Options de contenu

Entrez un ID CSS optionnel à utiliser pour ce module.

CSS ID

Classe CSS

CSS personnalisé

Animation du menu déroulant

Visibilité

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être uti- lisée pour créer un style CSS personnalisé.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Vous pouvez choisir entre différentes animations à utiliser lorsqu'un menu déroulant est activé.

Cette option vous permet de contrôler sur quels périphériques votre module apparaît.

Vous pouvez ajouter plusieurs classes, séparées par un espace.

Ces classes peuvent être utilisées dans votre Thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou votre site Web en utilisant les Options du Thème Divi ou les Paramètres de page du Générateur de Divi.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.


Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu' à entrer des règles CSS séparées par des point-virgules.

Par défaut, l'animation est définie sur fondu enchaîné, mais vous pouvez la modifier comme suit: agrandir, glisser ou retourner.

Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.

C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

MERCI