Cum să transferați un nou stil de design pe o altă pagină utilizând funcțiile de eficiență ale Divi

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să transferați un nou stil de design pe altă pagină folosind pachetul de amenajare a magazinului de mobilă Divi. Cu toate pachetele de layout noi care apar, este posibil să fi dorit să schimbați stilul unei pagini existente folosind stilul noului layout pack. În loc să înlocuiți întreaga pagină, puteți, de asemenea, să transferați stilul de design utilizând funcțiile de eficiență ale Divi. Una dintre cele mai noi opțiuni incluse în Visual Builder este caracteristica de copiere și lipire pe mai multe pagini. Acest lucru vă va permite să efectuați multe modificări de-a lungul aspectului, fără a atinge setările unui element de design.

Dar, desigur, fiecare aspect este unic, ceea ce înseamnă că va trebui să aplicați și unele modificări manuale. Vestea bună este că puteți extinde aceste setări manuale la elemente similare de pe pagină cu un singur clic. Sperăm că această postare vă va ajuta să urmăriți o anumită structură atunci când transferați un stil de design.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului.

Abordare

Structurile paginii diferă unele de altele, de aceea este greu să transferați complet un stil de design dintr-un singur clic. Dar cu Divi, puteți utiliza caracteristicile de eficiență pentru a accelera procesul. Vom combina caracteristica copiere-lipire pe pagini, funcția de extindere a stilurilor și funcția de găsire și înlocuire pentru a economisi timp transferând un stil de proiectare pe o pagină existentă, fără a fi nevoie să modificați structura paginii.

Partea 1: Deschiderea a două pagini una lângă alta

Vom începe deschizând două pagini una lângă alta. Pagina existentă și noua pagină care conține stilul de design pe care dorim să îl aplicăm. Vom lua pagina de destinație a pachetului de machete pentru mobilier (stilul de proiectare pe care dorim să îl aplicăm paginii existente) și pagina de destinație a pachetului de machetare a companiei de găzduire (pagina pe care vrem să o schimbăm).

Partea 2: Resetarea anumitor setări ale secțiunii

A doua parte va fi despre resetarea anumitor setări ale secțiunii. Setările pe care trebuie să le resetați variază de la aspect la aspect, dar includ de obicei setările de fundal și setările divizorului.

Partea 3: Utilizarea caracteristicilor Divi pentru copierea-lipirea și extinderea stilurilor pentru secțiunea Hero

Apoi, putem începe să folosim funcția de copiere-lipire a paginii Divi pentru a începe să schimbăm lucrurile. Lucrul firesc de făcut este să începi cu secțiunile erou. Vom schimba fiecare element de design din secțiunea erou în noul stil de design, copiind setările noului stil de design și lipindu-le pe pagina existentă. După aceasta, vom extinde aceste stiluri la elemente similare de pe pagină.

Partea 4: Efectuați modificări manuale (în funcție de aspect) și utilizați caracteristici de eficiență

Așa cum am menționat anterior, fiecare aspect este unic. De aceea, este necesară și modificarea manuală a paginii existente. După ce s-au făcut cele câteva modificări, puteți extinde stilul sau puteți utiliza funcția de căutare și înlocuire pentru a face aplicarea elementelor similare de pe pagină.

Partea 5: Adăugați caracteristici de proiectare

Nu în ultimul rând, puteți adăuga anumite caracteristici de design și la pagina existentă.

Partea 1: Deschiderea a două pagini una lângă alta

Creați o pagină nouă utilizând aspectul Utilizând pagina de destinație a pachetului de machete pentru magazinul de mobilă

Acum, că am parcurs partea de abordare a acestui post, să începem să folosim Divi! Adăugați o pagină nouă utilizând pagina de destinație a pachetului de machete pentru mobilier.

Creați o pagină nouă utilizând pagina de destinație a pachetului de layout al companiei de găzduire

Creați o altă pagină folosind și pagina de destinație a pachetului de layout al companiei de găzduire. Vom înlocui stilul de design al acestui aspect cu designul paginii de destinație a pachetului de machete pentru magazinul de mobilă.

Partea 2: Resetarea anumitor setări ale secțiunii

Resetați setările specifice secțiunii paginii de destinație a companiei de găzduire

Deschideți secțiunea Hero

După ce aveți ambele aspecte în apropiere, continuați deschizând setările secțiunii erou ale paginii de destinație a companiei de găzduire.

Resetați fundalul secțiunii și extindeți la toate secțiunile

Accesați setările de fundal și resetați opțiunile făcând clic dreapta și făcând clic pe Resetare fundal. După ce ați terminat, puteți extinde aceste stiluri de fundal la toate secțiunile de pe pagină pentru a vă asigura că nicio secțiune de pe pagina dvs. nu conține elemente de fundal.

Resetați divizoarele și extindeți la toate secțiunile

Faceți aceleași lucruri pentru divizoarele de secțiuni pentru a vă asigura că toate separatoarele de secțiune de pe pagină au dispărut.

Partea 3: Utilizarea caracteristicilor Divi pentru copierea-lipirea și extinderea stilurilor pentru secțiunea Hero

Elemente secțiune erou copiere-lipire pagini încrucișate

Setări secțiune

Este timpul să începeți să utilizați opțiunea de copiere-lipire pe mai multe pagini! Vom modifica fiecare element de design din secțiunea erou. Începeți prin a copia stilurile secțiunii erou pe pagina de destinație a magazinului de mobilă. Apoi, reveniți la pagina de destinație a companiei de găzduire și lipiți stilurile secțiunilor copiate.

Setări rând

Faceți același lucru pentru rând.

Modulul de text al titlului

Copiați și stilurile de modul ale titlului Modul text și faceți-le să se aplice la titlul paginii de destinație a companiei de găzduire.

Modulul textului corpului

Deschideți descrierea Text Module în continuare și copiați stilurile de text. După ce faceți acest lucru, faceți-i să se aplice la modulul text de pe pagina companiei de găzduire.

Extindeți stilurile

După ce ați aplicat noile stiluri de text, continuați și extindeți aceste stiluri la toate modulele de pe pagină.

Schimbați orientările textului înapoi în centru unde este necesar

Veți observa că orientarea textului din stânga va fi aplicată tuturor elementelor de design de-a lungul paginii. Puteți să o păstrați așa sau să modificați manual orientarea textului.

Setări buton

Ultimul modul din secțiunea erou la care va trebui să aplicați noi stiluri de module este modulul buton.

Extindeți stilurile pentru setările butoanelor

În loc să extindeți întregul stil de buton, vom extinde setările specifice butoanelor.

Extindeți stilurile pentru spațiere

Împreună cu setările de spațiere.

Extindeți stilurile pentru Box Shadow

Și setările de umbră a casetei, de asemenea.

Copiați-lipiți elementele rămase o dată + Extindeți stilul

Împărțitor

De asemenea, va trebui să copiem și să lipim stilurile modulului divizor și să le facem să se aplice la separatoarele de pe pagina de destinație a companiei de găzduire.

Extindeți stilurile

Din nou, extindeți stilurile acestui modul pe întreaga pagină.

Partea 4: Efectuați modificări manuale (în funcție de aspect) și utilizați caracteristici de eficiență

Modificări specifice aspectului

Găsiți și înlocuiți fontul titlului

E timpul să începeți să faceți câteva modificări manuale! Primul lucru pe care îl vom face este să potrivim fontul. Deschideți un modul de text pe pagină și găsiți fontul Rubik care este utilizat pe toată pagina. Apoi, faceți clic pe Găsiți și înlocuiți și înlocuiți fontul cu Montserrat.

Găsiți și înlocuiți greutatea fontului titlului

Faceți același lucru pentru greutatea fontului. În loc să utilizați Medium, selectați Light.

Găsiți și înlocuiți colțurile rotunjite

De asemenea, eliminăm marginile colțurilor rotunjite de-a lungul paginii folosind Găsire și înlocuire și aplicând „0px” la fiecare dintre colțurile de-a lungul paginii.

Resetați setările de fundal CTA și extindeți stilul în secțiune

Continuați găsind modulele de îndemn la pagină și resetați setările de fundal ale primului modul. Apoi, extindeți aceste stiluri la toate apelurile la acțiune din secțiune.

Găsiți și înlocuiți culoarea de fundal CTA în secțiunea

Odată ce ați făcut-o, va apărea culoarea de fundal implicită. Găsiți și înlocuiți această culoare și schimbați-o în „# 1a2545” în întreaga secțiune.

Găsiți și înlocuiți culoarea textului CTA în secțiunea

Înlocuiți culoarea textului cu „Lumina” și în secțiune.

Modificați setările butonului tabelului de prețuri

Apoi, accesați tabelele de prețuri de pe pagină și modificați setările butonului:

• Culoarea fundalului butonului: # ef6f49
• Lățimea chenarului butonului: 8 px
• Culoare margine buton: # ef6f49
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px (implicit), 1 px (Hover)
• Buton Font: Montserrat
• Greutatea fontului: Semi Bold
• Stilul fontului: majuscule
• Aliniere buton: stânga

Extindeți stilurile pentru tabelele de prețuri și modulele CTA

Extindeți noua setare a butonului la toate tabelele de prețuri și la modulele de îndemn pe toată pagina.

Partea 5: Adăugați caracteristici de proiectare

Culoarea de fundal a secțiunii # 1

În ultima parte a acestui tutorial, vom adăuga manual câteva caracteristici de proiectare. Aceasta include, dar nu se limitează la, setări de fundal. Deschideți secțiunea marcată în ecranul de imprimare de mai jos și modificați culoarea de fundal.

• Culoare fundal: # f7f3ec

Secțiunea Culoare de fundal # 2

Faceți același lucru pentru secțiunea de mai jos.

• Culoare fundal: # f7f3ec

Secțiunea Gradient Background # 1

Apoi, găsiți secțiunea din ecranul de imprimare de mai jos și adăugați un fundal de gradient.

• Culoare 1: #ffffff
• Culoare 2: # 1a2545
• Direcția gradientului: 90 grade
• Poziția inițială: 55%
• Poziție finală: 55%

Secțiunea Gradient Background # 2

Utilizați un alt fundal de gradient pentru secțiunea de mai jos:

• Culoare 1: rgba (210,218,228,0,38)
• Culoare 2: #ffffff
• Direcția gradientului: 90 grade
• Poziția inițială: 45%
• Poziție finală: 45%

Secțiunea Gradient Background # 3

Nu în ultimul rând, adăugați un fundal de gradient liniar și la ultima secțiune a paginii.

• Culoare 1: #ffffff
• Culoare 2: # f7f3ec
• Poziția inițială: 40%
• Poziție finală: 40%

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului.

Gânduri finale

În această postare, v-am arătat cum puteți transfera stilul de design al unui layout folosind funcțiile de eficiență ale Divi. Acest tutorial profită de noua caracteristică de copiere-lipire pe mai multe pagini care face parte din noul Visual Builder. Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, în care încercăm să introducem ceva suplimentar în cutia de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați o secțiune de comentarii mai jos!