Dëshironi të krijoni një faqe blogu me modulin Blog de Divi?
Zakonisht çdo paketë e paraqitjes Divi botohet në Elegant Temat ofron një plan urbanistik, i cili ju ndihmon të krijoni blogun tuaj mjaft shpejt. Por a keni dashur ndonjëherë të shihni se si të krijoni vetë një nga këto faqe në blog?
Në këtë artikull, ne do të shohim se si të krijojmë një faqe në blog me modulin Divi's Blog. Ne do të kalojmë çdo cilësim hap pas hapi.
Le të fillojmë!
studim
Para se të fillojmë, le të shohim së pari një përmbledhje të asaj që do të krijojmë.
Krijo një faqe të re në blog
Krijoni një faqe të re
Së pari, ne do të krijojmë faqen tonë. Në pultin e WordPress, klikoni Faqet > Shto në.
Jepini faqes një titull që ka kuptim për ju.
- Titulli i faqes: Blog në Divi
Kalo te Divi Builder
Klikoni butonin vjollcë në qendër të faqes: Përdorni Divi Builder .
Shto një seksion për titullin e faqes së blogut
Personalizojeni seksionin
Do të fillojmë me pjesën e parë. Hapini ato parametrat e seksionit .
Shkoni te sfond dhe ndryshoni ngjyrën në #f9f3fd. Futni Blog si etiketën e administratorit. Mbyllni cilësimet e seksionit.
- Sfondi: #f9f3fd
- Etiketa e administratorit: Blog
Krijo titullin e faqes në blog
Më pas do të shtojmë një linjë për titullin. Zgjidhni ikonën e gjelbër dhe zgjidhni rreshtin e një kolone.
Më pas shtoni një modul teksti në linjë.
Personalizo modulin e tekstit të titullit të blogut
Hapni ato Cilësimet e modulit të tekstit dhe zgjidhni H1. Shto titullin Blogu ynë.
- Fonti: Titulli 1
- Teksti: Blogu ynë
Pastaj shkoni nëSkeda e stilit dhe vendosni shtrirjen në qendër. Për tekstin e titullit H1, zgjidhni Cormorant Infant për fontin dhe bëjeni atë të trashë.
- Rreshtimi i tekstit: në qendër
- Teksti i titullit: H1
- Fonti i Header: Foshnja Cormorant
- Kreu i dritës së butë: Tekst i trashë
Cakto ngjyrën në #442854, madhësinë në 130 pikselë dhe lartësinë e linjës në 0,8em.
- Ngjyra: #442854
- Madhësia e tekstit në desktop: 130 px
- Lartësia e linjës: 0,8em
Krijo artikullin më të fundit dhe seksionin e thirrjes për veprim
Seksioni ynë përbëhet nga artikulli më i fundit dhe një email zgjedhor.
Shtoni një rresht të ri nën rreshtin tonë të parë dhe zgjidhni modelin e kolonës 2/3 majtas dhe 1/3 djathtas.
Hapni ato parametrat e linjës duke klikuar në ikonën e ingranazhit.
ZgjidhniSkeda e stilit, lëvizni te ndarje dhe shtoni 0px në Margjinën e brendshme të poshtme. Mbyll Cilësimet.
- Marzhi i brendshëm i poshtëm: 0 px
Shtoni dhe personalizoni modulin e postimit të blogut të veçuar
Më pas do të shtojmë një blog-modul . Kjo do të përmbajë artikullin tonë të fundit. Klikoni ikonën plus gri në kolonën e majtë të rreshtit tonë të ri dhe shtoni modulin Blog.
Përmbajtje
sous Përmbajtje , shkruani 1 për numrin e postimeve.
- Numri i pozicioneve: 1
elementet
Shkoni te elementet dhe zgjidhni Autor dhe Pagination. Ne do ta lëmë pjesën tjetër në standardet e tyre.
- Autori i shfaqjes: nr
- Shfaq faqet: Jo
natyrë
Pastaj zgjidhni Skeda e stilit dhe zgjidhni "Ekrani i plotë" për paraqitjen dhe çaktivizoni mbivendosjen e imazhit të paraqitur.
- Modeli: ekran i plotë
- Mbivendosja e imazhit të zgjedhur: çaktivizohet
Teksti i titullit
Shkoni te Teksti i titullit . Zgjidhni H2 dhe zgjidhni Cormoran Infant. Zgjidhni Bold dhe ndryshoni ngjyrën në #442854.
- Fut titullin tre: H2
- Titulli i shkronjave: Cormorant Infant
- Titulli i dritës së butë: Tekst i trashë
- Ngjyra e tekstit të titullit: #442854
Vendosni madhësinë e shkronjave në 30 piksele. Ndrysho lartësinë e linjës në 1.1em.
- Madhësia: 30 piksel për desktop, 20 piksel për tablet, 18 piksel për telefonin
- Lartësia e linjës së titullit: 1,1 em
Trupi i tekstit
Më pas lëvizni poshtë te teksti i trupit . Zgjidhni Cabin për fontin, ndryshoni ngjyrën në #442854 dhe ndryshoni lartësinë e rreshtit në 1,8em.
- Trupa e Policisë: Kabina
- Ngjyra e tekstit të trupit: #442854
- Lartësia e vijës së trupit: 1,8 em
Meta të dhënat e tekstit
Më pas lëvizni poshtë te Metadatat e tekstit . Vendosni parametrat si më poshtë:
- Fonti i meta të dhënave: Foshnja Cormorant
- Dritë e zbehtë e meta të dhënave: e rregullt
- Stili i kopjimit të meta të dhënave: Asnjë
- Ngjyra e tekstit të meta të dhënave: #442854
- Madhësia e tekstit të meta të dhënave: Desktop 16px, Tablet 15px, Telefon 14px
- Lartësia e rreshtit të meta të dhënave: 1,8 em
ndarje
Më pas lëvizni poshtë te ndarje dhe ndryshoni margjinën e sipërme në 0vw.
- Marzhi i sipërm: 0vw
Kuti me hije
Më në fund, lëvizni poshtë te Kuti me hije dhe çaktivizoni atë.
- Shadow Box: Çaktivizo
Shtoni dhe personalizoni modulin e tekstit të postës elektronike në blog
Tani do të kalojmë në kolonën e djathtë dhe krijoni Thirrjen për Veprim përmes emailit . Së pari, shtoni një modul teksti në kolonën e djathtë. Klikoni ikonën plus gri dhe kërkoni për Tekst.
Përmbajtje
Zgjidhni titullin 2 dhe shkruani tekstin Abonohu në ofertat tona.
- Fonti: Kreu 2
- Teksti: Abonohuni në ofertat tona
Teksti i kokës
Hidh le tekst të titullit, zgjidhni Përafrim në qendër, zgjidhni H2, zgjidhni Cormorant Infant dhe vendoseni në Bold.
- Rreshtimi i tekstit: në qendër
- Teksti i titullit: H2
- Fonti i Header: Foshnja Cormorant
- Kreu i dritës së butë: Bold
Ndrysho ngjyrën në #442854, madhësinë në 32px dhe lartësinë e linjës në 0,95em.
- Ngjyra e tekstit të kokës: #442854
- Madhësia e tekstit të kokës: 32 piksele
- Lartësia e vijës së kokës: 0,95 em
ndarje
Më në fund, lëvizni poshtë te ndarje dhe shtoni 10 piksele në kufirin e poshtëm. Mbyllni cilësimet e modulit të tekstit.
- Marzhi i poshtëm: 10 px
Shtoni dhe personalizoni modulin Optin Email Blog
Pastaj shkojmë krijoni formë email . Shtoni një modul Email Optin poshtë modulit Tekst në kolonën e djathtë.
Përmbajtje
Së pari, hiqni titullin dhe tekstin e trupit.
- Titulli: Asnjë
- Teksti i trupit: asnjë
Shkoni te Llogaria e emailit dhe shtoni ofruesin tuaj të shërbimit.
Më pas lëvizni poshtë te sfond dhe çaktivizoni ngjyrën e sfondit.
- Përdorni ngjyrën e sfondit: jo
fushat
Shkoni në Skeda e stilit dhe ndryshoni ngjyrën e sfondit të fushave në rgba(255,255,255,0) dhe ngjyrën e tekstit në #442854.
- Fushat e ngjyrave të sfondit: rgba (255,255,255,0)
- Fushat e ngjyrave të tekstit: #442854
Lëvizni poshtë te opsionet e shkronjave dhe ndryshoni fontin në kabinë, madhësinë në 16 px dhe lartësinë e rreshtit në 1,8em.
- Fushat e shkronjave: Kabina
- Fushat e madhësisë së tekstit: 16 pixel
- Lartësia e rreshtit të fushës: 1,8 em
Më pas, rregulloni këndin e rrumbullakosur të fushave në 32 px, gjerësinë e kufirit në 2 px dhe ndryshoni ngjyrën e kufirit në #442854.
- Kontrollet e drejtkëndëshit të rrumbullakosur: 32 px
- Fushat e gjerësisë së kufirit: 2 px
- Fushat e ngjyrës së kufirit: #442854
buton
Shkoni te Butoni dhe zgjidhni Përdorni stile të personalizuara për Butonin . Ndrysho madhësinë në 18 ps, ngjyrën e butonit në të bardhë dhe ngjyrën e sfondit të butonit në #442854.
- Përdorni stile të personalizuara për butonin: Po
- Madhësia e tekstit të butonit: 18 piksele
- Ngjyra e tekstit të butonit: #ffffff
- Butoni i sfondit: #442854
Ndrysho rrezen e kufirit në 50 piksel, fontin në Cormorant Infant dhe bëje peshën të theksuar.
- Butoni i rrezes kufitare: 50 px
- Butoni i shkronjave: Foshnja kormoran
- Butoni i lehtë i dritës: Tekst i trashë
Së fundi, le të shtojmë disa margjina. Futni 20 px për kufirin e sipërm, 12 px për mbushjen e sipërme dhe të poshtme dhe 32 px për mbushjen majtas dhe djathtas. Mbyllni cilësimet e Email Optin.
- Butoni i Marzhit të sipërm: 20 px
- Butoni i mbushjes së sipërme dhe të poshtme: 12 px
- Mbushja e butonit majtas dhe djathtas: 32 px
Shto rresht të ri për listën e postimeve në blog
Ne do ta bëjmë tani krijoni listën e artikujve të faqes. Së pari, shtoni një rresht të ri me një kolonë poshtë seksionit tonë të mëparshëm.
Cilësimet e linjës
Shkoni në Skeda e stilit dhe shtoni 0px në Marzhin e Brendshëm të Vertex. Mbyll cilësimet e linjës.
- Maja e marzhit të brendshëm: 0 px
Shtoni një modul Blog në linjën tuaj
Shtoje nje blog-modul në linjën tuaj të re duke klikuar ikonën plus gri dhe duke klikuar Blog.
Stilimi i furnizimit të postimit në blog
Le të ndryshojmë furnizimin e faqes së blogut.
Përmbajtja e furnizimit të blogut
Hapni ato Cilësimet e modulit të blogut dhe shkruani 3 për numrin e postimeve. Kjo ju lejon të zgjidhni numrin e postimeve që shfaqen në ekran.
Një numër më i ulët, si 3, na lejon të fokusohemi në postimet e fundit dhe të zvogëlojmë madhësinë e faqes. Kjo është një zgjedhje e mirë nëse nuk postoni shpesh ose dëshironi ta mbani faqen më të pastër. Shfaqja e më shumë postimeve, të tilla si 6-9, është një ide e mirë nëse doni të përqendroheni në rrjedhën e blogut.
- Numri i postimeve: 3
Futni 1 për kompensimin. Kjo i thotë Divit të fillojë me postimin e dytë të blogut, gjë që na pengon të shfaqim të njëjtin artikull që ishte shfaqur tashmë në postimin e blogut të treguar sipër tij.
- Numri i kompensimit të postës: 1
elementet
Shkoni te elementet . Aktivizo imazhin e veçuar, datën, fragmentin e kategorive dhe faqet. Çaktivizoni pjesën tjetër.
- Shfaq imazhin e veçuar: Po
- Të dhënat: Po
- Kategoritë: Po
- Fragment: Po
- Fletëzimi: Po
Sfondi
Qasja në sfond dhe vendosni ngjyrën e sfondit të pllakës së rrjetës në rgba (255,255,255,0)
- Ngjyra e sfondit të pllakës së rrjetës së rrjetës: rgba (255,255,255,0)
Paraqitja dhe mbivendosja
Pastaj shkoni në Skeda e stilit . Lëreni paraqitjen të caktuar në Grid. Ne zgjodhëm paraqitjen me gjerësi të plotë për postimin e blogut të paraqitur sipër këtij. Ne do të përdorim paraqitjen e rrjetit për këtë furnizim të blogut, që është opsioni i parazgjedhur. Çaktivizo mbivendosjen e imazhit të veçuar.
- Paraqitja: Rrjeti
- Mbivendosja e imazhit të zgjedhur: çaktivizohet
Teksti i titullit
Hidh le teksti i titullit , zgjidhni H2. Zgjidhni Cormorant Infant, vendoseni në Bold dhe futni #442854 për ngjyrën.
- Fut titullin tre: H2
- Titulli i shkronjave: Cormorant Infant
- Titulli i dritës së butë: Tekst i trashë
- Ngjyra e tekstit të titullit: #442854
Zgjidhni 20 px për madhësinë e tekstit. Vendosni lartësinë e linjës në 1,1 em.
- Madhësia e tekstit të titullit: Desktop 20 px
- Lartësia e linjës së titullit: 1,1 em
Trupi i tekstit
Shkoni te Teksti i trupit dhe zgjidhni Kabinën. Vendosni ngjyrën në #442854.
- Trupa e Policisë: kabina
- Ngjyra e tekstit të trupit: #442854
Vendosni lartësinë e linjës në 1,8 em.
- Lartësia e linjës: 1,8 em
Meta të dhënat e tekstit
Shkoni te Metadatat e tekstit dhe zgjidhni Cormorant Infant. Vendosni peshën në normale, stilin në asnjë dhe ngjyrën në #442854.
- Fonti i meta të dhënave: Foshnja Cormorant
- Dritë e zbehtë e meta të dhënave: e rregullt
- Stili i kopjimit të meta të dhënave: Asnjë
- Ngjyra e tekstit të meta të dhënave: #442854
- Madhësia e tekstit të meta të dhënave: desktop 16px, tablet 15px, telefon 14px
- Lartësia e rreshtit të meta të dhënave: 1,8 em
Teksti i faqezimit
Tani në të Numër faqesh . Për fontin zgjidhni Cormorant Infant, zgjidhni Bold dhe ndryshoni ngjyrën në #442854.
- Fletorja e shfaqjes së shkronjave: Foshnja Cormorant
- Shfaq Dritën e butë të Paging: Bold
- Ngjyra e tekstit Shfaq faqetimin: #442854
ndarje
Më pas do të kalojmë në ndarja në hapësirë dhe shtoni margjinën 0vw në krye. Kjo parandalon që moduli ynë të mbivendoset me modulin e mëparshëm.
- Marzhi i sipërm: 0vw
kufi
Shkoni te kufi dhe futni 0px për të katër qoshet. Kjo na jep formën tonë katrore për kartën.
- Paraqitja e rrjetës drejtkëndëshe të rrumbullakosura: 0 px
Kuti me hije
Më në fund, lëvizni poshtë te Hija e Kutisë dhe çaktivizoni atë. Mbyll cilësimet e blogut. Seksioni i blogut është i plotë.
- Kutia e hijes: asnjë
Shtoni një seksion të ri "Thirrje për veprim" në faqen e blogut
Pastaj shkojmë krijoni seksionin "Thirrje për veprim". të faqes. Ky seksion përfshin një imazh të sfondit me ekran të plotë paralaks, na kontaktoni dhe lidhjet e mëposhtme sociale.
Shto një seksion të ri
Klikoni ikonën blu për të shtoni një seksion të ri të rregullt në fund të faqes.
- Seksioni: i rregullt
Stiloni seksionin Thirrje për Veprim
Hapni ato parametrat e seksionit duke klikuar në ikonën e tij të ingranazhit.
Sfondi
Shkoni te sfond dhe zgjidhni skedën Image. Klikoni në ikonën gri të emërtuar Imazhi i sfondit.
Zgjidhni një imazh me ekran të plotë nga biblioteka juaj e mediave. Zgjidhni Përdorni efektin paralaks, më pas zgjidhni CSS për metodën paralaks.
- Imazhi i sfondit
- Përdorni efektin paralaks: Po
- Metoda Paralaks: CSS
Lëvizni poshtë te Etiketa Admin dhe futni "Footer" në fushë. Kjo do t'ju ndihmojë të mbani gjurmët e seksioneve.
- Admin Tag: Footer
Pastaj shkoni në Skeda e stilit.
- Marzhi i brendshëm: 10vw (lart dhe poshtë)
Shto një rresht të ri
Klikoni ikonën e gjelbër plus dhe shtoni një rresht në një kolonë të vetme për përmbajtjen tonë.
sizing
Hapni ato parametrat e linjës dhe shkoni te skeda Stil.
- Gjerësia maksimale: 320 piksele
Moduli i tekstit të titullit
Seksioni ynë Thirrje për Veprim paraqitet me një titull. Për të krijuar këtë, shtoni një modul teksti në linjë.
Personalizo tekstin e titullit
Shtoni titullin tuaj dhe ndryshoni fontin në titullin 3.
- Fonti: Kreu 3
- Teksti: Gjithçka rreth Divit
Teksti i kokës
Shkoni në Skeda e stilit dhe shkoni te Teksti i titrave . Zgjidhni qendrën për shtrirjen, zgjidhni H3, zgjidhni Cormorant Infant, vendoseni në Bold dhe zgjidhni të bardhën për ngjyrë.
- Rreshtimi i tekstit: në qendër
- Teksti i titullit: H3
- Fonti i Header: Foshnja Cormorant
- Kreu i dritës së butë: Bold
- Ngjyra e tekstit të kokës: #ffffff
- Madhësia e tekstit të kokës: 42 piksel për desktop, 20 piksel për tabletin, 16 piksel për telefonin
- Lartësia e vijës së kokës: 1,1 em
ndarje
Më në fund, lëvizni poshtë te ndarje dhe shtoni 10 piksele në kufirin e poshtëm. Mbyllni cilësimet e modulit.
- Marzhi i poshtëm: 10 px
Moduli i tekstit për adresën
Shto një modul tjetër Teksti për adresën tuaj fizike.
Stiloni modulin e tekstit të adresës fizike
Teksti i adresës
Shtoni adresën tuaj si tekst paragrafi.
- Stili: Paragraf
- Teksti: adresa juaj
Teksti i paragrafit
Pastaj shkoni te Teksti në Skeda e stilit dhe zgjidhni Cormorant Infant, gjysmë të trashë, dhe vendoseni në të bardhë.
- Fonti: Cormorant Infant
- Teksti me dritë të butë: gjysmë i theksuar
- Ngjyra e tekstit Teksti: #ffffff
- Madhësia e tekstit: 28 px për desktop, 20 px për tablet, 16 px për telefonin
- Lartësia e rreshtit të tekstit: 1,2 em
Shtoni modulin na ndiqni në rrjetet sociale
Moduli ynë i fundit është moduli Na ndiqni në rrjetet sociale . Shtoni atë në fund të rreshtit.
Stilize Na ndiqni në modulin e mediave sociale
Ne do të fillojmë me Skeda e stilit kësaj radhe. Zgjidhni qendrën për shtrirjen e modulit dhe ndryshoni ngjyrën e ikonës në #442854.
- Rreshtimi i modulit: Qendër
- Ngjyra e ikonës: #442854
Shkoni te dërrasëure dhe shtoni 23 piksele për qoshet e rrumbullakosura.
- Drejtkëndësh i rrumbullakosur: 32 px
Shtoni dhe personalizoni rrjetet tuaja sociale
Tani kthehuni te Skeda e përmbajtjes dhe shtoni çdo rrjet social që dëshironi të përfshini. Klikoni ikonën plus gri.
Hapni ato cilësimet për secilin prej rrjeteve tuaja sociale , zgjidhni rrjetin dhe shtoni lidhjen në llogarinë tuaj. Vendosni ngjyrën e sfondit në #f9f3fd. Mbyllni cilësimet e nënmodulit.
- Rrjeti social: zgjedhja juaj
- URL-ja e lidhjes së llogarisë: lidhja juaj
- Ngjyra e sfondit: #f9f3fd
Ruani faqen e blogut dhe dilni nga ndërtuesi vizual
Enfin, ruaj faqen në këndin e poshtëm të djathtë dhe zgjidhni Dilni nga Visual Builder në krye të faqes. Ju jeni gati për të parë punën tuaj.
Pamja paraprake e faqes së blogut
Këtu janë rezultatet tona.
Shkarkoni DIVI Tani!!!
Përfundim
Kështu që ! Kjo është vështrimi ynë se si të krijojmë një faqe në blog me Divi.
Divi Builder e bën të lehtë krijimin e paraqitjeve interesante dhe ka shumë mënyra për të përdorur secilin prej moduleve. Siç ka eksploruar ky tutorial, është e mundur të përdoren versione të shumta të modulit Blog në të njëjtën faqe për të shfaqur furnizimin e blogut në mënyra të ndryshme.
Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
