Comment utiliser les modes de fusion de motifs sur vos images d'arrière-plan Divi

Les paramètres de motif d'arrière-plan intégrés de Divi vous permettent de créer des designs accrocheurs et d'ajouter du style aux images d'arrière-plan de votre site Web. Vous pouvez utiliser les paramètres des modes de fusion pour affiner la façon dont le motif se fond avec l'image d'arrière-plan. Combinez des images d'arrière-plan, des motifs et des modes de fusion pour créer des arrière-plans et des éléments de conception uniques pour votre mise en page. Avec 24 motifs au choix et 16 modes de fusion, sans parler de tous les autres paramètres que vous pouvez utiliser pour affiner l'apparence du motif, le ciel est la limite pour votre conception d'arrière-plan !

Dans ce didacticiel, nous allons vous montrer quelques exemples sur la façon d'ajouter un mode de fusion de motifs aux images d'arrière-plan de votre page. Suivez-les pour recréer ces looks par vous-même ou utilisez-les comme source d'inspiration pour créer vos propres designs personnalisés.

Commençons!

Aperçu

Voici un aperçu de ce que nous allons concevoir dans ce tutoriel.

Première mise en page

Deuxième mise en page

Troisième mise en page

Ce dont vous avez besoin pour commencer

Avant de commencer, installez et activez le thème Divi et assurez-vous d'avoir la dernière version de Divi sur votre site Web.

Maintenant, commençons !

Comment utiliser les modes de fusion de motifs sur vos images d'arrière-plan Divi

Créer une nouvelle page avec une mise en page prédéfinie

Nous allons commencer par utiliser une mise en page prédéfinie de la bibliothèque Divi. Pour cette conception, nous utiliserons la Marina Landing Page du Marina Layout Pack.

Ajoutez une nouvelle page à votre site Web et donnez-lui un titre, puis sélectionnez l'option Utiliser Divi Builder.

Nous utiliserons une mise en page prédéfinie de la bibliothèque Divi pour cet exemple, alors sélectionnez Parcourir les mises en page.

Recherchez et sélectionnez la mise en page Marina Landing Page.

Sélectionnez Utiliser cette mise en page pour ajouter la mise en page à votre page.

Nous sommes maintenant prêts à construire notre conception.

Première mise en page

Pour notre première conception, nous ajouterons un motif en chevron à la première image d'en-tête. Cela ajoutera un certain intérêt visuel à l'en-tête. En raison du mode de fusion que nous appliquerons, le motif sera plus subtil et permettra toujours à l'image d'arrière-plan d'être visible.

Tout d'abord, ouvrez les paramètres de la section et accédez à la section Arrière-plan. Cliquez sur l'onglet Motif et sélectionnez Ajouter un motif d'arrière-plan.

Ensuite, sélectionnez le type de motif. Comme vous pouvez le voir, il existe de nombreux modèles différents parmi lesquels choisir, et ils peuvent tous être personnalisés davantage par les paramètres de modèle ci-dessous.

• Type de motif : Chevrons inversés 2

Ajout du mode de fusion de motifs

Enfin, définissez le mode de fusion du motif. Nous utiliserons le mode de fusion Soft Light pour cet en-tête. Ce mode de fusion rend le motif plus subtil afin qu'il ne détourne pas l'attention de l'image d'arrière-plan.

• Mode de mélange de motifs : lumière douce

Conception finale

Voici la conception finale de notre première mise en page.

Voici la vue mobile pour cette conception.

Deuxième mise en page

Pour la deuxième mise en page, nous ajouterons un modèle à la section Comment ça marche de la mise en page de la page d'accueil Marina. Nous utiliserons un motif de vagues superposé sur l'image de fond et le dégradé, ce qui va bien avec le thème nautique de la page. Commençons.

Tout d'abord, accédez à la section Comment ça marche et ouvrez les paramètres de la section. Ouvrez les paramètres d'arrière-plan, puis sélectionnez l'onglet Motif, puis cliquez sur Ajouter un motif d'arrière-plan.

Pour cette conception, nous utiliserons le type de motif Vagues.

• Type de motif : Vagues

Ensuite, changez la couleur du motif en blanc.

• Couleur du motif : #FFFFFF

Ajout du mode de fusion de motifs

Nous pouvons maintenant ajouter le mode de fusion à notre motif. Définissez le mode de fusion du motif sur superposition. Ce mode de fusion assombrit les couleurs sombres de l'image d'arrière-plan et éclaircit les couleurs claires. Lorsque le mode de fusion est ajouté à cette section, le motif de vague blanche devient des nuances de bleu, créant un effet de motif intéressant qui convient parfaitement au design de cette page.

• Mode de fusion de motifs : superposition

Conception finale

Voici la conception finale de la section Comment ça marche.

Et voici la conception mobile.

Troisième mise en page

Commençons notre troisième mise en page. Pour cette mise en page, nous ajouterons des rayures diagonales opaques à l'arrière-plan de la section "Sécurité et réparations de premier ordre".

Commencez par ouvrir les paramètres de la section et accédez à la section d'arrière-plan. Cliquez sur l'onglet Motif, puis sélectionnez Ajouter un motif d'arrière-plan.

Sélectionnez le motif Rayures diagonales.

Ensuite, définissez la couleur du motif.

• Couleur du motif : rgba (255,255,255,0.25)

Retournez le motif horizontalement à l'aide des paramètres de transformation de motif. Il s'agit d'un autre paramètre qui peut vous aider à affiner le motif à votre guise.

• Transformation de motif : horizontale

Ajout du mode de fusion de motifs

Enfin, définissez le mode de fusion du motif. Pour cette conception, nous utiliserons le mode de fusion de luminosité. Ceci, combiné à notre couleur de motif, ajoute un écran lumineux à l'image tout en permettant à la photo de transparaître. Avec ce design, l'image du bateau se démarque davantage de l'arrière-plan car le motif ajoute un contraste distinctif.

• Mode de fusion des motifs : luminosité

Conception finale

Voici la conception finale de cette section.

Et voici la conception mobile pour cette section.

Résultat final

Examinons maintenant la conception complète de la page avec les modes de fusion de motifs.

Dernières pensées

L'ajout d'un motif peut être un excellent moyen d'ajouter un intérêt visuel à votre image d'arrière-plan, mais parfois le motif peut submerger l'image d'arrière-plan. Ou peut-être voulez-vous que la couleur de votre motif change en fonction de l'image derrière. Heureusement, Divi est livré avec de nombreux modes de fusion afin que vous puissiez personnaliser les motifs autant que vous le souhaitez. Vous pouvez jouer avec différentes combinaisons de motifs, modes de fusion, couleurs de motifs, tailles de motifs et bien d'autres paramètres Divi pour créer un design totalement unique pour vos images d'arrière-plan.

J'espère que ce didacticiel vous a inspiré pour incorporer des modèles et utiliser des modes de fusion dans vos conceptions de sites Web! Pour un autre didacticiel de conception utilisant des motifs, consultez ce didacticiel pour apprendre à créer des masques de motifs d'arrière-plan subtils. Et pour un aperçu des différents filtres, effets et modes de fusion que vous pouvez utiliser avec Divi, jetez un œil à ces articles : Partie 1 et Partie 2. Avez-vous déjà utilisé les motifs et les modes de fusion de Divi sur vos images d'arrière-plan ? Faites le nous savoir dans les commentaires!