Créer un menu d’icônes circulaires et l’agrandir lorsque Divi est cliqué

Le menu des icônes circulaires est une solution élégante pour ajouter un menu simple au site Divi. Ce style de menu est intuitif et peut être utilisé comme un menu fixe pour les appareils mobiles. Aujourd’hui, nous allons vous montrer comment créer un menu d’icônes circulaires dans Divi pour mettre en évidence les puissantes capacités de conception de Divi Builder. Nous fournirons un clip JavaScript simple pour ouvrir et fermer le menu en cliquant. Voici une vue rapide du menu des icônes circulaires que nous allons créer. Téléchargement gratuit mise en page du menu des icônes circulaires pour en savoir plus sur la conception de ce tutoriel, 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 pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une mise en page dans une page, il suffit d’extraire le fichier zip et de faire glisser le fichier json dans Divi Builder.
On va voir le tutoriel, non? Pour commencer, vous devez faire ce qui suit: Si vous ne l’avez pas déjà fait, installez et activez le thème Divi installé (si vous n’utilisez pas le thème Divi, installez et activez le plug – in Divi Builder). Création
Nouvelle page dans WordPress et permet à Divi Builder d’éditer la page à l’avant (Visual Builder). Dans ce tutoriel, nous utiliserons l’icône intégrée Divi dans le module Blurb, de sorte qu’aucune ressource externe n’est nécessaire. Ensuite, vous aurez une toile vierge à concevoir dans Divi. Partie 1 lorsque Divi Builder est activé pour éditer la page frontale, ajoutez une ligne à la section normale par défaut. Puis ouvrez les paramètres de ligne et ajoutez le remplissage suivant: remplissage: TOP 300px Il s’agit simplement de fournir de l’espace pour les éléments du menu de boucle lorsque cliqué. Lorsque le remplissage de la ligne # 1 de l’icône de menu de création du module Blurb est terminé, ajoutez le module Blurb à la colonne. Ce sera le premier des 5 blurbs que nous ajouterons pour former un menu d’icônes circulaires. On l’appelle Blurb # 1. Le contenu de l’introduction est ensuite mis à jour en supprimant le titre et le corps du texte. Ensuite, ajoutez l’icône à Blurb comme indiqué ci – dessous.
Utilisation des icônes: Oui: voir capture d’écran Ensuite, nous mettrons à jour les paramètres de conception comme suit: couleur de l’icône: # 29a1f2 icône circulaire: s couleur circulaire: # 22222 afficher la bordure circulaire: s couleur de la bordure circulaire: # 29a1f2 utiliser la taille de la police de l’icône: s taille de la police de l’icône: 25px taille du texte du corps: 20px marge: 0px En plus du style d’icône circulaire, nous avons ajouté la taille du texte du corps. Il n’y a pas de corps de texte, mais cela sera utile plus tard lorsque nous utiliserons des unités de longueur em (liées à la taille du texte du corps) pour utiliser des convertisseurs de transformation pour nous éloigner des éléments \/ définitions du menu. Plus tard, plus tard.
Ensuite, supprimez l’animation image \/ icône par défaut. Images \/ icônes animées: pas d’animation, puis définir l’index Z
Pour le module no 1, placez – le au – dessus des autres modules qui finiront par se trouver derrière lui. Index Z: 1 Enfin, supprimez la marge inférieure par défaut sous l’icône en ajoutant le CSS personnalisé suivant à l’image Blurb. Marge inférieure: 0px; Blurb # 2 pour créer un second Blurb, il suffit de copier Blurb # 1. Ensuite, ouvrez les paramètres du nouveau bleu (définition 2), changez l’icône et définissez l’index Z à la valeur par défaut (0). Ensuite, nous utilisons l’échelle de transformation pour réduire les icônes comme suit: échelle de transformation: 70% créer Blurb # 3, # 4 et # 5 les trois blurbs suivants peuvent être créés en copiant Blurb # 2 et en mettant à jour les icônes de chaque Blurb. Par défaut, les menus flous sont empilés au même endroit absolu, tous les flous sont en position absolue, et les quatre éléments de menu flous sont empilés derrière l’icône du menu principal de Hambourg flou. Pour mettre notre Blurb dans la même position absolue, sélectionnez les cinq modules Blurb en utilisant la fonction multi – select (Ctrl \/ CMD + cliquez sur chacun). Ensuite, ouvrez l’un des paramètres flous sélectionnés et mettez à jour les 5 paramètres flous du projet à la fois. Ensuite, ajoutez le CSS personnalisé suivant à l’élément principal: position: absolute! Important
En bas: 20px;
Gauche: 20px;
Ceci place le flou dans le coin inférieur gauche de la ligne. Utilisez l’icône de menu de placement Transform translate une fois que toutes les ambiguïtés sont positionnées par défaut, nous pouvons commencer à placer les éléments de menu qui cliquent sur l’état (ils se terminent ici après avoir cliqué sur le bouton du menu principal). Pour ce faire, nous pouvons utiliser la propriété Transform translate dans Divi Builder. L’état de clic n’est pas disponible dans Divi Generator (par exemple, le curseur de la souris), car il s’agit d’une fonctionnalité GES
Tito da JavaScript. Ensuite, nous placerons les éléments du menu où nous voulons qu’ils cliquent maintenant. Ensuite, lorsque vous cliquez sur le bouton du menu principal, nous activons et désactivons l’emplacement en utilisant JavaScript.
Nous voulons garder Blurb # 1 parce qu’il s’agit d’un bouton de menu principal. Mais nous allons déplacer Blurb # 2, # 3, # 4 et # 5. Comme notre flou est maintenant empilé dans Visual Builder, nous déployons le mode wireframe pour mettre à jour chaque emplacement flou. Difficulté de position # 2 Ouvrez les paramètres de Blurb # 2 et mettez à jour ce qui suit: transformez l’axe Y du Mouvement: – 10em C’est le nouvel emplacement pour Blurb # 2. Difficulté de position # 3 Ouvrez les paramètres de Blurb # 3 et mettez à jour ce qui suit: Transform offset y: – 8.6emtransform offset X: 5em C’est le nouvel emplacement pour Blurb # 3. Indication de position # 4 pour activer les paramètres de Blurb # 4 et mettre à jour ce qui suit: Transform offset y: – 5emtransform offset X: 8.6em C’est le nouvel emplacement pour Blurb # 4. Difficulté de position # 5 Ouvrez les paramètres de Blurb # 5 et mettez à jour ce qui suit: Transform offset y: 0px Transform offset X: 10em C’est le nouvel emplacement pour Blurb # 5. Ajoutez des classes CSS personnalisées à blurbs et pour que JavaScript fonctionne correctement, ajoutez des classes CSS qui agissent comme des sélecteurs pour d’autres styles et fonctionnalités. Ajoutez la classe CSS à Blurb # 1 en mode wireframe view, ouvrez les paramètres Blurb # 1 et ajoutez les classes CSS suivantes:
Classe CSS: Transform _ Target L’ajout d’une classe CSS aux quatre autres Blurb partagera la même classe CSS, de sorte que nous pouvons sélectionner Blurb # 2, # 3, # 4 et # 5 en utilisant la fonction multi – sélection et mettre à jour les classes css pour les quatre Blurb comme suit: classe CSS: avec l’animation de transformation de bascule de transformation Notez qu’il y a deux classes CSS séparées par des espaces. Ajouter des CSS externes et Javascript en utilisant des modules de code une fois que nos classes CSS sont ajoutées aux blurbs, nous pouvons utiliser des modules de code pour ajouter du Code à la page. Pour ce faire, ajoutez un formulaire de code sous Blurb # 5. Ensuite, collez le code suivant dans le formulaire de code:
– Oui. Converti. Transform _ Target. Icône et pb
Transition: tous les 400 MS entrent et sortent lentement;
}
– Oui. Basculer l’animation de transformation
Transformation: aucune! Important
}
– Oui. Transform _ Target {
Curseur: pointeur;
}
– Oui. Active la cible. Et _ pb introduction. Icône et pb
Couleur de fond: transparente;
}
Il s’agit d’un CSS externe utilisé avec le Code jquery.
(fonction ($)
USD (file). Ready (Function () {
$(\
$(this). Toggleclass (« TOGGLE active target»);
$(\
});
});
}) (jquery);
C’est pourquoi javascript doit étendre l’élément de menu de l’icône circulaire lorsque vous cliquez sur un bouton de menu. Assurez – vous que les balises de style tournent autour de CSS et que les balises de script tournent autour de Javascript \/ jquery. Vérifiez les résultats finaux de cette fonctionnalité sur la page live. Ajouter une URL à un élément de menu parce qu’il s’agit d’un menu, les quatre éléments de menu auront besoin d’un lien \/ url. Pour ajouter l’URL nécessaire à chaque élément de menu, ouvrez les paramètres du module Blurb pour chaque élément de menu dans les 4 éléments de menu et ajoutez l’URL du lien au formulaire. Rendre le bouton Menu permanent (ou fixe) comme ce menu est petit et intuitif pour votre appareil mobile, vous voudrez peut – être le fixer de sorte qu’il so it fixé dans le coin inférieur gauche du navigateur. Pour ce faire, sélectionnez les cinq blurbs en utilisant la fonction multi – select et mettez à jour le CSS personnalisé dans l’élément principal en remplaçant la valeur de localisation \