Comment convertir les lignes Divi en onglets horizontaux et verticaux

Les onglets sont certainement utiles pour fournir des informations importantes dans les sections concises du site. Cela réduit la nécessité pour les utilisateurs de parcourir de longues pages. Les modules tabulaires de Divi sont faciles à utiliser et sont parfaits pour passer d’un simple contenu à un clic. Mais dans ce tutoriel, je vais vous montrer comment convertir toute la ligne Divi en onglets en vol stationnaire. Je vais également vous montrer comment créer des onglets horizontaux et verticaux. Cela permettra de déverrouiller la capacité de Divi à concevoir une disposition de ligne complète avec plusieurs modules pour chaque zone de contenu de la carte. Pas besoin de plug – in!
On y va. Voici un aperçu rapide des onglets de transition de la souris horizontale et verticale que nous allons créer ensemble dans ce tutoriel. Téléchargement gratuit Divi rows tab Layout pour obtenir les graphiques de ce tutoriel, vous devez d’abord les 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 Z
Personnaliser S. Continuer, ajouter un nouveau formulaire de texte sous l’image dans la colonne 1 et mettre à jour ce qui suit:
Contenu: \
En haut: 0; Ce CSS, ainsi que la marge personnalisée que nous avons ajoutée, garantira que l’onglet est positionné avec précision dans le coin supérieur gauche de la ligne. Il est important que les onglets soient en fait au – dessus de la ligne afin que vous puissiez passer le curseur sur la ligne plus tard.
Maintenant, avant de continuer à créer les lignes et onglets restants, donnons un peu d’espace aux lignes en ajoutant des marges au – dessus et au – dessous de la section. Pour cette conception, il est important d’utiliser des marges pour séparer nos parties, car nous allons également définir une hauteur de réglage pour nos parties. Nous devons donner une hauteur prédéterminée à notre section parce que nous voulons que nos lignes couvrent la hauteur de toute la section. Cela signifie que chacune de nos lignes (contenu de l’onglet) aura la même hauteur que notre section. Par conséquent, il est préférable que chaque ligne ait une capacité interne similaire, sinon certains onglets de ligne auront un espace négatif inutile. Ça devrait avoir plus de sens.
Maintenant, ouvrez la section paramètres et mettez à jour ce qui suit: hauteur: 500 Px (bureau), 900 Px (tablette), 750 Px (téléphone) marges: 100 Px vers le haut, 100 Px vers le bas remplir: 0px vers le haut, 0px vers le bas Notez que la hauteur de la section doit être ajustée pour maintenir
Lorsque vous Empilez des colonnes de ligne sur un appareil mobile, envisagez un espace de contenu plus long. Par conséquent, vous devez faire quelques ajustements à cette hauteur pour répondre à vos besoins. Maintenant, sauvegardez vos paramètres et revenons à ajouter d’autres lignes. Créer la deuxième ligne du contenu de l’onglet pour créer la deuxième ligne, copiez la ligne précédemment créée. Déplacez le formulaire de texte dans la colonne 1 et l’image dans la colonne 2. L’image est ensuite mise à jour avec la nouvelle image. Cela vous aidera à voir à quoi ressemble le contenu différent sur chaque onglet. Ouvrez les paramètres de la deuxième ligne et changez la couleur de la rampe d’arrière – plan en passant le curseur sur la zone d’aperçu de l’arrière – plan et en cliquant sur la petite icône basculer. Ensuite, ouvrez les paramètres utilisés pour créer le formulaire de texte de l’onglet dans la colonne 1 et spécifiez une couleur qui correspond à la nouvelle rampe supérieure. Couleur de fond: # 4646c4 Par conséquent, nous devons déplacer la carte vers la droite afin que lorsque cette ligne chevauche la ligne ci – dessus, vous puissiez voir directement la carte à droite de la première ligne de la carte. Marges: 50 pixels à gauche Ajoutez l’effet au filtre d’opacité de passage pour la deuxième ligne de cette ligne, et vous pouvez ajouter l’effet à la souris de filtre d’opacité de passage afin que vous puissiez bien passer à la souris de passage lorsque vous passez le curseur sur un onglet et affichez le contenu de la ligne.
Ouvrez les paramètres de ligne et ajoutez les filtres suivants: opacité: 70% (par défaut), 100% (curseur de la souris), puis ajoutez la durée de transition et la courbe de vitesse pour faire passer la souris sur le filtre d’opacité. Durée de la transition: courbe de vitesse de transition de 500 ms: linéaire Créez le contenu de l’onglet de la troisième ligne maintenant nous pouvons ajouter le contenu de l’onglet de la dernière ligne. Pour ce faire, cliquez sur cre
Ata. Ensuite, déplacez le module texte dans la colonne 1 et l’image dans la colonne 2. Et mettre à jour le formulaire d’image avec la nouvelle image. Mettre à jour les paramètres de ligne avec une nouvelle rampe de fond. Fond du gradient gauche: # 333333 fond du gradient droit: # 4646c4 Ensuite, ouvrez les paramètres du formulaire de texte pour créer l’onglet dans la colonne 1 et mettez à jour les couleurs et les marges. Couleur de fond: # 333333 marge: 150 pixels à gauche C’est l’apparence de votre page avant de placer nos lignes afin qu’elles se chevauchent. Pour superposer nos lignes, nous devons utiliser un positionnement absolu. Ensuite, lorsque vous passez le curseur sur un onglet, nous utilisons l’option index Z pour placer chaque ligne au premier plan. Mais parce que nous donnons une position absolue aux lignes (le parent \/ noeud a un ensemble de hauteur), nous pouvons ajouter 100% de hauteur à chaque ligne afin qu’elles couvrent toute la hauteur du noeud. Voici comment faire. Tout d’abord, déployez le mode wireframe. Ensuite, utilisez plusieurs sélections pour sélectionner les trois lignes et ouvrez les paramètres d’une ligne pour déployer les paramètres de mode du projet. La hauteur est ensuite mise à jour à 100%. Hauteur: 100% cela réglera la hauteur des trois lignes à 100%. Ensuite, ajoutez le CSS personnalisé suivant à l’élément principal: position: absolute! Important
Gauche: 0;
Droite: 0;
Marge: automatique; Maintenant déployez le mode vue de bureau pour voir comment les lignes se chevauchent bien pour créer des onglets. Changez l’ordre des lignes pendant que vous passez l’index Z à ce stade, et vous avez peut – être remarqué que la troisième ligne \/ onglet est au premier plan. Par conséquent, nous devons réorganiser les lignes en utilisant l’index Z pour afficher le premier onglet avant de déplacer la souris s
Une autre carte. Pour ce faire, retournez à la représentation d’affichage du fil métallique et ouvrez les paramètres de la première ligne créée (en utilisant l’onglet 1). Puis mettre à jour l’index Z comme suit: index Z: 10 Ensuite, utilisez plusieurs sélections pour sélectionner les deuxième et troisième lignes. Ensuite, activez le mode de configuration du projet et ajoutez l’index Z suivant lorsque vous passez le curseur sur deux lignes. Z Index: 11 (lorsque la souris est en pause) C’est tout. Voyons le résultat final. Résultats finaux Il fonctionne parce que techniquement, chaque carte (module texte) fait partie de chaque ligne, même si elle est placée au – dessus et à l’extérieur de la ligne. C’est pourquoi passer le curseur sur un onglet affiche les lignes qui contiennent cet onglet. Voici à quoi ça ressemble sur un appareil mobile. Pour ajouter des onglets verticaux à une ligne lors de la création d’un onglet, il suffit de repositionner le formulaire de texte utilisé pour créer chaque onglet. Nous devons également changer la taille des lignes et l’espacement des noeuds pour faire place aux onglets. Voici ce qu’il faut faire. Continuez à copier la section contenant les onglets sur le canal de la souris que nous venons de créer afin que vous puissiez utiliser le nouveau design. Puis ouvrez les paramètres de partition et mettez à jour ce qui suit: remplissage: 10% à gauche, 10% à droite Sélectionnez ensuite les trois lignes en utilisant plusieurs sélections et mettez à jour les paramètres de l’élément en utilisant ce qui suit: largeur: 70% (bureau), 70% (tablette), 80% (téléphone) largeur maximale: 980 px Ensuite, mettez à jour la direction du gradient pour les trois taches à 90 degrés, de sorte que lorsque nous mettons la carte à gauche, la couleur du gradient de gauche sera combinée avec la couleur de fond de la carte. Direction de la rampe: 90 degrés Il est temps de placer l’onglet formulaire texte à gauche de la ligne pour obtenir
La grille verticale que nous voulons. Ouvrez les paramètres de l’onglet formulaire de texte dans la première ligne et mettez à jour ce qui suit: marges (bureau): – 50px en haut, – 150px à gauche (téléphone): – 100px en haut, – 50px à gauche les paramètres de marge sont utilisés par le téléphone pour placer l’onglet au – dessus de la vue de l’onglet horizontal. Ensuite, ouvrez les paramètres de l’onglet formulaire de texte dans la ligne de section et mettez à jour ce qui suit: marge (bureau): 0px en haut, – 150px marge gauche (téléphone): – 100px en haut, 50px à gauche Pour la dernière carte de la troisième ligne, mettre à jour ce qui suit: marge (bureau): plus de 50px, – 150px marge gauche (téléphone): – plus de 100px, 150px marge gauche Résultats finaux examinons maintenant les résultats finaux. C’est une tablette et un téléphone. Avec un peu de créativité et la puissance de Divi, vous pouvez utiliser les lignes de Divi pour créer des cartes de souris personnalisées étonnantes. Il y a quelques limites à ce que vous pouvez voir. Par exemple, avec cette configuration, toutes les lignes doivent avoir la même hauteur que la section. Mais pour ne pas avoir besoin de plug – ins, je pense que c’est une bonne solution. N’oubliez pas que puisque vous pouvez utiliser la ligne Divi pour afficher le contenu, il y a plusieurs façons d’utiliser ces onglets lorsque vous passez le curseur dans le projet suivant. J’ai hâte d’entendre vos commentaires. Bonjour!