Comment utiliser des formes de mouvement transformées comme arrière-plans avec Divi

Les nouveaux effets de défilement de Divi sont conçus pour que vous puissiez facilement faire passer votre expérience de conception Web au niveau supérieur. Bien sûr, vous pouvez l'appliquer directement aux éléments de votre section, mais vous pouvez également choisir d'ajouter du mouvement aux éléments sous-jacents. Opter pour une approche sous-jacente vous permet de garder le contenu statique tout en ayant un mouvement d'arrière-plan. Dans ce didacticiel, nous utiliserons des formes de mouvement transformées comme éléments sous-jacents pour créer une section animée. Nous traiterons deux exemples différents mais les possibilités sont vraiment infinies. 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.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page des formes de mouvement transformées

Pour mettre la main sur la mise en page des formes de mouvement transformées gratuitement, 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 !

Étapes générales

Ajouter une nouvelle section

Fond dégradé

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et appliquez un arrière-plan dégradé.

• Couleur 1 : #ffffff
• Couleur 2: #97c6fc
• Type de dégradé : Linéaire
• Direction du gradient : 306 deg
• Position de départ : 50 %
• Position finale : 50 %

Espacement

Passez à l'onglet de conception de la section et utilisez des valeurs de marge et de remplissage personnalisées.

• Marge gauche : 4%
• Marge de droite : 4 %
• Rembourrage supérieur : 11%
• Rembourrage inférieur : 11%

Boîte ombre

Nous utilisons également une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.1)
• Position de l'ombre de la boîte : ombre extérieure

Visibilité

Et nous allons compléter les paramètres de la section en définissant les débordements sur masqués. Cela garantira que lorsque nous ajouterons les formes de mouvement transformées, elles ne dépasseront pas le conteneur de section.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la largeur maximale dans les paramètres de dimensionnement.

• Largeur maximale : 1580px

Espacement de la colonne 1

Nous ajoutons également un rembourrage supérieur aux paramètres d'espacement de la première colonne.

• Rembourrage supérieur : 9%

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

Ajouter du contenu H2

Une fois que vous avez terminé les paramètres de ligne, il est temps d'ajouter des modules, en commençant par un module de texte dans la colonne 1. Ajoutez 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 en conséquence :

• Police du titre 2 : Abril Fatface
• Titre 2 Couleur du texte : #7206a0
• Titre 2 Taille du texte : 80 px (ordinateur de bureau), 65 px (tablette), 50 px (téléphone)

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

Paramètres de texte

Ajoutez un autre module de texte juste en dessous du précédent avec un contenu de description de votre choix.

Paramètres de texte

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

• Police de texte : Open Sans
• Couleur du texte : #7206a0
• Hauteur de la ligne de texte : 2 em

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le dernier module dont nous avons besoin dans la colonne 1 est un module de bouton. Entrez une copie de votre choix.

Paramètres des boutons

Ensuite, passez à l'onglet Conception et stylisez le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 20px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #077bff
• Largeur de la bordure du bouton : 0px

• Police des boutons : Abril Fatface

Espacement

Nous ajoutons également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Ajouter un module d'image à la colonne 2

Télécharger une image

Dans la deuxième colonne de la ligne, le seul module dont nous avons besoin est un module Image. Téléchargez une illustration de votre choix. Si vous souhaitez utiliser celui que nous avons utilisé dans ce didacticiel, vous pouvez le trouver dans le dossier de téléchargement que vous avez pu télécharger au début de cet article.

Alignement

Passez ensuite à l'onglet de conception du module et modifiez l'alignement de l'image.

• Alignement de l'image : à droite

Dimensionnement

Complétez les paramètres du module en modifiant la largeur sur différentes tailles d'écran.

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

Recréer l'exemple #1

Ajouter un module de texte en haut de la colonne 1

Une fois que tous les modules réguliers sont en place, il est temps d'ajouter les formes de mouvement transformées ! Nous allons recréer le premier exemple en ajoutant un nouveau module de texte en haut de la première colonne. Laissez la zone de contenu vide.

Fond dégradé

Ajoutez ensuite un arrière-plan dégradé au module.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: #00fff6
• Type de dégradé : Linéaire
• Direction du gradient : 306 deg
• Position de départ : 54 %
• Position finale : 54 %

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Largeur : 165%
• Hauteur : 270%

Espacement

Ensuite, accédez aux paramètres d'espacement et utilisez des valeurs d'espacement personnalisées.

• Marge inférieure : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage supérieur : 29 %
• Rembourrage inférieur : 29 %

Transformer Rotation

Nous allons ensuite faire pivoter le module.

• Gauche : 270 degrés

Transformer l'inclinaison

Nous appliquerons également une valeur de biais de transformation.

• Bas : 16 degrés
• Droite : 16 degrés

Position

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

• Position : Absolu
• Emplacement : en haut à gauche
• Décalage vertical : -50%
• Décalage horizontal : -50%

Effet de défilement de mouvement vertical

Ensuite, nous ajouterons les effets de défilement, en commençant par un mouvement vertical.

• Activer le mouvement vertical : Oui
• Décalage de départ : 4
• Décalage moyen : 0 (à 50 %)
• Décalage de fin : -4

Effet de défilement de mouvement horizontal

Et nous allons compléter les paramètres du module en ajoutant également un mouvement horizontal !

• Activer le mouvement horizontal : Oui
• Décalage de départ : 4
• Décalage moyen : 0 (à 50 %)
• Décalage de fin : -4%

Recréer l'exemple #2

Ajouter un module de texte en haut de la colonne 1

Vous voulez plutôt recréer le deuxième exemple ? Ajoutez un module de texte en haut de la première colonne.

Couleur de l'arrière plan

Ouvrez les paramètres du module et appliquez une couleur d'arrière-plan.

• Couleur d'arrière-plan : #00fff6

Dimensionnement

Passez à l'onglet de conception du module et modifiez les paramètres de dimensionnement.

• Largeur : 165%
• Hauteur : 270%

Espacement

Nous ajoutons également des valeurs d'espacement personnalisées.

• Marge inférieure : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage supérieur : 29 %
• Rembourrage inférieur : 29 %

Faire pivoter l'inclinaison

Et nous appliquerons un effet d'inclinaison de transformation dans les paramètres de transformation.

• Droite : -54deg

Position

Ensuite, nous allons passer à l'onglet avancé et modifier les paramètres de position du module.

• Position : Absolu
• Emplacement : en haut à gauche
• Décalage vertical : -50%
• Décalage horizontal : -50%

Effet de défilement de mouvement vertical

Nous allons, ensuite, ajouter les effets de défilement. En commençant par un mouvement vertical.

• Activer le mouvement vertical : Oui
• Décalage de départ : 4
• Décalage moyen : 0 (à 50 %)
• Décalage de fin : -4

Effet de défilement de mouvement horizontal

Et nous allons compléter les paramètres du module en ajoutant également un mouvement horizontal !

• Activer le mouvement horizontal : Oui
• Décalage de départ : 4
• Décalage moyen : 0 (à 50 %)
• Décalage de fin : -4

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.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment ajouter de manière créative des formes de mouvement transformées à la conception de votre section. Les formes de mouvement transformées sous-jacentes aident à ajouter une animation subtile à vos conceptions de section. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions, 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.