Doriți să creați o pagină de blog cu modulul Blog de Divi?
De obicei, fiecare pachet de layout Divi publicat pe Elegant Themes oferă un aspect de blog, care vă ajută să creați blogul tău destul de repede. Dar ți-ai dorit vreodată să vezi cum să creezi singur una dintre aceste pagini de blog?
În acest articol, vom vedea cum să creați o pagină de blog cu modulul Blog Divi. Vom parcurge fiecare setare pas cu pas.
Să începem!
studiu
Înainte de a începe, să vedem mai întâi o prezentare generală a ceea ce vom crea.
Creați o pagină nouă de blog
Creați o nouă pagină
În primul rând, ne vom crea pagina. În tabloul de bord WordPress, faceți clic pagini > Add-On.
Dați paginii un titlu care să aibă sens pentru dvs.
- Titlul paginii: Blog pe Divi
Comutați la Divi Builder
Faceți clic pe butonul violet din centrul paginii: Utilizați Divi Builder .
Adăugați o secțiune pentru titlul paginii de blog
Personalizați secțiunea
Vom începe cu prima secțiune. Deschide-i parametrii secțiunii .
Derulați până la fundal și schimbați culoarea la #f9f3fd. Introduceți Blog ca etichetă de administrator. Închideți setările secțiunii.
- Fundal: #f9f3fd
- Etichetă de administrator: Blog
Creați titlul paginii de blog
Apoi vom adăuga un linie pentru titlu. Selectați pictograma verde și alegeți rândul cu o singură coloană.
Apoi adăugați a modul de text la linie.
Personalizați modulul Text Title Blog
Deschide-le Setările modulului de text și selectați H1. Adaugă titlul Blogul nostru.
- Font: Titlul 1
- Text: Blogul nostru
Apoi du-te laFila Stil și setați alinierea la Centrat. Pentru textul titlului H1, alegeți Cormorant Infant pentru font și puneți-l îngroșat.
- Alinierea textului: centrat
- Textul antetului: H1
- Font antet: Cormorant Infant
- Antet cu lumină moale: text aldine
Setați Culoare la #442854, Dimensiune la 130 px și Înălțime linie la 0,8 em.
- Culoare: #442854
- Dimensiunea textului de pe desktop: 130 px
- Înălțimea liniei: 0,8 em
Creați cel mai recent articol și secțiunea îndemn la acțiune
Secțiunea noastră constă din cel mai recent articol și un e-mail de înscriere.
Adăugați o nouă linie sub primul nostru rând și selectați designul coloanei 2/3 stânga și 1/3 dreapta.
Deschide-le parametrii de linie făcând clic pe pictograma roată.
SelecteazăFila Stil, derulați la spaţierea și adăugați 0px la Marja interioară inferioară. Închide Setări.
- Marja internă inferioară: 0px
Adăugați și personalizați modulul de postare de blog recomandat
Apoi vom adăuga un blog-modul . Acesta va conține ultimul nostru articol. Faceți clic pe pictograma plus gri din coloana din stânga a noului nostru rând și adăugați modulul Blog.
Conținut
sub Conținut , introduceți 1 pentru numărul de postări.
- Numar de posturi: 1
Element
Derulați până la Element și debifați Autor și paginare. Vom lăsa restul la valorile implicite.
- Autorul emisiunii: nr
- Afișează paginarea: Nu
Dispoziţie
Apoi selectați Fila Stil și alegeți Ecran complet pentru aspect și dezactivați suprapunerea imaginii prezentate.
- Model: ecran complet
- Suprapunerea imaginii selectate: dezactivată
Textul titlului
Derulați până la Textul titlului . Selectați H2 și alegeți Cormoran Infant. Selectați Bold și schimbați culoarea la #442854.
- Introduceți titlul trei: H2
- Titlu font: Cormorant Infant
- Soft Light Titlu: Text aldine
- Culoarea textului titlului: #442854
Setați dimensiunea fontului la 30 de pixeli. Schimbați înălțimea liniei la 1.1 em.
- Dimensiune: 30 pixeli pentru desktop, 20 pixeli pentru tabletă, 18 pixeli pentru telefon
- Înălțimea liniei de titlu: 1,1 em
Corpul textului
Apoi derulați în jos la corpul textului . Alegeți Cabină pentru font, schimbați culoarea la #442854 și modificați înălțimea liniei la 1,8em.
- Corpul de poliție: cabină
- Culoarea textului corpului: #442854
- Înălțimea liniei corpului: 1,8 em
Metadate text
Apoi derulați în jos la Metadate text . Setați parametrii după cum urmează:
- Font metadate: Cormorant Infant
- Metadate Lumină slabă: obișnuită
- Stil de copiere a metadatelor: niciuna
- Culoarea textului metadatelor: #442854
- Dimensiunea textului metadatelor: desktop 16px, tabletă 15px, telefon 14px
- Înălțimea rândului de metadate: 1,8 em
spaţierea
Apoi derulați în jos la spaţierea și modificați marja de sus la 0vw.
- Marja superioară: 0vw
Cutie de umbră
În cele din urmă, derulați în jos la Cutie de umbră și dezactivați-l.
- Shadow Box: Dezactivați
Adăugați și personalizați modulul de text de e-mail pe blog
Acum vom trece la coloana din dreapta și creați apelul la acțiune prin e-mail . Mai întâi, adăugați un modul Text în coloana din dreapta. Faceți clic pe pictograma plus gri și căutați Text.
Conținut
Selectați Titlul 2 și introduceți textul Abonați-vă la ofertele noastre.
- Font: Titlul 2
- Text: Abonați-vă la ofertele noastre
Antet
pentru text din titlu, selectați Alinierea la centru, alegeți H2, selectați Cormorant Infant și setați-l la Bold.
- Alinierea textului: centrat
- Textul antetului: H2
- Font antet: Cormorant Infant
- Antet Soft Light: Bold
Schimbați culoarea la #442854, dimensiunea la 32px și înălțimea liniei la 0,95em.
- Culoarea textului antetului: #442854
- Dimensiunea textului antetului: 32 de pixeli
- Înălțimea liniei antetului: 0,95 em
spaţierea
În cele din urmă, derulați în jos la spaţierea și adăugați 10 pixeli la marginea de jos. Închideți setările modulului Text.
- Marja inferioară: 10px
Adăugați și personalizați modulul Blog Email Optin
Apoi mergem creați formă e-mail . Adăugați un modul Email Optin sub modulul Text din coloana din dreapta.
Conținut
Mai întâi, eliminați titlul și corpul textului.
- Titlu: Niciuna
- Textul corpului: niciunul
Derulați până la Cont de email și adăugați furnizorul dvs. de servicii.
Apoi derulați în jos la fundal și deselectați culoarea de fundal.
- Utilizați culoarea de fundal: nu
domenii
Intră în Fila Stil și schimbați culoarea de fundal a câmpurilor în rgba(255,255,255,0) și culoarea textului la #442854.
- Câmpuri de culoare de fundal: rgba(255,255,255,0)
- Câmpuri de culoare text: #442854
Derulați în jos la opțiuni de font și schimbați fontul la cabin, dimensiunea la 16px și înălțimea liniei la 1,8em.
- Câmpuri font: Cabină
- Câmpuri pentru dimensiunea textului: 16 pixeli
- Înălțimea rândului câmpului: 1,8 em
Apoi, ajustați colțul rotunjit al câmpurilor la 32 px, lățimea marginii la 2 px și schimbați culoarea marginii la #442854.
- Controale dreptunghi rotunjite: 32 px
- Câmpuri pentru lățimea chenarului: 2px
- Câmpuri pentru culoarea marginii: #442854
buton
Derulați la Buton și selectați Utilizați stiluri personalizate pentru Button . Schimbați dimensiunea la 18 ps, culoarea butonului la alb și culoarea de fundal a butonului la #442854.
- Utilizați stiluri personalizate pentru butonul: Da
- Dimensiunea textului butonului: 18 pixeli
- Culoarea textului butonului: #ffffff
- Buton de fundal: #442854
Schimbați raza graniței la 50 de pixeli, fontul la Cormorant Infant și faceți greutatea îngroșată.
- Buton pentru raza chenarului: 50px
- Buton pentru font: Cormorant Infant
- Buton Soft Light: text îngroșat
În sfârșit, să adăugăm câteva Margini. Introduceți 20px pentru marginea de sus, 12px pentru umplutura de sus și de jos și 32 de pixeli pentru umplutura din stânga și dreapta. Închideți setările Email Opn.
- Butonul Marja superioară: 20 px
- Buton de umplutură de sus și de jos: 12 px
- Buton de umplutură stânga și dreapta: 32px
Adăugați o nouă linie pentru lista de postări pe blog
Vom face acum creați o listă de articole a paginii. Mai întâi, adăugați un nou rând cu o singură coloană sub secțiunea anterioară.
Setări de linie
Mergi la Fila Stil și adăugați 0px la Marja interioară Vertex. Închide Setări de linie.
- Vertexul marjei interioare: 0px
Adăugați un modul Blog la linia dvs
Adauga o blog-modul la noua ta linie făcând clic pe pictograma plus gri și făcând clic pe Blog.
Stilizarea fluxului de postări de blog
Să schimbăm feedul paginii de blog.
Conținutul fluxului de blog
Deschide-le Setările modulului de blog și introduceți 3 pentru numărul de postări. Acest lucru vă permite să alegeți numărul de postări care se afișează pe ecran.
Un număr mai mic, cum ar fi 3, ne permite să ne concentrăm pe postările recente și să reducem dimensiunea paginii. Aceasta este o alegere bună dacă nu postați des sau doriți să păstrați pagina mai curată. Afișarea mai multor postări, cum ar fi 6-9, este o idee bună dacă doriți să vă concentrați pe fluxul blogului.
- Numar de posturi: 3
Introduceți 1 pentru decalaj. Acest lucru îi spune Divi să înceapă cu a doua postare de blog, ceea ce ne împiedică să afișăm același articol care a fost deja afișat în postarea de blog afișată deasupra acestuia.
- Număr de compensare post: 1
Element
Derulați până la Element . Activați imaginea prezentată, data, fragmentul de categorii și paginarea. Dezactivați restul.
- Afișați imaginea prezentată: da
- Date: Da
- Categorii: Da
- Extras: Da
- Paginare: Da
fundal
Accesul la fundal și setați culoarea de fundal a plăcii grilei la rgba(255,255,255,0)
- Culoarea de fundal a plăcilor de grilă: rgba (255,255,255,0)
Aspect și suprapunere
Apoi du-te la Fila Stil . Lăsați aspectul setat la Grilă. Am ales aspectul pe toată lățimea pentru postarea de blog prezentată deasupra acesteia. Vom folosi aspectul grilei pentru acest flux de blog, care este opțiunea implicită. Dezactivați suprapunerea imaginii prezentate.
- Aspect: Grilă
- Suprapunerea imaginii selectate: dezactivată
Textul titlului
pentru textul titlului , selectați H2. Alegeți Cormorant Infant, setați-l la Bold și introduceți #442854 pentru culoare.
- Introduceți titlul trei: H2
- Titlu font: Cormorant Infant
- Soft Light Titlu: Text aldine
- Culoarea textului titlului: #442854
Alegeți 20px pentru dimensiunea textului. Setați înălțimea liniei la 1,1 em.
- Dimensiunea textului titlului: desktop 20px
- Înălțimea liniei de titlu: 1,1 em
Corpul textului
Derulați până la Corpul textului și alegeți Cabină. Setați culoarea la #442854.
- Corpul de poliție: cabină
- Culoarea textului corpului: #442854
Setați înălțimea liniei la 1,8 em.
- Înălțimea liniei: 1,8 em
Metadate text
Derulați până la Metadate text și alegeți Cormorant Infant. Setați greutatea la normal, stilul la niciunul și culoarea la #442854.
- Font metadate: Cormorant Infant
- Metadate Lumină slabă: obișnuită
- Stil de copiere a metadatelor: niciuna
- Culoarea textului metadatelor: #442854
- Dimensiunea textului metadatelor: desktop 16px, tabletă 15px, telefon 14px
- Înălțimea rândului de metadate: 1,8 em
Text de paginare
Acum să trecem la Paginație . Pentru font, alegeți Cormorant Infant, selectați Bold și schimbați culoarea la #442854.
- Font Show Pagination: Cormorant Infant
- Afișează paginarea Lumină moale: îndrăzneață
- Culoarea textului Afișează paginarea: #442854
spaţierea
Apoi vom trece la spațierea și adăugați marja 0vw în partea de sus. Acest lucru împiedică modulul nostru să se suprapună cu modulul anterior.
- Marja superioară: 0vw
frontieră
Derulați până la frontieră și introduceți 0px pentru toate cele patru colțuri. Acest lucru ne oferă forma noastră pătrată pentru card.
- Aspect grilă dreptunghiulară rotunjită: 0px
Cutie de umbră
În cele din urmă, derulați în jos la Box Shadow și dezactivați-l. Închideți setările blogului. Secțiunea de blog s-a terminat.
- Cutie cu umbre: niciuna
Adăugați o nouă secțiune „Îndemn” pe pagina blogului
Apoi mergem creați secțiunea „Apel la acțiune”. a paginii. Această secțiune include o imagine de fundal paralax pe ecran complet, contactați-ne și următoarele link-uri sociale.
Adăugați o nouă secțiune
Faceți clic pe pictograma albastră pentru a adăugați o nouă secțiune obișnuită În josul paginii.
- Secțiunea: obișnuită
Stilați secțiunea îndemn la acțiune
Deschide-le parametrii secțiunii făcând clic pe pictograma sa roată.
fundal
Derulați până la fundal și alegeți fila Imagine. Faceți clic pe pictograma gri numită Imagine de fundal.
Alegeți o imagine pe ecran complet din biblioteca dvs. media. Selectați Utilizare efect de paralaxă, apoi alegeți CSS pentru metoda de paralaxă.
- Imagine de fundal
- Utilizați efectul de paralaxă: Da
- Metoda paralaxă: CSS
Derulați în jos la Etichetă de administrator și introduceți „Footer” în câmp. Acest lucru vă va ajuta să urmăriți secțiunile.
- Etichetă de administrator: Subsol
Apoi du-te la Fila Stil.
- Marja internă: 10vw (sus și jos)
Adăugați o linie nouă
Faceți clic pe pictograma verde plus și adăugați un rând la o singură coloană pentru conținutul nostru.
dimensionarea
Deschide-le parametrii de linie și accesați fila Stil.
- Lățimea maximă: 320 pixeli
Modulul text titlu
Secțiunea noastră îndemn la acțiune este prezentată cu un titlu. Pentru a crea asta, adăugați un modul text la linie.
Personalizați textul titlului
Adăugați titlul și schimbați fontul la Titlul 3.
- Font: Titlul 3
- Text: Totul despre Divi
Antet
Mergi la Fila Stil și derulați la Subtitrare text . Alegeți centrul pentru aliniere, selectați H3, alegeți Cormorant Infant, setați-l la Bold și alegeți alb pentru culoare.
- Alinierea textului: Centru
- Textul antetului: H3
- Font antet: Cormorant Infant
- Antet Soft Light: Bold
- Culoarea textului antetului: #ffffff
- Dimensiune text antet: 42 pixeli pentru desktop, 20 pixeli pentru tabletă, 16 pixeli pentru telefon
- Înălțimea liniei antetului: 1,1 em
spaţierea
În cele din urmă, derulați în jos la spaţierea și adăugați 10 pixeli la marginea de jos. Închideți setările modulului.
- Marja inferioară: 10px
Modul text pentru adresa
Adăugați un alt modul Text pentru adresa dumneavoastră fizică.
Stilați modulul Physical Address Text
Textul adresei
Adăugați adresa dvs. ca text de paragraf.
- Stil: Paragraf
- Text: adresa dvs
Textul paragrafului
Apoi mergeți la Text în Fila Stil și alegeți Cormorant Infant, semi bold, și setați-l pe alb.
- Font: Cormoran Baby
- Text cu lumină moale: semi-aldine
- Culoare text Text: #ffffff
- Dimensiunea textului text: 28px pentru desktop, 20px pentru tabletă, 16px pentru telefon
- Înălțimea liniei textului: 1,2 em
Adăugați modulul urmăriți-ne pe rețelele sociale
Ultimul nostru modul este modulul Urmărește-ne pe rețelele sociale . Adăugați-l în partea de jos a liniei.
Stilizează Modulul Urmărește-ne pe rețelele sociale
Vom începe cu Fila Stil de data asta. Selectați Centru pentru aliniere modul și schimbați culoarea pictogramei la #442854.
- Alinierea modulului: Centru
- Culoare pictogramă: #442854
Derulați până la Semnale de advertismenture și adăugați 23 de pixeli pentru colțurile rotunjite.
- Dreptunghi rotunjit: 32px
Adăugați și personalizați-vă rețelele sociale
Acum întoarce-te la fila Conținut și adăugați orice rețele sociale pe care doriți să le includeți. Faceți clic pe pictograma plus gri.
Deschide-le setări pentru fiecare dintre rețelele dvs. de socializare , alegeți rețeaua și adăugați linkul la contul dvs. Setați culoarea de fundal la #f9f3fd. Închideți setările submodulului.
- Rețeaua de socializare: alegerea ta
- Adresa URL a linkului contului: linkul dvs
- Culoare de fundal: #f9f3fd
Salvați pagina de blog și ieșiți din generatorul vizual
Oricum, salvați pagina în colțul din dreapta jos și selectați Ieșiți din Visual Builder În partea de sus a paginii. Ești gata să-ți vezi munca.
Previzualizarea paginii de blog
Iată rezultatele noastre.
Descărcați DIVI acum!!!
Concluzie
Asa de ! Acesta este modul nostru de a crea o pagină de blog cu Divi.
Divi Builder facilitează crearea de layout-uri interesante și există mai multe moduri de a utiliza fiecare dintre module. După cum a explorat acest tutorial, este posibil să utilizați mai multe versiuni ale modulului Blog pe aceeași pagină pentru a afișa fluxul de blog în moduri diferite.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
