Comment créer un menu circulaire fragmenté en utilisant Divi blurbs

Il est toujours intéressant d’innover avec les options de conversion de Divi. Ils vous permettent de créer des dessins fantastiques \ Téléchargez gratuitement la mise en page du menu circulaire fragmenté Divi pour en savoir plus sur la conception du menu pour ce tutoriel, vous devez d’abord 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? Ce que vous devez commencer à faire pour commencer, vous devez faire ce qui suit: sinon
N vous possédez, installez et activez toujours le thème Divi installé (si vous n’utilisez pas le thème Divi, installez et activez le plug – in Divi Builder). Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Ensuite, vous aurez une toile vierge à concevoir dans Divi.
Utilisez Divi blurbs pour créer un menu circulaire fragmenté cette conception utilisera une combinaison de paramètres Divi intégrés et de code externe. Nous utiliserons Visual Builder pour créer la plupart des conceptions de menu. Ensuite, nous implémentons la représentation wireframe pour obtenir des paramètres difficiles à atteindre une fois que le projet est complètement placé. Nous allons d’abord créer un menu circulaire composé de plusieurs flous dans une ligne. Ensuite, nous concevons une texture supplémentaire dans une section séparée comme un bouton de menu superposé.
Créez une ligne pour l’élément de menu dans la zone normale par défaut et ajoutez la ligne à la colonne. Dessinez les lignes avant d’ajouter le formulaire, et nous les stylisons pour obtenir la forme circulaire et la couleur de fond. Ouvrir les paramètres de ligne et mettre à jour ce qui suit: couleur de fond: # 8857f2utiliser la largeur personnalisée de la gouttière: s largeur de la gouttière: 1 largeur: 30emheight: 30emfill: 0px top, 0px bottom Puis ajoutez le filet et l’ombre de la boîte. Filets: 50% ombres de boîte: voir capture d’écran Nous reviendrons pour ajouter plus de personnalisation à la ligne, mais maintenant nous pouvons commencer à ajouter notre profil.
Créez un flou pour le menu ajouter un nouveau flou aux lignes des colonnes dans une ligne circulaire. Introduction au style # 1 mettre à jour le contenu de la première description pour inclure le titre et l’icône. Titre: lien utiliser l’icône: s icône: voir capture d’écran ensuite, mettre à jour les paramètres de conception comme suit: couleur de fond:
G);
Position: absolue;
Hauteur: 27 em;
Largeur: 27 em;
En bas: – 13,5em;
Droite: – 13,5em;
Ensuite, réduisez la marge entre l’icône titre et le texte en ajoutant les CSS suivants à l’image Blurb:
Blurb CSS image Margin bottom: 15px; Maintenant, puisque l’espace de contenu de Blurb est au – delà de Blurb (même si vous ne pouvez pas le voir), nous devons cacher le débordement comme suit: débordement horizontal: débordement vertical caché: cacher si nous ne l’ajoutons pas, nous aurons de l’espace pour accueillir les canaux de souris indésirables. Créer le reste du flou pour créer le reste du flou, distribuez la représentation d’affichage du fil métallique et copiez le flou existant 5 fois pour un total de 6 flous identiques. Faites tourner Blurb # 2, puis ouvrez les paramètres de Blurb # 2 et faites tourner le formulaire comme suit:
Changement de volant de l’axe Z: 30 degrés Ceci fait tourner Blurb 2 dans le sens des aiguilles d’une montre à partir du Centre du cercle. Ensuite, nous pouvons continuer à tourner les taches restantes par incréments de 30 degrés pour créer un segment semi – circulaire. Tourner Blurb # 3 pour activer les paramètres de Blurb # 3 et mettre à jour ce qui suit: transformer les roues de l’axe Z: 60 degrés Tourner Blurb # 4 pour activer les paramètres de Blurb # 4 et mettre à jour ce qui suit: transformer les roues de l’axe Z: 90 degrés Tourner Blurb # 5 pour activer les paramètres de Blurb # 5 et mettre à jour ce qui suit: transformer les roues de l’axe Z: 120 degrés Tourner Blurb # 6 pour activer les paramètres de Blurb # 6 et mettre à jour ce qui suit: transformer les roues de l’axe Z: 150 degrés C’est le résultat jusqu’à présent. Créer un bouton de menu pour créer un bouton de menu, nous réduirons la taille de la section entière, puis nous utiliserons l’icône Blurb pour concevoir le bouton. Pour ce faire, ajoutez d’abord une nouvelle section normale sous la section courante. Puis ajoutez une ligne à la section. Créez l’icône Blurb du bouton et ajoutez le module Blurb à la ligne. Supprimez le titre et le contenu du corps par défaut et utilisez les icônes comme suit:
CSS class point. Classe CSS: avec conversion Enfin, nous devons utiliser l’échelle de transformation pour redimensionner (ou réduire) complètement le menu circulaire. Cela nous permettra d’activer et de désactiver les effets de jquery, qui élargira et compressera les menus en cliquant. Mise à jour comme suit: échelle de transformation: 1% Avec le menu de boucle de segment et les boutons de menu, tout ce que vous avez à faire est d’ajouter des CSS personnalisés et jquery pour compléter la fonctionnalité des boutons. Ajouter un CSS personnalisé externe à la configuration de la page ouvrez la configuration de la page à partir du menu en bas de Visual Builder et ajoutez le CSS personnalisé suivant dans l’onglet avancé:. Converti. Transform _ Target. Et l’icône pb. Basculer l’animation de transformation
Transition: tous les 400 MS entrent et sortent lentement;
}
– Oui. Converti. Basculer l’animation de transformation
Taille de la police: 14px;
}
– 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
Transformation: rotatez (45 degrés);
}
Tous les médias et (largeur maximale: 980px) {
– Oui. Converti
– image du masque webkit: – gradient radial webkit (blanc, noir);
}
– Oui. Converti. Basculer l’animation de transformation
Taille de la police: 10px;
}
} Utilisez le module de code pour ajouter jquery, puis déployez le mode d’affichage wireframe et ajoutez le module de code sous le bouton blurbmenu. Ajoutez ensuite le code suivant au formulaire. (fonction ($)
USD (file). Ready (Function () {
$(\
$(this). Toggleclass (« TOGGLE active target»);
$(\
});
});
}) (jquery); Maintenant, nous pouvons voir le résultat final sur une page en direct. Ce menu fonctionnera avec votre page actuelle ou toute mise en page par défaut que vous pouvez ajouter en cliquant sur l’icône plus dans le menu