Comment créer une roue de menu tournante en survol

Publié: 2019-08-04

Créer une roue de menu tournante au survol est un moyen amusant de présenter des liens utiles sur votre site Web. Ce serait un excellent moyen de fournir plusieurs appels à l'action dans un en-tête pour diriger les utilisateurs là où ils doivent aller. Et ce serait aussi un menu de sous-catégorie sympa pour votre blog.

Dans ce tutoriel, je vais vous montrer comment créer une roue de menu tournante en survol dans Divi. Cela peut être fait en utilisant une combinaison d'options Divi intégrées et quelques extraits de css personnalisés.

Aperçu

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs 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.

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 ?

Abonnez-vous à notre chaîne Youtube

Ce dont vous avez besoin pour commencer

Pour commencer, vous aurez besoin des éléments suivants :

Le thème Divi installé et actif
Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)

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

Création du design de la roue de menu tournant dans Divi

L'idée de base

La roue est créée en transformant une rangée en un élément circulaire en lui donnant une hauteur et une largeur de 500px et des coins arrondis à 50%. Chaque lien de menu est créé dans un module de texte séparé et est aligné le long du périmètre de la ligne circulaire en faisant pivoter chaque module de texte le long du rayon (centre) de la ligne. Cette configuration est similaire à la façon dont vous créeriez du texte incurvé dans Divi.

Créer la section et la ligne 1

Créez une section régulière avec une ligne à une colonne.

Ajoutez ensuite un module de texte à la ligne avec le contenu suivant.

Ensuite, mettez à jour la conception du texte comme suit :

Police de texte : Partager la technologie
Espacement des lettres du texte : 1px
Titre 2 Taille du texte : 8vw

Ajoutez la rangée 2 pour construire la roue

Ensuite, nous devons ajouter une nouvelle ligne à une colonne sous la ligne 1.

Avant de commencer à ajouter nos modules de texte pour nos liens, nous devons concevoir notre ligne comme une roue. Il y aura un bon peu d'optimisations nécessaires à la rangée pour faire notre conception de roue. Pour commencer, ouvrez les paramètres de la ligne 2 et mettez à jour les éléments suivants :

Couleur d'arrière-plan : #02366b
Couleur d'arrière-plan du dégradé gauche : rgba(0,0,0,0.45)
Dégradé de fond à droite : #02366b
Type de dégradé : Radial
Direction radiale : Centre
Position de départ : 36 %
Position finale : 0%

Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 1
Largeur : 500px
Largeur maximale : 500 px (ordinateur de bureau), automatique (tablette et téléphone)
Hauteur : 500 px (ordinateur de bureau), automatique (tablette et téléphone)
Rembourrage (bureau) : 0px en haut, 0px en bas
Rembourrage (tablette et téléphone): 20px en haut, 20px en bas, 20px à gauche
Marge (téléphone) : -10% droit

Nous devons définir à la fois la hauteur et la largeur de la ligne à 500px afin que ce soit un carré parfait. Cela nous permettra de lui donner une forme circulaire parfaite en utilisant l'option coins arrondis (rayon de bordure) de Divi.

Coins arrondis : 50 %

Ensuite, nous pouvons ajouter un autre niveau de conception de cercle en utilisant une ombre de boîte comme suit :

Box Shadow : voir capture d'écran
Force du flou de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte: 210px
Couleur de l'ombre: rgba (2,54,107,0.66)

Ensuite, nous allons ajouter un petit extrait de CSS afin de centrer verticalement le contenu de notre ligne. Sous l'onglet avancé, ajoutez le CSS personnalisé suivant dans l'élément principal.

display:flex;
align-items:center;

Cela prend en charge les paramètres de ligne pour le moment. Nous reviendrons plus tard pour ajouter notre effet de survol tournant.

Ajout des liens

Chaque lien dans la roue sera créé avec un module de texte. Nous allons créer un total de six modules de texte. Cinq des modules de texte contiendront les liens pour la roue et l'un des modules de texte contiendra le titre du menu.

Commencez par créer un nouveau module de texte.

Mettez ensuite à jour les paramètres de texte comme suit :

Contenu du corps : « élément de lien »

Police de texte : Partager la technologie
Texte Couleur du texte : #ffffff
Taille du texte : 16px (par défaut), 20px (survol)
Espacement des lettres du texte : 1px
Hauteur de la ligne de texte : 60px
Largeur : 250 px (ordinateur de bureau), automatique (tablette et téléphone)
Hauteur : 60px
Remplissage : 20 pixels restants

Enregistrez les paramètres pour le moment. Dupliquez ensuite le module de texte 4 fois pour créer un total de 5 modules de texte.

Positionnement des liens/modules de texte

Nous sommes maintenant prêts à positionner nos liens le long du périmètre de la roue. Pour ce faire, nous mettrons à jour chaque module de texte avec des options de transformation qui déplacent / traduisent et font pivoter le module en place.

Pour faciliter cela, déployez le mode d'affichage filaire et étiquetez les modules de texte en commençant par le lien 1 en haut jusqu'au lien 5 en bas.

Lien 1

Nous allons commencer par éditer le lien 1. Ouvrez les paramètres du module de texte pour le lien 1 et mettez à jour les éléments suivants :

Transformer traduire l'axe Y : 120 px (ordinateur de bureau), 0 px (tablette et téléphone)
Transformer l'axe Z de rotation : 60 deg (ordinateur de bureau), 0 px (tablette et téléphone)
Origine de la transformation : 50 % 100 % (centre droit)

Lien 2

Ouvrez les paramètres du module de texte pour Link 2 et mettez à jour les éléments suivants :

Transformer traduire l'axe Y : 60 px (ordinateur de bureau), 0 px (tablette et téléphone)
Transformer l'axe Z de rotation : 30 deg (ordinateur de bureau), 0 px (tablette et téléphone)
Origine de la transformation : 50 % 100 % (centre droit)

Lien 3

Puisque le module de texte pour le lien 3 est au milieu, nous pouvons le laisser en place.

Lien 4

Ouvrez les paramètres du module de texte pour Link 2 et mettez à jour les éléments suivants :

Transformer traduire l'axe Y : -60px (ordinateur de bureau), 0px (tablette et téléphone)
Transformer l'axe Z de rotation : -30 deg (ordinateur de bureau), 0 px (tablette et téléphone)
Origine de la transformation : 50 % 100 % (centre droit)

Lien 5

Ouvrez les paramètres du module de texte pour Link 2 et mettez à jour les éléments suivants :

Transformer traduire l'axe Y : -120px (ordinateur de bureau), 0px (tablette et téléphone)
Transformer l'axe Z de rotation : -60 deg (ordinateur de bureau), 0 px (tablette et téléphone)
Origine de la transformation : 50 % 100 % (centre droit)

Voyons maintenant le résultat jusqu'à présent. Remarquez comment les liens/textes dans les modules de texte tournent parfaitement le long du périmètre du cercle.

Ajout de l'étiquette de menu

Pour ajouter l'étiquette de menu, nous devrons ajouter un autre module de texte en haut des cinq modules de texte que nous avons déjà. Allez-y et ajoutez un nouveau module de texte au-dessus du lien 1.

Ensuite, mettez à jour le contenu du corps avec les éléments suivants :

&amp;lt;p&amp;gt;menu&amp;lt;/p&amp;gt;

Assurez-vous que l'étiquette du menu est enveloppée dans la balise ap. Cela garantira que la hauteur de ligne est reconnue dans les paramètres de texte.

Ensuite, pour accélérer la conception, copiez les styles de modules du module de texte pour Link 3 et collez ces styles de module dans le nouveau module de texte.

Ensuite, mettez à jour les éléments suivants :

Hauteur de ligne : 300 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
Hauteur : restaurer le paramètre par défaut (auto)

La hauteur de ligne doit être de 300px pour qu'elle soit égale à la hauteur de la colonne de contenu qui est également de 300px (5 modules de texte chacun avec une hauteur de 60px équivaut à 300px). Cela garantira que le texte reste centré verticalement.

Ensuite, nous devons faire pivoter le module de texte de l'étiquette de menu de 180 degrés afin qu'il s'affiche correctement sur le côté opposé de la roue. Cela permettra au visiteur de voir l'étiquette du menu avant l'état de survol qui fait tourner les liens en vue.

Transformer l'axe Z de rotation : 180 degrés (ordinateur de bureau), 0 degrés (tablette et téléphone)
Origine de la transformation : 50 % 100 % (centre droit)

Une fois cela fait, nous devons donner au module de texte d'étiquette de menu une position absolue. Pour ce faire, ajoutez le CSS personnalisé suivant à l'élément principal :

position: absolute !important;

Vérifiez maintenant le résultat. Vous devriez voir que l'élément de menu est à l'envers sur la droite de la roue.

Ajout de l'effet de survol en rotation à la rangée/roue

Pour ajouter l'effet de survol rotatif à la ligne, mettez à jour les paramètres de ligne comme suit :

Transformation Rotation Axe Z : 180 deg (ordinateur de bureau), 0 deg (survol, 0 deg (tablette et téléphone)

Mettez ensuite à jour les paramètres de transition comme suit :

Durée de la transition : 450 ms
Courbe de vitesse de transition : entrée-sortie

Vérifiez maintenant comment la roue tourne en vol stationnaire.

Faire une mise en page à deux colonnes pour la section

À l'heure actuelle, la mise en page se compose de deux rangées d'une colonne empilées l'une sur l'autre. Cependant, nous pouvons utiliser la propriété flex css pour aligner les deux lignes horizontalement. Pour ce faire, nous pouvons ajouter un petit extrait de CSS personnalisé à la section. Une fois cela fait, nous devrons ajuster un peu l'espacement pour que les choses soient parfaites.

Ouvrez les paramètres de la section et ajoutez le css personnalisé suivant à l'élément principal :

display:flex;

Mettre à jour l'espacement de la ligne 1

Ensuite, mettez à jour la taille et l'espacement de la ligne 1 comme suit :

Largeur : 40 % (ordinateur de bureau), 100 % (tablette et téléphone)
Marge (bureau) : 5 % restants
Marge (tablette) : 5% à gauche, 5% à droite
Marge (téléphone) : 5 % à droite

Touches finales

Sur l'écran de la tablette et du téléphone, vous devrez ajouter une marge supérieure au module de texte Link 1.

Marge (tablette) : 30px haut

Et vous pouvez toujours ajouter un séparateur de section à la section pour compléter la conception.

Résultat final

Voyons maintenant le résultat final.

Conception alternative de demi-roue

Une conception alternative intéressante consiste à masquer la moitié droite de la roue à l'extérieur de la section afin que les liens soient masqués puis révélés au survol. Pour ce faire, allez-y et dupliquez toute la section contenant le dessin que nous venons de créer. Dans la section en double, mettez à jour les paramètres de la ligne 1 comme suit :

Largeur : 70 % (bureau)

Mettez ensuite à jour les paramètres de la ligne 2 afin de pousser la roue en dehors de la section comme suit :

Marge : -250px à droite

Nous devons utiliser -250px car la largeur totale de la roue est de 500px et nous voulons masquer exactement la moitié de la ligne.

Définissez ensuite la visibilité de la section sur masqué comme suit :

Voici la conception finale.

Dernières pensées

Une roue à maillons en rotation est l'un de ces éléments de design élégants qui peuvent attirer les visiteurs avec un effet de survol subtil et unique. Et c'est assez incroyable de voir à quel point cette conception vous permet de faire juste avec les paramètres de conception intégrés de Divi. J'espère que cela ajoutera un petit quelque chose en plus à votre ceinture à outils de conception pour votre prochain projet.

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

À votre santé!