Ajouter des ombres transformées à votre copie avec Divi

Avec les nouvelles options de transformation de Divi, vous pouvez créer une superbe conception Web tout en affichant tous les paramètres de transformation en temps réel. Et en combinant différents modules les uns avec les autres, vous pouvez obtenir des effets uniques et homogènes qui contribueront à rehausser l'apparence de la section sur laquelle vous travaillez. Dans cet article particulier, nous nous concentrerons sur la création d'ombres transformées pour votre copie en utilisant uniquement les options intégrées de Divi. Vous pourrez également télécharger gratuitement l'exemple de fichier JSON.

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 disposition de la section Transformed Shadows Hero

Pour mettre la main sur la disposition gratuite de la section des héros des ombres transformées, vous devez 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 !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer la section des héros

Ajouter une nouvelle section

Espacement

La première chose à faire est d'ajouter une nouvelle section régulière à une page nouvelle ou existante. Ouvrez les paramètres de la section et supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Débordement

Passez à l'onglet avancé et assurez-vous que les débordements de section sont masqués. Plus tard dans cet article, nous utiliserons certaines options de transformation et masquer le débordement garantira que rien ne dépasse 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 en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et autorisez la ligne à occuper toute la largeur de l'écran en appliquant les paramètres suivants :

• 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 %

Espacement

Passez aux paramètres d'espacement, supprimez le rembourrage inférieur par défaut et ajoutez un espace personnalisé à gauche et à droite de la ligne.

• Rembourrage inférieur : 0px
• Rembourrage gauche : 4vw
• Rembourrage droit : 4vw

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

Ajouter du contenu

Il est temps de commencer à ajouter les différents modules, en commençant par un module de texte. Saisissez la copie de votre choix.

Paramètres de texte

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

• Police du texte : affichage Playfair
• Alignement du texte : à droite
• Couleur du texte : #ffffff
• Taille du texte : 11vw
• Hauteur de la ligne de texte : 1 em

• Longueur verticale de l'ombre du texte : 0,02 em
• Force du flou de l'ombre du texte : 0,16 em
• Couleur de l'ombre du texte : rgba(0,0,0,0.44)

Cloner le module de texte n°1

Modifier le contenu

Une fois que vous avez terminé le premier module de texte, vous pouvez le cloner et modifier la copie du doublon.

Ajouter un nouveau module de texte au-dessus du module de texte #1

Ajouter du contenu

Passons au module suivant, qui est un autre module de texte. Cette fois, nous plaçons le module en haut de la colonne. Dans les étapes à venir, nous transformerons ce module de texte en l'ombre de texte transformée du module suivant. Assurez-vous que vous utilisez la même copie.

Paramètres de texte

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

• Police du texte : affichage Playfair
• Poids de la police de texte : gras
• Alignement du texte : à droite
• Couleur du texte : rgba (94 150 187 0,28)
• Taille du texte : 11vw
• Espacement des lettres du texte : 4,5 pixels
• Hauteur de la ligne de texte : 1 em

Transformer Traduire

Il est temps de transformer le module pour qu'il ressemble à l'ombre de texte transformée du module suivant ! Accédez aux paramètres d'espacement et modifiez les valeurs de conversion de transformation.

• À droite : 13,9 vw
• Bas : -2.1vw

Transformer Rotation

Faites également pivoter le module.

• Centre : 291 degrés

Transformer l'inclinaison

Et augmentez la valeur d'inclinaison inférieure.

• Bas : 30 degrés

Cloner le module de texte transformé et placer au-dessus du module de texte #2

Modifier le contenu

Une fois que vous avez terminé de créer le module d'ombre de texte transformé, vous pouvez le cloner et le placer au-dessus du troisième module de texte dans la colonne. Assurez-vous de changer la copie.

Modifier les paramètres de texte

Passez à l'onglet Conception et modifiez la couleur du texte.

• Couleur du texte : #f3e4df

Ajouter un espacement

Pour compenser l'espace supplémentaire créé par le module d'ombre de texte transformé, nous allons ajouter une marge supérieure négative.

• Marge supérieure : -12vw

Ajouter le module de texte de description à la colonne 1

Ajouter du contenu

Le prochain module dont nous avons besoin dans la colonne 1 est un autre module de texte. Entrez une description de votre choix.

Paramètres de texte

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

• Police de texte : Open Sans
• Alignement du texte : à droite
• Hauteur de la ligne de texte : 2,3 em

Dimensionnement

Modifiez la largeur du module sur différentes tailles d'écran dans les paramètres de dimensionnement.

• Largeur : 53 % (ordinateur de bureau), 70 % (tablette), 90 % (téléphone)
• Alignement du module : à droite

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Passons au module suivant et dernier de la colonne 1, qui est un module de bouton. Entrez une copie de votre choix.

Alignement

Passez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : à droite

Paramètres des boutons

Modifiez également les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 20px
• Couleur d'arrière-plan du bouton : #5e96bb
• Largeur de la bordure du bouton : 0px
• Rayon de bordure de bouton : 50px
• Police des boutons : Affichage Playfair

Espacement

Et jouez avec les paramètres d'espacement pour compléter le style du bouton.

• Marge supérieure : 2vw
• Marge inférieure : 3vw
• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Ajouter le module d'image n° 1 à la colonne 2

Télécharger une image 1:1

Passons à la deuxième colonne ! Ici, nous aurons besoin de deux modules image. Commencez avec le premier module d'image et téléchargez une image avec un ratio de 1:1. Cela signifie que la largeur et la hauteur doivent avoir la même valeur de pixel. S'assurer que votre image est un carré vous aidera à la transformer en cercle dans les prochaines étapes.

Dimensionnement

Accédez aux paramètres de dimensionnement du module Image et activez l'option "Forcer la pleine largeur".

• Forcer la pleine largeur : Oui

Espacement

Nous ajoutons également une marge supérieure.

• Marge supérieure : 2vw

Frontière

Pour transformer le module Image en cercle, nous allons ajouter « 50vw » à chacun des coins. L'utilisation d'une valeur très élevée nous aide à conserver une forme circulaire sur différentes tailles d'écran.

Boîte ombre

Enfin, nous ajouterons également une ombre de boîte au module Image, en utilisant les paramètres suivants :

• Position horizontale de l'ombre de la boîte : -300px
• Position verticale de l'ombre de la boîte : -300px
• Couleur de l'ombre : rgba (94 150 187 0,28)

Ajouter le module image #2 à la colonne 2

Télécharger une image 1:1

Passons au deuxième module Image dans la colonne 2. Nous nous assurons, encore une fois, que l'image que nous téléchargeons a un rapport 1:1.

Dimensionnement

Passez à l'onglet Conception et modifiez la largeur.

• Largeur : 62 %

Frontière

Ajoutez également « 50vw » à chacun des coins de ce module d'image.

Boîte ombre

Nous allons également ajouter une ombre de boîte personnalisée.

• Position horizontale de l'ombre de la boîte : -200px
• Position verticale de l'ombre de la boîte : 150 px
• Couleur de l'ombre : #d4c1bd

Transformer Traduire

Enfin, modifiez la position du module Image à l'aide de l'option de traduction de transformation et le tour est joué !

• Droite : -13vw
• Bas : 19vw

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 utiliser de manière créative des modules de texte en double pour créer des ombres de texte transformées. C'est un moyen intéressant de mettre votre copie à l'honneur et d'utiliser les options intégrées de Divi sous un autre angle. Nous espérons que vous avez apprécié ce tutoriel et si vous avez des questions ou des suggestions, assurez-vous de 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.