Pour créer un dessin de bordure pour une image de fond dans Divi

Lors de la création d’un site Web, les bordures et les images de fond demeurent des ressources de conception populaires. Utilisez la bonne image de fond pour ajouter de la personnalité et du style à votre site sans passer du temps et de l’argent à personnaliser les graphiques. Les bordures aident à structurer le contenu. Aujourd’hui, nous allons combiner les deux ressources en concevant des images de fond comme des bordures. Divi dispose d’un ensemble d’options utiles pour personnaliser l’image de fond afin que vous puissiez facilement concevoir l’image de fond pour une conception de cadre unique. Cela nous permet de combiner les couleurs, les ombres, les ombres de boîte et les méthodes de mélange de diverses façons créatives.
On y va. Voici un dessin des bords de l’image de fond que nous allons construire ensemble. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Abonnez – vous à notre chaîne YouTube
Pour importer une mise en page dans une page, il suffit d’extraire le fichier zip et de faire glisser
Créez un fichier json dans Divi Builder. On va voir le tutoriel, non? Ce que vous devez commencer pour commencer, vous devez installer et activer ce qui suit: le thème Divi crée une nouvelle page pour construire des images frontales (Visual Builder) à partir de zéro pour le contenu virtuel ensuite, vous aurez une toile vierge pour commencer à concevoir dans Divi. Conseils généraux pour créer un dessin de bordure d’image de fond avant de commencer la construction, voici quelques conseils généraux à garder à l’esprit lors de la création d’un dessin de bordure d’image de fond.
1 La plupart du temps, choisissez des images texturées et vous voudrez que vos limites soient plus étroites. Cela signifie que vous ne verrez pas la plupart des images. Il est donc utile d’utiliser des images très cohérentes. Par exemple, vous pouvez utiliser une photo de paysage, un bouquet de fleurs ou un gratte – ciel dans une ville. Voici quelques images que j’ai utilisées dans ce tutoriel. # 2 utiliser le gradient et la transparence avec la bordure de l’image de fond l’image de fond peut parfois être la meilleure bordure pour le contenu. Mais dans la plupart des cas, vous voudrez ajouter un peu de couverture à l’image de fond pour obtenir une certaine couleur, ou pour rendre l’arrière – plan plus sombre ou plus lumineux. Les gradients de fond sont un excellent moyen d’ajouter des superpositions à l’image de fond et de créer une conception de bordure unique.
3 Utiliser le mode de fusion L’utilisation d’une méthode de mélange sur l’image de fond vous permet d’obtenir des couleurs et des textures uniques pour la conception de bordures. Il suffit d’ajouter une couleur de fond ou un gradient à l’image de fond, puis de sélectionner un mode de mélange pour l’image de fond. Certains modes de mélange importants pour les bordures d’image de fond sont la couleur, la luminosité, le multiplicateur et l’écran. Utiliser l’option filet pour les formes uniques Tous les bords ne doivent pas être droits. Mesco
Un peu! Les options de filet de Divi vous permettent de modéliser ces coins de façon créative.
Utiliser l’image de fond parallaxe comme bordure La beauté de parallaxe est qu’il apporte le design dans la vie par le mouvement. De plus, si vous utilisez une image de fond parallaxe dans un projet de limite, vous pouvez créer un mouvement subtil saillant et mettre en évidence le contenu. Concevoir une bordure d’image de fond dans Divi maintenant que nous avons vu l’idée générale derrière la création d’une bordure d’image de fond, concevons certains d’entre eux ensemble. Nous allons construire quatre modèles différents. Chacun a un module Blurb de base comme contenu virtuel. Nous utiliserons les paramètres de colonne pour ajouter une bordure d’image de fond au module.
Commençons par notre premier design. Dessiner une bordure pour l’image de fond # 1 La première conception est caractérisée par une bordure étroite de l’image de fond avec des ombres de bordure qui la rendent plus semblable à la bordure du contenu. Voici comment le concevoir. Tout d’abord, ajoutez une ligne et deux colonnes à la section normale. Ajoutez le module Blurb, puis ajoutez le module Blurb à la colonne de gauche. Après avoir placé Blurb, ouvrez les paramètres Blurb et supprimez l’image par défaut afin que seul le titre et le contenu du Corps soient visibles. Donc, donnez à votre profil une couleur de fond blanche.
Ensuite, mettez à jour les paramètres de conception de Blurb comme suit: caractères de titre: caractères du corps Oswald: bords de marge 5% au – dessus, 5% au – dessous, 5% à gauche, 5% à droite remplir: 7% au – dessus, 7% au – dessous, 10% à gauche, 10% à droite filet: 20 Px en haut à droite, 20 Px en bas à gauche ombres: voir capture d’écran Ajoutez l’image de fond à la colonne qui gère notre module Blurb. Maintenant, ajoutons nos propres bordures d’image de fond. Pour ce faire, nous ajouterons une image de fond à la colonne Image de fond No 3 Le prochain projet se concentrera sur l’utilisation des images parallaxes dans les dessins de bord. Nous utiliserons également la technique d’ombrage de boîte pour créer des superpositions de couleurs pour les images parallaxes. Voici comment le concevoir. Tout d’abord, ajoutez une ligne (deux colonnes) sous la première ligne et copiez le module Blurb à partir de la description dans la première ligne, colonne 1, puis collez – le dans la nouvelle ligne, colonne 1. Ensuite, mettez à jour le module Blurb comme indiqué ci – dessous. Couleur de fond: # 333344 couleur du texte: marge nette: 10% en haut, 10% en bas, 10% à gauche, 10% à droite remplir: 10% en haut, 10% en bas filet: 20px boîte d’ombre: aucune Lorsque Blurb est en place, ouvrez les paramètres de ligne et mettez à jour les paramètres de la colonne 1 comme suit: image de fond: [Télécharger l’image] en utilisant l’effet parallaxe: méthode parallaxe: filet parallaxe réel: 20px ombre de boîte: voir capture d’écran À ce stade, par défaut, les limites de l’image de fond avec parallaxe sont un peu trop saillantes et peuvent distraire le contenu. Pour rendre la parallaxe de l’image de fond plus claire, nous pouvons ajouter une ombre de cadre au flou comme couverture lumineuse. Allumez à nouveau les paramètres de flou et ajoutez ce qui suit: boxshadows: voir capture d’écran force Shadow Flour Box: 0px force Shadow Scattering Box: 200 Px Shadow color: # FFFFFF Passons maintenant au dernier projet. Dessiner une bordure pour l’image de fond Dans le prochain projet, nous combinerons l’image de fond et l’ombre comme limite supérieure et inférieure du contenu Blurb. Ajouter un module Blurb pour commencer, copiez le module Blurb dans la colonne 2 de la première ligne et collez – le dans la colonne 2 de la deuxième ligne. Une fois terminé, mettre à jour les paramètres du module Blurb comme suit: BO
Rdo: [supprimer la bordure en réinitialisant la valeur par défaut de la bordure] ombres de la bordure: pas de marge: 5% en haut, 5% en bas, 0% à gauche, 0% à droite Ajouter une bordure d’image de fond pour ajouter une bordure d’image de fond pour ce dessin, ouvrez les paramètres de ligne et mettez à jour les paramètres de la colonne 2 comme suit: image de fond: [Télécharger l’image] couleur de fond du gradient gauche: # 141777 couleur de fond du gradient droit: # ffb7eb Direction du gradient: 90 degrés position de départ: 50% position finale: 0% Image de fond: [Télécharger l’image] image de fond mixte: luminosité Regardez le design final. Créer une bordure d’image de fond avec Divi est un moyen facile d’ajouter beauté et personnalité à votre design. Les conceptions de ce tutoriel sont conçues pour montrer les options clés disponibles dans Divi pour créer des conceptions de bord uniques. Cependant, avec toutes les combinaisons de couleurs et les modes de mélange, votre seule limite est votre imagination. Ensuite, prenez vos propres images et explorez de nouveaux dessins de bord passionnants pour votre prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!