Téléchargez 9 superpositions d'images en forme GRATUITES pour Divi

La façon dont vous affichez les images sur votre site Web peut vraiment faire une différence dans la conception globale que vous créez. Avec les options intégrées de Divi, vous pouvez déjà appliquer divers paramètres de conception qui vous aideront à afficher des images d'une manière époustouflante, pensez aux bordures et aux ombres de boîte, par exemple. Mais si vous cherchez à donner à vos images une forme plus unique, cet article vous aidera. Nous allons partager 9 superpositions d'images en forme GRATUITES que vous pouvez télécharger et utiliser sur n'importe quel site Web que vous créez. Après avoir partagé ces superpositions d'images en forme, nous allons également vous montrer comment en tirer parti lors de la création d'un site Web avec Divi. Nous espérons que ce didacticiel vous inspirera également pour créer votre propre type de superposition d'images en forme.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel et de le télécharger, jetons un coup d'œil rapide au résultat auquel vous pouvez vous attendre sur différentes tailles d'écran.

Bureau

Téléphone

Téléchargez les superpositions d'images en forme GRATUITEMENT

Pour mettre la main sur les superpositions d'images en forme, vous devrez d'abord les 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 encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis et vendredis ! 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 !

Approcher

• Les superpositions d'images en forme que vous pouvez trouver dans le dossier de téléchargement sont prêtes à l'emploi si vous les combinez avec une ligne blanche et/ou une couleur d'arrière-plan de section
• Si vous souhaitez ajuster les superpositions d'images en forme en fonction d'une autre couleur d'arrière-plan, vous devrez exporter les superpositions d'images en forme dans une autre couleur à l'aide du fichier illustrator inclus dans le téléchargement ci-dessus.
• Nous allons vous montrer comment changer la couleur de superposition de l'image en forme dans la première partie du didacticiel (à l'aide d'Adobe Illustrator)
• Ensuite, nous allons passer à Divi et télécharger l'une des superpositions d'images en forme dans un module d'image
• Nous ajouterons également une image d'arrière-plan et un arrière-plan dégradé au module Image qui s'afficheront à travers la superposition d'images en forme

Modification des superpositions d'images formées en couleur d'arrière-plan de section avec Adobe Illustrator

Ouvrez le fichier Illustrator dans le dossier de téléchargement

Comme mentionné dans la section approche de cet article, si vous souhaitez utiliser les superpositions en forme d'image sur un fond blanc, vous êtes prêt à utiliser simplement les fichiers PNG que vous pouvez trouver dans le dossier de téléchargement. Cependant, si vous souhaitez utiliser les superpositions d'images en forme sur une couleur d'arrière-plan de ligne et/ou de section différente, vous devrez également modifier la couleur manuellement à l'aide du fichier Adobe Illustrator inclus dans le dossier de téléchargement. Changer la couleur prend peu ou pas de temps et vous permet d'utiliser les superpositions d'images en forme sur littéralement n'importe quel site Web que vous créez, alors passons en revue les étapes. Tout d'abord, vous devrez ouvrir le fichier Adobe Illustrator.

Sélectionnez la superposition de forme d'image de votre choix

Une fois que vous avez ouvert le fichier, vous trouverez 9 plans de travail différents avec les superpositions d'images en forme que vous êtes libre d'utiliser à toutes fins utiles. Sélectionnez celui que vous souhaitez modifier.

Changer la couleur pour correspondre à la couleur d'arrière-plan de la section

Continuez en changeant la couleur de la forme en la même couleur d'arrière-plan que vous prévoyez d'utiliser pour votre ligne et/ou section.

Sélectionnez le plan de travail

Une fois la couleur modifiée, vous pouvez sélectionner l'ensemble du plan de travail contenant la superposition d'image en forme.

Enregistrer la superposition d'images en forme de PNG pour le Web

Et enregistrez-le en tant que fichier image PNG pour le Web en allant dans Fichier > Exporter > Enregistrer pour le Web .

Commençons à créer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Il est temps de passer à Divi et de créer le résultat ! Créez une nouvelle page ou ouvrez une page existante et ajoutez une nouvelle section régulière.

Ajouter une nouvelle ligne

Structure des colonnes

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

Ajouter un module d'image à la colonne 1

Télécharger une superposition d'image en forme

Le seul module dont nous aurons besoin dans la colonne 1 est un module Image. C'est là que toute la magie se produira. Nous allons commencer par télécharger la superposition d'images en forme. Vous remarquerez qu'une partie de l'image est complètement transparente. Cela permettra à l'image d'arrière-plan et à l'arrière-plan dégradé d'apparaître dans les étapes à venir.

Fond dégradé

Allez-y et ajoutez ensuite un arrière-plan dégradé de votre choix.

• Couleur 1 : #aa2bff
• Couleur 2: #09f7eb

Image de fond

Et téléchargez une image d'arrière-plan PNG, ou juste une image normale si vous ne voulez pas que l'arrière-plan dégradé soit visible. Vous pouvez également télécharger les illustrations que nous utilisons en accédant à l'article suivant que nous avons créé sur la façon de modifier un arrière-plan dégradé au survol.

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : en bas au centre
• Répétition de l'image d'arrière-plan : aucune répétition

Dimensionnement

Une autre étape importante pour que ce didacticiel fonctionne consiste à activer l'option « Forcer la pleine largeur » dans les paramètres de dimensionnement du module Image. Cela garantira que l'arrière-plan dégradé et l'image d'arrière-plan ne s'afficheront qu'à travers la zone transparente de la superposition d'image en forme.

• Forcer la pleine largeur : Oui

Ajouter un module de texte de titre à la colonne 2

Ajouter du contenu

Passons à la deuxième colonne. Ici, le premier module dont nous aurons besoin est un module de texte de titre. Ajoutez du contenu de votre choix.

Paramètres de texte

Ensuite, allez dans les paramètres de texte d'en-tête et apportez quelques modifications.

• Police de titre 2 : Antic Didone
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Taille du texte : 45 px
• Espacement des lettres de l'en-tête 2 : -2px

Espacement

Ajoutez également une marge supérieure personnalisée.

• Marge supérieure : 100 pixels

Ajouter le module de texte de description à la colonne 2

Ajouter du contenu

Le deuxième module dont nous aurons besoin est un module de texte de description. Entrez un contenu de votre choix.

Paramètres de texte

Ensuite, allez dans les paramètres de texte et modifiez l'orientation du texte du module.

• Orientation du texte : Justifier

Dimensionnement

Modifiez également la largeur dans les paramètres de dimensionnement.

• Largeur : 63 %

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Le prochain et dernier module dont nous aurons besoin est un module de boutons. Entrez un contenu de votre choix.

Paramètres des boutons

Continuez en allant dans les paramètres du bouton et en modifiant l'apparence du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 17px
• Couleur du texte du bouton : #ffffff
• Dégradé de couleur 1 : #aa2bff
• Dégradé de couleur 2 : #09f7eb
• Direction du gradient : 111 deg

• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels
• Espacement des lettres des boutons : -2px
• Poids de la police : Ultra gras
• Style de police : majuscule

Espacement

Ajoutez également un rembourrage personnalisé supplémentaire au bouton.

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

Boîte ombre

Enfin, complétez le design en ajoutant une subtile ombre à paupières au bouton.

• Force de flou d'ombre de boîte : 50px
• Force de propagation de l'ombre de la boîte: -5px

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

Téléphone

Dernières pensées

Dans cet article, nous avons partagé 9 superpositions d'images en forme GRATUITES pour Divi que vous pouvez utiliser pour tout type de site Web que vous créez. Nous espérons que ce didacticiel vous a inspiré pour créer vos propres superpositions d'images de forme unique que vous pouvez constamment réutiliser. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!