skip to Main Content

Structuration de votre page avec des modules de bascule pleine largeur sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Le module Toggle de Divi vous permet d’afficher du contenu supplémentaire par clic, sans avoir besoin de code jQuery supplémentaire. Semblables au module Accordion, les modules à bascule sont généralement utilisés pour partager un contenu groupé, tel que les questions fréquemment posées. Cependant, vous pouvez également les utiliser pour d’autres tâches, par exemple pour structurer votre page. Dans ce didacticiel, nous allons utiliser des modules de basculement pleine largeur pour créer une conception de page simple qui se comporte au clic. Le style de conception que nous traitons est audacieux et propre. Vous pourrez également télécharger le fichier JSON gratuitement!

Allons-y.

Avant de plonger dans le didacticiel, examinons rapidement le résultat obtenu sur différentes tailles d’écran.

Commençons à recréer

Ajouter une nouvelle section

Espacement

Commencez par créer une nouvelle page (ou en ouvrant une existante) et en y ajoutant une section régulière. La seule chose à faire dans les paramètres de section consiste à supprimer tout le remplissage supérieur et inférieur par défaut des paramètres d’espacement..

  • Top Rembourrage: 0px
  • Rembourrage inférieur: 0px

Ajouter une nouvelle ligne

Structure de colonne

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante:

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et assurez-vous que la ligne touche les côtés gauche et droit du conteneur de section en modifiant les paramètres de dimensionnement. C’est une étape importante de ce tutoriel. cela permet au module Toggle, que nous ajouterons plus tard dans ce didacticiel, de devenir pleine largeur.

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Largeur: 100%
  • Largeur maximale: 100%

Espacement

Nous supprimons également le remplissage supérieur et inférieur par défaut de la ligne. Cela supprimera tout l’espace entre le module bascule et le conteneur de lignes / colonnes dans lequel il est placé.

  • Top Rembourrage: 0px
  • Rembourrage inférieur: 0px

Ajouter un module à bascule

Insérer le titre et le contenu

Il est temps de commencer à ajouter des modules! Le seul module dont nous avons besoin dans cette ligne est un module Toggle. Nous allons utiliser la zone de titre pour ajouter un titre et placer tout le contenu que nous souhaitons partager dans la zone de contenu du corps. N’hésitez pas à placer ce que vous voulez dans la zone de contenu; du texte aux images et plus.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Etat

Nous utilisons un état à bascule fermé, mais n’hésitez pas à le laisser ouvert également.

  • Etat: proche

Paramètres d’icône par défaut

Passez à l’onglet Conception et modifiez les paramètres d’icône du module en conséquence:

  • Couleur de l’icône: # 570fff
  • Utiliser la taille de l’icône personnalisée: YEs
  • Icon Taille de la police: 6vw

Les paramètres de l’icône au survol

Modifiez la couleur de l’icône en survol.

  • Couleur de l’icône: # f2f2f2

Paramètres de basculement par défaut

Modifiez ensuite la couleur d’arrière-plan de la bascule fermée.

  • Basculer la couleur d’arrière-plan: #ffffff

Survolez les paramètres

Et changez la couleur en vol stationnaire aussi.

  • Basculer la couleur d’arrière-plan: # 000000

Paramètres du texte du titre

Continuez en modifiant les paramètres du texte du titre comme suit:

  • Titre du texte couleur: # 000000
  • Titre Titre Niveau: H2
  • Titre Police: Montserrat
  • Titre du texte: alignement à gauche
  • Titre du texte Taille: 8vw (bureau), 10vw (tablette et téléphone)
  • Espacement des lettres du titre: -1vw (bureau), -0.5vw (tablette et téléphone)
  • Hauteur de la ligne de titre: 0.7em

Paramètres de texte de titre fermé par défaut

Ensuite, accédez aux paramètres de texte du titre fermé et modifiez-les en conséquence:

  • Closed Titre Police: Montserrat
  • Titre fermé Taille du texte: 18vw (bureau), 16vw (tablette et téléphone)
  • Hauteur du titre fermé: 0.8em

Survolez les paramètres du texte du titre

Changer la couleur du texte du titre fermé en survol.

  • Titre fermé Couleur du texte: # f4f4f4

Paramètres du corps du texte

Passez aux paramètres du corps du texte et apportez quelques modifications également.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

  • Corps Police: Fira Sans
  • Poids de la police: Léger
  • Alignement du corps du texte: Justifiez
  • Taille du texte du corps: 1.2vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Hauteur du corps: 2.1em

Espacement

Ajoutez également un rembourrage personnalisé en haut, en bas et à gauche au module.

  • Top Rembourrage: 10vw
  • Rembourrage inférieur: 10vw
  • Rembourrage Gauche: 6vw

Frontière

Continuez en supprimant la bordure par défaut du module dans les paramètres de bordure.

  • Largeur de la bordure: 0px

Basculer le contenu CSS

Définissez les paramètres du module Toggle en ajoutant les lignes de code CSS suivantes au bureau:

width: 60vw;border-left: 0.2vw solidblack;padding: 5vw 5vw 5vw 5vw;

Modifiez la largeur de la ligne de code CSS sur la tablette et le téléphone:

width: 85vw;

Cloner toute la section autant de fois qu’on le souhaite

Une fois que vous avez terminé la première section, la ligne et le module Toggle, vous pouvez cloner toute la section autant de fois que vous le souhaitez. en fonction de la quantité de contenu que vous souhaitez afficher sur votre page.

Changer le contenu

Assurez-vous de changer tout le contenu de la bascule dans chaque module de bascule en double.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Changer les couleurs des icônes

Ensuite, ouvrez chaque module Toggle individuellement et changez la couleur de l’icône. Ceux que nous avons utilisés pour ce tutoriel sont mentionnés ci-dessous:

  • Couleur de l’icône 1: # ff9000
  • Couleur de l’icône 2: # 00ffd4

Aperçu

Maintenant que toutes les étapes sont franchies, jetons un dernier regard sur le résultat obtenu avec différentes tailles d’écran.

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec le module Toggle de Divi. Plus précisément; nous les avons créés en pleine largeur et les avons utilisés pour afficher le contenu de différentes sections de manière créative. Ce tutoriel montre que vous pouvez facilement utiliser les modules de Divi en dehors de la boîte lorsque vous prenez en compte les divers conteneurs. Vous avez également pu télécharger gratuitement le fichier JSON du didacticiel! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
1 Partages
Partagez1
Tweetez
Enregistrer