Comment créer une barre de menu déroulante pour un site Web en utilisant Divi

Chaque semaine, nous vous proposons un nouveau paquet gratuit de mise en page Divi que vous pouvez utiliser pour votre prochain projet. Pour l’un de ces paquets de mise en page, nous partageons également un cas d’utilisation qui vous aidera à mettre votre site au niveau suivant. Cette semaine, dans le cadre de notre plan de conception Divi en cours, nous vous montrerons comment créer une barre de menu déroulante pour votre site Web à l’aide de la trousse de mise en page du courtier en hypothèques. C’est une excellente façon d’ajouter des interactions à votre site. Vous aurez la même expérience utilisateur sur toutes les tailles d’écran, et vous pouvez utiliser cette technologie pour n’importe quel type de site Web que vous construisez.
Allons – y! 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 Désactiver la navigation fixe dans les options de thème Divi aller aux options de thème Divi commençons! La première chose que vous devez faire est de passer aux options de thème Divi sur le site WordPress. Désactiver la navigation fixe ici, nous désactiverons la barre de navigation fixe. Plus loin dans ce tutoriel, nous devons désactiver cette option pour supprimer complètement la barre de menu principale de la page. Barre de navigation fixe: Désactiver Masquer la barre de menu principale sur la page activer Visual Builder sur la page d’atterrissage du paquet de mise en page du courtier Mortgage aller à la page créée à l’aide de la page d’atterrissage du paquet de mise en page du courtier Mortgage et activer Visual Builder pour continuer. Ouvrez la configuration de la page nous cacherons la barre de menu principale de la page en ajoutant un code CSS. Pour ajouter ce code, ouvrez la configuration de la page. Ajoutez un code CSS personnalisé pour masquer la barre de menu principale, puis allez à l’onglet avancé et saisissez la ligne de code CSS suivante dans la zone CSS personnalisée:
# main –
Faites défiler la barre de menu et la page elle – même, et nous ajouterons une ombre de boîte.
Intensité du flou de l’ombre de la boîte: 80 Px couleur de l’ombre: rgba (0,0,0,0,55) Il est temps de commencer à ajouter tous les modules que nous voulons afficher dans la barre de menu déroulante, en commençant par le module image. Téléchargez le logo à l’aide d’un fichier image 226px large et 100px haut. Aligner puis aller à l’onglet conception du module image pour changer l’alignement de l’image. Alignement de l’image: Centre Redimensionner modifie les paramètres de taille de l’image suivante.
Largeur maximale: 75% (bureau), 100% (tablette et téléphone) Espacez et ajoutez un remplissage personnalisé en haut et en bas de l’image. Remplissage en haut: 15px (tablette), 25px (téléphone) remplissage en bas: 15 pixels (tablette), 25 pixels (téléphone) Ajouter un module bouton Ajouter une copie le deuxième module dont nous avons besoin est un module bouton. Ajoutez une copie de votre choix. Aligner puis aller à l’onglet conception et modifier l’alignement des boutons. Alignement des boutons: Centre Les paramètres du bouton changent l’apparence du bouton suivant.
Utiliser un style personnalisé pour les boutons: Oui taille du texte du bouton: 0,8vw (bureau), 1,4vw (tablette), 2,1vw (téléphone) couleur du texte du bouton: # FFFFFF couleur de fond du bouton: # 40eccc largeur de la bordure du bouton: 0px rayon de la bordure du bouton: 50 Px espacement des Lettres du bouton: 2px caractères du bouton: poids de la police latérale: style de police lourd: majuscules L’espacement e utilise des marges personnalisées et des valeurs de remplissage pour créer la forme souhaitée. Marge supérieure: 15px marge inférieure: 15 Px marge supérieure: 15px marge inférieure: 15px marge gauche: 40px marge droite: 40px Ajouter un module de texte 1 Ajouter une entrée
Il a une classe CSS en ligne. Supprimer les barres de défilement d’une page vous pouvez supprimer les barres de défilement d’une page en ouvrant la configuration de la page et en ajoutant la ligne de code CSS suivante à la boîte CSS personnalisée:. Menu coulissant: – barre de défilement webkit {
Affichage: aucun;
} Si vous ne voulez pas répéter les mêmes étapes pour masquer les barres de défilement individuellement sur chaque page, vous pouvez également aller à l’option Divi Theme et appliquer le code CSS à l’ensemble du site en faisant défiler l’onglet général et en ajoutant la ligne suivante de code CSS à la boîte CSS personnalisée:. Menu coulissant: – barre de défilement webkit {display: none;} Une fois qu’une section a été sauvegardée en tant qu’élément global, la barre de menu de défilement fonctionne correctement, vous pouvez l’enregistrer en tant qu’élément global dans la Bibliothèque Divi et l’utiliser sur d’autres pages! 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 une barre de menu déroulante pour tout site Web créé avec Divi. C’est une excellente technique pour ajouter une autre dimension à votre site. Ce tutoriel fait partie de notre plan de conception Divi en cours et chaque semaine, nous essayons d’ajouter plus de contenu à votre boîte à outils de conception. Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires ci – dessous!