Rebranding -ul unui site web în 5 minute cu atribute extinse

Rebranding -ul site -ului dvs. web nu necesită o reconstrucție completă, deși de multe ori se simte așa. Fonturile sunt blocate în părți separate, culorile sunt răspândite pe secțiuni, iar distanțarea este ascunsă în setări individuale. Și după actualizarea paginii de pornire, găsiți alte pagini care au nevoie de aceleași modificări. Este rutina obișnuită, dar există o cale mai rapidă.

Cu atribute extinse în Divi 5, puteți stiliza un singur element și puteți aplica instantaneu acest aspect la fiecare modul similar pe rânduri, secțiuni și chiar întreaga pagină. Să trecem prin cum să -l folosim pentru a rebrand un site complet în câteva minute, nu în ore.

Ce sunt atributele extinse în Divi 5

Extindeți atributele este o caracteristică DIVI 5 care vă permite să luați designul unui modul și să o aplicați la alte elemente sau module din jurul său. Acest lucru înseamnă că dacă ați conceput un buton, o rubrică sau un bloc de text, nu trebuie să recreați aceste stiluri de la zero, deoarece le puteți extinde doar la alte elemente.

Iată cum funcționează în practică. Începi prin a edita orice modul din Visual Builder. Apoi, în loc să repetați acele modificări modul după modul, trebuie doar să faceți clic dreapta pe modul și să alegeți extinderea atributelor.

Divi va întreba unde doriți să meargă acele stiluri. După ce confirmați, toate modulele potrivite adoptă aceleași stiluri. Extindeți atributele nu caută ce se potrivește, ci copiază aspectul curent și îl aplică la ținta la alegere.

Acest lucru îl face una dintre cele mai rapide modalități de a derula modificările de proiectare fără a micromana fiecare bloc. Vă ajută să transformați stilul repetitiv într -o singură acțiune, indiferent dacă construiți de la zero sau rebrandați un aspect întreg.

Cum extinde atributele ajută la rebrandul unui site web mai rapid

Vom parcurge modul în care puteți utiliza atributele extinse singure și, de asemenea, cu presetări de grupuri de opțiuni pentru a accelera procesul de rebranding al site -ului dvs. web.

Utilizarea atributelor extinse în Divi 5

Procesul este simplu: stilul un singur modul, faceți clic dreapta pentru a alege atributele Extindeți și extindeți acele opțiuni de proiectare la fiecare modul similar, fără a deschide un singur panou de setare de două ori. Să ne plimbăm prin el folosind un exemplu real.

Spuneți că doriți să rebrandați toate butoanele de apel la acțiune. Începeți prin a coaja un modul de buton în interiorul constructorului vizual.

După ce ați terminat, faceți clic dreapta și selectați Extindeți atributele. (Am selectat atributele de proiectare a butonului Extension, deoarece dorim doar să extindem stilurile, nu conținutul. Veți observa, de asemenea, multe opțiuni, care vă ajută să micro-selectați proprietăți specifice.)

Panoul de atribute Extended se va deschide și puteți alege dintre mai multe opțiuni diferite pentru a decide cum și unde ar trebui aplicate modificările dvs. de proiectare.

• (1) Extindeți de la element: modulul de la care extindeți, ca butonul, în cazul nostru. Acest lucru este completat automat pe baza a ceea ce ați făcut clic dreapta.
• (2) Extindeți -vă la locație: alegeți cât de departe ar trebui să ajungă designul. Am selectat întreaga pagină din moment ce dorim ca toate butoanele din pagină să se schimbe.
• (3) Extindeți -vă la tipul de element: alegeți ce tipuri de module ar trebui să primească noile stiluri. De exemplu, numai module de butoane sau toate module similare.
• (4) Tip de atribut pentru a extinde: specificați ce doriți să copiați. Am ales atributele de design și am lăsat pe alții afară.
• )
• (6) Câmpuri modificate pentru a extinde: Puteți, de asemenea, să vă limitați selecția la o singură proprietate de stil sau să alegeți toate câmpurile modificate pentru a extinde toate modificările pe care le -ați făcut.

După selectarea preferințelor dvs., faceți clic pe Extindeți atributele, iar noile stiluri vor fi aplicate tuturor celorlalte butoane de pe pagină.

Ați observat cum nu este nevoie să căutați valori potrivite? Asta pentru că extinderea atributelor nu îi pasă care au fost stilurile originale. Copiază aspectul curent din modulul selectat și îl lipsește direct pe fiecare modul similar din locația aleasă.

Aceasta este ceea ce îl face atât de util pentru pachetele de aspect și site -urile web existente. Extindeți atributele vă oferă un control total cu un modul în stil și un singur clic, indiferent dacă ajustați dimensiunile fontului, actualizați culorile sau modificarea distanției.

Aflați totul despre extinderea atributelor

Utilizarea presetărilor de grupuri de opțiuni cu atribute extinse

Când lucrați pe un site web cu mai multe pagini, nu este suficient să copiați doar stiluri vizual. Vrei un sistem care să se lipească și de aici intră presetările.

Presetările vă permit să salvați un grup de stiluri în orice modul și să le reutilizați pe site -ul dvs. Combinați acest lucru cu atributele extinse și aveți o modalitate rapidă și flexibilă de a rebrand nu doar o pagină, ci și întregul dvs. site web. Această combinație vă ajută, de asemenea, să vă dobândiți site-ul dvs. web, astfel încât, dacă aveți nevoie să rebrandați din nou, puteți modifica cu ușurință presetările și toate modulele în care acestea sunt utilizate se vor actualiza.

Să revenim la exemplul butonului pentru a înțelege cum funcționează acest lucru.

Am conceput un buton cu un aspect nou. Acum, în loc să extindem setările ca valori statice, le vom salva ca presetări.

Iată unde apar atributele Extension. Când faceți clic pe Atributele Extension, veți vedea că presetările pe care le -ați salvat apar. Selectați individual dacă doriți să extindeți doar presetările selectate sau alegeți presetările cu buton Extend pentru a le transporta pe toate.

Când vă extindeți, Divi nu copiați doar aspectul; Se aplică presetarea salvată în culise. Deci, orice alt buton pe care îl atinge acum folosește aceeași presetare.

De ce să adăugați un alt pas? Aici beneficiază de viitorul dvs. site-ul dvs. web. Să presupunem că în următoarele câteva luni decideți să vă modificați stilul butonului mai târziu. Ați dori să extindeți din nou stilurile? Nu, nu?

Ei bine, nici măcar nu trebuie pentru că trebuie să actualizați presetarea o singură dată. Deoarece toate modulele butonului dvs. au fost construite cu aceeași presetare, fiecare instanță folosind -o actualizări automat.

În plus, odată salvate, presetările de grupuri de opțiuni sunt disponibile și pe alte pagini. Așadar, când ați terminat de rebranding pagina de pornire și vă veți muta la alții, veți aplica doar presetările salvate și le veți prelungi în câteva minute.

De aceea, utilizarea presetărilor de grupuri de opțiuni cu atribute extensive este un mod mai inovator de rebrand. Obțineți consistență vizuală și un sistem ușor de actualizat fără a vă reface munca.

Aflați totul despre presetările de grupuri de opțiuni

Vrei să încerci singur? Veți avea nevoie de Divi 5, care aduce atribute extinse, presetări de grupuri de opțiuni și multe alte funcții în noul constructor. A fost reproiectat de la sol pentru viteză, control și un flux de lucru de design mai ușor.

Cum să rebrandați un site web cu atribute extinse

Acum, când ați văzut cum funcționează Atributele Extension și cum se împerechează cu presetările de grupuri de opțiuni, este timpul să îl aplicați pe un site web real.

Pentru acest pas, vom folosi pachetul de aspect software AI. Este un site web complet, cu pagini precum Home, About, Contact și Preț. Nu vizăm o revizuire completă aici. Este doar un rebrand ușor, genul pe care l -am face în mod normal în actualizările noastre lunare.

Pentru început, priviți elementele care definesc identitatea vizuală a site -ului dvs., cum ar fi butoanele, rubricile, neclaritatea și textul corpului. Aceste module apar pe mai multe pagini și poartă cea mai mare parte a personalității mărcii. Odată ce te -ai odihnit doar câteva dintre ele, extinde atributele vă permite să împingeți acele schimbări peste tot unde apar.

Să parcurgem exact ce să actualizăm.

Rebrand vizual modulele cheie de -a lungul aspectului

Vom începe cu pagina principală, deoarece stabilește tonul pentru restul site -ului. Majoritatea site -urilor web repetă aceleași modele de design pe mai multe pagini, așa că, odată ce actualizăm pagina principală, veți avea fundamentul pentru orice altceva.

După ce am scanat aspectul, am identificat elementele cele mai vizibile care modelează aspectul mărcii. Acestea sunt butoane, rubrici, blurbs, text corp și imagini. Întrucât ne -am rebranșat deja butoanele, vom începe cu rubrici.

Rebranding Module de rubrică

În primul rând, personalizați orice modul de rubrică pentru a reflecta noul dvs. branding. Voi începe cu H4S.

După ce sunteți mulțumit de stil, faceți clic dreapta pe modul și alegeți atributele Extindeți . Selectați domeniul de aplicare pentru întreaga pagină și tipul modulului pentru text . Aplicați modificarea la toate modulele H4 de pe pagină.

În mod similar, veți rebrand H1, H2 și H4S pentru a uni tipografia și pentru a oferi site -ului dvs. o voce consistentă în doar câteva clicuri, fără a se odihni manual fiecare modul de rubrică.

Rebranding textul corpului pentru o mai bună lizibilitate

Acum să actualizăm textul corpului. Începeți prin a alege orice modul de text cu un bloc de paragrafe. Personalizați pentru a se potrivi cu tonul mărcii dvs. Când sunteți mulțumit de modificări, faceți clic dreapta pe modul și selectați Extindeți atributele . Alegeți să aplicați actualizarea pe toate modulele de text din pagină.

Acest lucru oferă paragrafelor dvs. un stil consistent pe pagină în câteva secunde și elimină nevoia de a edita fiecare individual.

Rebranding Blurb Borders

În continuare, vreau să adaug o bordură pentru a eficientiza toate modulele mele Blurb. Așadar, voi stiliza o coloană, apoi faceți clic dreapta pe coloana din fila Design a rândului și selectați stiluri de copiere . Apoi, lipiți stiluri la următoarea coloană și așa mai departe.

Veți observa că am schimbat aspectul rândului în Flex și Divi a egalizat automat înălțimile coloanei, păstrând neclamantele aliniate, indiferent de conținutul pe care îl conțin. Acest lucru funcționează deoarece Divi acceptă acum funcțiile FlexBox, care vă ajută să construiți mai repede machete inteligente receptive.

Rebrand alte pagini folosind presetări salvate

Acum că pagina principală este actualizată, nu trebuie să repetați procesul de la zero. Puteți duplica secțiuni sau rânduri în alte pagini sau, din moment ce ați salvat noile stiluri ca presetări de grupuri de opțiuni, sunteți deja setat.

Presetările dvs. salvate vor apărea pe toate paginile.

Tot ce trebuie să faceți este să le aplicați acolo unde este necesar și să folosiți atribute extinse pentru a împinge stilurile instantaneu. Nu există modificări manuale și nici o lucrare de proiectare repetată.

Puteți urma același proces pentru a rebrand alte pagini de pe site -ul dvs. web.

Extindeți atributele vă oferă flexibilitatea de a vă bucura din nou de rebranding. Sunt minunate atunci când doriți să redactați vizual module pe o pagină.

Dar dacă trebuie să schimbați o valoare specifică, cum ar fi un cod hex, dimensiunea fontului sau unitatea de distanțare, pe diferite module, veți dori să încercați să găsiți și să înlocuiți. Funcționează deosebit de bine pentru pachetele de aspect care folosesc valori codate. Puteți utiliza Găsiți și înlocuiți pentru a schimba cei cu variabile de proiectare salvate pentru a obține mai multă flexibilitate pentru actualizările viitoare.

Sfat Pro: Utilizați atributele Extindeți cu variabile de proiectare

Extindeți atributele nu copiază doar stilurile statice; De asemenea, poate transporta variabilele de design salvate. De exemplu, dacă ați atribuit o variabilă de font de rubrică unui modul de text, puteți extinde setările acelui modul la toate celelalte module de text de pe pagină. În loc de fiecare rubrică care poartă valori codificate, toate moștenesc aceeași variabilă.

Aceasta înseamnă că actualizările viitoare sunt și mai ușoare: ajustați variabila o dată în managerul variabilului și fiecare modul extins se actualizează automat. Este o modalitate puternică de a combina extinderea atributelor cu sistemul variabil Divi 5 pentru controlul scalabil, la nivel de marcă.

Extindeți atributele vă permite să vă rebrandați fără reconstruire

Rebranding nu trebuie să însemne reconstrucția. Cu atribute extinse, stilați un modul și aplicați acest aspect la restul, reducând orele de modificări până la secunde.

Indiferent dacă lucrați cu un pachet de aspect sau actualizați un site live, Divi 5 vă oferă cea mai rapidă modalitate de a vă reîmprospăta designul fără a atinge fiecare element.