10 astuces de conception d'arrière-plan désormais possibles avec les nouveaux paramètres d'arrière-plan de Divi

Depuis la sortie de la nouvelle interface des options d'arrière-plan de Divi, Divi est devenu encore plus puissant. Les nouvelles fonctionnalités ont ouvert de nombreuses nouvelles possibilités de conception. Aujourd'hui, je vais vous présenter de nouvelles astuces de conception que vous ne connaissez peut-être pas et, espérons-le, je pourrai vous inspirer pour créer de superbes designs d'arrière-plan.

Il existe d'innombrables combinaisons et mélanges de conception d'arrière-plan que vous pouvez créer à l'aide de Visual Builder. Les 10 astuces que j'ai choisies pour cet article ne feront qu'effleurer la surface, mais elles sont destinées à vous présenter différents concepts et à susciter votre intérêt. La plupart de ces astuces de conception sont réalisées à l'aide des nouvelles options d'arrière-plan telles que les nouvelles options d'arrière-plan dégradé et en combinant des images d'arrière-plan avec des couleurs dégradées.

Je dois vous avertir cependant. Une fois que vous aurez commencé à creuser dans les options d'arrière-plan, vous ne quitterez peut-être jamais ! C'est tellement amusant. Eh bien, au moins c'était comme ça pour moi.

Prendre plaisir.

Voici un aperçu des astuces de conception

Comment suivre ce message

Au lieu de devoir recommencer à zéro chaque fois que j'explique une nouvelle astuce de conception, j'ai utilisé le même exemple de conception pour la plupart d'entre elles et j'ai ajouté différentes astuces à cette conception. Cela signifie que la plupart des exemples nécessitent que vous ayez terminé une astuce de conception précédente avant de pouvoir attaquer la nouvelle astuce. Les astuces n°1 à 9 suivent toutes la même configuration de base et nécessitent l'astuce n°1 comme condition préalable. Donc, si vous testez les fonctionnalités, je vous suggère de commencer par l'astuce n°1.

10 astuces de conception de fond avec Divi

Abonnez-vous à notre chaîne Youtube

Astuce n°1 : superposition diagonale

Ajoutez une section pleine largeur, puis insérez un module d'en-tête pleine largeur.

Mettez ensuite à jour les paramètres du module d'en-tête comme suit :

Options de contenu

Titre : [entrez le titre]
Sous-titre : [entrer le sous-titre]
URL de l'image du logo : [entrer le logo]
Couleurs de dégradé d'arrière-plan : rgba (12 113 195 0,55), rgba (255 255 255,0)
Type de dégradé : Linéaire
Direction du dégradé : 135 deg
Position de départ : 60 %
Position finale : 60 % (tout ce qui est à 60 % ou moins fonctionnera)

Étant donné que le dégradé commence et se termine au même point, il n'y a fondamentalement aucun effet de dégradé. Le résultat est donc les deux couleurs de chaque côté du marqueur 60%. Cela combiné avec l'angle de la direction du dégradé crée l'effet.

Options de conception

Couleur du texte : clair
Police du titre : par défaut, gras (B), majuscule (TT)
Taille de la police du titre : 40 px
Taille de la police du sous-titre : 24 px

Options avancées

Sous CSS personnalisé dans la zone Élément principal, ajoutez le CSS suivant :

Padding: 150px 0;

Ceci est juste pour ajouter un rembourrage supplémentaire en haut et en bas du module d'en-tête

Enregistrer les paramètres

Il est maintenant temps d'ajouter un arrière-plan à votre section pleine largeur. Accédez aux paramètres de la section pleine largeur en cliquant sur l'icône d'engrenage dans la boîte de contrôle violette.

Mettez ensuite à jour les options de contenu des paramètres de section comme suit :

Image d'arrière-plan : [entrez l'image d'arrière-plan ici. Il doit faire au moins 1960px de large. J'ai choisi cette image sur unsplash.com et je l'ai recadrée pour que la section remarquable de l'image se trouve sur le côté droit.]
Utiliser l'effet Parallax : OUI (c'est facultatif mais je pense que cela fonctionne bien avec la superposition diagonale)
Méthode de parallaxe : vraie parallaxe

C'est ça! N'hésitez pas à ajuster l'opacité de la couleur du dégradé et le degré de la direction du dégradé à votre guise.

Nous partons du bon pied je pense. Passons au deuxième tour.

Astuce n°2 : superposition de superpositions en diagonale

Cette astuce de conception est une continuation de l'astuce n°1, alors assurez-vous d'avoir terminé l'astuce n°1 avant de continuer.

Dans l'astuce n°1, nous nous sommes arrêtés avec une superposition diagonale en utilisant l'option de dégradé d'arrière-plan dans le module d'en-tête pleine largeur.

En utilisant le même exemple, ajoutez un dégradé d'arrière-plan supplémentaire à la section pleine largeur. Nous avons déjà une image d'arrière-plan pour cette section, mais avec les nouvelles options de Divi, nous pouvons combiner des dégradés de couleurs à votre image d'arrière-plan, puis les mélanger avec certains effets.

Accédez aux paramètres de la section pleine largeur et mettez à jour les options de contenu suivantes :

Couleurs de dégradé d'arrière-plan : rgba(131,0,233,0,38), rgba(255,255,255,0)
Type de dégradé : Linéaire
Direction du dégradé : 135 deg (la même que l'autre direction du dégradé dans votre module d'en-tête)
Position de départ : 38 %
Position finale : 38 %

Cliquez maintenant sur l' icône de l'image d'arrière - plan et modifiez les éléments suivants :

Utiliser l'effet de parallaxe : non
Mélange d'images d'arrière-plan : multiplier

Vous disposez maintenant de 2 superpositions diagonales qui se chevauchent et qui peuvent facilement être personnalisées pour un design d'arrière-plan unique.

Astuce n°3 : Superposition de cercles

Cette astuce de conception est une continuation de l'astuce n°1, alors assurez-vous d'avoir terminé l'astuce n°1 avant de continuer.

Maintenant, nous allons transformer cette superposition diagonale de l'astuce n°1 en une superposition de cercle. Pour ce faire, accédez aux paramètres du module pleine largeur et mettez à jour les éléments suivants :

Options de contenu

Type de dégradé d'arrière-plan : Radial
Direction radiale : Centre
Position de départ : 30 %
Position finale : 30 %

Options de conception

Orientation du texte et du logo : Centre

Vérifiez maintenant le nouvel arrière-plan de l'en-tête.

Cette astuce crée de superbes en-têtes ou des appels à l'action. La taille de la superposition du cercle peut facilement être ajustée et répond bien aux différentes tailles d'écran. À l'heure actuelle, j'utilise un dégradé de couleur semi-transparent au-dessus d'une image d'arrière-plan, mais cela aurait fière allure sans image d'arrière-plan.

Voici un exemple de ce à quoi cela ressemblerait sans image de fond et avec une couleur de texte plus sombre.

Astuce n°4 : superposition de superpositions de cercles pour créer une bordure de cercle

Il s'agit d'une continuation de l'astuce n°3 où nous nous sommes arrêtés en ajoutant une superposition de cercle à un module d'en-tête pleine largeur. Une fois que votre superposition de cercle est en place, nous pouvons ajouter une deuxième superposition de cercle pour servir de bordure au premier. Pour ce faire, nous ajoutons un autre dégradé d'arrière-plan à la section pleine largeur qui se trouve derrière le module d'en-tête pleine largeur.

Accédez aux paramètres de la section pleine largeur et mettez à jour les éléments suivants :

Options de contenu

Sous l'onglet Image d'arrière-plan :

Utiliser l'effet de parallaxe : NON
Mélange d'images d'arrière-plan : multiplier

Sous l'onglet Dégradé d'arrière-plan :

Couleurs de dégradé d'arrière-plan : rgba(0,0,0,0.45), rgba(255,255,255,0)
Type de dégradé d'arrière-plan : Radial
Direction radiale : Centre
Position de départ : 34 %
Position finale : 34 %

Enregistrer les paramètres

C'est ça.

Vous pouvez également facilement modifier la taille de votre cercle de dégradé d'arrière-plan en ajustant le pourcentage de la position de départ.

Astuce n°5 : Superposition de cercles inversés

Il s'agit d'une continuation de l'astuce n°3 qui s'est arrêtée avec une superposition de cercle dans le module d'en-tête pleine largeur. À l'heure actuelle, le cercle est bleu semi-transparent et le reste de l'image d'arrière-plan n'a aucune couleur de superposition de dégradé. Pour cette astuce, je vais désactiver cela et inverser la superposition de cercle de sorte que la superposition de dégradé bleu semi-transparent entoure le cercle et à l'intérieur du cercle expose l'image d'arrière-plan derrière.

Pour ce faire, accédez aux paramètres d'en-tête pleine largeur et mettez à jour les éléments suivants :

Options de contenu

Couleurs de dégradé d'arrière-plan : rgba(255,255,255,0), rgba(12,113,195,0.79)

Remarque : tout ce que vous faites vraiment ici est d'échanger les couleurs à gauche et à droite. Maintenant, la couleur transparente est ce qui apparaît à l'intérieur du cercle et le dégradé bleu l'entoure. J'augmenterais l'opacité du bleu pour qu'il soit un peu plus foncé.

Vérifiez-le…

Astuce n°6 : Superposition de cercles inversés avec arrière-plan vidéo

Il s'agit d'une continuation de l'astuce n°5 qui nous a laissé une superposition de cercle inversé avec un fond bleu environnant. Actuellement, le cercle expose une image de fond derrière lui. Vous pouvez facilement ajouter un arrière-plan vidéo pour vous asseoir derrière cette superposition de cercle. Je suggérerais d'utiliser une vidéo qui n'est pas trop distrayante. De plus, chaque fois que vous utilisez des vidéos, assurez-vous que la taille du fichier est petite afin que le temps de chargement de votre page ne souffre pas.

Pour remplacer l'image d'arrière-plan par une vidéo, allez dans Paramètres de la section pleine largeur, cliquez sur le
icône de vidéo d'arrière-plan et ajoutez votre vidéo.

Allez maintenant dans les paramètres de l'en-tête Fullwidth et mettez à jour les éléments suivants :

Options de contenu

Couleurs de dégradé d'arrière-plan : rgba (12 113 195 0,67), #333333

Avec les nouvelles couleurs de dégradé, la vidéo d'arrière-plan n'est visible qu'à l'intérieur du cercle. Et les couleurs superposées font vraiment ressortir le texte.

Astuce n°7 : Superposition de cercles inversés décentrée

C'est la suite de l'astuce n°5 qui nous a laissé une superposition de cercle inversé. Si vous revenez aux paramètres d'en-tête pleine largeur, vous pouvez ajuster la direction radiale à différents paramètres pour créer différentes apparences pour votre en-tête.

Accédez aux paramètres d'en-tête Fulwidth et mettez à jour les éléments suivants :

Options de contenu

Direction radiale : Droite

Options de conception

Orientation du texte et du logo : à gauche

Voici le résultat final et quelques exemples de différentes directions radiales :

Ces exemples nécessitent évidemment un peu de travail, mais vous voyez l'idée.

Astuce n°8 : Utiliser des dégradés pour les effets d'ombre

Cette astuce n'est peut-être pas époustouflante, mais elle est extrêmement utile. Pour ceux d'entre nous qui ne veulent pas s'embêter à utiliser un éditeur de photos comme Photoshop pour ajouter de l'ombre à vos images, c'est pour vous.

Il s'agit d'une continuation de l'astuce n°1 qui s'est arrêtée avec une superposition diagonale utilisant l'option de dégradé d'arrière-plan dans le module d'en-tête pleine largeur. Changeons maintenant la superposition bleue semi-transparente en une ombre sombre qui commence à gauche de l'image et s'estompe progressivement vers la droite. De cette façon, la partie principale de l'image à droite reste intacte et l'ombre sombre à gauche aide à rendre le texte plus lisible.

Pour ajouter l'effet d'ombre, accédez aux paramètres d'en-tête pleine largeur et mettez à jour les éléments suivants :

Options de contenu

Couleurs de dégradé d'arrière-plan : rgba(0,0,0,0.55), rgba(0,0,0,0)
Direction du gradient : 90 degrés
Position de départ : 38 %
Position finale : 85 %

Voici le résultat.

Astuce n°9 : Mélanger l'image d'arrière-plan

Les nouvelles options d'arrière-plan de Divi incluent des modes de fusion CSS pour personnaliser les images. Explorer les différents mélanges d'images est très amusant et a tendance à créer des designs surprenants. Pour ceux d'entre vous qui ne sont pas des concepteurs, vous n'avez pas besoin de connaître la définition de la saturation ou de la luminosité pour profiter de ces options intéressantes. Vous aurez besoin d'une couleur d'arrière-plan ou d'un dégradé en combinaison avec l'image d'arrière-plan afin de voir tous les effets sympas (cela ne fonctionnera pas vraiment avec une seule image d'arrière-plan). Ensuite, jouez jusqu'à ce que vous obteniez le look que vous voulez. Les résultats pourraient vous surprendre.

Pour cet exemple, je vais continuer à partir de l'astuce n°1 qui s'est arrêtée avec une superposition diagonale en utilisant l'option de dégradé d'arrière-plan dans le module d'en-tête pleine largeur.

Accédez aux paramètres d'en-tête pleine largeur et supprimez les dégradés d'arrière-plan sous les options de contenu.

Enregistrer les paramètres

Allez maintenant dans les paramètres de la section et mettez à jour les éléments suivants :

Options de contenu

Couleurs de dégradé d'arrière-plan : rgba(0,0,0,0.76), #0c71c3
Direction du gradient : 90 degrés
Position de départ : 50 %
Position finale : 50 %

Vous ne pouvez pas encore voir de changements. C'est bon. Accédez à l'onglet Image d'arrière-plan et mettez à jour les éléments suivants :

Utiliser l'effet de parallaxe : NON
Mélange d'images d'arrière-plan : lumière dure

C'est ça. Découvrez le résultat.

Remarque : les couleurs utilisées ici créeront différents effets en fonction de l'image d'arrière-plan que vous utilisez. Je suggère donc de jouer avec les couleurs et les options de mélange jusqu'à ce que vous en obteniez une qui vous plaise.

Astuce n°10 : superposer pour ajouter plus de couleurs à votre arrière-plan dégradé.

Par défaut, chaque section, ligne, colonne et module peut avoir deux dégradés de couleurs. Cependant, lorsque vous les combinez et les superposez, vous pouvez créer 5 couleurs pour votre arrière-plan dégradé. Et lorsque ces 5 couleurs se mélangent, vous pouvez créer un spectre assez cool.

Voici comment procéder. Tout d'abord, ajoutez une section régulière avec une ligne de structure à 1 colonne. Ensuite, à l'intérieur de la ligne, ajoutez un module Blurb.

Mettez à jour les paramètres du module Blurb comme suit :

Options de contenu

Titre : [entrez le titre]
Contenu : [entrer le contenu]

Options de conception

Couleur du texte : clair
Orientation du texte : Centre
Police d'en-tête : par défaut, gras (B)
Taille de la police d'en-tête : 56 px
Taille de la police du corps : 22px
Rembourrage personnalisé : 100 pixels en haut, 100 pixels en bas

Étant donné que le texte de présentation est blanc sur fond blanc, vous ne pouvez pas encore le voir, mais ce n'est pas grave. Vous allez bientôt. Il est temps de commencer à ajouter les dégradés de couleurs.

Nous allons travailler de l'arrière vers l'avant, de gauche à droite. Pour commencer, accédez aux paramètres de la section et mettez à jour les éléments suivants :

Options de contenu

Couleurs de dégradé d'arrière-plan : #ff0077, #0c71c3
Direction du gradient : 90 degrés
Position de départ : 0%
Position finale : 30 %

Options de conception

Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

Mettons maintenant à jour notre prochain niveau de dégradé de couleur - notre rangée. Accédez aux paramètres de ligne et mettez à jour les éléments suivants :

Options de contenu

Couleurs de dégradé d'arrière-plan : rgba(255,255,255,0), #8300e9
Direction du gradient : 90 degrés
Position de départ : 25 %
Position finale : 50 %
Colonne 1 Couleurs de dégradé d'arrière-plan : rgba(255,255,255,0), #e02b20
Direction du gradient : 90 degrés
Position de départ : 50 %
Position finale : 75 %

Options de conception
Faire cette ligne pleine largeur : OUI
Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière : 1
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

Enregistrer les paramètres

Maintenant, pour la dernière couche de dégradé, nous devons accéder au module Blurb et mettre à jour les éléments suivants :

Options de contenu
Couleurs de dégradé d'arrière-plan : rgba(255,255,255,0), #edf000
Direction du gradient : 90 degrés
Position de départ : 75 %
Position finale : 100 %

Options de conception

Rembourrage personnalisé : 100 pixels en haut, 100 pixels en bas

C'est ça. Vous avez maintenant cinq dégradés de couleurs qui se mélangent pour créer un arrière-plan assez coloré.

N'oubliez pas que vous pouvez également changer le type de dégradé en radial (circulaire) et changer complètement le design (cela prend environ 20 secondes).

Si vous modifiez le type de dégradé en radial pour tous les calques (section, ligne, colonne et module de présentation), vous obtiendrez quelque chose comme ceci.

Astuce bonus

Voici un exemple de la façon dont vous pouvez superposer des images d'arrière-plan avec parallaxe. Il s'agit d'une section régulière avec une image d'arrière-plan utilisant True Parallax. À l'intérieur de la section se trouve une rangée de 1 colonne qui a été faite sur toute la largeur et sans rembourrage afin qu'elle s'étende sur toute la largeur de la section. À la rangée, j'ai ajouté une image d'arrière-plan transparente avec des cercles dégradés (censés ressembler à des bulles) à l'aide de la méthode CSS Parallax. Ensuite, j'ai ajouté un module d'appel à l'action à la ligne avec un fond transparent. Cette combinaison crée un mouvement lors du défilement vers le bas de la section sur la page.

Cette astuce est un peu plus compliquée puisqu'elle nécessite de créer une photo personnalisée en dehors de Divi. J'espère simplement vous montrer les possibilités.

Encore quelques exemples

Je terminerai avec quelques exemples de conception que j'ai construits en testant ces mêmes astuces mentionnées dans cet article.

Dernières pensées

J'espère que vous avez apprécié l'exploration de ces nouvelles options d'arrière-plan et que vous êtes enthousiasmé par les possibilités qu'elles offrent. Et, puisque ces options sont disponibles sur les sections, les lignes, les colonnes et les modules, vous pouvez appliquer ces astuces de conception sur n'importe quelle partie de votre site Web. Si vous ne l'avez pas déjà fait, prenez le temps de creuser un peu plus et de laisser couler votre créativité. Je suis convaincu que si vous prenez le temps d'explorer les options d'arrière-plan par vous-même, vous serez ravi de les mettre en œuvre sur votre prochain projet. J'ai hâte de voir ce que tu proposes.

Au plaisir de vous entendre dans les commentaires.