Téléchargez une mise en page de témoignage de mouvement GRATUITE pour Divi

Ce n'est un secret pour personne que les témoignages sont un élément crucial de nombreuses entreprises et de leur site Web. Ils ajoutent un sentiment de crédibilité aux services que vous fournissez ou aux produits que vous proposez. Porter une attention particulière à la façon dont vous affichez vos témoignages est souvent payant. Avec Divi, il existe de nombreuses façons de styliser votre section de témoignages, il existe même un module de témoignages qui lui est dédié. Cependant, si vous cherchez un moyen unique d'ajouter de l'interaction à vos témoignages, vous adorerez cet article. Nous partageons une belle mise en page de témoignage de mouvement personnalisée construite avec les nouveaux effets de défilement de Divi. Nous allons également recréer le design étape par étape !

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 témoignage de Motion

Pour mettre la main sur la mise en page du témoignage en mouvement libre, 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 une nouvelle section

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 changez la couleur d'arrière-plan en noir.

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

Espacement

Passez à l'onglet de conception de la section et ajoutez des rembourrages haut et bas personnalisés sur différentes tailles d'écran.

• Rembourrage supérieur : 10 % (ordinateur de bureau), 20 % (tablette), 30 % (téléphone)
• Rembourrage inférieur : 10 % (ordinateur de bureau), 20 % (tablette), 30 % (téléphone)

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une première 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 la colonne de cette ligne est un module de texte avec du contenu H2.

Paramètres de texte H2

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

• Police de titre 2 : Questrial
• En-tête 2 Alignement du texte : Centre
• Titre 2 Taille du texte : 85 px (ordinateur de bureau), 45 px (tablette), 35 px (téléphone)
• Espacement des lettres de l'en-tête 2 : 2px
• Titre 2 Hauteur de ligne : 1,1 em

Ajouter un module diviseur à la colonne

Visibilité

Ensuite, ajoutez un module de séparation juste en dessous du module de texte et assurez-vous que l'option "Afficher le séparateur" est activée.

• Afficher le diviseur : Oui

Paramètres de ligne

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

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

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Poids du diviseur : 14px
• Largeur : 13 % (ordinateur de bureau), 20 % (tablette), 30 % (téléphone)
• Alignement du module : Centre

Ajouter la ligne n° 2

Structure des colonnes

Au rang suivant ! Cette ligne sera dédiée à notre premier témoignage. Utilisez la structure de colonnes suivante :

Image d'arrière-plan du bureau

Ensuite, téléchargez l'image d'arrière-plan du bureau bleu que vous pouvez trouver dans le dossier de téléchargement que vous avez pu télécharger au début de cet article.

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

Image d'arrière-plan de la tablette et du téléphone

Nous utilisons une version pivotée de l'image d'arrière-plan bleue sur des écrans plus petits. Vous pouvez également trouver cette image de fond dans le dossier de téléchargement.

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

Dimensionnement

Passez à l'onglet de conception de la ligne et modifiez la largeur maximale dans les paramètres de dimensionnement.

• Largeur maximale : 2000px

Espacement

Apportez également quelques modifications aux paramètres d'espacement.

• Marge supérieure : 100 pixels
• Rembourrage supérieur : 15 %
• Rembourrage inférieur : 15 %

Effet de défilement de mouvement horizontal

Ensuite, allez dans l'onglet avancé et activez un mouvement horizontal dans les effets de défilement.

• Activer le mouvement horizontal : Oui
• Décalage de départ : -4
• Décalage moyen : 0 (à 50 %)
• Décalage de fin : 0
• Déclencheur d'effet de mouvement : haut de l'élément

Effet de défilement d'entrée et de sortie en fondu

Nous ajouterons également un effet de défilement de fondu d'entrée et de sortie personnalisé.

• Activer les fondus entrants et sortants : Oui
• Opacité de départ : 0% (à 19%)
• Opacité moyenne : 100 % (de 25 % à 88 %)
• Opacité finale : 0% (à 93%)
• Effet de déclenchement de mouvement : haut de l'élément

Ajouter un module de texte à la colonne

Ajouter du contenu

Le premier module dont nous avons besoin dans cette ligne est un module de texte. Placez le contenu du témoignage dans la zone de contenu.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : questrial
• Poids de la police de texte : gras
• Couleur du texte : #ffffff
• Taille du texte : 50 px (ordinateur de bureau), 30 px (tablette), 25 px (téléphone)
• Hauteur de la ligne de texte : 1,5 em
• Alignement du texte : Centre

Dimensionnement

Ensuite, modifiez la largeur sur différentes tailles d'écran dans l'onglet Conception.

• Largeur : 63 % (ordinateur de bureau), 100 % (tablette et téléphone)
• Alignement du module : Centre

Ajouter un module de personne à la colonne

Ajouter du contenu

Passons au module suivant, qui est un module Personne. Ajoutez le nom, la position et les liens vers les réseaux sociaux.

Télécharger une image

Téléchargez ensuite une image carrée de votre choix.

Paramètres des icônes

Passez à l'onglet Conception et modifiez la couleur de l'icône dans les paramètres de l'icône.

• Couleur de l'icône : #2b302e

Image

Transformez l'image en cercle en ajoutant des coins arrondis.

• Tous les coins : 100px

Paramètres du texte du titre

Ensuite, modifiez les paramètres du texte du titre comme suit :

• Police du titre : Questrial
• Poids de la police du titre : gras
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 24 px

Paramètres du corps du texte

Apportez également quelques modifications aux paramètres du corps du texte.

• Police du corps : Questrial
• Couleur du corps du texte : #ffffff
• Taille du corps du texte : 15px

Paramètres de texte de position

Nous modifions également les paramètres du texte de position.

• Police de position : Questrial
• Couleur du texte du poste : #1b66ff
• Taille du texte de la position : 17px

Dimensionnement

Avec la largeur sur différentes tailles d'écran.

• Largeur : 25 % (ordinateur de bureau), 100 % (tablette et téléphone)
• Alignement du module : Centre

Espacement

Accédez ensuite aux paramètres d'espacement et ajoutez une marge supérieure.

• Marge supérieure : 100 pixels

Élément principal

Pour nous assurer que tout le contenu est aligné dans notre module Personne, nous allons accéder à l'onglet avancé et ajouter deux lignes de code CSS à l'élément principal du module.

display: flex;
align-items: center;

Image du membre

Nous utiliserons également une largeur personnalisée pour l'élément d'image de membre sur des tailles d'écran plus petites.

Tablette:

width: 20% !important;

Téléphone:

width: 30% !important;
margin-right: 5%;

Cloner la ligne n° 2

Une fois que vous avez terminé la ligne contenant le témoignage, vous pouvez cloner la ligne entière une fois.

Changer les images d'arrière-plan de la ligne

Nous devrons apporter quelques modifications à cette ligne en double, en commençant par les images d'arrière-plan sur le bureau et les tailles d'écran plus petites. Vous pouvez trouver les versions rouges des images d'arrière-plan dans le dossier de téléchargement.

Modifier l'espacement des lignes

Ajoutez une marge supérieure négative à la ligne suivante.

• Marge supérieure : -15%

Changer la couleur du texte de la position du module de personne

Et complétez les paramètres de ligne en double en modifiant la couleur du texte de position dans les paramètres du module Personne.

• Couleur du texte du poste : #ff233e

Cloner la dernière ligne

Une fois que vous avez terminé la ligne de témoignage en double, vous pouvez la cloner.

Changer les images d'arrière-plan de la ligne

Modifiez les images d'arrière-plan de la ligne en utilisant les versions jaunes que vous pouvez trouver dans le dossier de téléchargement.

Changer les couleurs du texte de la position du module de personne

Modifiez également la couleur du texte de position dans les paramètres du module Personne et vous avez terminé !

• Couleur du texte du poste : #ffbc1b

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 avons partagé une belle mise en page de témoignage de mouvement que vous avez pu télécharger gratuitement ! Nous avons utilisé des arrière-plans personnalisés et avons pu mettre en évidence chaque témoignage avec les effets de défilement de Divi. Nous avons également recréé le design, étape par étape ! 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.