Comment créer un arrière-plan d'image de parallaxe avec une superposition de dégradés mélangés dans Divi

Dans les versions antérieures de Divi, l'ajout d'une superposition de dégradé à une image d'arrière-plan de parallaxe n'était pas une option intégrée. Mais, avec les nouvelles options d'arrière-plan de Divi (et le Gradient Builder), vous pouvez facilement créer de magnifiques arrière-plans de parallaxe avec d'innombrables motifs de superposition de dégradés.

Dans ce tutoriel, nous allons vous montrer comment utiliser les options d'arrière-plan de Divi pour ajouter une superposition de dégradé coloré qui se fond avec une image d'arrière-plan en utilisant à la fois les méthodes True et CSS Parallax.

Aperçu

Voici un bref aperçu des conceptions d'arrière-plan que nous allons créer dans ce didacticiel.

Ce premier a une superposition de dégradé avec le mode de fusion des couleurs utilisé sur l'image d'arrière-plan en utilisant la méthode True Parallax.

Et voici la même conception utilisant la méthode CSS Parallax. Notez que le dégradé reste fixe/attaché à l'image d'arrière-plan de sorte qu'il semble faire partie de l'image réelle et pas seulement d'un calque.

Et voici un exemple de superposition de dégradé utilisant des arrêts de couleur semi-transparents sans mode de fusion.

Le concept

L'idée de base de cette conception implique deux étapes :

1. Créez un dégradé d'arrière-plan pour une section à l'aide du générateur de dégradé en veillant à placer le dégradé au-dessus de l'image d'arrière-plan.

2. Ajoutez une image d'arrière-plan à la même section qui utilise l'une des méthodes de parallaxe et le mode de fusion des couleurs.

Cela permettra au dégradé coloré de recouvrir l'image de parallaxe pendant qu'elle se déplace lors du défilement vers le bas de la page. Le mode de fusion des couleurs fusionne la superposition de dégradé avec l'image pour une belle image qui a fière allure avec la parallaxe.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Gagner
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 nouveau
abonné, vous recevrez encore plus de bonté Divi et un pack Divi Layout gratuit tous les lundis ! Si vous êtes déjà sur le
liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas "réabonné" ou ne recevrez pas d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack de mise en page ultime Divi Landing Page, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-nous 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.

TÉLÉCHARGER

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 !

Pour importer la mise en page de la section dans votre bibliothèque Divi, procédez comme suit :

1. Accédez à la bibliothèque Divi.
2. Cliquez sur le bouton Importer en haut de la page.
3. Dans la popup de portabilité, sélectionnez l'onglet import
4. Choisissez le fichier de téléchargement sur votre ordinateur (assurez-vous d'abord de décompresser le fichier et d'utiliser le fichier JSON).
5. Cliquez ensuite sur le bouton d'importation.

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au tutoriel, d'accord ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez procéder comme suit :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option "Construire à partir de zéro".
4. Ayez maintenant une toile vierge pour commencer à concevoir dans Divi !

Comment créer un arrière-plan d'image de parallaxe avec une superposition de dégradés mélangés dans Divi

1. Créez la ligne de remplissage et le texte d'en-tête

Bien que nous allons nous concentrer sur la conception de l'arrière-plan de la section pour ce didacticiel, il est logique d'ajouter une ligne de remplissage et un en-tête pour avoir une meilleure idée de ce à quoi ressemblera la conception dans un cas d'utilisation normal.

Pour commencer, ajoutez une ligne à une colonne à la section existante dans le générateur.

Ensuite, ajoutez un module de texte à la ligne/colonne.

Paramètres de texte

Ouvrez les paramètres du module de texte. Sous l'onglet Contenu, ajoutez un titre H2 au contenu du corps.

<h2>Say Hello to Divi</h2>

Sous l'onglet Conception, mettez à jour les options d'en-tête et la largeur maximale comme suit :

• Titre 2 Police : Inter
• Titre 2 Poids de la police : Gras
• Titre 2 Couleur du texte : #fff
• Titre 2 Taille du texte : 8vw
• Titre 2 Hauteur de la ligne : 1,2 em
• Titre 2 Ombre du texte : voir capture d'écran
• Intensité du flou de l'ombre du titre 2 : 0,28 em
• Titre 2 Couleur de l'ombre du texte : #10076d

• Largeur maximale : 50 %

Paramètres de ligne

Maintenant que le titre est en place, mettons à jour la taille et l'espacement des lignes pour le rendre plus réactif.

Ouvrez les paramètres de ligne. Sous l'onglet Conception, mettez à jour les éléments suivants :

• Largeur : 100 %
• Largeur maximale : 80 vw

• Rembourrage : haut 15vw, bas 15vw

2. Concevoir le fond dégradé de la section

Maintenant que le contenu de remplissage est terminé, nous sommes prêts à commencer à concevoir notre arrière-plan dégradé de section.

Paramètres de dégradé d'arrière-plan

Ouvrez les paramètres de la section. Sous l'onglet Contenu, sélectionnez l'onglet dégradé sous les options d'arrière-plan et mettez à jour les options de dégradé comme suit :

• Arrêt dégradé 1 : #0094ff (à 0 %)
• Arrêt dégradé 2 : #ff00c7 (à 25 %)
• Arrêt dégradé 3 : #0094ff (à 50 %)
• Arrêt dégradé 4 : #ff00c7 (à 75 %)
• Arrêt dégradé 5 : #0094ff (à 100 %)

• Type de dégradé : Circulaire
• Position du dégradé : en bas à gauche
• Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

3. Ajoutez une image d'arrière-plan de parallaxe avec le mode de fusion des couleurs

Une fois la conception du dégradé terminée, nous sommes prêts à ajouter notre image d'arrière-plan de parallaxe. Ensuite, nous appliquerons le mode de fusion des couleurs pour mélanger le design dégradé avec l'image d'arrière-plan pour un beau design d'arrière-plan parallaxe.

Paramètres de l'image d'arrière-plan

Dans les options d'arrière-plan de la section, sélectionnez l'onglet Image d'arrière-plan et téléchargez une image d'arrière-plan . La mise à jour la suivante :

• Utiliser l'effet de parallaxe : OUI
• Méthode de parallaxe : véritable parallaxe
• Fusion de l'image d'arrière-plan : couleur

Pourquoi le mode de fusion des couleurs ?

Le mode de fusion des couleurs mélange une version en niveaux de gris de l'image avec les couleurs (teinte et saturation) du dégradé. Cela préserve la qualité visuelle de l'image avec une toute nouvelle palette de couleurs.

4. Ajouter un masque d'arrière-plan (pourquoi pas ?)

Pour terminer la conception, ajoutons un masque d'arrière-plan qui se placera derrière notre en-tête pour faire ressortir un peu plus le texte et accentuer l'effet de parallaxe.

Paramètres du masque d'arrière-plan

Dans les options d'arrière-plan de la section, sélectionnez l'onglet Masque d'arrière-plan et mettez à jour les éléments suivants :

• Masque : Lames
• Masque de transformation : Retourner horizontalement, Inverser
• Taille du masque : taille personnalisée
• Largeur du masque : 72 vw
• Position du masque : en haut à droite

5. Ajouter un espace de défilement temporaire pour les tests

Avant de vérifier les résultats finaux, nous devons ajouter de l'espace au-dessus et au-dessous de notre section afin d'avoir suffisamment d'espace de défilement pour voir l'effet de parallaxe en action. Pour ce faire, ajoutez simplement la marge suivante à la section :

• Marge : 80vh en haut, 80vh en bas

N'oubliez pas de supprimer cet espacement lorsque vous ajoutez la section à votre propre page.

Résultats finaux

Jetons un coup d'œil au résultat final sur une page en direct.

Et voici la même conception utilisant la méthode CSS Parallax. Notez que le dégradé reste fixe/attaché à l'image d'arrière-plan de sorte qu'il semble faire partie de l'image réelle et pas seulement d'un calque.

Utilisation d'une superposition de dégradé sans le mode de fusion

Bien que j'aime le mode de fusion pour cette conception, vous pouvez ressentir le besoin d'une superposition de dégradé plus traditionnelle pour votre image d'arrière-plan de parallaxe.

Par exemple, vous pouvez choisir de ne pas ajouter de mode de fusion au dessin et de donner simplement à chacun des arrêts de couleur de dégradé une couleur semi-transparente. Cela vous permettrait de voir une représentation plus subtile de l'image d'arrière-plan derrière la superposition de dégradé.

Pour ce faire, vous pouvez réduire l'opacité de chaque couleur à quelque chose comme 72%, puis redéfinir l'option de fusion de l'image d'arrière-plan sur Normal.

Voici un exemple de ce à quoi cela ressemblerait.

Essayez plus de dégradés !

Le générateur de dégradés peut créer beaucoup plus de couleurs et de types de dégradés que vous pouvez utiliser pour faire ressortir ces conceptions d'arrière-plan en couches. Vous pouvez consulter nos démonstrations en direct de plus de possibilités de conception de dégradés d'arrière-plan.

Dernières pensées

La création d'une conception d'arrière-plan parallaxe avec une superposition de dégradés mélangés peut facilement être effectuée à l'aide des options d'arrière-plan intégrées de Divi. Cela vous donne vraiment la puissance de Photoshop dans Divi comme jamais auparavant. N'hésitez pas à explorer différentes combinaisons de couleurs avec d'innombrables arrêts et positions de dégradés de couleurs. De plus, vous pouvez également expérimenter différents modes de fusion.

Espérons que cela vous sera utile pour votre propre site Web ou votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

Acclamations!