Créer un menu de défilement réactif en utilisant Divi & # 39; Générateur de thème s

Lorsque vous créez un site Web pour un client, vous vous retrouvez à penser au type de titre à construire. La barre de menu horizontale en haut est la plus utilisée sur le Web, mais il y a d’autres options, comme les menus déroulants. Faites défiler le menu vers le bas pour vous aider à limiter l’espace occupé par les titres globaux. Lorsque les visiteurs cliquent sur l’icône hamburger en haut à droite, vous pouvez faire défiler un menu au lieu d’afficher tous les éléments du menu immédiatement. Utilisez les menus déroulants pour vous aider à ajouter plus d’interactions à votre site Web.
Avec le tutoriel Divi d’aujourd’hui, nous vous montrerons comment créer un générateur de thème en utilisant le générateur de thème Divi, les éléments Divi intégrés et d’autres codes. La conception de ce menu de défilement correspond parfaitement au paquet de mise en page de l’instructeur de yoga, mais vous êtes libre de le modifier pour correspondre à n’importe quel site Web que vous créez. Vous pouvez également télécharger gratuitement le fichier json! On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit menu de défilement réactif modèle de titre global pour obtenir un modèle de titre global de menu de défilement gratuit, vous devez d’abord le télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous.
Vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! 1. Allez à Divi Theme Builder et commencez à créer des titres globaux allez à Divi Theme Builder commencez par Divi Theme Builder à l’arrière du site WordPress, puis cliquez sur ajouter des titres globaux. Commencez à créer des en – têtes globaux et continuez en sélectionnant créer des en – têtes globaux. 2. Créez un titre de section de réglage de couleur de fond une fois dans l’éditeur de modèle, vous remarquerez une section. Ouvrez la section et laissez la couleur de fond transparente. Couleur de fond: rgba (255255255,0) L’espacement passe à l’onglet conception et supprime toutes les écoutilles par défaut en haut et en bas. Remplissage supérieur: 0px remplissage inférieur: 0px Ensuite, Nous corrigerons cette section en allant à l’onglet avancé et en changeant les paramètres de localisation.
Position: position fixe: Centre mort supérieur Après avoir complété la configuration de la section en ajoutant la structure de ligne 1, ajoutez une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, ouvrir les paramètres de ligne et modifier les paramètres de taille comme suit: largeur: 97% largeur maximale: 100% L’espacement change le prochain réglage d’espacement. Remplissage supérieur: 1% remplissage inférieur: 0px Ensuite, allez à l’onglet avancé et ajoutez deux lignes de code CSS à l’élément principal de la ligne. Cela nous aidera à aligner verticalement le contenu des colonnes dans la ligne.
Affichage: Flex;
Aligner les éléments: Centre; Ajouter un module image à C
Colonne 1 Il est temps d’ajouter un module, en commençant par le module image dans la colonne 1. Téléchargez votre logo. Ajouter un formulaire de texte à la colonne 3 ajouter 3 travées à la zone de contenu, puis passer à la colonne 3 et ajouter un formulaire de texte. Nous utiliserons l’onglet texte du formulaire texte pour ajouter trois extensions HTML et leur assigner des classes personnalisées. Plus loin dans ce tutoriel, nous utiliserons ces intervalles pour créer des icônes de Hambourg interactives.

Couleur de fond changez ensuite la couleur de fond du module. Couleur de fond: rgba (0,0,0,0,04) Les paramètres de texte vont ensuite dans l’onglet conception et suppriment la hauteur des lignes de texte. Cela nous aidera à prendre le contrôle total des travées ajoutées. Hauteur de la ligne de texte: 0em Ensuite, nous allons changer les paramètres de taille du module. Largeur: alignement du module 120 pixels: à droite Espacement, nous complétons le réglage du module en convertissant le module en carré en utilisant la valeur de remplissage personnalisée dans le réglage de l’espacement.
Remplissage supérieur: 40 Px remplissage inférieur: 60 Px remplissage gauche: 40 Px remplissage droit: 40 px Ajoutez la structure de colonne de la ligne # 2 à la ligne suivante! Nous utiliserons cette ligne pour concevoir l’ensemble du menu de défilement. Utilisez la structure de colonne suivante: Couleur de fond n’ajoutez aucun module, ouvrez les paramètres de ligne et changez la couleur de fond comme suit: couleur de fond: # e7e0e2 Image de fond nous avons également utilisé un modèle d’image de fond. Vous pouvez trouver les images que nous utilisons dans le dossier de téléchargement que vous pouvez télécharger au début de ce tutoriel, mais n’hésitez pas à utiliser n’importe quel autre motif de fond de votre choix.
Taille de l’image de fond: taille réelle emplacement de l’image de fond: dupliquer l’image au Centre
Ou cette ligne nécessite un module bouton – poussoir. Ajoutez une copie de votre choix. Ajouter un lien ajoute également un lien. URL du lien du bouton: L’alignement passe à l’onglet conception et modifie l’alignement des boutons. Alignement des boutons: Centre Continuer à styliser les modules de boutons comme suit: chaque bouton utilise un style personnalisé: Oui taille du texte du bouton: 0,7vw (bureau), 1,5vw (tablette), 2,5vw (téléphone) couleur du texte du bouton: # 000000 couleur de fond du bouton: rgba (0,0,0,0) couleur de la bordure du bouton: # 24394a rayon de la bordure du bouton: 0px espacement des lettres du bouton: 4px Police du bouton: ouvrir la police du bouton San poids: gras style de police du bouton: majuscules L’espacement e complète la configuration du module en ajoutant des valeurs d’espacement personnalisées à différentes tailles d’écran. Marge supérieure: 5vw marge supérieure: 1vw (bureau), 2vw (tablette), 3vw (téléphone mobile) marge inférieure: 1vw (bureau), 2vw (tablette), 3vw (téléphone mobile) Marge gauche: 1,8vw (bureau), 3vw (tablette), 4vw (téléphone mobile) Marge droite: 1,8vw (bureau), 3vw (tablette), 4vw (téléphone mobile) 3. Ajouter une fonction de glissement pour ajouter l’ID CSS à l’icône de menu formulaire de texte maintenant tous les éléments sont prêts, il est temps de créer un effet de menu de défilement réactif! Tout d’abord, ouvrez le formulaire de texte (y compris les travées) dans la troisième colonne de la première ligne et utilisez l’ID CSS personnalisé dans l’onglet avancé. Nous utiliserons cet ID css pour créer une fonction de clic dans le Code. CSS id: slide on Ajoutez la classe CSS à la ligne 2, puis ouvrez la deuxième ligne, allez à l’onglet avancé et ajoutez une classe CSS personnalisée. Une fois cliqué, nous permettrons à la ligne de défiler vers l’intérieur. Classe CSS: glisser dans le conteneur de menu Changez l’emplacement de la ligne 2 et nous la repositionnerons également. Note offset horizontal C
– ouvert). Cliquez sur (fonction () {
$(this). Toggleclass (\
$(\
});
}); 4. Après avoir sauvegardé les modifications apportées au générateur de thème et vu les résultats sur le site Web, la seule chose à faire est d’enregistrer toutes les modifications et d’afficher les résultats sur le site Web! Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans cet article, nous vous montrons comment créer un menu de défilement réactif pour votre prochain projet Divi en utilisant le générateur de thème Divi. Nous combinons les meilleures fonctionnalités et options intégrées de Divi avec un code de fonction de clic personnalisé. Cela vous permet de vous concentrer sur la conception de menus déroulants et de faire en sorte que le Code assume la partie fonctionnelle du titre Global! Vous pouvez également télécharger gratuitement les fichiers json. Si vous avez des questions ou des suggestions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.