Téléchargez un carrousel GRATUIT des membres de l'équipe à défilement automatique réalisé avec les effets de défilement de Divi

Lors de la configuration de votre page à propos, vous souhaiterez probablement y inclure également les membres de votre équipe. Ce faisant, vous permettez aux visiteurs de se connecter avec les personnes derrière votre entreprise. Si vous cherchez un moyen d'animer la section des membres de votre équipe lors du défilement, vous adorerez ce didacticiel. Nous allons recréer un magnifique carrousel de membres d'équipe à défilement automatique qui se déplace au fur et à mesure que vos visiteurs font défiler la page. Vous pourrez également télécharger le fichier JSON gratuitement !

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 GRATUITEMENT la mise en page du carrousel des membres de l'équipe

Pour mettre la main sur la mise en page gratuite du carrousel des membres de l'équipe, vous devrez d'abord la télécharger en utilisant le 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 une nouvelle section

Espacement

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et ajoutez un rembourrage personnalisé sur différentes tailles d'écran.

• Rembourrage supérieur : 200 pixels (ordinateur de bureau), 100 pixels (tablette et téléphone)
• Rembourrage inférieur : 200 pixels (ordinateur de bureau), 100 pixels (tablette et téléphone)

Débordements

Pour nous assurer qu'aucune barre de défilement horizontale n'apparaît dans notre conception, nous masquerons les débordements de section dans l'onglet avancé.

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

Ajouter la ligne n° 1

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, passez à l'onglet conception et modifiez la largeur et la largeur maximale dans les paramètres de dimensionnement.

• Largeur: 90%
• Largeur maximale : 1580px

Espacement

Nous ajoutons également des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Il est temps d'ajouter des modules, en commençant par un premier module de texte. Entrez du contenu H2 de votre choix.

Paramètres de texte H2

Passez à l'onglet de conception du module et modifiez les paramètres de texte H2 comme suit :

• Police du titre 2 : Sables mouvants
• Titre 2 Poids de la police : semi-gras
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 70 px (ordinateur de bureau), 50 px (tablette), 40 px (téléphone)

Ajouter un module diviseur à la colonne

Visibilité

Ensuite, ajoutez un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Apportez ensuite quelques modifications aux paramètres de ligne.

• Couleur de la ligne : #edf000
• Style de ligne : solide
• Position de la ligne : Haut

Dimensionnement

Et complétez les paramètres du module en modifiant les paramètres de dimensionnement en conséquence :

• Poids du diviseur : 20px
• Largeur : 11%
• Alignement du module : à gauche
• Hauteur : 20px

Ajouter la ligne n° 2

Structure des colonnes

Au rang suivant ! Utilisez la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

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

Espacement

Ensuite, ajoutez un peu de rembourrage à gauche et à droite sur des écrans de plus petite taille uniquement.

• Rembourrage gauche : 5 % (tablette et téléphone uniquement)
• Rembourrage droit : 5 % (tablette et téléphone uniquement)

Paramètres de colonne (5x)

Maintenant, dans les trois prochaines étapes de ce didacticiel, nous allons apporter quelques modifications aux colonnes. Appliquez les trois étapes à chacune des colonnes de votre ligne.

Fond dégradé

Tout d'abord, ajoutez un fond dégradé à chaque colonne.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: rgba(0,0,0,0.84)
• Type de dégradé : Linéaire
• Position de départ : 25 %
• Position finale : 86 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Ensuite, téléchargez une image de fond de votre choix. Cette image d'arrière-plan représente chaque membre de l'équipe, utilisez donc une image différente pour chaque colonne.

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre

Élément principal

Complétez les paramètres de la colonne en ajoutant du CSS personnalisé à l'élément principal de la tablette de chaque colonne. Ces lignes de code CSS nous aideront à placer les colonnes les unes en dessous des autres sur la tablette, au lieu d'en avoir deux côte à côte.

width: 100% !important;
margin: 50px 0px 50px 0px !important;

Ajouter un module de personne à la colonne

Ajouter du contenu

Pour partager les informations sur les membres de l'équipe, nous utiliserons un module Personne. Ajoutez le premier module Person à la colonne 1 et utilisez le contenu de votre choix.

Supprimer l'image

Ensuite, supprimez l'image. Nous utilisons plutôt l'image d'arrière-plan de la colonne.

Image de fond

Nous ajouterons ensuite une superposition d'images comme image d'arrière-plan du module. Vous pouvez trouver celui que nous utilisons en téléchargeant le dossier au début de ce tutoriel.

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre

Paramètres du texte du titre

Passez à l'onglet de conception du module et modifiez les paramètres du texte du titre comme suit :

• Titre Titre Niveau : H3
• Police du titre : Quicksand
• Poids de la police du titre : gras
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 230%

Paramètres du corps du texte

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

• Police du corps : Open Sans
• Couleur du corps du texte : #ffffff
• Hauteur de la ligne du corps : 2,2 em

Paramètres de texte de position

Ensuite, apportez quelques modifications aux paramètres du texte de position.

• Police de position : Open Sans
• Couleur du texte du poste : #edf000

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de remplissage personnalisées aux paramètres d'espacement.

• Rembourrage supérieur : 70 %
• Rembourrage inférieur : 10 %
• Rembourrage gauche : 10 %
• Rembourrage droit : 10 %

Module Clone Personne 4x

Une fois que vous avez terminé le module Personne, vous pouvez cloner le module entier quatre fois.

Placer les doublons dans les colonnes restantes

Placez les modules en double dans les quatre colonnes restantes de la rangée. Assurez-vous également de modifier le contenu.

Transformez la rangée en carrousel à défilement automatique

Modifier la taille de la ligne n°2

Maintenant, pour transformer cette ligne en un carrousel de membres d'équipe à défilement automatique, nous devons rouvrir les paramètres de la ligne et modifier la largeur et la largeur maximale dans les paramètres de dimensionnement.

• Largeur : 180%
• Largeur maximale : 220 % (ordinateur de bureau), 100 % (tablette et téléphone)

Ajouter le mouvement horizontal de la rangée n° 2

Complétez les paramètres de ligne en ajoutant un mouvement horizontal aux paramètres d'effet de défilement dans l'onglet avancé et vous avez terminé !

• Activer le mouvement horizontal : Oui
• Décalage de départ :
  • Ordinateur de bureau : 2,5
  • Tablette et téléphone : 0
• Décalage moyen : 0 (à 40 %)
• Décalage de fin :
  • Ordinateur de bureau : -25 (à 62 %)
  • Tablette et téléphone : 0
• Déclencheur d'effet de mouvement : milieu de l'élément

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 faire preuve de créativité avec les effets de défilement intégrés de Divi. Plus précisément, nous avons recréé un magnifique carrousel de membres d'équipe à défilement automatique. Au fur et à mesure que les visiteurs font défiler la page, une autre partie du carrousel apparaît. 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 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.