Beaver Builder 2.9 a introduit une nouvelle fonctionnalité de conception puissante: les arrière-plans multi-couches . Cette mise à jour vous donne un contrôle plus créatif sur les lignes, les colonnes et les modules de boîte en vous permettant d'empiler les couleurs d'arrière-plan, les gradients et les images, le tout en un seul endroit.

Mais avec plus de puissance vient le besoin d'une conception réfléchie. Dans cet article, nous allons parcourir des moyens intelligents pour utiliser cette nouvelle fonctionnalité et partager des conseils pour vous aider à en tirer le meilleur parti.

Que sont les arrière-plans multicouches?

Les arrière-plans multicouches sont un ajout puissant au constructeur de castors qui vous permet d'empiler plusieurs éléments d'arrière-plan, tels que des images, des gradients et des couleurs - dans une seule colonne, une ligne ou un module de boîte.

Au lieu de choisir un seul type de fond, vous pouvez en combiner plusieurs pour créer une expérience plus engageante et plus riche pour vos utilisateurs:

Voici à quoi pourrait ressembler un fond multicouche:

• Couche de base : une image de haute qualité définit le ton et le contexte de la section.
• Couche moyenne : un gradient semi-transparent ajoute du contraste et aide à garantir que le texte reste lisible.
• Top Layer : Une superposition de couleurs de marque ou une texture subtile relie tout ensemble et renforce votre identité visuelle.

En mélangeant ces éléments, vous pouvez créer des arrière-plans qui ont à la fois l'attrait esthétique et la clarté fonctionnelle. Le résultat est une mise en page avec profondeur, contraste et texture visuelle - sans écraser l'utilisateur.

Que vous conceviez une section de héros, un bloc d'appel à l'action ou une grille de fonctionnalités, des arrière-plans multicouches offrent une flexibilité et un contrôle créatif qui élèvent votre conception de plat à entièrement dimensionnel.

Pourquoi utiliser des arrière-plans multicouches?

Les arrière-plans multicouches sont un excellent moyen d'élever vos conceptions visuellement, sans écrire une seule ligne de code. En empilant des couleurs d'arrière-plan, des gradients et des images, vous pouvez créer des effets accrocheurs qui améliorent à la fois l'esthétique et la convivialité:

Voici quelques raisons pratiques d'utiliser des arrière-plans en couches:

• Améliorez la lisibilité du texte : ajoutez une superposition ou un gradient derrière le texte pour augmenter le contraste et la lisibilité, en particulier lorsque vous utilisez des arrière-plans d'image.
• Renforcez votre identité de marque : utilisez les couleurs, les motifs ou les textures de votre marque dans les couches d'arrière-plan pour créer une expérience visuelle plus cohésive et reconnaissable.
• Attirez l'attention sur des domaines de contenu importants : les arrière-plans en couches peuvent guider l'œil de l'utilisateur vers les appels à l'action clés, les sections en vedette ou le contenu promotionnel.

Et le meilleur de tous - tout est fait dans l'interface utilisateur du Builder Beaver. Aucun CSS supplémentaire ou configuration complexe requis. En quelques clics, vous pouvez créer des conceptions dynamiques et superposées qui sont aussi fonctionnelles que belles.

Comment utiliser des arrière-couches multicouches dans Beaver Builder

Vous pouvez mélanger et assortir autant de types d'arrière-plan que vous le souhaitez - des couleurs, des gradients et des images - dans n'importe quelle commande:

Voici comment ajouter plusieurs arrière-plans à une ligne, une colonne ou un module de boîte:

1. Ouvrez l'élément pour l'édition
   Cliquez pour modifier la ligne, la colonne ou le module de boîte où vous souhaitez appliquer un arrière-plan multi-couches.
2. Accédez aux paramètres d'arrière-plan
   Dans le panneau Paramètres du module, accédez à la section d'arrière-plan .
3. Activer plusieurs arrière-plans
   Sélectionnez l'option multiples arrière-plans pour activer la superposition.
4. Ajoutez votre premier arrière-plan
   Cliquez sur l'icône + pour ajouter un type d'arrière-plan, puis choisissez parmi la couleur , la photo ou le gradient . Personnalisez les paramètres au besoin.
5. Ajouter plus de couches d'arrière-plan
   Cliquez à nouveau sur l'icône + pour ajouter un autre calque. Répétez le processus pour chaque type d'arrière-plan que vous souhaitez empiler.
6. Enregistrez vos modifications
   Une fois que vous êtes satisfait de votre conception d'arrière-plan en couches, cliquez sur Enregistrer .

En quelques clics, vous pouvez créer des arrière-plans magnifiquement en couches qui ajoutent de la profondeur visuelle et améliorent la lisibilité.

Conseils de conception pour la superposition comme un pro

Pour vous aider à tirer le meilleur parti de cette fonctionnalité, voici sept conseils rapides pour utiliser efficacement les arrière-plans multicouches.

1. Couche des gradients sur les images pour une meilleure lisibilité

Recouvrez un gradient sombre ou semi-transparent au-dessus d'une image d'arrière-plan pour augmenter la visibilité du texte. Cela aide le texte blanc ou de couleur claire sans perdre l'impact de votre image. C'est une astuce simple qui maintient votre contenu clair et lisible.

2. Gardez-le subtil, pas distrayant

Moins c'est plus. Tenez-vous à 2 à 3 couches d'arrière-plan pour éviter écraser votre disposition. Trop de textures ou de couleurs vives peuvent distraire les utilisateurs et nuire à votre message. Visez les conceptions propres et ciblées qui guident l'attention - pas la voler.

3. Utilisez les couleurs de marque stratégiquement

Utilisez votre palette de marque pour créer des gradients ou des superpositions de couleurs. Cela renforce l'identité de la marque et ajoute une touche professionnelle à votre site. C'est une façon intelligente de combiner le style visuel avec l'image de marque cohérente.

4. Ajouter un intérêt visuel avec l'empilement de calques

Mélanger les couleurs massives, les gradients et les images pour créer de la profondeur - aucun mouvement requis. Par exemple, superposez une texture subtile sous une superposition de couleur translucide pour donner à votre conception plus de richesse et de complexité.

5. Tester pour la réactivité mobile

Un arrière-plan qui a l'air incroyable sur le bureau peut ne pas fonctionner sur des écrans plus petits. Avec Beaver Builder, vous avez un contrôle total sur les paramètres réactifs afin que vous puissiez ajuster le positionnement, l'échelle de la couche ou même masquer certaines couches sur mobile.

6. Mettez en surbrillance les sections clés avec une texture visuelle

Besoin d'attirer l'attention sur un appel à l'action ou une section en vedette? Utilisez une image texturée sous un dégradé pour créer un intérêt visuel subtil. Cette technique aide à mettre en évidence les domaines importants sans perturber le flux de conception.

7. Utilisez l'opacité pour mélanger les couches en douceur

Ajustez l'opacité de chaque calque pour créer des mélanges transparents entre les couleurs et les images. Des opacités inférieures adoucissent les transitions, vous permettant de construire des conceptions en couches qui semblent naturelles et cohérentes.

Cas d'utilisation du monde réel

Vous cherchez une inspiration sur la façon d'utiliser efficacement les arrière-couches? Voici quelques idées de conception du monde réel pour vous aider à démarrer:

• Sections de héros : combinez des images avec des superpositions de couleurs pour une introduction propre et à fort impact.
• Call-to-action (CTAS) : utilisez des couleurs et des textures audacieuses pour attirer instantanément l'attention.
• Faits saillants du blog : appliquez des arrière-plans de gradient et d'image pour faire ressortir les titres.
• Grilles Bento : utilisez des textures et des couleurs en couches derrière chaque bloc pour créer une profondeur et un intérêt visuel.

Essayez ces idées dans votre prochaine mise en page pour créer des pages visuellement engageantes qui laissent une impression durable.

Suivant: couches d'arrière-plan enregistrées

En venant dans une future mise à jour, vous pourrez enregistrer et réutiliser des arrière-plans multicouches sur votre site. Cela facilitera la conception cohérente et réduira la configuration répétitive. Pour l'instant, vous avez la possibilité d'enregistrer vos lignes, colonnes et modules à réutiliser ailleurs sur votre site.

Essayez les arrière-plans multicouches aujourd'hui

Le champ d'arrière-plan multicouche est disponible dès maintenant dans Beaver Builder 2.9. Que vous conceviez une section de héros, une ligne de fonction ou une boîte de callout, cette fonction ouvre la porte à des possibilités créatives sans fin - sans toucher une ligne de code. → Explorez les documents et commencez.