Cacher élégamment votre copie sous les séparateurs de section dans un superbe design avec Divi

Les options intégrées de Divi vous permettent d'utiliser un paramètre de conception particulier à plusieurs fins, ce qui à son tour aide à stimuler la créativité. Aujourd'hui, nous allons utiliser des séparateurs de section d'une manière unique pour masquer élégamment la copie de votre site Web. C'est un excellent moyen d'ajouter une interaction supplémentaire à votre page sans avoir besoin de code personnalisé. Nous allons recréer un bel exemple à partir de zéro et vous pourrez également télécharger gratuitement le fichier JSON de l'exemple.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord la télécharger à l'aide du 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 !

Commençons à recréer !

Ajouter la section #1

La première chose à faire est d'ajouter une nouvelle section régulière à la page sur laquelle vous travaillez.

Ajouter une nouvelle ligne

Structure des colonnes

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

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Le premier module dont nous avons besoin dans cette rangée est un module de texte avec du contenu H2.

Paramètres de texte H2

Passez à l'onglet Conception et modifiez les paramètres de texte H2.

• Police du titre 2 : affichage Playfair
• En-tête 2 Poids de la police : régulier
• En-tête 2 Alignement du texte : Centre
• Titre 2 Taille du texte : 70 px (ordinateur de bureau), 40 px (tablette), 30 px (téléphone)

Ajouter un module diviseur à la colonne

Visibilité

Le deuxième et dernier module dont nous avons besoin dans cette rangée est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Nous modifions également la couleur de la ligne dans l'onglet Conception.

• Couleur de la ligne : #000000

Dimensionnement

Passez aux paramètres de dimensionnement et appliquez les paramètres suivants :

• Poids du diviseur : 5px
• Largeur : 27%
• Alignement du module : Centre

Ajouter la section #2

Couleur de l'arrière plan

Ajoutez la deuxième section normale à votre page, ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #f7f7f7

Débordement

Assurez-vous de masquer également le débordement de section dans l'onglet avancé. Cela garantira que rien ne dépasse le conteneur de section.

• Débordement horizontal : masqué
• Débordement vertical : caché

Transitions

Plus tard dans cet article, nous créerons une transition de survol. Pour nous assurer que cela se passe bien, nous allons augmenter la durée de transition dans l'onglet avancé.

• Durée de transition : 800 ms

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et autorisez la ligne à occuper toute la largeur du conteneur de section en appliquant les paramètres suivants :

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

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H3

Il est temps de commencer à ajouter des modules, en commençant par un module de texte. Saisissez du contenu H3 de votre choix.

Paramètres de texte H3

Passez à l'onglet Conception et modifiez les paramètres de texte H3.

• Police de l'en-tête 3 : affichage Playfair
• Titre 3 Alignement du texte : Centre
• Titre 3 Couleur du texte : #000000
• Titre 3 Taille du texte : 3vw (ordinateur de bureau), 6vw (tablette), 7vw (téléphone)

Ajouter un module diviseur à la colonne

Visibilité

Le deuxième module dont nous avons besoin dans cette rangée est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Changez également la couleur du séparateur.

• Couleur de la ligne : #000000

Espacement

Et ajoutez une marge supérieure et inférieure personnalisée pour créer de l'espace.

• Marge supérieure : 2vw
• Marge inférieure : 2vw

Ajouter un module de texte à la colonne

Ajouter du contenu

Le prochain module dont nous avons besoin est un autre module de texte. Ajoutez du contenu de paragraphe de votre choix.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres du texte.

• Police de texte : Open Sans
• Alignement du texte : Centre
• Couleur du texte : #777777
• Taille du texte : 0.8vw (ordinateur de bureau), 1.7vw (tablette), 2.2vw (téléphone)
• Hauteur de la ligne de texte : 1,8 em

Espacement

Ajoutez ensuite des valeurs de marge personnalisées.

• Marge de gauche : 3vw (ordinateur de bureau), 7vw (tablette), 10vw (téléphone)
• Marge droite : 3vw (ordinateur de bureau), 7vw (tablette et téléphone)

Ajouter un module de bouton à la colonne

Ajouter une copie

Le prochain et dernier module dont nous avons besoin dans cette rangée est un module de bouton. Entrez une copie de votre choix.

Alignement

Modifiez l'alignement des boutons dans l'onglet Conception.

• Alignement des boutons : Centre

Paramètres des boutons

Continuez en stylisant les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #000000
• Largeur de la bordure du bouton : 1px
• Rayon de la bordure du bouton : 0px
• Police des boutons : Affichage Playfair

Espacement

Et ajoutez également des valeurs d'espacement personnalisées.

• Marge supérieure : 2vw
• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw
• Rembourrage gauche : 3vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)

Paramètres de section supplémentaires

Séparateur supérieur par défaut

Une fois que vous avez terminé d'ajouter tous les modules à la section, il est temps de passer en revue certains paramètres de section supplémentaires. Ouvrez les paramètres de la section, accédez à l'onglet Conception et ajoutez le séparateur supérieur suivant :

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #e8e8e8
• Hauteur du diviseur : 7000px
• Basculement du diviseur : vertical
• Disposition des diviseurs : au-dessus du contenu de la section

Survolez le diviseur supérieur

Modifiez la hauteur du diviseur en survol.

• Hauteur du diviseur : 0px

Diviseur inférieur

Ajoutez également un séparateur inférieur.

• Style de séparation : rechercher dans la liste
• Couleur du diviseur : #5c26ff
• Hauteur du diviseur : 600px
• Disposition des séparateurs : au-dessus du contenu de la section

Diviseur inférieur de vol stationnaire

Et retirez la hauteur du diviseur en vol stationnaire.

• Hauteur du diviseur : 0px

Espacement

Comme vous pouvez le remarquer dans l'aperçu de cet article, nous tournons cette section dans un cercle. Pour ce faire, nous devons d'abord ajouter des valeurs de marge et de remplissage personnalisées sur différentes tailles d'écran :

• Marge de gauche : 10vw (ordinateur de bureau), 11vw (tablette), 0vw (téléphone)
• Marge droite : 47vw (ordinateur de bureau), 11vw (tablette), 0vw (téléphone)
• Rembourrage supérieur : 8vw (ordinateur de bureau), 15vw (tablette), 16vw (téléphone)
• Rembourrage inférieur : 8vw (ordinateur de bureau), 15vw (tablette), 16vw (téléphone)

Frontière

Continuez en ajoutant « 50vw » à chacun des coins pour transformer la section en cercle. Nous ajoutons également une bordure à l'aide des paramètres suivants :

• Largeur de la bordure : 1px
• Couleur de la bordure : rgba(255,255,255,0)

Bordure de survol

Changez la couleur de la bordure au survol.

• Couleur de la bordure : #000000

Cloner la section deux fois

Une fois que vous avez terminé tous les paramètres de section, vous pouvez continuer et cloner la section deux fois.

Modifier le doublon #1

Changer la couleur du séparateur supérieur

Nous allons modifier les deux doublons de section, en commençant par le premier. Ouvrez les paramètres de la section et modifiez la couleur du séparateur supérieur.

• Couleur du diviseur : #5c26ff

Changer la couleur du séparateur inférieur

Modifiez également la couleur du séparateur inférieur.

• Couleur du séparateur : #ff3a5e

Changer l'espacement

Ensuite, accédez aux paramètres d'espacement et assurez-vous que les valeurs suivantes s'appliquent :

• Marge supérieure : -20vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Marge de gauche : 47vw (ordinateur de bureau), 11vw (tablette), 0vw (téléphone)
• Marge droite : 10vw (ordinateur de bureau), 11vw (tablette), 0vw (téléphone)

Modifier le doublon #2

Changer la couleur du séparateur supérieur

Ouvrez les paramètres du deuxième doublon et modifiez la couleur du séparateur supérieur.

• Couleur du séparateur : #ff3a5e

Changer la couleur du séparateur inférieur

Changez également la couleur du séparateur inférieur.

• Couleur du séparateur : #e8e8e8

Changer l'espacement

Et modifiez les valeurs d'espacement ici aussi.

• Marge supérieure : -20vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Marge inférieure : 7vw
• Marge de gauche : 10vw (ordinateur de bureau), 11vw (tablette), 0vw (téléphone)
• Marge droite : 47vw (ordinateur de bureau), 11vw (tablette), 0vw (téléphone)

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment masquer élégamment votre copie sous les séparateurs de sections. C'est un excellent moyen d'utiliser certaines des options intégrées intuitives de Divi d'une autre manière que vous n'en avez l'habitude. Nous espérons que ce didacticiel vous inspirera pour créer vos propres conceptions alternatives en utilisant également cette technique. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.