Comment créer de belles bordures d'image à l'aide des nouvelles options de Divi

Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment créer de belles bordures d'images sur le prochain site Web que vous créez. Le but de cet article est de montrer comment vous pouvez créer de beaux résultats qui correspondent aux images que vous utilisez (et au reste de votre site Web également).

Avec les nouvelles options Divi, obtenir des résultats époustouflants est plus facile que jamais. Vous n'aurez qu'à apporter quelques modifications que nous vous montrerons comment faire et vous serez prêt à faire passer votre conception de sites Web au niveau supérieur. Les 8 exemples que nous partagerons avec vous n'utiliseront rien d'autre que les options intégrées proposées par Divi Builder et Image Module.

Aperçu

Jetons un coup d'œil aux résultats que vous pouvez attendre de cet article :

Comment créer de belles bordures d'image à l'aide des nouvelles options de Divi

Abonnez-vous à notre chaîne Youtube

Fond dégradé

La première possibilité d'obtenir de belles bordures d'image est d'utiliser uniquement un arrière-plan dégradé. En expérimentant avec les différents paramètres d'arrière-plan dégradé, vous pouvez obtenir des résultats simples mais élégants. Nous allons vous montrer trois exemples de bordures d'image constituées uniquement d'un arrière-plan dégradé.

Standard

Le premier exemple que nous allons traiter est le plus simple et le plus modeste de tous ; une bordure d'image dégradée standard. Le résultat, nous allons vous montrer comment créer ressemble à ceci :

Onglet Contenu

Commencez par choisir un fond dégradé dans l'onglet Contenu. Pour cet exemple, nous avons utilisé les paramètres suivants :

• Première couleur : #081e8c
• Deuxième couleur : #764f9b
• Type de dégradé : Linéaire
• Direction du gradient : 269 degrés
• Position de départ : 40 %
• Position finale : 60 %

Onglet Conception

La prochaine et dernière chose que vous devrez faire est d'ajouter un peu de remplissage à l'image. C'est aussi simple que ça. Accédez à l'onglet Conception et ajoutez « 10px » au rembourrage supérieur, inférieur, droit et gauche.

Côtés

Ensuite, nous avons une bordure d'image qui ne s'affiche qu'à gauche et à droite de l'image. L'utilisation de ce type de bordure d'image donne une belle touche supplémentaire à l'image sans trop insister sur la bordure elle-même.

Onglet Contenu

Pour réaliser ce type de bordure d'image, commencez par ajouter le fond dégradé suivant à votre image :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : #0a8da8
• Type de dégradé : Linéaire
• Direction du dégradé : 166 deg
• Position de départ : 29 %
• Position finale : 52 %

Onglet Conception

Dans l'onglet Conception, la seule chose dont vous aurez besoin est « 10px » de rembourrage pour les côtés droit et gauche.

Un coin

Ensuite, vous pouvez également créer des arrière-plans d'angle pour les images de votre site Web. Ce type de bordure est idéal à utiliser lorsque vous souhaitez mettre en valeur une couleur utilisée dans l'image.

Onglet Contenu

Pour le troisième exemple d'image, utilisez l'arrière-plan dégradé suivant :

• Première couleur : rgba (58,8,1,0,58)
• Deuxième couleur : rgba (41 196 169,0)
• Direction du gradient : 152 degrés
• Position de départ : 34 %
• Position finale : 28 %

Onglet Conception

Ensuite, ajoutez également « 20px » à chacun des rembourrages.

Bordure d'image et arrière-plan dégradé

Une autre possibilité consiste à combiner un fond dégradé avec une bordure d'image. Cela aussi peut donner des résultats étonnants, comme vous pourrez le constater dans les quatre exemples suivants.

Dégradé subtil

La première combinaison de fond dégradé et de bordure d'image est simple mais belle. En utilisant les mêmes couleurs pour l'arrière-plan dégradé et la bordure, la bordure de l'image donne l'impression d'être remplie de couleur.

Onglet Contenu

Commencez par ajouter les paramètres de fond dégradé suivants à votre image :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : #777777
• Type de dégradé : Linéaire
• Direction du gradient : 180 deg
• Position de départ : 65 %
• Position finale : 78 %

Onglet Conception

Passez à l'onglet Conception et utilisez les paramètres suivants dans la sous-catégorie Bordure :

• Utiliser la bordure : Oui
• Couleur de la bordure : #777777
• Largeur de la bordure : 3px
• Style de bordure : solide

Enfin, ajoutez un rembourrage de '7px' à toutes les options de rembourrage.

En forme de

Ensuite, nous avons un exemple qui est excellent pour attirer l'attention des visiteurs. L'image elle-même contient dans ce cas principalement des couleurs plus claires, ce qui crée un bel équilibre avec la bordure plus sombre.

Onglet Contenu

Les paramètres d'arrière-plan dégradé dont vous aurez besoin pour cette bordure d'image sont les suivants :

• Première couleur : rgba (53,0,188,0.1)
• Deuxième couleur : #680061
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 80 %
• Position finale : 80 %

Onglet Conception

Passez à l'onglet Conception et utilisez la bordure suivante :

• Utiliser la bordure : Oui
• Couleur de la bordure : #9a00bc
• Largeur de la bordure : 1px
• Style de bordure : solide

Faites défiler vers le bas et ajoutez le remplissage suivant à l'image :

• Haut : 7 pixels
• À droite : 5 pixels
• Bas : 7px
• Gauche : 5px

Bordure double

L'utilisation d'une double bordure en combinaison avec un arrière-plan dégradé peut également donner des résultats étonnants. Regarde:

Onglet Contenu

La couleur de fond dégradé que nous avons utilisée dans cet exemple est la suivante :

• Première couleur : rgba (224,43,32,0,61)
• Deuxième couleur : rgba (12 113 195 0,87)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 71 %
• Position finale : 93 %

Onglet Conception

Pour continuer, utilisez les paramètres suivants pour la sous-catégorie Bordure :

• Utiliser la bordure : Oui
• Couleur de la bordure : #f4f4f4 (correspond à la couleur d'arrière-plan de votre section)
• Largeur de la bordure : 8px
• Style de bordure : Double

Et ajoutez "10px" en haut, en bas, à droite et à gauche de l'image.

Coins triangulaires

Pour continuer, vous pouvez également créer de petits coins dans votre bordure en utilisant l'option d'arrière-plan dégradé en combinaison avec une bordure en pointillés.

Onglet Contenu

Pour obtenir la bordure d'image que nous vous avons montrée ci-dessus, utilisez les paramètres d'arrière-plan dégradé suivants :

• Première couleur : rgba(163 103,6,0)
• Deuxième couleur : #e09900
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 97 %
• Position finale : 97 %

Onglet Conception

Dans l'onglet Conception, nous aurons également besoin des paramètres de bordure suivants :

• Utiliser la bordure : Oui
• Couleur de la bordure : #e09900
• Largeur de la bordure : 2px
• Style de bordure : en pointillé

Enfin, nous aurons besoin d'un rembourrage de « 8px » pour les rembourrages supérieur, inférieur, gauche et droit.

Motif et fond dégradé

La dernière possibilité que nous voulons mettre en avant est d'utiliser un motif et un fond dégradé en même temps. Cela vous permet de jouer avec l'apparence de vos images.

Espiègle

Cette bordure contient un arrière-plan dégradé de deux couleurs qui sont également utilisées dans l'image elle-même. En ajoutant également un motif de fond, l'image donne un peu plus d'atmosphère à votre site Web.

Onglet Contenu

Pour le dernier exemple, nous utiliserons les paramètres d'arrière-plan dégradé suivants :

• Première couleur : rgba (4,49,96,0,51)
• Deuxième couleur : rgba (119,74,15,0,51)
• Type de dégradé : Linéaire
• Direction du gradient : 180 deg
• Position de départ : 0%
• Position finale : 100 %

Onglet Conception

Ensuite, nous ajoutons également un fond de motif. Le modèle que nous avons utilisé dans cet exemple provient de Toptal. Vous pouvez utiliser leurs modèles à toutes sortes de fins, assurez-vous simplement de les créditer dans votre code comme mentionné dans leur FAQ. Une fois que vous avez ajouté l'arrière-plan du motif, utilisez également les paramètres suivants :

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange d'images d'arrière-plan : multiplier

La dernière chose que vous devrez faire est d'ajouter un rembourrage de "12px" en haut, en bas, à droite et à gauche de votre image.

Dernières pensées

Dans cet article, nous vous avons montré différentes manières de créer de belles bordures d'images. Ces options vous donnent un aperçu des choses que vous pouvez faire avec les nouvelles options de Divi sans utiliser de CSS supplémentaire. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image présentée par Mr Aesthetics / shutterstock.com