Comment créer un menu d'icônes circulaires qui se développe en cliquant dans Divi

Un menu d'icônes circulaires est une solution élégante pour ajouter un menu simple à votre site Divi. Ce style de menu est intuitif et fonctionne très bien comme menu fixe pour vos appareils mobiles. Aujourd'hui, nous allons montrer comment créer un menu d'icônes circulaires dans Divi d'une manière qui met vraiment en évidence les puissantes capacités de conception du Divi Builder. Et nous fournirons un extrait JavaScript simple pour ouvrir et fermer le menu en un clic.

Commençons

Aperçu

Voici un aperçu rapide du menu d'icônes circulaires que nous allons créer.

Téléchargez GRATUITEMENT la disposition du menu Circle Icon

Pour mettre la main sur le design de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le Divi Theme installé (ou le Divi Builder Plugin si vous n'utilisez pas le Divi Theme).
2. Créez une nouvelle page dans WordPress et activez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).

Pour ce tutoriel, nous utiliserons les icônes intégrées de Divi du module de présentation, donc pas besoin de ressources externes.

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Partie 1

Une fois que Divi Builder est activé pour modifier la page sur le front-end, ajoutez une ligne d'une colonne à la section régulière par défaut.

Ensuite, ouvrez les paramètres de ligne et ajoutez le remplissage suivant :

Rembourrage : 300px haut

Il s'agit simplement de fournir de l'espace pour que les éléments de menu circulaires apparaissent au clic.

Création des icônes de menu avec les modules Blurb

Présentation #1

Une fois le remplissage de ligne en place, ajoutez un module de présentation à la colonne. Ce sera le premier des 5 textes de présentation que nous ajouterons pour composer notre menu d'icônes circulaire. Nous appellerons celui-ci le texte de présentation #1.

Mettez ensuite à jour le contenu du texte de présentation en supprimant le titre et le corps du texte. Ajoutez ensuite une icône au texte de présentation comme suit.

Utiliser l'icône : Oui
Icône : voir capture d'écran

Ensuite, nous allons mettre à jour les paramètres de conception comme suit :

Couleur de l'icône : #29a1f2
Icône de cercle : OUI
Couleur du cercle : #222222
Afficher la bordure du cercle : OUI
Couleur de la bordure du cercle : #29a1f2
Utiliser la taille de la police de l'icône : OUI
Taille de la police de l'icône : 25px
Taille du corps du texte : 20 px
Marge : 0px

En plus du style de l'icône circulaire, nous avons également ajouté une taille de corps de texte. Il n'y a pas de corps de texte, mais cela sera utile plus tard chaque fois que nous utiliserons l'unité de longueur em (qui est relative à la taille du corps du texte parent) pour espacer nos éléments de menu/blurbs à l'aide de transform translate. Plus à ce sujet plus tard.

Après cela, retirez l'animation image/icône par défaut.

Animation d'image/icône : pas d'animation

Définissez ensuite l'indice Z de ce module sur 1 afin qu'il se place au-dessus des autres qui finiront par se trouver derrière lui.

Indice Z : 1

Et enfin, supprimez la marge inférieure par défaut sous l'icône en ajoutant le CSS personnalisé suivant à l'image Blurb.

margin-bottom: 0px;

Présentation #2

Pour créer le deuxième texte de présentation, dupliquez simplement le texte de présentation #1.

Ensuite, ouvrez les paramètres du nouveau texte de présentation (blurb n ° 2), modifiez l'icône et redéfinissez l'index Z sur la valeur par défaut (0).

Après cela, réduisons l'icône en utilisant l'échelle de transformation comme suit :

Échelle de transformation : 70 %

Création des Blurbs #3, #4 et #5

Les trois prochains textes de présentation peuvent être créés en dupliquant le texte de présentation n° 2 et en mettant à jour l'icône pour chacun.

Empiler les Blurbs dans la même position absolue

L'état par défaut de notre menu aura tous les textes de présentation dans une position absolue avec les quatre textes de présentation des éléments de menu empilés derrière le texte de présentation de l'icône du menu hamburger principal. Pour obtenir nos textes de présentation dans la même position absolue, utilisez la fonction de sélection multiple (maintenez ctrl/cmd et cliquez sur chacun) pour sélectionner les cinq modules de présentation. Ensuite, ouvrez les paramètres de l'un des textes de présentation sélectionnés pour mettre à jour les paramètres des éléments pour les 5 en même temps.

Ajoutez ensuite le CSS personnalisé suivant à l'élément principal :

position: absolute !important;
bottom: 20px;
left: 20px;

Cela positionne les textes de présentation en bas à gauche de la rangée.

Positionnement des icônes de menu à l'aide de Transform Translate

Une fois que tous les textes de présentation sont positionnés pour l'état par défaut, nous pouvons commencer à positionner les éléments de menu pour l'état de clic (où ils se retrouveront après avoir cliqué sur le bouton du menu principal). Pour ce faire, nous pouvons utiliser la propriété transform translate dans le générateur Divi. Il n'y a pas d'état de clic disponible dans le générateur Divi (comme le survol) car il s'agit de quelque chose géré par JavaScript. Nous allons donc positionner nos éléments de menu là où nous voulons qu'ils soient cliqués maintenant. Ensuite, nous utiliserons Javascript pour activer et désactiver cette position lorsque vous cliquez sur le bouton du menu principal.

Nous voulons garder le texte de présentation n°1 en place car il s'agit du bouton du menu principal. Cependant, nous voulons déplacer les textes de présentation #2, #3, #4 et #5. Et puisque nos textes de présentation sont maintenant empilés dans le générateur visuel, déployons le mode filaire pour mettre à jour les positions de chaque texte de présentation.

Présentation du poste #2

Ouvrez les paramètres du texte de présentation n° 2 et mettez à jour les éléments suivants :

Transformer l'axe Y de translation : -10 em

Voici la nouvelle position du texte de présentation #2.

Présentation du poste #3

Ouvrez les paramètres du texte de présentation n° 3 et mettez à jour les éléments suivants :

Transformer l'axe Y de translation : -8.6em
Transformer l'axe X de translation : 5 em

Voici la nouvelle position du texte de présentation #3.

Présentation du poste n° 4

Ouvrez les paramètres du texte de présentation n° 4 et mettez à jour les éléments suivants :

Transformer l'axe Y de translation : -5em
Transformer l'axe X de translation : 8,6 em

Voici la nouvelle position du texte de présentation #4.

Présentation du poste #5

Ouvrez les paramètres du texte de présentation n°5 et mettez à jour les éléments suivants :

Transformer Traduire l'axe Y : 0px
Transformer l'axe X de translation : 10 em

Voici la nouvelle position du texte de présentation #5.

Ajout de classes CSS personnalisées aux Blurbs

Pour que notre JavaScript fonctionne correctement, nous devons ajouter des classes CSS qui serviront de sélecteurs pour un style et des fonctionnalités supplémentaires.

Ajouter une classe CSS au Blurb #1

En mode d'affichage filaire, ouvrez les paramètres du texte de présentation n° 1 et ajoutez la classe CSS suivante :

Classe CSS : transform_target

Ajouter des classes CSS aux Blurbs #2, #3, #4 et #5

Les quatre autres textes de présentation partageront tous les mêmes classes CSS, nous pouvons donc utiliser la fonction de sélection multiple pour sélectionner les Blurb #2, #3, #4 et #5 et mettre à jour la classe CSS pour les quatre comme suit :

Classe CSS : has-transform toggle-transform-animation

Notez qu'il existe deux classes CSS séparées par un espace.

Ajout du CSS externe et du JavaScript avec un module de code

Une fois que nos classes CSS ont été ajoutées aux textes de présentation, nous sommes prêts à ajouter notre code à la page à l'aide d'un module de code. Pour ce faire, ajoutez un module de code sous le texte de présentation #5.

Collez ensuite le code suivant dans le module de code :

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

Il s'agit du CSS externe utilisé en combinaison avec le code jQuery.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

Et c'est le besoin de JavaScript pour que les éléments de menu d'icônes circulaires s'étendent lorsque vous cliquez sur le bouton de menu.

Assurez-vous de garder la balise de style enroulée autour du CSS et la balise de script enroulée autour du JavaScript/jQuery.

Vérifiez le résultat final de la fonctionnalité sur la page en direct.

Ajout d'URL d'éléments de menu

Puisqu'il s'agit d'un menu, les quatre éléments de menu auront besoin de liens/URL. Afin d'ajouter les URL nécessaires pour chaque élément de menu, ouvrez les paramètres du module de présentation pour chacun des 4 éléments de menu et ajoutez une URL de lien de module.

Rendre le bouton de menu collant (ou fixe)

Parce que ce menu est petit et intuitif pour les appareils mobiles, vous voudrez peut-être rendre le menu collant afin qu'il reste fixe en bas à gauche du navigateur.

Pour ce faire, sélectionnez les cinq textes de présentation à l'aide de la fonction de sélection multiple, puis mettez à jour le CSS personnalisé dans l'élément principal en remplaçant la valeur de position « absolue » par « fixe ».

position: fixed !important;
bottom: 20px;
left: 20px;

Maintenant, le menu restera fixe en bas à gauche de la fenêtre du navigateur.

Pour vous assurer que le menu se trouve au-dessus des autres contenus de la page, mettez à jour l'index z de la ligne comme suit :

Indice Z : 11

Retirez ensuite le rembourrage de la rangée :

Remplissage : 0px en haut, 0px en bas

Conception finale

Voici la conception finale de l'icône circulaire fixe avec une mise en page prédéfinie.

Et le voici sur mobile.

Comment ajuster facilement la taille et l'espacement du menu

Comme mentionné précédemment, le menu a été conçu en utilisant l'unité de longueur em pour le positionnement de l'élément de menu sur les axes x et y (en utilisant transform translate). L'unité de longueur em est relative à la taille du corps du texte parent. Par conséquent, étant donné que chacun de nos modules de présentation a la même taille de corps de texte de 20 pixels, nous pouvons utiliser la sélection multiple pour modifier le corps du texte de tous les textes de présentation à la fois.

Cela augmentera ou diminuera l'espacement entre les éléments de menu selon les besoins.

Et vous pouvez également faire la même chose pour la taille de la police Icon. Utilisez simplement la sélection multiple pour ajuster la taille de la police des icônes pour tous les éléments de menu à la fois.

Dernières pensées

Qui aurait cru que l'ajout d'un menu d'icônes circulaires fixes à une page pourrait être aussi simple avec Divi. C'est aussi le type de menu parfait pour mobile ! Bien sûr, quelques extraits de code personnalisés sont nécessaires, mais le fait que vous puissiez concevoir et positionner l'état de clic des éléments de menu à l'aide du générateur visuel est plutôt cool. N'oubliez pas d'explorer différentes couleurs, tailles et conceptions de survol qui peuvent facilement faire correspondre le menu à votre propre site Web.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!