Comment convertir des lignes Divi en onglets de survol horizontaux et verticaux
Publié: 2019-05-29Les onglets sont certainement utiles pour rendre des informations importantes disponibles dans une zone concise de votre site Web. Cela réduit le besoin pour l'utilisateur de faire défiler le contenu d'une longue page. Le module d'onglet de Divi est facile à utiliser et idéal pour basculer à travers un contenu simple en un clic.
Mais dans ce tutoriel, je vais vous montrer comment convertir des lignes Divi entières en onglets de survol. Je vais également vous montrer comment créer des onglets horizontaux et verticaux. Cela débloquera la puissance de Divi pour concevoir des dispositions de lignes complètes avec plusieurs modules pour chaque zone de contenu d'onglet. Aucun plugin nécessaire !
Commençons.
Aperçu
Voici un aperçu des onglets de survol horizontal et vertical que nous allons construire ensemble dans ce didacticiel.
Téléchargez GRATUITEMENT la mise en page des onglets Divi Rows Hover
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 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 de la configuration suivante :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Trois images à utiliser pour le contenu fictif
Après cela, vous aurez une toile vierge pour commencer à créer des onglets de survol dans Divi.
Création d'onglets de survol horizontaux à l'aide de lignes Divi
Pour commencer, créez une nouvelle section régulière avec une ligne à deux colonnes.
Arrière-plan de la ligne, remplissage et ombre de la boîte
Avant d'ajouter nos modules, personnalisons d'abord un peu les paramètres de ligne. Nous devrons revenir à la ligne plus tard pour la positionner pour notre fonctionnalité d'onglet.
Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
Couleur d'arrière-plan du dégradé à gauche : #284f91
Dégradé d'arrière-plan à droite : #4646c4
Remplissage : 50 px en haut, 50 px en bas, 50 px à gauche, 50 px à droite
Box Shadow : voir capture d'écran
Couleur de l'ombre de la boîte : rgba (70,70,196,0.66)
Ajouter du contenu à la ligne
Nous allons maintenant ajouter du contenu fictif à notre ligne. Gardez à l'esprit que vous pouvez ajouter n'importe quelle combinaison de colonnes et de modules pour votre zone de contenu.
Dans la colonne 1, ajoutez une image avec un module image. J'en utilise un du Design Conference Layout Pack.
Dans la colonne de droite, ajoutez un module d'appel à l'action et mettez à jour les éléments suivants :
URL du lien du bouton : # (juste pour afficher le bouton pour le moment)
Utiliser la couleur d'arrière-plan : NON
Alignement du texte : à gauche
Police du titre : Lato
Taille du texte du titre : 60 px (ordinateur de bureau), 50 px (téléphone)
Création de l'onglet
Pour créer l'onglet réel que les utilisateurs survoleront pour révéler le contenu de cette ligne, nous devons créer un module de texte et le positionner en haut à droite avec du CSS personnalisé.
Allez-y et ajoutez un nouveau module de texte sous l'image dans la colonne 1 et mettez à jour les éléments suivants :
Contenu : « Onglet 1 »
Couleur d'arrière-plan : #284f91 (cela doit correspondre à la couleur du dégradé de gauche de la ligne)
Texte Alignement du texte : centre
Texte Couleur du texte : #ffffff
Largeur : 100 pixels
Hauteur : 50px
Marge : -100px en haut, -50px à gauche
Rembourrage : 14px haut
Enfin, ajoutez le css personnalisé suivant à l'élément principal pour lui donner une position absolue en haut de la ligne.
position: absolute !important; top: 0;
Ce CSS plus les marges personnalisées que nous avons ajoutées garantiront que l'onglet est positionné exactement en haut à gauche de la ligne. Il est important que les onglets se trouvent réellement au-dessus de la ligne afin que l'utilisateur puisse la survoler plus tard.
Hauteur et espacement des sections
Maintenant, avant de continuer à créer les lignes et les onglets restants, donnons un peu de répit à nos lignes en ajoutant des marges supérieure et inférieure à la section. Pour cette conception, il est important que nous utilisions des marges pour espacer notre section, car nous donnerons également à notre section une hauteur définie. Nous devons donner à notre section une hauteur définie car nous voulons que nos lignes s'étendent sur toute la hauteur de notre section. Cela signifie que chacune de nos lignes (le contenu de l'onglet) aura la même hauteur de notre section. Il est donc préférable que chacune des lignes ait une quantité de contenu similaire ou il y aura un espace négatif indésirable dans certains des onglets de ligne. Cela devrait avoir plus de sens plus tard.
Pour l'instant, ouvrez les paramètres de la section et mettez à jour les éléments suivants :
Hauteur : 500px (ordinateur de bureau), 900px (tablette), 750px (téléphone)
Marge : 100 pixels en haut, 100 pixels en bas
Remplissage : 0px en haut, 0px en bas
Notez que la hauteur de la section devra être ajustée pour tenir compte de l'espace de contenu plus long lorsque les colonnes de ligne s'empilent sur mobile. Il faudra donc apporter quelques ajustements à cette hauteur pour vos propres besoins.
Enregistrez maintenant vos paramètres et revenons à l'ajout de ces lignes supplémentaires.
Création de la deuxième ligne de contenu d'onglet
Pour créer la deuxième ligne, dupliquez la ligne que vous avez créée précédemment. Déplacez le module de texte dans la colonne 1 et l'image dans la colonne 2. Ensuite, mettez à jour l'image avec une nouvelle. Cela vous aidera à avoir une idée de ce à quoi ressemble le contenu différent sur chaque onglet.
Ouvrez les paramètres de la deuxième ligne et changez les couleurs de dégradé d'arrière-plan en survolant la zone d'aperçu de l'arrière-plan et cliquez sur la petite icône « commutateur ».
Ouvrez ensuite les paramètres du module de texte utilisé pour créer l'onglet dans la colonne 1 et donnez-lui une couleur qui correspond au nouveau dégradé supérieur.
Couleur d'arrière-plan : #4646c4
Ensuite, nous devons déplacer l'onglet vers la droite de sorte que lorsque cette ligne chevauche la ligne ci-dessus, vous puissiez voir l'onglet directement à droite de l'onglet de la première ligne.
Marge : 50px à gauche
Ajout d'un effet de survol du filtre d'opacité pour la deuxième ligne
Pour la ligne, nous pouvons ajouter un effet de survol de filtre d'opacité afin qu'il y ait une belle transition de survol lors du survol de l'onglet et révélant le contenu de la ligne.
Ouvrez les paramètres de ligne et ajoutez le filtre suivant :
Opacité : 70 % (par défaut), 100 % (survol)
Ajoutez ensuite une durée de transition et une courbe de vitesse pour l'effet de survol du filtre d'opacité.
Durée de transition : 500 ms
Courbe de vitesse de transition : linéaire
Création de la troisième ligne de contenu d'onglet
Nous pouvons maintenant ajouter notre dernière ligne de contenu d'onglet. Pour ce faire, dupliquez la deuxième ligne que vous venez de créer. Déplacez ensuite le module de texte dans la colonne 1 et l'image dans la colonne 2. Et mettez à jour le module d'image avec une nouvelle image.
Mettez à jour les paramètres de ligne avec un nouveau dégradé d'arrière-plan.
Couleur d'arrière-plan du dégradé de gauche : #333333
Dégradé d'arrière-plan à droite : #4646c4
Ouvrez ensuite le paramètre du module de texte utilisé pour créer l'onglet dans la colonne 1 et mettez à jour la couleur et la marge.
Couleur d'arrière-plan : #333333
Marge : 150 pixels restants
Voici à quoi devrait ressembler votre page avant de positionner nos lignes pour qu'elles se chevauchent.
Chevauchement des lignes avec un positionnement absolu
Pour chevaucher nos lignes, nous devons utiliser le positionnement absolu. Ensuite, nous utiliserons l'option d'index Z pour mettre chaque ligne au premier plan lors du survol des onglets. Mais puisque nous donnons à nos lignes une position absolue (et que le parent/la section a une hauteur définie), nous pouvons ajouter 100% de hauteur à chacune des lignes afin qu'elles couvrent toute la hauteur de la section.
Voici comment procéder.
Tout d'abord, déployez le mode filaire. Ensuite, utilisez multiselect pour sélectionner les trois lignes et ouvrez les paramètres de l'une d'entre elles pour déployer le modal des paramètres de l'élément. Ensuite, mettez à jour la hauteur à 100%.
Hauteur : 100 %
Cela définira la hauteur des trois lignes à 100 %.
Ajoutez ensuite le CSS personnalisé suivant à l'élément principal :
position: absolute !important; left: 0; right: 0; margin: auto;
Déployez maintenant le mode d'affichage du bureau pour voir comment les lignes se chevauchent bien pour créer nos onglets.
Modification de l'ordre des lignes au survol avec l'index Z
En ce moment, vous avez peut-être remarqué que la troisième ligne/onglet est au premier plan. Nous devons donc réorganiser les lignes à l'aide de l'index Z afin que le premier onglet s'affiche en premier jusqu'à ce que vous survoliez un autre onglet.
Pour ce faire, revenez au mode d'affichage filaire et ouvrez les paramètres de la première ligne que vous avez créée (avec l'onglet un). Mettez ensuite à jour l'index z comme suit :
Indice Z : 10
Ensuite, utilisez multiselect pour sélectionner la deuxième et la troisième ligne. Ensuite, ouvrez le modal des paramètres d'élément et ajoutez l'index z suivant au survol sur les deux lignes.
Indice Z : 11 (survol)
C'est ça. Voyons le résultat final.
Résultat final
La raison pour laquelle cela fonctionne est que, techniquement, chaque onglet (module de texte) fait partie de chaque ligne même s'il est positionné au-dessus et à l'extérieur de la ligne. C'est pourquoi le survol d'un onglet affichera la ligne dans laquelle il est contenu.
Et voici à quoi cela ressemble sur mobile.
Création d'onglets de survol vertical
Si vous souhaitez ajouter des onglets verticaux aux lignes, il vous suffit de repositionner les modules de texte utilisés pour créer chaque onglet. Nous devrons également modifier la taille de nos lignes et l'espacement des sections pour faire de la place pour les onglets.
Voici quoi faire.
Allez-y et dupliquez la section contenant les onglets de survol que nous venons de créer afin d'avoir un nouveau design avec lequel travailler.
Ensuite, ouvrez les paramètres de la section et mettez à jour les éléments suivants :
Rembourrage : 10 % à gauche, 10 % à droite
Ensuite, utilisez la multisélection pour sélectionner les trois lignes et mettez à jour les paramètres de l'élément avec les éléments suivants :
Largeur : 70 % (ordinateur de bureau), 70 % (tablette), 80 % (téléphone)
Largeur max : 980px
Ensuite, mettez à jour la direction du dégradé à 90 degrés pour les trois textes de présentation afin que lorsque nous positionnons les onglets sur la gauche, la couleur du dégradé de gauche se mélange avec la couleur d'arrière-plan de l'onglet.
Direction du gradient : 90 degrés
Il est maintenant temps de positionner nos onglets de module de texte à gauche de nos lignes pour obtenir les onglets verticaux que nous voulons.
Ouvrez le paramètre de l'onglet du module de texte dans la première ligne et mettez à jour les éléments suivants :
Marge (bureau) : -50px haut, -150px gauche
Marge (téléphone) : -100px en haut, -50px à gauche
Le paramètre de marge pour le téléphone est de ramener l'onglet au-dessus de la ligne pour un affichage horizontal de l'onglet.
Ensuite, ouvrez les paramètres de l'onglet du module de texte dans la ligne de section et mettez à jour les éléments suivants :
Marge (bureau): 0px haut, -150px gauche
Marge (téléphone) : -100px en haut, 50px à gauche
Et pour le dernier onglet de la troisième ligne, mettez à jour les éléments suivants :
Marge (bureau): 50px haut, -150px gauche
Marge (téléphone) : -100px en haut, 150px à gauche
Résultat final
Voyons maintenant le résultat final.
Et ici, c'est une tablette et un téléphone.
Dernières pensées
Avec un peu de créativité et la puissance de Divi, vous pouvez créer des onglets de survol personnalisés plutôt sympas à l'aide des lignes Divi. Il y a quelques limitations à ce que vous pouvez afficher. Par exemple, avec cette configuration, toutes les lignes doivent avoir la même hauteur que la section. Mais, pour ne pas avoir besoin d'utiliser un plugin, je pense que c'est une excellente solution. Et n'oubliez pas, puisque vous pouvez utiliser des lignes Divi pour votre contenu, il existe de nombreuses façons d'utiliser ces onglets de survol dans votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!