Téléchargez 5 images de bordure GRATUITES pour Divi
Publié: 2018-10-01C'est toujours génial d'avoir des ressources supplémentaires que vous pouvez utiliser lors de la création d'un nouveau site Web pour vous-même ou pour un client. C'est pourquoi nous veillons à ce que vous receviez de nouveaux packs de mise en page chaque semaine. Mais il existe d'autres ressources qui peuvent également s'avérer utiles, telles que des «images de bordure» ou des images que vous pouvez utiliser d'un côté ou de l'autre d'un élément de conception Divi pour ajouter une touche stylistique. L'utilisation des options intégrées de Divi avec ces images de bordure peut apporter des résultats époustouflants. Dans cet article, nous vous avons fourni 5 images de bordure différentes que vous pouvez télécharger gratuitement ci-dessous. Nous allons expliquer comment vous pouvez utiliser ces images de bordure à votre avantage et créer un résultat final époustouflant.
Allons-y !
Aperçu
Jetons un coup d'œil aux différentes images de bordure que vous pourrez télécharger plus loin dans cet article. Pour chacune des formes, vous trouverez 4 versions : une en haut, en bas, à gauche et à droite. Ces images vous permettront d'obtenir exactement le même résultat que celui montré dans les quatre premières images ci-dessous :
Téléchargez les fichiers images GRATUITEMENT
Pour mettre la main sur les images de bordure gratuites, 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 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 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.
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
- Une fois que vous avez téléchargé et décompressé le dossier contenant les 5 images de bordure, vous trouverez 4 sous-dossiers : bordure supérieure, bordure inférieure, bordure gauche et bordure droite
- Cela signifie qu'il y a un total de 20 fichiers d'images disponibles que vous pouvez utiliser
- Plus loin dans cet article, vous trouverez les paramètres d'accompagnement qui correspondent à chacun des côtés de la bordure
- Pour couronner le tout, vous pouvez combiner les images de bordure avec des superpositions de dégradés
- Ces superpositions de couleurs vous aideront à rendre les images aussi vives ou subtiles que vous le souhaitez
- Vous êtes libre d'utiliser ces images de bordure sans aucune restriction, même à des fins commerciales
Création de la conception globale
Ajouter une nouvelle section
Espacement
Commençons par créer la conception globale que nous avons utilisée pour présenter les images de bordure. Ouvrez une page nouvelle ou existante, ajoutez une nouvelle section standard et ajoutez un rembourrage personnalisé :
- Rembourrage supérieur : 300 px
- Rembourrage inférieur : 300px
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 de modules pour le moment, ouvrez les paramètres de ligne, accédez aux paramètres de dimensionnement et faites la pleine largeur de la ligne.
- Faire cette ligne en pleine largeur : Oui
Ajouter un module de texte de titre à la colonne 1
Ajouter une zone de contenu H2
Commençons à ajouter quelques modules ! Le premier module nécessaire est un module de texte. Ajoutez-en un à la première colonne et ajoutez votre copie H2 de votre choix dans la zone de contenu.
Paramètres de texte d'en-tête
Ensuite, apportez quelques modifications aux paramètres de texte H2 dans l'onglet Conception.
- Police du titre 2 : Abril Fatface
- Titre 2 Taille du texte : 80 px (ordinateur de bureau), 70 px (tablette), 50 px (téléphone)
Espacement
Continuez en ajoutant une marge en haut de ce module de texte.
- Marge supérieure : 150 px
Ajouter un module de texte de lien à la colonne 1
Ajouter un lien à la zone de contenu
Juste en dessous du titre Module de texte que vous venez d'ajouter, allez-y et ajoutez un nouveau module de texte. Nous utilisons ce module de texte comme un bouton, alors assurez-vous d'ajouter un lien vers le CTA.
Paramètres de texte de lien
Ensuite, modifiez les paramètres du texte du lien dans l'onglet Conception.
- Poids de la police du lien : ultra gras
- Style de police du lien : majuscule
- Couleur du texte du lien : #000000
- Taille du texte du lien : 21 px
Espacement
Ajoutez une marge supérieure pour créer également un espace entre ce module de texte et le précédent.
- Marge supérieure : 100 pixels
Frontière
Enfin, ajoutez une bordure inférieure subtile au lien Module de texte.
- Largeur de la bordure inférieure : 1px
- Couleur de la bordure inférieure : #333333
Ajouter le module de texte de description à la colonne 2
Paramètres de texte
La deuxième colonne a besoin d'un module de texte de description uniquement. Après avoir ajouté du contenu à la zone de contenu, appliquez les paramètres de texte suivants :
- Taille du texte : 22px (ordinateur de bureau), 20px (tablette), 18px (téléphone)
- Hauteur de la ligne de texte : 2,6 em
- Orientation du texte : Justifier
Dimensionnement
Faites également correspondre les paramètres de dimensionnement à différentes tailles d'écran :
- Largeur : 82 % (ordinateur de bureau), 100 % (tablette et téléphone)
Espacement
Et enfin, ajoutez une marge supérieure et inférieure.
- Marge supérieure : 100 pixels
- Marge inférieure : 100px
Ajout des formes de bordure
Paramètres d'arrière-plan de la bordure gauche
Maintenant que nous avons terminé la conception globale, nous pouvons commencer à ajouter les images de bordure ! Nous allons commencer par la bordure gauche. Recherchez l'image de bordure de votre choix dans le dossier « Bordure gauche » et téléchargez-la en tant qu'image d'arrière-plan de la section. Ensuite, appliquez les paramètres d'image d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : centre à gauche
- Répétition de l'image d'arrière-plan : aucune répétition
Paramètres d'arrière-plan de la bordure droite
Ou, vous pouvez trouver l'image de bordure de votre choix dans le dossier « Bordure droite » et l'ajouter comme arrière-plan de la section en utilisant les paramètres suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : centre à droite
- Répétition de l'image d'arrière-plan : aucune répétition
Paramètres d'arrière-plan de la bordure supérieure
La même chose vaut pour l'image de bordure supérieure, mais utilisez plutôt les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : en haut au centre
- Répétition de l'image d'arrière-plan : aucune répétition
Paramètres d'arrière-plan de la bordure inférieure
Ou, last but not least, vous pouvez trouver les images de bordure inférieure dans le dossier "Bordure inférieure" et les combiner avec ces paramètres d'arrière-plan de section :
- Taille de l'image d'arrière-plan : taille réelle
- 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
Mélanger les couleurs à l'aide d'une superposition semi-transparente
Pour chacune des formes de bordure incluses, vous pouvez également décider d'ajouter une superposition de couleurs. Cette superposition vous aide à rendre les images de bordure plus subtiles. Pour ajouter une superposition, accédez aux paramètres de votre section et ajoutez un arrière-plan dégradé au-dessus de l'image d'arrière-plan de la bordure.
- Couleur 1 : #ffffff
- Couleur 2: rgba (255,255,255,0.36)
- Direction du gradient : 141 degrés
- Placer le dégradé au-dessus de l'image d'arrière-plan : Oui
Aperçu
Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil à quelques conceptions potentielles que vous pouvez réaliser en utilisant ces images de bordure gratuites.
Dernières pensées
Dans cet article, nous avons partagé 5 images de bordure différentes que vous pouvez télécharger gratuitement. Vous pouvez utiliser ces images de bordure pour n'importe quel site Web sur lequel vous travaillez sans aucune restriction. Nous vous encourageons à tous les essayer et à créer des designs époustouflants. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!