Descărcați un șablon de postare GRATUIT pe două fețe pentru bara laterală cu Divi

Deși barele laterale există de multă vreme, sunt încă frecvent utilizate pe web. Acestea ajută la afișarea diferitelor elemente care sunt conectate la postare, cum ar fi postările recomandate și formularele de optimizare a e-mailurilor, fără a neglija accentul principal, care este conținutul real al postării. Acum, cu Divi's Theme Builder acolo, există o mulțime de moduri de a crea șablonul dvs. de postare pe blog. În acest tutorial, vă vom arăta cum să adăugați o bară laterală față-verso la șablonul dvs. de postare. Veți putea descărca gratuit fișierul 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

Abonați-vă la canalul nostru Youtube

Descărcați gratuit șablonul de postare pe blog

Pentru a pune mâna pe șablonul gratuit de postare pe blog, va trebui mai întâi să îl 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 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

Folosim acest nou șablon pentru toate postările.

• Utilizare activată: toate postările

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

Ei bine, atunci începe să construiești corpul șablonului.

2. Începeți să creați corpul postării pe blog

Adăugați o secțiune nouă

Culoare de fundal

Odată ajuns în Divi Theme Builder, veți observa o secțiune. Deschideți acea secțiune și schimbați culoarea de fundal.

• Culoare fundal: # f4f4f4

Spațiere

Modificați și valorile de spațiere ale secțiunii pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 50 px (desktop), 20 px (tabletă), 10 px (telefon)
• Căptușeală inferioară: 50 px (desktop), 20 px (tabletă), 10 px (telefon)

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 în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2
• Lățime: 100%
• Lățime maximă: 95%

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

Coloana 2

Culoare de fundal

Apoi, deschideți setările coloanei 2 și schimbați culoarea de fundal în alb.

• Culoare fundal: #ffffff

Box Shadow

Adăugați și o umbră de cutie la coloană.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -21px
• Culoare umbră: rgba (0,0,0,0.08)

Adăugați modulul de imagine în coloana 2

Conținut dinamic

E timpul să începeți să adăugați module! În a doua coloană, vom plasa toate modulele relevante pentru postarea de blog în sine, începând cu un modul de imagine. Utilizați conținutul dinamic al imaginii prezentate.

• Imagine: Imagine prezentată

Dimensionare

Apoi, treceți la fila de proiectare a modulului și forțați lățimea completă pe modulul de imagine.

• Forțează lățimea completă: Da

Adăugați modulul Titlul postării în coloana 2

Elemente

La al doilea modul, care este modulul Titlu post. Dezactivați imaginea prezentată în setările elementelor.

• Afișați imaginea prezentată: Nu

Setări text titlu

Treceți la fila de proiectare a modulului și modificați setările textului titlului în consecință:

• Titlu Font: Oxigen
• Dimensiune text titlu: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Înălțimea liniei de titlu: 1.2em

Setări Meta Text

Apoi faceți câteva modificări la setările meta text.

• Meta Font: Deschideți Sans
• Culoare Meta Text: # ffc023
• Dimensiune Meta Text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)

Spațiere

Modificați și valorile de spațiere.

• Marja superioară: 100 px
• Marja stângă: 4vw
• Marja dreapta: 4vw

Titlu CSS

Și completați setările modulului adăugând o marjă inferioară elementului CSS al titlului în fila avansată.

margin-bottom: 20px;

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

Setări text

Treceți la modulul următor, care este modulul „Conținutul postării”, care conține tot conținutul dinamic al postărilor de blog. Modificați setările de text ale modulului în consecință:

• Font text: Deschideți Sans
• Dimensiune text: 0.9vw (desktop), 1.8vw (tabletă), 3vw (telefon)
• Înălțimea liniei textului: 2.2em

Setări text antet

Apoi, faceți și câteva modificări la setările textului antetului.

• Font de titlu: Oxigen
• Dimensiune text H2: 1,5vw (desktop), 3vw (tabletă), 4vw (telefon)
• H3, H4, H5 și H6 Dimensiune text: 1,3vw (desktop), 2,5vw (tabletă), 3,5vw (telefon)

Spațiere

Folosim și niște valori de marjă și umplere personalizate.

• Marja stângă: 4vw
• Marja dreapta: 4vw
• Căptușeală superioară: 50 px
• Căptușeală inferioară: 100 px

Clasa CSS

Completați setările modulului adăugând o clasă CSS. În următoarea parte a acestui tutorial, vom folosi această clasă CSS pentru a adăuga spațiu la titluri și paragrafe.

• spațierea după conținut

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

Introduceți codul CSS

Așa cum am menționat în pasul anterior al acestei postări, vom folosi câteva CSS personalizate pentru a adăuga spațiu între titluri și paragrafe. Pentru aceasta, vom folosi un modul de cod în coloana 2. Introduceți următoarele linii de cod CSS:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

Adăugați modulul Optin de e-mail în coloana 3

Adauga continut

E timpul să începeți să adăugați elementele barei laterale! Puteți adăuga orice modul doriți. Vom începe cu un modul Optin de e-mail în coloana 3. Folosiți o copie la alegere.

Cont de email

Continuați conectând un cont de e-mail la modul.

Câmpuri

Apoi, dezactivați câmpul de nume din setările câmpurilor.

• Afișează câmpul Nume: Nu

Culoare de fundal

Schimbați culoarea de fundal în consecință:

• Culoare fundal: # ffc023

Setări câmpuri

Treceți la fila de proiectare a modulului și modificați setările câmpurilor după cum urmează:

• Câmpuri Font: Deschideți Sans
• Dimensiune text câmpuri: 0,8vw (desktop), 1,8vw (tabletă), 3vw (telefon)

Setări text titlu

Efectuați și câteva modificări la setările textului titlului.

• Titlu Font: Oxigen
• Greutatea fontului titlului: Bold
• Dimensiune text titlu: 1vw (desktop), 3vw (tabletă), 5vw (telefon)
• Înălțimea liniei de titlu: 1,5em

Setări buton

Continuați stilizând butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiunea textului butonului: 0.9vw (desktop), 1.8vw (tabletă), 3vw (telefon)
• Culoarea textului butonului: # ffc023
• Culoarea fundalului butonului: # f4f4f4
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 0 px
• Buton Font: Oxigen

• Căptușeală pentru butoane: 15 px
• Căptușeală pentru butoane: 15 px

Box Shadow

Și completați setările modulului adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -21px
• Culoare umbră: rgba (0,0,0,0.08)

Adăugați modulul Social Media Follow în coloana 3

Adăugați rețele sociale la alegere

Următorul modul de care avem nevoie în coloana 3 este un modul Social Follow Follow. Adăugați câteva rețele sociale la alegere.

Resetați individual stilurile de rețea socială

Continuați resetând individual stilurile de articol pentru fiecare rețea socială.

Setări pictograme

Apoi, reveniți la setările generale ale modulului și schimbați culoarea pictogramei.

• Culoare pictogramă: # ffc023

Adăugați modulul Blog în coloana 1

Elemente

În coloana 1, singurul modul pe care îl adăugăm este un modul Blog. Dezactivați autorul în setările elementelor.

• Arată autorul: nu

Aspect

Apoi, treceți la fila de proiectare a modulului și schimbați aspectul.

• Aspect: grilă

Setări text titlu

Modificați apoi setările pentru textul titlului.

• Titlu Font: Oxigen
• Greutatea fontului titlului: Bold
• Dimensiune text titlu: 1vw (desktop), 3vw (tabletă), 5vw (telefon)
• Înălțimea liniei de titlu: 1,5em

Setări text corp

Efectuați și câteva modificări la setările pentru textul corpului.

• Font corp: Open Sans
• Dimensiunea textului corpului: 0,7vw (desktop), 1,8vw (tabletă), 3vw (telefon)
• Înălțimea liniei corpului: 2.2em

Setări Meta Text

Apoi, stilizați setările meta text în consecință:

• Meta Font: Deschideți Sans
• Culoare Meta Text: # ffc023
• Dimensiune Meta Text: 0,8vw (desktop), 1,8vw (tabletă), 3vw (telefon)

Frontieră

Eliminați și marginea implicită a modulului.

• Lățimea marginii aspectului grilei: 0 px

Box Shadow

Și folosiți o umbră de cutie subtilă.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -21px
• Culoare umbră: rgba (0,0,0,0.08)

Vizibilitate

Acum, dorim ca modulul Blog să apară când se află în coloana 1 când cineva vizualizează postarea pe desktop. Cu toate acestea, pe dimensiuni de ecran mai mici, dorim ca conținutul postării să fie pe primul loc. De aceea vom ascunde întregul modul pe tabletă și telefon.

Clonați modulul blogului și plasați duplicatul în coloana 3

Apoi, vom clona Modulul Blog și vom plasa duplicatul în a treia coloană.

Schimbați vizibilitatea

Vrem ca acest modul să apară în coloana 3 numai pe dispozitive mai mici, de aceea vom ascunde întregul modul pe desktop.

3. Salvați toate modificările și rezultatul previzualizării constructorului de teme

După ce ați completat șablonul de postare pe blog (asigurați-vă că adăugați și un modul de comentarii!), Puteți salva toate modificările Theme Builder și puteți vedea rezultatul pe site-ul dvs. web!

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 cum să adăugați o bară laterală pe două fețe la șablonul de postare pe blog folosind Divi's Theme Builder. Mai mult decât atât, am partajat gratuit fișierul JSON al layout-ului, astfel încât să îl puteți păstra în apropiere, în cazul în care aveți nevoie de el pentru proiecte viitoare! Dacă aveți întrebări, 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.