skip to Main Content

Comment garder les modules fixes dans leur conteneur de colonne avec 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é ]

Lorsque vous affichez plusieurs appels à l’action sur votre page, il peut être utile de créer un effet de défilement interactif qui unit différents éléments. Une solution consiste à transformer les modules en éléments fixes pendant leur déplacement dans leur conteneur de colonnes. Dans le tutoriel d’aujourd’hui, nous allons vous montrer comment créer un beau design qui gère cette technique. Vous pourrez également télécharger le fichier JSON gratuitement!

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un dernier regard sur le résultat obtenu avec différentes tailles d’écran.

Commençons à recréer!

Ajouter une nouvelle section

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez.

Espacement

Ouvrez les paramètres de section et modifiez les marges inférieure et supérieure pour différentes tailles d’écran.

  • Rembourrage en haut: 7vw (bureau), 10vw (tablette), 15vw (téléphone)
  • Rembourrage en bas: 20vw (bureau), 7vw (tablette), 10vw (téléphone)

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 la ligne et laissez-la occuper toute la largeur de la section. Il est également très important  d’activer l’option ‘Equalize Column Heights’. En faisant cela, vous créerez dans les colonnes un espace vide qui permettra aux modules fixes de se déplacer librement tout en faisant défiler la page.

  • Utiliser une largeur de gouttière personnalisée: Oui
  • Largeur de gouttière: 1
  • Égaliser les hauteurs de colonne: Oui
  • Largeur: 100%
  • Largeur maximale: 100%

Colonne 2 Rembourrage Supérieur

Ouvrez ensuite les paramètres de la colonne 2 et ajoutez un peu de remplissage supérieur sur le bureau.

  • Rembourrage supérieur: 20vw (bureau), 0vw (tablette et téléphone)

Colonne 3 Rembourrage Supérieur

Ajoutez également une valeur de remplissage supérieure personnalisée à la troisième colonne.

  • Meilleur rembourrage: 40vw (bureau), 0vw (tablette et téléphone)

Colonne 4 Rembourrage Supérieur

Et complétez les paramètres de la ligne en ajoutant également une valeur de remplissage supérieure à la colonne 4.

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]

  • Rembourrage supérieur: 60vw (bureau), 0vw (tablette et téléphone)
conteneur de colonne

Ajouter CTA à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules! Le premier module dont nous avons besoin dans la colonne 1 est un module CTA (Appel à l’action). Insérez du contenu de votre choix.

Lien

Ajoutez également un lien au bouton. Cela permettra au bouton de s’afficher dans la conception.

  • URL du lien du bouton: #

Couleur de l’arrière plan

Changer la couleur de fond du module ensuite.

  • Couleur de fond: #ffffff

Paramètres du texte

Passez à l’onglet Conception et modifiez les paramètres de texte généraux.

  • Alignement du texte: centre
  • Couleur du texte: foncé

Paramètres du texte du titre

Modifiez également les paramètres du texte du titre.

  • Titre Titre Niveau: H3
  • Titre du texte: Spectral
  • Titre du texte couleur: # 000000
  • Titre du texte Taille: 2vw (bureau), 4vw (tablette), 6vw (téléphone)

Paramètres du corps du texte

Avec les paramètres du corps du texte.

  • Body Font: Fira Sans
  • Poids de la police: Léger
  • Corps de couleur du texte: # 000000
  • Taille du texte du corps: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Hauteur du corps: 1.8em

Paramètres du bouton

N’oubliez pas de styler le bouton de votre module CTA également.

  • 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 de fond du bouton: #444eff
  • Largeur de la bordure du bouton: 0px
  • Rayon de la bordure du bouton: 50vw
  • Button Font: Fira Sans
  • Rembourrage supérieur: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Rembourrage en bas: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Rembourrage gauche: 3vw (bureau), 7vw (tablette), 13vw (téléphone)
  • Rembourrage à droite: 3vw (bureau), 7vw (tablette), 13vw (téléphone)

Espacement

Ensuite, accédez aux paramètres d’espacement et ajoutez des marges intérieures et inférieures personnalisées.

  • Top Rembourrage: 8vw
  • Rembourrage inférieur: 8vw

Frontière

Ajoutez également des angles arrondis au module.

  • Coins arrondis: 1vw (tous les coins)

Boîte ombre

Terminez la conception du module en ajoutant une ombre de boîte subtile.

  • Ombre de la boîte Position horizontale: 10px
  • Box Shadow Blur Force: 50px
  • Couleur de l’ombre: rgba (0,0,0,0,08)

Classe CSS

Maintenant, pour que l’effet collant de défilement fonctionne, nous allons devoir ajouter quelques lignes de code CSS à la fin de ce didacticiel. En guise de préparation, nous allons ajouter une classe CSS au module CTA.

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 ]

  • Classe CSS: sticky-cta

Ajouter un module d’image à la colonne 1

Upload Image

Passons au prochain et dernier module dont nous avons besoin dans la colonne 1, qui est un module d’image. Téléchargez une image PNG de votre choix.

Alignement

Changer l’alignement de l’image ensuite.

  • Alignement D’image: Centre

Dimensionnement

Assurez-vous de forcer la pleine largeur sur le module aussi.

  • Force Fullwidth: Oui

Espacement

Complétez les paramètres du module en accédant aux paramètres d’espacement et en ajoutant des valeurs d’espacement personnalisées pour différentes tailles d’écran.

  • Marge supérieure: -5vw (tablette et téléphone)
  • Marge inférieure: -12vw (bureau), 5vw (tablette et téléphone)
  • Rembourrage gauche: 3vw (bureau), 10vw (tablette), 25vw (téléphone)
  • Rembourrage à droite: 3vw (bureau), 10vw (tablette), 25vw (téléphone)

Clonez les deux modules trois fois et placez les colonnes restantes

Une fois que vous avez terminé les deux modules de la colonne 1, vous pouvez les dupliquer trois fois et placer les doublons dans les colonnes restantes de la ligne.

conteneur de colonne

Change Images

Assurez-vous de changer l’image dans chaque module d’image dupliqué.

Changer le contenu du CTA et les couleurs de fond des boutons

Modifiez également le contenu CTA avec les couleurs d’arrière-plan du bouton.

  • CTA Module #2: #89ffb4
  • CTA Module #3: #ff89f1
  • CTA Module #4: #ffd389

Ajouter une classe CSS aux modules d’image dans les colonnes 1, 2 et 3

Maintenant, pour vous assurer que l’effet collant fonctionne également sur les images, nous devrons ajouter une classe CSS aux modules d’image des colonnes 1, 2 et 3.

  • Classe CSS: sticky-image

Ajouter la ligne 2

Structure de colonne

Il ne reste plus qu’à ajouter le code CSS. Pour ce faire, ajoutez une nouvelle ligne.

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]

Ajouter un module de code avec du code CSS

Ajoutez un module de code à la ligne, insérez le code CSS ci-dessous et vous avez terminé!

<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>

Aperçu

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

conteneur de colonne

Dernières pensées

Dans cet article, nous vous avons montré comment garder les modules fixes dans leur conteneur de colonnes. L’utilisation de cette technique peut générer des effets de défilement époustouflants vous permettant de mettre en valeur les différents appels à l’action sur votre page. Vous avez également pu télécharger le fichier JSON gratuitement! 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