Cum se utilizează presetările globale cu blocuri de aspect Divi pentru a eficientiza designul postărilor de blog

Crearea de conținut pentru blogul dvs. este suficient de dificilă, fără să vă faceți griji cu privire la design. De aceea, este important pentru site-ul dvs. să aveți elementele de design disponibile (sau pre-proiectate), astfel încât să puteți fi mai concentrat pe crearea de conținut uimitor. Sigur, o temă tradițională pentru copii WordPress poate rezolva această problemă, dar, în majoritatea cazurilor, sunteți blocat cu un design care nu este ușor de schimbat.

Cu Divi, obținem mai mult control asupra experienței de proiectare a unei postări pe blog. Presetările globale ale Divi vă permit să creați un design la nivel de site (cum ar fi o temă pentru copii) pentru elemente de pe întregul site, cu confortul suplimentar de a putea modifica designul oricum doriți cu câteva clicuri. În plus, dacă sunteți obișnuiți să creați conținut în editorul implicit WordPress Block, puteți valorifica puterea blocului Layout Divi pentru a atrage acele elemente Global Preset din mers în conținutul postării. Acest lucru vă va permite să adăugați elemente de design noi într-o postare de blog care se potrivește cu șablonul și cu restul site-ului.

În acest tutorial, vă vom arăta cum să utilizați presetările globale cu blocurile Divi Layout pentru a eficientiza procesul de proiectare a unei postări de blog. Pentru a face acest lucru, vă vom arăta cum să utilizați presetările globale pentru a proiecta conținut nou de postări de blog rapid și eficient. Acest lucru vă va ajuta să creați o experiență de blog care nu compromite brandingul general al site-ului dvs.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

O prezentare rapidă a presetărilor globale

Frumusețea Divi este că vă oferă control deplin asupra designului site-ului dvs. web, utilizând o gamă largă de setări de proiectare pe care le puteți utiliza pentru a personaliza aspectul oricărui element sau modul.

Noul sistem Divi Presets vă permite să proiectați un aspect personalizat pentru un element Divi (cum ar fi un modul buton) și să îl salvați ca preset. Toate modificările de design pe care le efectuați sunt salvate în presetare. Când adăugați un nou modul la pagina dvs., puteți răsfoi presetările salvate și le puteți aplica rapid.

Odată ce a fost aplicată o presetare, designul implicit al modulului este controlat de presetare. Dacă actualizați stilul unei presetări, toate modulele care utilizează presetarea sunt actualizate, de asemenea. Acest lucru vă permite să controlați designul întregului site web utilizând o mică colecție de presetări salvate. În plus, economisește o mulțime de timp atunci când adăugați module noi pe pagina dvs., deoarece nu este necesar să proiectați fiecare modul nou de la zero, ci puteți selecta rapid o apariție din biblioteca Divi Presets.

Ghiduri de presetare globale

Ghidurile de presetare globale (cum ar fi cel pe care îl vom folosi în acest tutorial) pot fi create pentru a începe proiectarea elementelor în timp ce vă proiectați site-ul web. Aceste ghiduri de stil conțin o colecție de module cu diferite presetări care se potrivesc cu designul site-ului dvs. Având presetările disponibile la început, va simplifica procesul de proiectare prin eliminarea oboselii actualizării setărilor de proiectare pentru fiecare nou modul. Avem chiar și un cadru de ghid de stil pentru cei care doresc să-și construiască propriile lor.

O prezentare rapidă a blocurilor de aspect Divi

Blocul Layout Divi permite utilizatorilor să adauge orice Layout Divi la o postare de blog în cadrul editorului Gutenberg. Putem converti chiar și un bloc Divi Layout într-un bloc reutilizabil în Gutenberg la fel ca orice alt bloc WordPress. Acest lucru deschide ușa pentru eficientizarea unor modele utile Divi Layout în fluxul normal de scriere a unui post în Gutenberg.

Cum funcționează împreună presetările globale și blocurile de aspect

Deoarece o presetare globală este „globală”, stilurile presetării respective afectează toate instanțele presetării la nivel de site. Asta înseamnă că puteți utiliza presetări globale atunci când proiectați un element în editorul de blocuri de aspect, iar acele presetări se vor actualiza în consecință. Deci, dacă doriți să adăugați un CTA la conținutul postărilor pe blog folosind blocul de aspect Divi, puteți crea CTA adăugând module cu presetări globale la fel cum ați face o pagină sau o postare normală. Acest lucru vă permite să adăugați elemente de design potrivite în postarea dvs. rapid și eficient.

Utilizarea presetărilor globale cu blocuri de aspect Divi pentru eficientizarea proiectării postărilor de blog

Încărcarea Ghidului de stil al presetărilor globale

Pentru acest tutorial, vom începe să creăm presetări globale utilizând aspectul ghidului stilului presetărilor globale pentru aspectul agenției web. După încărcarea ghidului de stil, vom avea disponibile câteva presetări globale atunci când adăugăm elemente de design într-o postare de blog folosind blocul Layout Divi.

Pentru a descărca presetările globale, accesați postarea de pe blog. Derulați în jos până la secțiunea intitulată „Descărcați Ghidul de stil pentru presetări globale”. Apoi introduceți adresa de e-mail și faceți clic pentru a primi descărcarea.

După ce descărcați fișierul zip pe computer, dezarhivați fișierul și reveniți la tabloul de bord WordPress.

Pentru a importa fișierul JSON de ghid de stil în Biblioteca Divi ...

1. navigați la Divi> Biblioteca Divi.
2. Faceți clic pe butonul Import & Export.
3. Sub Fereastra pop-up de portabilitate, selectați fila de import.
4. Alegeți fișierul JSON al ghidului de stil global al agenției web.
5. Asigurați-vă că selectați să importați presetări.
6. Apoi faceți clic pe butonul de import.

Acum toate aceste presetări globale sunt disponibile în Divi Builder.

Încărcarea șablonului de postare

Acum, când ghidul de stil este în vigoare, vom face un salt asupra proiectării șablonului de postare pe blog importând șablonul de postare pe blogul agenției web, care se potrivește deja cu elementele ghidului de stil.

Pentru a descărca șablonul, accesați postarea de pe blog, introduceți adresa de e-mail și faceți clic pentru a descărca fișierele.

Pentru a importa șablonul de postare ...

1. navigați la Divi> Theme Builder.
2. Apoi faceți clic pe pictograma de portabilitate.
3. Sub modalitatea de portabilitate, selectați fila de import.
4. Alegeți fișierul JSON șablon de post pe care l-ați descărcat.
5. Apoi faceți clic pe butonul de import.

Utilizarea presetărilor pentru actualizarea / proiectarea șablonului de postare

După ce aveți șablonul de postare personalizat, faceți clic pentru a edita șablonul de corp personalizat. Acolo puteți vedea și designul șablonului de postare și puteți face ajustări folosind presetările globale disponibile din ghidul de stil importat. Dacă ați construi propriul șablon de postare de la zero, ați putea utiliza presetările globale pentru a ajuta la potrivirea designului șablonului de postare cu celelalte elemente de pe site-ul web. De exemplu, puteți utiliza presetarea „WALP - H1 - 1” pe titlul postării după cum urmează:

Sau puteți utiliza modulul de semnalizare „WALP - Blurb 2” presetat pe mesajul care conține informații dinamice despre autor.

Modulul pentru conținutul postării este zona în care conținutul postării pe blog va fi generat pe pagină. De aceea, este important să se potrivească setările de proiectare ale modulului conținut de postare cu celelalte elemente de text utilizate pe tot site-ul dvs.

Dacă ați construi șablonul de postare de la zero, ați putea copia și insera setări de text din diferite module de text prin intermediul site-ului. Sau dacă ați creat în prealabil un ghid global de stil prestabilit pentru site-ul dvs., puteți copia elementele de design din aceste module în ghidul de stil.

De exemplu, puteți copia stilurile de text ale antetului pentru presetarea globală realizată pentru toate stilurile de text într-un singur modul de text.

Apoi treceți acele stiluri de text de antet în modulul de conținut al postării pentru șablonul de postare. Acest lucru vă va ajuta să vă asigurați că toate titlurile utilizate pentru conținutul postării dvs. se vor potrivi cu stilul site-ului.

Important este că aveți un șablon de postare care se potrivește cu stilul site-ului dvs. Utilizarea presetărilor globale poate ajuta acest proces enorm dacă proiectați șablonul de la zero.

Utilizarea presetărilor globale cu blocuri de aspect Divi

Odată ce șablonul a fost proiectat, suntem gata să începem să folosim presetările globale cu blocuri Divi Layout pentru a proiecta elemente suplimentare de conținut pentru postare utilizând editorul de blocuri WordPress implicit.

Pentru aceasta, editați (sau creați) o postare pe blog. Apoi, asigurați-vă că aveți un conținut simulat (cum ar fi câteva titluri și paragrafe și o imagine prezentată).

În acest moment, dacă v-ați uitat la postarea din partea frontală, acesta va afișa conținutul postării în șablonul postării, iar conținutul (titluri, textul corpului, etc ...) va moșteni stilul din setările modulului de conținut al postării.

Modulul pentru conținutul postării se va ocupa doar de stilul conținutului textual de bază. Dacă doriți să adăugați elemente suplimentare în postarea dvs. utilizând editorul implicit WordPress Block, stilul acelor elemente va trebui modificat prin CSS personalizat într-o temă copil. Asta cu excepția cazului în care utilizați blocuri de aspect Divi.

Pentru a adăuga conținut suplimentar pe care doriți să-l potriviți cu șablonul și site-ul dvs. de postare, puteți utiliza blocurile Layout Divi. Acest lucru vă va permite să adăugați orice conținut doriți și să îl stilizați folosind Divi Builder. Și, deoarece putem folosi și presetări globale, putem simplifica și mai mult designul conținutului postărilor noastre pe blog.

Design # 1: Construirea unui blog CTA cu presetări globale și un bloc de aspect Divi

În acest prim exemplu, să creăm un CTA de blog personalizat care să se potrivească cu șablonul de postare și cu designul site-ului.

Pentru a face acest lucru, adăugați un bloc de aspect Divi la conținutul postării.

Apoi faceți clic pe Construiți un aspect nou.

Aceasta va deschide editorul de blocuri de aspect, care este practic Divi Builder, ca de obicei. Acordați secțiunii implicite un rând cu o coloană.

Deschideți aspectul global al presetărilor într-un browser diferit, asigurându-vă că dați clic pentru a construi pe partea frontală, astfel încât să puteți vedea elementele. În acest fel, aveți editorul Layout deschis într-un browser și ghidul de stil deschis în celălalt.

Dacă nu aveți un ghid de stil, puteți deschide un aspect al paginii de pe site-ul dvs., astfel încât să puteți accesa orice elemente de design pe care doriți să le aduceți.

Copiați fundalul din Ghidul de stil

Pentru acest CTA, vom folosi fundalul albastru regal din ghidul de stil. Deschideți setările modulului text și copiați fundalul.

Apoi deschideți setările secțiunii din editorul de aspect și treceți de fundal la secțiune.

Adăugați un modul de text cu presetarea H3

Apoi, adăugați un nou modul de text pe rând.

Apoi deschideți setările și actualizați următoarele:

Adăugați un titlu H3 pentru CTA lipind următorul HTML în corp:

<h3>Learn How One Client Increased Revenue by 500%</h3>

Deschideți meniul derulant Cadouri globale și selectați presetarea pentru titlul H3 (WALP - H3 - 1)

Actualizare design

Apoi actualizați culoarea textului la alb și centrați alinierea.

Adaugă buton cu presetare globală

Sub modulul text, adăugați un buton nou.

Apoi actualizați textul butonului și selectați unul dintre designurile globale de butoane presetate. Pentru acest exemplu, să folosim „WALP - Butonul 3”.

Salvează modificările

După ce ați terminat, faceți clic pe Salvare și ieșire.

Acum puteți vedea elementul afișat în Editorul de blocuri WordPress.

Design # 2: Construirea unui citat de blog cu presetări globale și un bloc de aspect Divi

Pentru următorul element de design, vom adăuga o cotație la postarea de pe blog.

Adăugați un bloc de aspect Divi

Pentru a începe, adăugați Divi Layout Block unde doriți să fie afișat citatul.

Apoi faceți clic pe Construiți un aspect nou.

Copiați și lipiți fundalul din Ghidul de stil

Copiați fundalul albastru închis din ghidul de stil.

Apoi lipiți-l în secțiunea implicită a editorului de aspect.

Adăugați rând

Apoi, adăugați un rând cu o coloană la secțiune.

Adăugați un modul Testimonial cu Preset

Apoi adăugați un modul testimonial în coloană. Apoi selectați presetarea globală „WALP - Testimonial 2”.

Acest lucru vă va oferi un început minunat în proiectarea citatului pentru postarea pe blog.

Actualizați designul

Sub fila Proiectare, ajustați setările de proiectare după cum urmează:

• Culoare pictogramă ofertă:
• Greutatea fontului corpului: ușoară
• Stilul fontului corpului: cursiv
• Alinierea textului corpului: stânga
• Culoarea textului corpului: #ffffff
• Autor Font: Ubuntu
• Dimensiunea textului autorului: 16 px

Adăugați o nouă presetare globală

Întrucât am făcut modificări semnificative la această presetare testimonială, este logic să creăm una nouă în acest moment, pentru a putea fi utilizată pentru viitoarele postări.

Pentru a crea una nouă, faceți clic pe butonul „Creați o presetare nouă din stilurile curente”. Apoi dați noului preset un nume („citatul postării pe blog”) și salvați-l. Presetarea globală este acum gata să fie utilizată în viitor.

Salvați aspectul și îl veți vedea în conținutul postării.

Design # 1: Adăugarea de Blurbs la o postare pe blog cu presetări globale și un bloc de aspect Divi

Pentru următorul exemplu, vom adăuga câteva blurbs la postare.

Adăugați un nou bloc de aspect Divi

Adăugați un alt bloc de aspect Divi și faceți clic pe butonul Construiți un aspect nou.

În Editorul de aspect, adăugați un rând cu două coloane la aspect.

Adăugați modul Blurb cu presetări

În coloana din stânga, adăugați un modul blurb.

Adăugați o nouă imagine cu pictograme în blurb. Apoi deschideți meniul derulant presetări și selectați presetarea blurb „WALP - Blurb 4”.

Adăugați a doua Blurb

Apoi copiați comanda și lipiți-o în coloana 2 și actualizați imaginea.

Salvați aspectul și îl veți vedea în conținutul postării.

Rezultat final

Acum deschideți postarea din partea frontală pentru a vedea rezultatul final.

Blocuri reutilizabile cu presetări globale

Dacă doriți să profitați de blocurile reutilizabile cu blocuri de aspect Divi, este bine să știți că acestea vor funcționa cu presetări globale. Deci, dacă doriți să salvați blogul CTA pe care l-am creat mai devreme ca un bloc reutilizabil, veți avea un bloc convenabil pe care îl puteți utiliza pentru a adăuga CTA-uri atunci când vă creați postările. Și, deoarece CTA folosește un buton și un text cu o presetare globală, actualizarea presetării globale pentru acel element va actualiza și elementul din blocul reutilizabil.

Gânduri finale

Global Presets este unul dintre cele mai puternice instrumente de proiectare disponibile în Divi. Odată ce vă faceți timp pentru a adăuga presetări globale la modulele pe care le utilizați pe tot site-ul, puteți profita cu adevărat de un proces simplificat de proiectare a șabloanelor și a conținutului de postări pe blog folosind blocuri de aspect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!