Comment créer des superpositions d'arrière-plan dégradé avec les paramètres d'arrière-plan de Divi

Publié: 2017-06-13

Dans le tutoriel d'aujourd'hui, nous allons explorer les possibilités nouvelles et élégantes que les nouvelles fonctionnalités de conception d'arrière-plan de Divi apportent à vos sites Web et plus précisément; en utilisant des superpositions de fond dégradé.

Avec cette nouvelle mise à jour d'arrière-plan, de nombreuses nouvelles options ont été ajoutées au constructeur Divi qui vous aideront à répondre à vos besoins lors de la conception d'un site Web pour vous-même ou pour un client. Ces nouvelles options vous permettent de jouer avec l'apparence et la convivialité de votre site Web.

Avant la sortie de cette mise à jour, la plupart des modifications, qui peuvent désormais être apportées dans le constructeur Divi, devaient être effectuées via un code CSS personnalisé. Apporter des modifications de conception à votre arrière-plan est maintenant devenu plus facile que jamais. En quelques clics, vous pouvez créer de superbes arrière-plans pour toutes les différentes sections de votre site Web.

Les exemples de superpositions de fond dégradé

Nous avons créé trois sections avec une image avant et après qui vous montreront comment les nouvelles options peuvent améliorer l'ensemble du sentiment que votre site Web reflète et lui donner ce « je ne sais quoi ».

La section des héros

Voici à quoi ressemble la section des héros lors de l'ajout d'une image d'arrière-plan uniquement :

Et voici à quoi ressemblera notre résultat final lorsque nous aurons ajouté la superposition d'arrière-plan dégradé à la même image d'arrière-plan que celle utilisée dans l'image ci-dessus :

La section de présentation

Voici à quoi ressemble la section de présentation lorsque vous utilisez un arrière-plan unicolore :

Et voici à quoi ressemble le résultat final lorsque nous avons ajouté la superposition de fond dégradé à un fond de motif :

La section des prix

Voici à quoi ressemble la section des prix lorsque nous utilisons une couleur (dans un ton plus clair et plus foncé):

Et voici à quoi ressemblera le résultat final après avoir utilisé la superposition de fond dégradé :

Chacun d'eux a des paramètres différents et nous vous montrerons exactement et étape par étape comment créer ce look afin que vous puissiez l'utiliser sur vos propres sites Web.

Pas à pas : la section des héros

Pour la première section de cet article, nous recréons une section héros. Cet exemple montrera comment la fonction de conception d'arrière-plan peut modifier les couleurs utilisées dans l'image. Et bien que nous ayons utilisé une superposition d'arrière-plan dégradé, les modifications que nous avons apportées sont très subtiles. Nous avons ajouté une impression de ton plus sombre à l'image en combinaison avec un ciel de couleur différente.

Commencer à créer

Commençons par créer une nouvelle page sur votre site WordPress. Maintenant, ajoutez une section standard à cette page avec une ligne pleine largeur. Ensuite, placez les différents modules dans votre rangée. Nous avons utilisé deux modules de texte et un module de bouton.

Paramètres du premier module de texte

Le premier module de texte est l'endroit où le titre de votre section héros apparaîtra. Tapez le texte que vous souhaitez voir apparaître dans la zone de contenu de la sous-catégorie Texte de l'onglet Contenu et passez à l'onglet Conception.

Dans l'onglet Conception, apportez les modifications suivantes à la sous-catégorie Texte :

Orientation du texte : Centre
Taille de la police de texte : 30
Couleur de la police du texte : #FFFFFF

Paramètres du deuxième module de texte

Maintenant, ouvrez le module de texte suivant et entrez également le texte dans la zone de contenu. Ensuite, allez dans l'onglet Conception et apportez les modifications suivantes à la sous-catégorie Texte :

Orientation du texte : Centre
Taille de la police de texte : 16
Couleur de la police du texte : #FFFFFF

Faites défiler le même onglet et ajoutez "500px" à la largeur maximale dans la sous-catégorie Dimensionnement et "2%" à la marge inférieure dans la sous-catégorie Espacement.

Paramètres des boutons

Enfin, ouvrez les paramètres du module de boutons. Tapez le CTA que vous souhaitez lier à votre bouton dans la sous-catégorie Texte de l'onglet Contenu et accédez à l'onglet Conception.

Dans l'onglet Conception, apportez les ajustements suivants à la sous-catégorie Bouton :

Utiliser des styles personnalisés pour le bouton : Oui
Taille du texte du bouton : 20
Couleur du texte du bouton : #FFFFFF
Couleur d'arrière-plan du bouton : rgba(0,0,0,0)
Largeur de la bordure du bouton : 2
Couleur de la bordure du bouton : #FFFFFF
Rayon de bordure de bouton : 7

Maintenant, ouvrez les sections de ligne et effectuez les ajustements suivants dans la sous-catégorie d'espacement du module Conception :

Marge supérieure : 15 %
Marge inférieure : 10 %

Paramètres de superposition de fond dégradé

Passons maintenant à la partie amusante ; ajouter la superposition de fond dégradé à l'image de fond. Allez-y et ouvrez le paramètre de la section. Ensuite, allez dans la sous-catégorie Arrière-plan et commencez par ajouter l'arrière-plan dégradé.

Pour l'exemple que nous avons fait, nous avons utilisé les paramètres suivants :

Première couleur : #3730ff
Deuxième couleur : #e02b20
Type de dégradé : Linéaire
Direction du gradient : 272 degrés
Position de départ : 40 %
Position finale : 100 %

Maintenant, allez dans l'onglet image d'arrière-plan et ajoutez l'image de votre choix. Nous avons délibérément choisi une image qui contient le ciel pour améliorer l'effet que nous essayons de créer.

Maintenant, faites défiler le même onglet. Centrez l'image d'arrière-plan et activez l'option Multiplier dans le menu déroulant Mélange d'image d'arrière-plan. Vous disposez également de nombreuses autres options qui peuvent vous aider à atteindre le résultat exact que vous souhaitez.

Et voilà le résultat final :

Pas à pas : la section Blurb

Le deuxième exemple que nous allons vous montrer comment créer est la section de présentation. Nous voulons garder l'accent sur le contenu du texte de présentation, c'est pourquoi nous n'avons pas opté pour un arrière-plan chargé mais plutôt pour un arrière-plan à motifs.

Le motif de fond utilisé dans cet exemple provient de Toptal. Vous pouvez télécharger les modèles que vous aimez pour les utiliser à toutes sortes de fins, y compris commerciales. N'oubliez pas de les créditer dans la source de votre site Web comme indiqué dans leur FAQ.

Nous avons également rendu les icônes de présentation légèrement transparentes pour faire ressortir les couleurs du dégradé. Bien que chacun des textes de présentation ait les mêmes paramètres, la couleur qui apparaît à travers les icônes est légèrement différente et conforme aux couleurs de dégradé que nous avons utilisées.

Commencer à créer

Commencez par ajouter une section standard à une nouvelle page ou à une page existante. Dans cette section, nous aurons besoin d'une ligne avec trois colonnes.

Continuez en ajoutant un module Blurb dans la première colonne de la ligne. Nous utiliserons les mêmes paramètres de module de présentation dans chaque colonne. C'est pourquoi nous n'avons à créer le module de présentation qu'une seule fois et à le cloner pour les deux autres colonnes.

Paramètres de présentation

Ouvrez les paramètres du module Blurb et saisissez le titre et le contenu dans la sous-catégorie Texte de l'onglet Contenu. Passez à l'onglet Conception et effectuez les ajustements suivants dans la sous-catégorie Image et icône :

Couleur de l'icône : rgba(255,255,255,0.36)
Icône de cercle : Oui
Couleur du cercle : rgba(255,255,255,0)
Afficher la bordure du cercle : Oui
Couleur de la bordure du cercle : rgba(255,255,255,0.36)
Placement des images/icônes : en haut
Utiliser la taille de la police de l'icône : Oui
Taille de la police de l'icône : 96 px

Faites défiler le même onglet et placez l'orientation du texte sur « Centre » dans la sous-catégorie Texte.

Continuez à faire défiler et ouvrez la sous-catégorie Header Text. Allez-y et utilisez les paramètres suivants :

Taille de la police d'en-tête : 18
Couleur du texte de l'en-tête : #FFFFFF
Hauteur de la ligne d'en-tête : 1 em

Maintenant, la seule chose qui reste à changer est la sous-catégorie Corps de texte. Assurez-vous que les paramètres suivants s'appliquent :

Taille de la police du corps : 14
Couleur du corps du texte : #FFFFFF
Hauteur de la ligne du corps : 1,5 em

N'oubliez pas de cloner le module Blurb deux fois, de les placer dans les deux autres colonnes restantes et de modifier le contenu en conséquence.

Paramètres de ligne

Ouvrez les paramètres de ligne et accédez à la sous-catégorie Espacement dans l'onglet Conception. La seule chose que vous aurez à faire est de modifier les marges supérieure et inférieure à "5%".

Paramètres de superposition de fond dégradé

Enfin, nous allons ajouter l'image d'arrière-plan avec la superposition de dégradé. Ouvrez les paramètres de votre section et accédez à la sous-catégorie Arrière-plan de l'onglet Contenu.

Ensuite, apportez les modifications suivantes à l'option de dégradé :

Première couleur : #52009b
Deuxième couleur : #0edeed
Type de dégradé : Radial
Direction radiale : Droite
Position de départ : 28 %
Position finale : 100 %

Passez à l'option d'arrière-plan, téléchargez le modèle de votre choix et apportez les modifications suivantes :

Position de l'image d'arrière-plan : Centre
Répétition de l'image d'arrière-plan : Répétez (selon votre modèle)
Mélange d'images d'arrière-plan : multiplier

C'est ça! Vous devriez maintenant avoir le résultat étonnant suivant :

Pas à pas : la section des prix

Le dernier exemple de cet article est la section des prix. Dans cette section, nous voulions vous montrer que vous pouvez utiliser le fond dégradé partout. Ce n'est pas seulement fait pour être utilisé dans les sections mais aussi dans les colonnes. Nous n'allons utiliser l'arrière-plan dégradé que pour deux des colonnes et faire une superposition d'arrière-plan dégradé pour la deuxième colonne.

La raison pour laquelle nous faisons cela est de mettre l'accent sur le forfait de prix présenté. Nous utilisons des couleurs plus intenses que dans les deux autres colonnes et nous ajoutons également un fond de motif. Ces deux éléments combinés augmentent les chances d'attirer des gens vers votre forfait de prix en vedette, que vous souhaitez promouvoir le plus.

Commencer à créer

Commencez par ajouter une nouvelle section standard à une page nouvelle ou existante de votre site Web. La section a besoin d'une ligne avec trois colonnes. Les modules que nous utiliserons sont les mêmes pour chaque colonne et contiennent les mêmes paramètres. C'est pourquoi nous allons les créer pour la première colonne et les cloner dans les deux autres colonnes par la suite.

Paramètres du premier module de texte

Ajoutez un nouveau module de texte à la première colonne, ajoutez le type de forfait de prix à la zone de contenu dans la sous-catégorie Texte de l'onglet Contenu et passez à l'onglet Conception.

Appliquez les modifications suivantes à la sous-catégorie Texte de l'onglet Conception :

Orientation du texte : Centre
Taille de la police de texte : 24
Couleur de la police du texte : #FFFFFF
Hauteur de la ligne de texte : 1,5 em

Faites défiler le même onglet et apportez les modifications suivantes à la sous-catégorie Espacement :

Marge supérieure : 50px
Marge inférieure : 20px

Paramètres du deuxième module de texte

Ajoutez un autre module de texte à la même colonne. Notez le prix du package dans la zone de contenu de la sous-catégorie Texte de l'onglet Contenu et passez à l'onglet Conception.

Dans l'onglet Conception, effectuez les ajustements suivants :

Orientation du texte : Centre
Taille de la police de texte : 82px
Couleur de la police du texte : #FFFFFF
Hauteur de la ligne de texte : 1,1 em

Faites défiler le même onglet et ajoutez « 10px » à la marge inférieure.

Paramètres du troisième module de texte

Pour notre dernier module de texte, ajoutez le texte à la zone de contenu dans la sous-catégorie Texte de l'onglet Contenu. Ensuite, allez dans l'onglet Conception et apportez les modifications suivantes à la sous-catégorie Texte :

Orientation du texte : Centre
Taille de la police de texte : 16
Couleur de la police du texte : #FFFFFF
Hauteur de la ligne de texte : 1,1 em

Faites défiler le même onglet et ajoutez « 33px » à la marge inférieure dans la sous-catégorie Espacement.

Paramètres des boutons

Le prochain module que nous ajouterons à cette colonne est le module de boutons. Tapez le CTA que vous souhaitez voir apparaître dans la zone de contenu de la sous-catégorie Texte de l'onglet Contenu et passez à l'onglet Conception.

Dans l'onglet Conception, placez l'alignement des boutons dans la sous-catégorie Alignement sur « Centre » et apportez les modifications suivantes à la sous-catégorie des boutons :

Utiliser des styles personnalisés pour le bouton : Oui
Taille du texte du bouton : 13
Couleur du texte du bouton : #FFFFFF
Couleur d'arrière-plan du bouton : rgba (255,255,255,0.11)
Largeur de la bordure du bouton : 2
Couleur de la bordure du bouton : #FFFFFF
Rayon de bordure de bouton : 4
Espacement des lettres des boutons : 1

Paramètres du diviseur

Enfin, nous allons ajouter un séparateur à la colonne pour créer de l'espace. Sélectionnez « Ne pas afficher le diviseur » dans l'onglet Contenu et accédez à l'onglet Conception où vous placez « 25px » dans le champ de hauteur.

Maintenant que nous avons ajouté tous les modules, assurez-vous de les cloner et de les mettre également dans les autres colonnes.

Paramètres de superposition de fond dégradé

Pour cet exemple, nous allons utiliser deux paramètres d'arrière-plan différents pour les différentes colonnes. La première et la dernière colonne seront les mêmes et la seconde sera un peu différente.

Accédez aux paramètres de ligne et appliquez les modifications suivantes à l'option de dégradé de la première et de la troisième colonne dans la sous-catégorie Arrière-plan de l'onglet Contenu :

Première couleur : rgba (10 122 178 0,57)
Deuxième couleur : rgba (142,0,142,0,47)
Type de dégradé de la colonne 1 : radial
Colonne 1 Direction radiale : en haut à gauche
Colonne 1 Position de départ : 0
Position finale de la colonne 1 : 100 %

Ensuite, allez à la colonne 2 et apportez les modifications suivantes à l'option de dégradé :

Première couleur : #0a7ab2
Deuxième couleur : #8e008e
Type de dégradé de la colonne 2 : linéaire
Direction du gradient de la colonne 2: 180deg
Position de départ de la colonne 2 : 0
Position finale de la colonne 2 : 100

Passez à l'option d'image d'arrière-plan, téléchargez l'image d'arrière-plan et modifiez les paramètres :

Position de l'image d'arrière-plan de la colonne 2 : en haut à gauche
Colonne 2 Répétition de l'image d'arrière-plan : Répéter
Mélange d'image d'arrière-plan de la colonne 2 : Multiplier

Dernières pensées

Les exemples que nous vous avons montrés dans cet article de blog ne sont qu'une fraction des résultats que vous pouvez obtenir en utilisant les nouvelles fonctionnalités de conception d'arrière-plan. Dans les prochains articles, nous traiterons certainement d'autres exemples qui vous aideront à créer de superbes designs pour les sites Web que vous créez. Si vous avez des questions, des commentaires ou des suggestions ; laissez un commentaire dans la section commentaire 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 !