Cum să împărțiți ecranul șablonului de postare pe blog cu Divi's Theme Builder

Când creați un site web, sunt mari șanse să includeți o pagină de blog și postări de blog pe ea. Desigur, cea mai importantă parte a unei strategii de blog este crearea de conținut de postare de blog de înaltă calitate, dar partea de design a acesteia joacă un rol important și în succesul strategiei dvs. Atunci când creați un site web cu Divi, puteți să simplificați modul în care postările dvs. de blog arată în Divi Theme Builder prin crearea unui șablon de postare cu conținut dinamic. Am împărtășit în mod constant șabloane de postări pe blogul nostru, care vă ajută să accelerați procesul, dar dacă doriți în mod special să creați o postare pe blog cu ecran divizat, vă va plăcea această postare. Vă vom arăta pas cu pas cum să faceți acest lucru și veți putea descărca gratuit fișierul șablon JSON!

Să ajungem la asta.

previzualizare

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

Desktop

Mobil

Descărcați GRATUIT Șablonul de postare pe blogul Split Screen

Pentru a pune mâna pe șablonul de postare pe blog cu ecran divizat gratuit, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Accesați Divi Theme Builder și adăugați un șablon de postare nou

Accesați Divi Theme Builder și adăugați un șablon nou

Începeți accesând Divi Theme Builder. Odată ajuns acolo, adăugați un șablon nou.

Utilizați șablonul pentru toate postările

Utilizați noul șablon pentru toate postările dvs.

• Utilizare activată: toate postările

Începeți să construiți corpul șablonului

Și începeți să construiți corpul șablonului.

2. Construiți corpul șablonului de postare pe blog

Setări secțiune

Spațiere

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți setările, treceți la fila de proiectare și eliminați toate căptușelile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%
• Înălțime minimă: 100vh (desktop), automată (tabletă și telefon)
• Înălțime maximă: 100vh (desktop), niciuna (tabletă și telefon)

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Revărsări

Și setați revărsările rândului la ascunse.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Setări coloana 1

Fundal de gradient

Apoi, deschideți setările coloanei 1 și adăugați un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: # 000000
• Tipul gradientului: liniar
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Folosim imaginea dinamică prezentată ca imagine de fundal pentru coloana următoare.

• Imagine de fundal: Imagine prezentată

Setări coloana 2

Spațiere

Apoi, vom deschide setările coloanei 2 și vom adăuga câteva valori de umplere personalizate la setările de spațiere.

• Căptușeală superioară: 8%
• Căptușeală inferioară: 8%
• Căptușeală stângă: 8%
• Căptușeală dreaptă: 8%

Revărsări

Pentru a permite oamenilor să parcurgă a doua coloană, unde va apărea conținutul postării și caseta de comentarii, vom schimba depășirea verticală din setările de vizibilitate.

• Depășire verticală: derulare (desktop), vizibilă (tabletă și telefon)

Adăugați modulul titlului postării în coloana 1

Elemente

Este timpul să adăugați module, începând cu un modul Titlu postare în coloana 1. Dezactivați opțiunea de imagine prezentată în setările elementelor.

• Afișați imaginea prezentată: Nu

Setări text titlu

Treceți la fila de proiectare și modificați setările de text H1 în consecință:

• Titlu Titlu nivel: H1
• Titlu Font: Work Sans
• Greutatea fontului titlului: Bold
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 60 px (desktop), 45 px (tabletă), 35 px (telefon)
• Spațierea literelor de titlu: -1 px
• Înălțimea liniei de titlu: 1.2em

Setări Meta Text

Modificați apoi setările meta text.

• Meta Font: Work Sans
• Stil Meta Font: majuscule
• Culoare Meta Text: #eaeaea
• Distanța Meta Letter: 2 px

Dimensionare

Apoi, modificați lățimea pe diferite dimensiuni ale ecranului.

• Lățime: 81% (desktop), 100% (tabletă și telefon)

Spațiere

Adăugați câteva valori de umplere receptive în continuare.

• Căptușeală superioară: 8% (numai tabletă și telefon)
• Căptușeală inferioară: 8% (numai tabletă și telefon)
• Căptușire stângă: 7% (tabletă), 8% (telefon)
• Căptușeală dreaptă: 7% (tabletă), 8% (telefon)

Poziţie

Și completați setările modulului modificând setările de poziție după cum urmează:

• Poziție: Absolută (desktop), implicită (tabletă și telefon)
• Locație: Centrul de jos
• Decalaj vertical: 10%

Adăugați un modul de conținut de postare în coloana 2

Treceți la coloana următoare. Acolo, primul modul de care avem nevoie este un modul Post Content. Acest modul va afișa dinamic conținutul postării.

Setări text antet

Efectuați câteva modificări la setările textului antetului modulului.

• Font de antet: Work Sans
• Greutatea fontului de titlu: Semi îndrăzneț
• Dimensiune text antet:
  • H2: 40px
  • H3: 30 px
  • H4: 25 px
  • H5: 16 px
  • H6: 14 px
• Distanța între litere de titlu: -1 px (H2, H3 și H4)

Clasa CSS

Și adăugați o clasă CSS. În pasul următor al acestui tutorial, vom folosi această clasă CSS pentru a genera un spațiu între titluri și paragrafe.

• Clasa CSS: blog-post-conținut

Adăugați un modul de cod în coloana 2

Adăugați cod CSS pentru spațiul dintre paragrafe și titluri

Adăugați un modul de cod chiar sub modulul Conținut post și adăugați următoarele linii de cod CSS pentru a genera spațiu între titluri și paragrafe:

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Adăugați modulul de comentarii la coloana 2

Setări câmpuri

Următorul și ultimul modul de care avem nevoie în coloana 2 pentru a finaliza acest tutorial este un modul de comentarii. Modificați setările câmpurilor modulului în consecință:

• Culoarea fundalului câmpurilor: #ffffff
• Culoare text câmpuri: # 000000
• Căptușire de câmp: 30 px
• Căptușeală inferioară câmpuri: 30 px
• Căptușire stânga câmpuri: 30 px
• Câmpuri Căptușeală dreaptă: 30 px
• Fields Font: Work Sans

• Câmpuri Stil Font: majuscule
• Dimensiune text câmpuri: 15 px
• Spațierea literelor câmpurilor: 3 px
• Câmpuri colțuri rotunjite: 10 px (toate colțurile)

• Fields Box Shadow Blur Forța: 30 px
• Câmpuri Culoare umbră: rgba (0,0,0,0.06)

Setări text numărare comentarii

Apoi, modificați setările de text pentru numărul de comentarii.

• Comentariu Font Count: Work Sans
• Comentariu Numărul greutății fontului: îndrăzneț

Setări text titlu formular

Modificați și setările textului titlului formularului.

• Titlu formular Formă nivel: H3
• Font Titlu formular: Work Sans
• Titlul formularului Greutatea fontului: Semi Bold

Setări Meta Text

În continuare, vom face câteva modificări la setările meta text.

• Meta Font: Work Sans
• Greutatea fontului Meta: semi bold
• Culoare Meta Text: # 000000

Setări buton

Apoi, vom stiliza butonul în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 16 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px

• Distanța dintre litere și butoane: 2 px
• Buton Font: Work Sans
• Stilul fontului butonului: majuscule

• Căptușeală pentru butoane: 2%
• Căptușeală pentru butoane: 2%
• Umplutură stângă Buttom: 5%
• Căptușire dreaptă buton: 5%

Spațiere

Vom adăuga și niște margini superioare.

• Marja superioară: 15%

Comentează CSS corp

Și vom completa setările modulului adăugând o linie de cod CSS în corpul de comentarii al modulului în fila avansată.

margin-top: 50px

3. Salvați modificările temei Builder și vedeți rezultatul

Acum, după ce am finalizat șablonul de postare pe blog, singurul lucru rămas de făcut este să salvați toate modificările Divi Theme Builder și să vizualizați rezultatul pe postările noastre de pe blog!

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat o abordare diferită cu privire la crearea unui șablon de postare pe blog pentru site-ul dvs. Divi. Mai precis, v-am arătat cum să creați un design de șablon de postare pe blog cu ecran divizat folosind Divi's Theme Builder și conținut dinamic. V-am ghidat pas cu pas prin proces și am adăugat un fișier JSON pe care l-ați putut descărca gratuit! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.