Suntem încântați să anunțăm cea mai recentă actualizare a Beaver Builder, versiunea 2.8, care introduce o nouă caracteristică interesantă – Global Styles.

Global Styles vă oferă posibilitatea de a vă defini preferințele de stil pentru elemente și culori în cadrul generatorului de pagini Beaver Builder. Aceste stiluri globale sunt apoi puse la dispoziție pe întregul site web, îmbunătățind fluxul de lucru pentru design web.

În acest articol, vom arunca o privire mai atentă la ceea ce are de oferit Global Styles. Apoi, vă vom arăta cum să utilizați Global Colors pentru a vă îmbunătăți experiența de design web.

Ce sunt stilurile globale?

Stiluri globale este o funcție nouă și puternică în Beaver Builder 2.8, care vă permite să setați preferințele de stil pentru elemente și culori în aspectul dvs. Beaver Builder.

Aveți flexibilitatea de a vă personaliza designul site-ului web pentru a se potrivi cu preferințele dvs. de design. Indiferent dacă preferați un aspect curat și minimalist sau un stil îndrăzneț și vibrant, Global Styles vă permite să personalizați cu ușurință aspectul site-ului dvs.

Cu doar câteva clicuri, puteți seta stilul preferat pentru text, titluri, linkuri, butoane și culori, asigurând un aspect coeziv și profesional pe întregul site:

Această caracteristică exclusivă, disponibilă numai în versiunea premium a generatorului de pagini Beaver Builder, vă oferă flexibilitatea de a personaliza elementele și culorile fără efort în Beaver Builder:

• Elemente globale – Setați stiluri pentru diferite elemente html care sunt controlate de Beaver Builder, cum ar fi text, titluri, legături și butoane.
• Culorile globale – Stabiliți o paletă de culori coerentă, accesibilă prin Beaver Builder, simplificând selecția culorilor în Stiluri globale și alte selecții de culori.

Nu mai ajustați manual stilurile pentru fiecare element de pe fiecare pagină – Global Styles simplifică fluxul de lucru de proiectare, permițându-vă să vă concentrați pe creativitate, menținând în același timp coerența pe site-ul dvs.

Cum setez stiluri globale în Beaver Builder?

Unul dintre avantajele cheie ale Global Styles este modul în care eficientizează procesul de proiectare. În loc să ajustați manual stilurile pentru fiecare element din fiecare pagină, Global Styles vă permite să vă setați preferințele o dată și să le aplicați la nivel global.

Pentru a seta stiluri globale în Beaver Builder, faceți clic pe Lansare Beaver Builder pentru a deschide editorul Beaver Builder.

Apoi, navigați la meniul Instrumente, găsit făcând clic pe săgeata din bara de sus din colțul din stânga sus al ecranului de editare. Derulați în jos și selectați „Stiluri globale” din listă:

Aceasta va deschide caseta pop-up Setări Global Styles:

Să aruncăm o privire la modul în care puteți utiliza aceste setări de stil, Elemente și culori , pentru a vă personaliza designul site-ului.

Pasul 1. Setați elementele globale

În primul rând, să explorăm fila Elemente. Aici puteți configura stiluri globale pentru elemente precum text, titluri, linkuri și butoane. Opțiunile de stil disponibile constau dintr-un selector de culoare, setări de tipografie, iar pentru butoane, există opțiuni pentru chenare și ajustări de rază.

• Text – Opțiunile de stil Global Text vă permit să personalizați textul inclus în etichetele <p> și <span>. Alegeți culoarea textului folosind instrumentul de selectare a culorilor și ajustați setările de tipografie, inclusiv fontul, stilul și spațierea și umbra textului:

• Titluri – Opțiunile globale de stil pentru titluri vă permit să personalizați toate etichetele de titlu individual (<h1>, <h2>, <h3>, <h4>, <h5> și <h6>). Aceste setări oferă aceleași opțiuni de personalizare ca și setările Text:

• Legături – Opțiunile globale de stil pentru linkuri vă permit să personalizați aspectul legăturilor HTML, care include, de asemenea, un selector de culoare suplimentar pentru culoarea de trecere a linkului. Rețineți că, dacă nu ați configurat niciun stil global pentru Linkuri, stilul global Text va fi utilizat în schimb:

• Butoane – Cu opțiunile globale de stil Button , puteți personaliza aspectul etichetelor butoanelor (<button>) și orice link HTML utilizând clasa fl-button . Ajustați culorile, tipografia și opțiunile de chenar pentru a obține stilul dorit de buton:

Rețineți că setul de stil Element de aici este aplicat universal tuturor modulelor de pe site-ul dvs. web cărora le lipsesc opțiuni de stil preconfigurate. Cu toate acestea, aveți flexibilitatea de a suprascrie aceste alegeri de stil de la caz la caz, utilizând opțiunile de stil specifice modulului.

Pasul 2. Setați culorile globale

Fila Culori vă permite să stabiliți o paletă de culori unificată, accesibilă pe întregul site web. Aceste culori pot fi accesate cu ușurință în planurile dvs. Beaver Builder folosind instrumentul de selectare a culorilor și o conexiune de câmp de culoare.

Pentru a adăuga o culoare globală, mergeți la Stiluri globale din meniul Instrumente și selectați fila Culori:

Apoi, atribuiți un nume culorii dvs., cum ar fi „culoare primară” și alegeți nuanța dorită folosind selectorul de culori:

Pentru a include culori suplimentare, faceți clic pe butonul „ Adăugați culori globale ” sau duplicați un element de culoare existent:

Culorile globale sunt flexibile. Pictogramele de mutare, duplicare și ștergere facilitează lucrul cu paleta de culori din setările Stilurilor globale:

Vă puteți organiza culorile trăgându-le și plasându-le în secvența preferată folosind pictograma Mutare situată în colțul din dreapta sus al elementului de culoare pe care doriți să-l repoziționați.

Dacă nu mai aveți nevoie de o anumită culoare, ștergerea unui element Global Color este ușor. Doar faceți clic pe pictograma Ștergere din colțul din dreapta sus al elementului de culoare pe care doriți să îl eliminați.

Cum se aplică culori globale în Beaver Builder

Acum că v-am familiarizat cu setările Global Styles din Beaver Builder, să ne aprofundăm în valorificarea puterii Global Colors pentru a vă îmbunătăți fluxul de lucru de web design.

Odată ce alegerile dvs. globale de culoare sunt setate, acestea sunt puse la dispoziție în toate aspectele dvs. Beaver Builder, asigurând o experiență de design perfectă și coerentă.

Pentru a aplica o culoare globală, accesați pur și simplu fereastra Setări pentru un rând, coloană sau modul. Apoi, găsiți opțiunea Culoare și faceți clic pe Comutator conexiune câmp .

Apoi, alegeți culoarea globală dorită din meniul Field Connection :

Cu Global Colors, aveți instrumentele necesare pentru a menține fără efort un site web consistent și atrăgător din punct de vedere vizual.

Setați stilurile globale Beaver Builder modul de răspuns

După ce ați setat preferințele globale de stil pentru vizualizarea Desktop, puteți comuta pictograma setărilor receptive pentru a comuta între dimensiunile dispozitivului. Indiferent dacă adăugați noi pagini, secțiuni sau module, stilurile dvs. predefinite sunt disponibile cu ușurință, indiferent de dimensiunea ecranului.

De exemplu, lângă titlul Tipografie există o pictogramă pentru setările receptive. Faceți clic pe această pictogramă pentru a adăuga diferite setări pentru dispozitivele foarte mari, mari, medii și mici:

Alternativ, puteți alege Modul receptiv din meniul Instrumente sau folosind comanda rapidă de la tastatură.

Dacă alegeți să nu adăugați setări pentru fiecare dimensiune de dispozitiv, setările desktop se vor aplica tuturor.

Noțiuni introductive cu stilurile globale

Începeți cu Global Styles este ușor. Pur și simplu actualizați pluginul Beaver Builder la versiunea 2.8 și veți găsi caracteristica Stiluri globale în setările pluginului. De acolo, puteți defini stilul preferat pentru text, titluri, linkuri, butoane și culori, toate dintr-o singură locație centralizată.

Prin centralizarea preferințelor de stil cu Global Styles, veți experimenta o îmbunătățire semnificativă a fluxului de lucru. Spune la revedere sarcinilor de stil repetitive și salută un proces de proiectare a site-ului web mai eficient și mai eficient. Acum, cu Global Styles în Beaver Builder, vă puteți concentra mai mult pe creativitate și mai puțin pe sarcini repetitive.

Concluzie

Odată cu introducerea Global Styles în Beaver Builder 2.8, proiectarea de site-uri web frumoase și profesionale nu a fost niciodată mai ușoară. Indiferent dacă sunteți un designer web experimentat sau începător, Global Styles este exact ceea ce aveți nevoie pentru a vă accelera fluxul de lucru.

Faceți upgrade la Beaver Builder 2.8 astăzi și experimentați singur puterea Global Styles!