Comment créer du texte et des images qui changent au défilement dans Divi

Les effets de défilement Divi sont parfaits pour créer des mises en page intéressantes. Nous en avons publié pas mal depuis le lancement de la fonctionnalité. Dans ce didacticiel, nous allons vous montrer comment créer une mise en page avec du texte et des images qui changent au défilement. Cette conception peut être utilisée pour une page de services ou tout type de page dont vous avez besoin. Nous l'avons gardé propre et simple pour que l'effet de défilement soit à l'honneur.

Vous pouvez télécharger la mise en page sous forme de fichier JSON ou la recréer sur votre propre site Web Divi.

Commençons.

Aperçu

Avant de commencer, examinons la disposition sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la section Texte et images qui changent au défilement

Pour mettre la main sur la section gratuite avec du texte et des images qui changent au défilement, 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 !

Recréer une section avec du texte et des images qui changent au défilement

Ajouter une nouvelle section

Fond

Pour commencer à recréer le design, ajoutez une nouvelle section sur une page nouvelle ou existante. Ajoutez les images d'arrière-plan que nous avons fournies dans le téléchargement ci-dessus.

• Image d'arrière-plan : conception de la boîte et des points
  • Bureau : Image 1
  • Tablette : Image 2
  • Téléphone : Image 3
• Taille de l'image : couverture
• Répétition de l'image d'arrière-plan : Répéter Y (vertical)

Espacement

Ajoutez de l'espacement à la section.

• Rembourrage supérieur et inférieur : 30 %

Visibilité

Cachez également les débordements.

• Débordement horizontal et vertical : masqué

Ajouter une nouvelle ligne

Visibilité

Ajoutez maintenant une première ligne et ajustez les paramètres de visibilité dans l'onglet avancé.

• Horizontale : masquée
• Débordement vertical : par défaut

Ajouter un module de texte

Texte

Ajoutez un premier module de texte pour le titre. Insérez du contenu H1 de votre choix.

• Corps : Contenu H1 - Équipe de production

Texte d'en-tête

Passez à l'onglet Conception et stylisez le texte du titre.

• Niveau de titre : H1
• Police : Fredoke One
• Poids : gras
• La couleur noire
• Taille
  • Bureau : 100 pixels
  • Tablette : 75 pixels
  • Téléphone : 33px
• L'espacement des lettres
  • Bureau : 4px
  • Tablette : 3px
  • Téléphone : 2px

Dimensionnement

Ensuite, ajustez la largeur.

• Largeur : 100 %

Ajouter une nouvelle ligne

Dimensionnement

Ajoutez maintenant une deuxième ligne et ajustez les paramètres de dimensionnement en conséquence :

• Largeur: 80%
• Largeur maximale : 1000px

Visibilité

Cachez également les débordements.

• Débordements horizontaux et verticaux : masqués

Ajouter le 1er module de texte

Texte

Ajoutez un autre module de texte. Cette fois, entrez du contenu H2 de votre choix.

• Corps : Contenu H2 – Photographie de décor

Texte d'en-tête

Stylisez ensuite le titre.

• Niveau de titre : H2
• Poids : gras
• Style: TT
• Couleur : Noir #000000
• Taille
  • Bureau : 50px
  • Tablette : 40 pixels
  • Téléphone : 28px
• Espacement des lettres : 3px

Espacement

Définissez également un espacement pour le module.

• Marge supérieure et inférieure : 0px

Effets de défilement

Complétez les paramètres du module en ajoutant les effets de défilement suivants :

• Fondu d'entrée et de sortie : Activer
• Bas de la fenêtre
  • Poste : 42 %
  • Opacité de départ : 0%
• Opacité moyenne
  • Position du bas : 43 %
  • Première position : 53 %
  • Opacité moyenne : 100 %
• Haut de la fenêtre
  • Poste : 54 %
  • Opacité finale : 0%

Dupliquer le module de texte deux fois

Clonez le module de texte deux fois.

Ajuster le 2e module de texte

Texte

Modifiez le contenu dans le nouveau module de texte.

• Corps : Contenu H2 – Direction artistique

Position

Ajoutez également un positionnement absolu au module.

• Position : Absolu
• Emplacement : en haut à gauche

Effets de défilement

Ensuite, mettez à jour les paramètres de l'effet de défilement.

• Fondu d'entrée et de sortie : Activer
• Bas de la fenêtre
  • Poste : 56 %
  • Opacité de départ : 0%
• Opacité moyenne
• Dernière position : 57 %
• Première position : 67 %
• Opacité moyenne : 100 %
• Haut de la fenêtre
  • • Poste : 68 %
    • Opacité finale : 0%

  

Ajuster le 3e module de texte

Texte

Ajustez maintenant le deuxième duplicata du module de texte. Modifiez d'abord le contenu.

• Corps : Contenu H2 - Accessoires et garde-robe

Position

Ajoutez ensuite une position absolue.

• Position : Absolu
• Emplacement : en haut à gauche

Effets de défilement

Ensuite, modifiez les effets de défilement.

• Fondu d'entrée et de sortie : Activer
• Bas de la fenêtre
  • Poste : 70 %
  • Opacité de départ : 0%
• Opacité moyenne
  • Position du bas : 71 %
  • Première position : 80 %
  • Opacité moyenne : 100 %
• Haut de la fenêtre
  • Poste : 81 %
  • Opacité finale : 0%

Ajouter un module d'images

Image

Il est maintenant temps d'ajouter un module d'image. Utilisez une image carrée avec une taille d'image de 350 x 350 px.

• Image : Image carrée 350 x 350 px

Alignement

Réglez l'alignement à gauche.

• Alignement de l'image : à gauche

Espacement

Ajustez également l'espacement.

• Afficher l'espace sous l'image : Non
• Marge supérieure : -60px

Filtres

Ensuite, ajoutez un filtre pour rendre l'image désaturée.

• Saturation : 0%

Visibilité

Maintenant, passez à l'onglet avancé et définissez les débordements sur masqués.

• Débordement horizontal et vertical : masqué

Effets de défilement

Enfin, ajoutez un effet de défilement en fondu entrant et sortant.

• Fondu d'entrée et de sortie : Activer
• Bas de la fenêtre
  • Poste : 70 %
  • Opacité de départ : 0%
• Opacité moyenne
  • Poste : 71 %
  • Milieu : 100 %
• Haut de la fenêtre
  • Poste : 100 %
  • Opacité finale : 0%

Ajouter un module d'appel à l'action

Texte

Passons au module suivant, qui est un module d'appel à l'action. Incluez du contenu de votre choix.

• Titre : L'équipe artistique de Jason
• Bouton : Réserver l'équipe artistique de Jason
• Corps : Contenu descriptif

Relier

Ajoutez ensuite un lien.

• Lien : votre lien

Fond

Supprimez également la couleur d'arrière-plan par défaut.

• Utiliser la couleur d'arrière-plan : Non

Texte

Ensuite, réglez l'alignement vers la droite.

• Alignement du texte : à droite

Texte d'en-tête

Stylisez également le texte du titre.

• Niveau de titre : H3
• Police : Fredoke One
• Alignement du texte du titre : à gauche
• Couleur : Noir #oooooo
• Taille
  • Bureau : 48px
  • Tablette : 42px
  • Téléphone : 33px
• L'espacement des lettres
  • Ordinateur de bureau et tablette : 1px
  • Téléphone : 0px
• Hauteur de la ligne
  • Ordinateur de bureau et tablette : 1,6 em
  • Téléphone : 1.1em

Le corps du texte

Ensuite, le corps du texte.

• Police : Verdana
• Couleur : Noir #000000
• Taille: 14px
• Espacement des lettres : 0,5 pixels

Bouton

Ajustez également les styles de boutons.

• Styles personnalisés
• Taille du texte : 17 pixels
• Couleur du texte : Blanc #ffffff
• Fond : Noir # 000000
• Espacement des lettres : 1px
• Police : Verdana
• Marge supérieure : 20px
• Rembourrage haut et bas : 10px
• Rembourrage gauche et droit : 25px

Position

Passez à l'onglet avancé et modifiez les paramètres de position comme suit :

• Position : Relatif
• Origine du décalage : en haut à gauche
• Décalage horizontal : 25px

Visibilité

Ensuite, masquez les débordements.

• Débordement horizontal et vertical : masqué

Effets de défilement

Enfin, activez un effet de défilement en fondu entrant et sortant.

• Fondu d'entrée et de sortie : Activer
• Bas de la fenêtre
  • Poste : 54 %
  • Opacité de départ : 0%
• Opacité moyenne
  • Position du bas : 55 %
  • Première position : 80 %
  • Milieu : 100 %
• Haut de la fenêtre
  • Poste : 100 %
  • Opacité finale : 0%

Dupliquer la 2e rangée

Clonez la ligne avec tous ses modules.

Ajuster le 1er module de texte

Texte

Modifiez maintenant le contenu des modules de texte clonés. Commencez par le haut.

• Corps : Contenu H2 / Pré-production

Texte

Modifiez l'alignement à droite.

• Alignement du texte : à droite

Étendre l'alignement du texte

Appliquez l'alignement à tous les modules de texte clonés de la même ligne.

• Étendre l'alignement du texte : à tous les modules de texte de cette ligne

Ajuster le 2e module de texte

Texte

Mettez maintenant à jour le contenu dans le 2ème module de texte cloné.

• Corps : Contenu H2 / Production sur le plateau

Position

Modifiez également l'emplacement dans les paramètres de position.

• Emplacement : en haut à droite

Ajuster le 3e module de texte

Texte

Modifiez maintenant le contenu du 3ème module de texte cloné.

• Corps : Contenu H2 / Coordination entre les équipes

Position

Modifiez également l'emplacement dans les paramètres de position.

• Emplacement : en haut à droite

Ajuster le nouveau module d'image

Image

Ensuite, changez la photo dans le module image.

• Image : Nouvelle image 350 x 350 px

Alignement

Modifiez également l'alignement de l'image.

• Alignement de l'image : à droite

Ajuster le nouveau module d'appel à l'action

Texte

Ouvrez ensuite le module d'appel à l'action et modifiez tout le contenu.

• Titre : L'équipe de production d'Alice
• Bouton : Réserver l'équipe de production d'Alice
• Corps : nouveau contenu descriptif.

Relier

Changer le lien aussi.

• Lien : Nouveau lien

Texte

Modifiez également l'alignement.

• Alignement du texte : à gauche

Texte d'en-tête

Modifiez également l'alignement du texte du titre.

• Alignement du texte du titre : à gauche

Le corps du texte

Ainsi que le corps du texte.

• Alignement du corps du texte : à gauche

Dimensionnement

N'oubliez pas de modifier également l'alignement de l'ensemble du module dans les paramètres de dimensionnement.

• Alignement du module : à gauche

Position

Enfin, réinitialisez les paramètres de position par défaut et vous avez terminé !

• Position : Réinitialiser à la valeur par défaut

Aperçu

Jetons un dernier coup d'œil à la mise en page sur différentes tailles d'écran.

Bureau

Mobile

C'est une enveloppe pour la mise en page avec du texte et des images qui changent au défilement !

Nous avons fini de recréer le texte et les images qui changent au défilement. Nous avons pu obtenir cet effet grâce aux effets de défilement intégrés de Divi. Utilisez cette mise en page pour une page de services, une page à propos, une page de rencontre avec l'équipe ou tout ce que vous aimez ! Utilisez les arrière-plans fournis ou laissez l'arrière-plan blanc.

Faites-nous savoir ce que vous pensez dans les commentaires!