Si vous voulez construire votre propre titre dans Divi, il y a plusieurs façons de le faire. En fait, vous pouvez obtenir un aperçu des types de titres et des tutoriels ici. Maintenant, dans le tutoriel d’aujourd’hui, nous allons ajouter une autre option à votre liste. Nous vous montrerons comment ajouter une icône hamburger au module menu de Divi. Par défaut, cette icône hamburger apparaît déjà sur un écran plus petit, mais dans ce tutoriel, nous veillerons à ce que l’icône hamburger apparaisse également sur votre bureau. Lorsque vous cliquez sur l’icône hamburger, tous les éléments du menu sont affichés horizontalement à côté de l’icône. Cela donne à votre titre une apparence et une sensation minimales, tout en augmentant l’interaction. Vous pouvez également télécharger gratuitement le fichier json du modèle!
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. Téléchargement gratuit d’un modèle de titre global pour obtenir un modèle de titre Global 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 et 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
Confirmez votre abonnement et Obtenez gratuitement le paquet de mise en page hebdomadaire Divi! Créer un nouveau modèle de titre Global aller à Divi Theme Builder commence avec Divi Theme Builder à l’arrière du site WordPress. À votre arrivée, cliquez sur Ajouter un titre global.
L’ajout d’un nouveau titre Global affiche un menu déroulant. Pour construire à partir de zéro, sélectionnez créer un en – tête global pour continuer. 2. Une fois que vous avez entré les paramètres de couleur de fond de la conception globale du titre dans l’éditeur de modèle, vous pouvez commencer à créer la conception du titre. Vous remarquerez qu’il y en a déjà une partie. Ouvrez les paramètres partiels et ajoutez une couleur de fond.
Couleur de fond: \ # f6f9fb L’espacement passe à l’onglet conception de la section et supprime tous les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Ajouter une nouvelle ligne de structure de colonne continuer en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionnez sans ajouter de module à nouveau, ouvrez les paramètres de ligne, allez à l’onglet conception, puis changez la largeur maximale dans les paramètres de redimensionnement. Largeur maximale: 1280 pixels L’espacement modifie le remplissage en haut et en bas dans le prochain réglage d’espacement.
Remplissage supérieur: 5px remplissage inférieur: 5px Ajoutez le module menu à la colonne select menu, puis ajoutez le module menu à la colonne row, puis sélectionnez le menu dynamique que vous avez sélectionné. Charger le logo charger le logo Supprime ensuite la couleur de fond, puis supprime la couleur de fond blanche par défaut pour le formulaire. Paramètres du texte du menu passer à l’onglet conception du module et modifier les paramètres du texte du menu en conséquence: police du menu: poids de la police du menu Poppins: demi – gras couleur du texte du menu: # 003e51 taille du texte
Complètement.
En haut: 26px;
Droite: 0;
Curseur: pointeur;
}
Divi menu. Et pb menu Menu > navigation {
Distance droite: 38px;
Visibilité: cachée;
Opacité: 0;
Conversion Webkit:. 1S entrée \ sortie facile;
Conversion MOZ:. 1S entrée \ sortie facile;
– O – transition:. 1S entrée \ sortie facile;
Conversion:. 1S entrée \ sortie facile;
Transformation: translatey (50%);
}
– Oui. Afficher les éléments du menu
Transparence: 1! Important
Visibilité: visible! Important
Transformation: translatey (0%)! Important
}
– Oui. Basculement des icônes: après {
Contenu: \
Taille de la police: 32px;
Famille de polices: etmodules! Important
Couleur: # 003e51;
Position: absolue;
En haut: 26px;
Droite: 0;
Curseur: pointeur;
}
Ajouter jquery ajouter jquery démarrer la ligne de code ensuite, nous obtiendrons le Code jquery. Ajouter la ligne de code jquery suivante entre les balises de script: jquery (fonction ($) {
USD (file). Ready (Function () {
});
}); Créer des variables créer des variables plus tard. Icône de basculement des variables = $(‘ ‘);
Var desktopmenu = $(\
Bascule l’icône. Insérer après (menu Bureau); Ajouter une fonction de clic nous avons également ajouté une fonction de clic. Bascule l’icône. Cliquez sur (fonction () {
Menu Bureau. Toggleclass (« Reveal menu items»);
$(this). Toggleclass (\
}); 4. Enregistrer les modifications apportées au générateur de thème Divi est maintenant prêt. La seule chose à faire est d’enregistrer toutes les modifications apportées au générateur de thème Divi et de voir les résultats! Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Dans cet article, nous vous montrons comment utiliser de façon créative les titres Divi dans le générateur de sujets Divi. Plus précisément, nous vous avons montré comment ajouter une icône de menu hamburger à votre bureau. Par défaut, l’icône hamburger permet à P
Découvrez l’art sur les tablettes et les appareils mobiles, mais nous l’étendons également au Bureau. Lorsque vous cliquez sur l’icône on \ off, les éléments du menu s’affichent horizontalement, ce qui vous donne une apparence et une sensation minimales. Vous pouvez également télécharger gratuitement le fichier json du modèle! Si vous avez des questions ou des suggestions, assurez – vous de laisser 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.