skip to Main Content

Comment créer une belle section en collision de colonnes sur Divi

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

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

Avec plus de 901.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é ]

Les effets de défilement de Divi apportent une tonne de nouvelles possibilités de conception aux sites Web que vous créez. Les interactions subtiles que vous choisissez d’ajouter peuvent vraiment aider à rehausser l’aspect général de votre site Web. Tout devient encore meilleur dès que vous synchronisez les effets de défilement. Dans ce tutoriel, nous allons spécifiquement gérer la création d’une belle section de héros en collision avec des colonnes sur le défilement. La conception de la section des héros fusionne deux colonnes différentes sur le défilement, ce qui contribue à son tour à souligner la copie. 

Résultat Possible

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

Collision de section divi

Recréer la disposition de la section Hero Section

Ajouter une nouvelle section

Personnalisation de la couleur de l’arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et modifiez la couleur d’arrière-plan.

  • Couleur d’arrière-plan: # f4f2f7
Configuration section divi

Espacement

Supprimez également le rembourrage supérieur et inférieur par défaut de toutes les sections.

  • Rembourrage supérieur: 0px
  • Rembourrage inférieur: 0px
Configuration espacement divi

Ajouter une nouvelle ligne

Structure de colonne

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

Mise en page des colonnes divi

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence:

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Égaliser les hauteurs de colonne: Oui
  • Largeur: 100%
  • Largeur max: 100%
Configuration espacement divi ligne

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

  • Rembourrage supérieur: 0px
  • Rembourrage inférieur: 0px
Espacement ligne divi

Débordements

Et cachez les débordements de la rangée.

  • Débordement horizontal: caché
  • Débordement vertical: caché
Configuration ligne visibilité divi

Paramètres de la colonne 1

Espacement

Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez des valeurs de remplissage personnalisées.

  • Rembourrage supérieur: 15vw
  • Rembourrage inférieur: 10vw
  • Rembourrage gauche: 5vw
  • Rembourrage droit: 5vw
Configuration espacement colonne ligne divi

Index Z

Augmentez également l’index z de la colonne.

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 ]

  • Index Z: 12
Position relative divi

Paramètres de la colonne 2

Image de fond

Continuez en ouvrant les paramètres de la colonne 2 et téléchargez une image d’arrière-plan de votre choix.

  • Taille de l’image d’arrière-plan: Couverture
  • Position de l’image d’arrière-plan: Centre
  • Répétition de l’image d’arrière-plan: aucune répétition
  • Mélange d’images d’arrière-plan: Normal
Arriere plan colonne divi

Ajouter le module de texte n ° 1 à la colonne 1

Ajouter du contenu H1

Il est temps d’ajouter des modules, en commençant par un premier module de texte dans la colonne 1. Ajoutez du contenu H1 de votre choix.

Freelance assistance divi

Paramètres de texte H1

Passez à l’onglet de conception du module et modifiez les paramètres de texte H1 en conséquence:

  • Police de titre: Ombres en lumière
  • Poids de la police de titre: gras
  • Couleur du texte de l’en-tête: # 000000
  • Taille du texte de l’en-tête: 6vw (bureau), 11vw (tablette), 13vw (téléphone)
  • Espacement des lettres d’en-tête: -2px
  • Hauteur de la ligne de tête: 1.2em
Configuration police divi

Espacement

Ajoutez également une marge supérieure.

  • Marge supérieure: 10vw
Configuration espacement texte

Ajouter le module de texte n ° 2 à la colonne 1

Ajouter du contenu

Insérez un autre module de texte avec un contenu de description de votre choix.

Ajouter une texte colonne 1 divi

Paramètres de texte

Modifiez les paramètres de texte du module comme suit:

  • Police du texte: Open Sans
  • Couleur du texte: # 1e1e1e
  • Taille du texte: 0.9vw (bureau), 1.9vw (tablette), 3vw (téléphone)
  • Hauteur de la ligne de texte: 2,4 em
Personnalisation police texte divi

Espacement

Et ajoutez des valeurs de marge personnalisées sur différentes tailles d’écran.

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]

  • Marge supérieure: 4vw (bureau), 8vw (tablette), 12vw (téléphone)
  • Marge inférieure: 4vw (bureau), 8vw (tablette), 12vw (téléphone)
Configuration espacement divi texte

Ajouter un module de boutons à la colonne 1

Ajouter une copie

Le module suivant et dernier dont nous avons besoin dans cette colonne est un module de bouton. Ajoutez une copie de votre choix.

Ajouter un module bouton divi

Paramètres des boutons

Modifiez les paramètres des boutons du module comme suit:

  • Utiliser des styles personnalisés pour le bouton: Oui
  • Taille du texte du bouton: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # 000000
  • Largeur de bordure de bouton: 0px
  • Rayon de bordure du bouton: 100px
Custom style button divi
  • Police du bouton: Ouvrir sans
Reglages parametre bouton police

Espacement

Et complétez les paramètres des boutons en ajoutant des valeurs de remplissage personnalisées sur différentes tailles d’écran.

  • Rembourrage supérieur: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Rembourrage inférieur: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Rembourrage gauche: 3vw (bureau), 5vw (tablette), 7vw (téléphone)
  • Rembourrage droit: 3vw (bureau), 5vw (tablette), 7vw (téléphone)
Espacement bouton divi

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Dans la deuxième colonne, le seul module dont nous aurons besoin est un module de texte. Saisissez le contenu de votre choix.

Texte colonne 2 divi

Paramètres de texte

Passez à l’onglet de conception du module et modifiez les paramètres de texte en conséquence:

  • Police du texte: des ombres dans la lumière
  • Couleur du texte: rgba (0,0,0,0,25)
  • Taille du texte: 9vw (bureau), 14vw (tablette et téléphone)
  • Espacement des lettres de texte: -3px
  • Hauteur de la ligne de texte: 1em
  • Alignement du texte: centre (bureau), gauche (tablette et téléphone)
Jane doe texte colonne 2 divi

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

  • Rembourrage supérieur: 5vw (bureau),
  • Rembourrage inférieur: 60vw (tablette et téléphone)
  • Rembourrage gauche: 5vw (tablette et téléphone)
Espacement texte divi

Appliquer des animations de défilement

Section

Montée et descente

Une fois tous vos modules en place, il est temps d’appliquer les effets de défilement ! Ouvrez d’abord les paramètres de section et utilisez l’effet d’échelle suivant:

  • Activer Sclaing de haut en bas
  • Échelle de départ: 100% (à 49%)
  • Échelle moyenne:
    • Bureau: 70% (à 100%)
    • Tablette et téléphone: 100% (à 100%)
  • Échelle de fin:
    • Bureau: 70%
    • Tablette et téléphone: 100%
Scroll effect animation divi

Colonne 1

Mouvement horizontal

Continuez en ouvrant les paramètres de la colonne 1 et utilisez l’effet de mouvement horizontal suivant:

  • Activer le mouvement horizontal: Oui
  • Décalage de départ: 0
  • Décalage moyen:
    • Bureau: 0 (à 65%)
    • Tablette et téléphone: 0 (à 93%)
  • Décalage de fin:
    • Bureau: 6
    • Tablette et téléphone: 0
Alignement horizontal divi

Montée et descente

Appliquez également un effet d’échelle vers le haut et vers le bas à la colonne.

  • Activer la mise à l’échelle vers le haut et vers le bas: Oui
  • Échelle de départ:
    • Bureau: 10%
    • Tablette et téléphone: 100%
  • Échelle moyenne:
    • Bureau: 90%
    • Tablette et téléphone: 100%
  • Échelle de fin: 100%
section de héros en collision de colonnes

Colonne 2

Mouvement horizontal

Ensuite, ouvrez les paramètres de la colonne 2 et utilisez les paramètres de mouvement horizontal suivants:

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. [Recommandé]

  • Activer le mouvement horizontal: Oui
  • Décalage de départ: 0
  • Décalage moyen:
    • Bureau: 0 (à 53%)
    • Tablette et téléphone: 0 (à 56%)
  • Décalage de fin:
    • Bureau: -6 (à 53%)
    • Tablette et téléphone: 0 (à 100%)
Animation horizontale divi

Fondu entrant et sortant

Complétez les paramètres de la colonne en ajoutant un effet de fondu d’entrée et de sortie.

  • Activer le fondu entrant et sortant: Oui
  • Opacité de départ: 100% (à 47%)
  • Opacité moyenne:
    • Bureau: 0% (à 47%)
    • Tablette et téléphone: 100% (à 47%)
  • Fin de l’opacité:
    • Bureau: 0%
    • Tablette et téléphone: 100%
Motion animation divi

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser de manière créative les effets de défilement de Divi pour créer une section de héros en collision de colonnes. Dès que les visiteurs défilent, les deux colonnes différentes et leurs éléments commencent à fusionner. Ceci, à son tour, vous permettra de souligner encore plus la copie.

Autres Ressources

Voici une liste de contenu qui vous permettrons d’en faire plus avec votre thème WordPress Divi.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse e-mail 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
996 Partages
Partagez996
Tweetez
Enregistrer