Beaver Builder 2.9 a introdus o nouă caracteristică puternică de design: fundaluri cu mai multe straturi . Această actualizare vă oferă un control mai creativ asupra rândurilor, coloanelor și modulelor de cutii, permițându -vă să stivați culorile de fundal, gradienții și imaginile - toate într -un singur loc.

Dar cu mai multă putere vine nevoia de un design atent. În acest articol, vom parcurge modalități inteligente de a utiliza această nouă caracteristică și de a împărtăși sfaturi pentru a vă ajuta să beneficiați la maxim.

Care sunt fundalurile cu mai multe straturi?

Fundalurile cu mai multe straturi sunt un plus puternic pentru Beaver Builder care vă permite să stivați mai multe elemente de fundal-cum ar fi imagini, gradienți și culori-cu o singură coloană, rând sau modul de cutie.

În loc să alegeți un singur tip de fundal, puteți combina mai multe pentru a crea o experiență mai antrenantă și bogată din punct de vedere vizual pentru utilizatorii dvs.:

Iată cum ar putea arăta un fundal cu mai multe straturi:

• Strat de bază : o imagine de înaltă calitate stabilește tonul și contextul pentru secțiune.
• Strat de mijloc : Un gradient semi-transparent adaugă contrast și ajută la asigurarea textului rămâne lizibil.
• Top Strat : O suprapunere de culoare a mărcii sau o textură subtilă leagă totul și vă consolidează identitatea vizuală.

Amestecând aceste elemente, puteți crea fundaluri care au atât un apel estetic, cât și claritatea funcțională. Rezultatul este un aspect cu profunzime, contrast și textură vizuală - fără a copleși utilizatorul.

Indiferent dacă proiectați o secțiune Hero, un bloc de apel la acțiune sau o grilă de caracteristici, fundaluri cu mai multe straturi oferă flexibilitate și control creativ care vă ridică designul de la plat la complet dimensional.

De ce să folosiți fundaluri cu mai multe straturi?

Fundalurile cu mai multe straturi sunt o modalitate excelentă de a vă ridica design-urile vizual-fără a scrie o singură linie de cod. Prin stivuirea culorilor, gradienților și imaginilor de fundal, puteți crea efecte atrăgătoare care îmbunătățesc atât estetica, cât și utilizarea:

Iată câteva motive practice pentru a utiliza fundaluri stratificate:

• Îmbunătățirea lizibilității textului : adăugați o suprapunere sau un gradient în spatele textului pentru a crește contrastul și lizibilitatea - mai ales atunci când utilizați fundaluri de imagine.
• Consolidați -vă identitatea de marcă : folosiți culorile, modelele sau texturile de marcă în straturi de fundal pentru a crea o experiență vizuală mai coezivă și mai recunoscută.
• Atrage atenția asupra unor zone de conținut importante : fundalurile stratificate pot ghida ochiul utilizatorului către apeluri cheie la acțiune, secțiuni prezentate sau conținut promoțional.

Și cel mai bine - totul este făcut în Beaver Builder UI. Nu este necesară CSS suplimentar sau configurare complexă. Cu doar câteva clicuri, puteți crea modele dinamice, stratificate, care sunt la fel de funcționale pe cât sunt frumoase.

Cum se folosește fundaluri cu mai multe straturi în Beaver Builder

Puteți amesteca și potrivi cât mai multe tipuri de fundal pe care doriți - culori, gradienți și imagini - în orice comandă:

Iată cum să adăugați mai multe fundaluri la un rând, o coloană sau un modul de casetă:

1. Deschideți elementul pentru editare
   Faceți clic pentru a edita modulul de rând, coloană sau casetă unde doriți să aplicați un fundal cu mai multe straturi.
2. Accesați setările de fundal
   În panoul Setări ale modulului, navigați la secțiunea de fundal .
3. Activați mai multe fundaluri
   Selectați opțiunea mai multor fundaluri pentru a activa stratificarea.
4. Adăugați primul dvs. fundal
   Faceți clic pe pictograma + pentru a adăuga un tip de fundal, apoi alegeți din culoare , fotografie sau gradient . Personalizați setările după cum este necesar.
5. Adăugați mai multe straturi de fundal
   Faceți din nou clic pe pictograma + pentru a adăuga un alt strat. Repetați procesul pentru fiecare tip de fundal pe care doriți să îl stivați.
6. Salvați -vă modificările
   După ce sunteți mulțumit de designul de fundal stratificat, faceți clic pe Salvați .

Cu doar câteva clicuri, puteți crea fundaluri frumos stratificate care adaugă profunzime vizuală și sporesc lizibilitate.

Sfaturi de proiectare pentru stratificare ca un profesionist

Pentru a vă ajuta să profitați la maxim de această caracteristică, iată șapte sfaturi rapide pentru utilizarea în mod eficient a fundalurilor cu mai multe straturi.

1. Gradienți de strat peste imagini pentru o mai bună lizibilitate

Suprapuneți-vă un gradient întunecat sau semi-transparent pe deasupra unei imagini de fundal pentru a stimula vizibilitatea textului. Acest lucru ajută textul alb sau de culoare deschisă, fără a pierde impactul imaginii tale. Este un truc simplu care îți menține conținutul clar și lizibil.

2. Păstrați -l subtil, fără a distrage atenția

Mai puțin este mai mult. Lipiți -vă de 2–3 straturi de fundal pentru a evita copleșirea aspectului. Prea multe texturi sau culori strălucitoare pot distrage utilizatorii și vă pot răni mesajul. Obiectivul unor modele curate, concentrate, care ghidează atenția - nu -l fură.

3. Folosiți culorile mărcii în mod strategic

Folosiți paleta de marcă pentru a crea gradienți sau suprapuneri de culoare. Acest lucru consolidează identitatea mărcii și adaugă o notă profesională site -ului dvs. Este o modalitate inteligentă de a combina stilul vizual cu un brand consistent.

4. Adăugați interesul vizual cu stivuirea straturilor

Combinați culorile solide, gradienții și imaginile pentru a crea adâncime - nu este necesară mișcarea. De exemplu, stratificați o textură subtilă sub o suprapunere de culoare translucidă pentru a oferi designului dvs. mai multă bogăție și complexitate.

5. Test pentru reacție mobilă

Un fundal care arată uimitor pe desktop s -ar putea să nu funcționeze pe ecrane mai mici. Cu Beaver Builder, aveți un control complet asupra setărilor receptive, astfel încât să puteți ajusta poziționarea stratului, scala sau chiar ascundeți anumite straturi pe mobil.

6. Evidențiați secțiunile cheie cu textură vizuală

Trebuie să atrageți atenția asupra unei secțiuni de apel la acțiune sau prezentat? Utilizați o imagine texturată sub un gradient pentru a crea un interes vizual subtil. Această tehnică ajută la evidențierea zonelor importante fără a perturba fluxul de proiectare.

7. Folosiți opacitatea pentru a amesteca straturile fără probleme

Reglați opacitatea fiecărui strat pentru a crea amestecuri perfecte între culori și imagini. Opacitățile inferioare înmoaie tranzițiile, permițându -vă să construiți modele stratificate care se simt naturale și coezive.

Cazuri de utilizare din lumea reală

Căutați inspirație cu privire la modul de utilizare a fondurilor cu mai multe straturi în mod eficient? Iată câteva idei de design din lumea reală pentru a vă începe:

• Secțiuni Hero : Combinați imagini cu suprapuneri de culoare pentru o introducere curată, cu impact mare.
• Call-to-actions (CTA) : Utilizați culori și texturi cu caractere aldine pentru a capta instantaneu atenția.
• Repere bloguri : Aplicați fundaluri de gradient și imagini pentru a face ca titlurile să iasă în evidență.
• Grilele Bento : Utilizați texturi și culori stratificate în spatele fiecărui bloc pentru a crea profunzime și interes vizual.

Încercați aceste idei în următorul aspect pentru a crea pagini care se angajează vizual care lasă o impresie de durată.

Următorul: straturi de fundal salvate

În urma unei actualizări viitoare, veți putea salva și reutiliza fundaluri cu mai multe straturi pe site-ul dvs. Acest lucru va facilita menținerea în mod consecvent a proiectelor și reducerea configurației repetitive. Deocamdată, aveți opțiunea de a vă salva rândurile, coloanele și modulele pentru reutilizare în altă parte pe site -ul dvs.

Încercați astăzi fundaluri cu mai multe straturi

Câmpul de fundal cu mai multe straturi este disponibil acum în Beaver Builder 2.9. Indiferent dacă proiectați o secțiune Hero, un rând de caracteristici sau o casetă de apel, această caracteristică deschide ușa către posibilități creative interminabile - fără a atinge o linie de cod. → Explorați documentele și începeți.