Želite li izraditi blog stranicu s modulom Blog de Divi?
Obično svaki Divi paket izgleda objavljen na Elegantan Teme nudi izgled bloga koji vam pomaže u stvaranju blog dovoljno brzo. Ali jeste li ikada željeli vidjeti kako sami izraditi jednu od ovih stranica bloga?
U ovom ćemo članku vidjeti kako izraditi blog stranicu s Divi blog modulom. Proći ćemo kroz svaku postavku korak po korak.
Započnimo!
pregled
Prije nego što počnemo, pogledajmo pregled onoga što ćemo stvoriti.
Napravite novu stranicu bloga
Izradite novu stranicu
Prvo ćemo napraviti našu stranicu. Na nadzornoj ploči WordPressa kliknite Stranice > Dodaj On.
Dajte stranici naslov koji vam ima smisla.
- Naslov stranice: Blog na Diviju
Prijeđite na Divi Builder
Kliknite ljubičasti gumb u sredini stranice: Koristite Divi Builder .
Dodajte odjeljak za naslov stranice bloga
Prilagodite odjeljak
Počet ćemo s prvim odjeljkom. Otvorite ih parametri sekcije .
Pomaknite se do pozadina i promijenite boju u #f9f3fd. Unesite Blog kao oznaku administratora. Zatvorite postavke odjeljka.
- Pozadina: #f9f3fd
- Admin Label: Blog
Napravite naslov stranice bloga
Zatim ćemo dodati a linija za naslov. Odaberite zelenu ikonu i odaberite redak s jednim stupcem.
Zatim dodajte a tekstualni modul na liniji.
Prilagodite modul Tekst naslova bloga
Otvori ih Postavke tekstualnog modula i odaberite H1. Dodajte naslov Naš blog.
- Font: Naslov 1
- Tekst: Naš blog
Zatim idite naKartica Stil i postavite poravnanje na Centered. Za tekst naslova H1 odaberite Cormorant Infant za font i podebljajte ga.
- Poravnanje teksta: centrirano
- Tekst zaglavlja: H1
- Font zaglavlja: Cormorant Infant
- Zaglavlje mekog svjetla: podebljani tekst
Postavite boju na #442854, veličinu na 130px i visinu linije na 0,8em.
- Boja: #442854
- Veličina teksta na radnoj površini: 130px
- Visina linije: 0,8em
Izradite najnoviji članak i odjeljak poziva na akciju
Naš odjeljak sastoji se od najnovijeg članka i e-poruke za prijavu.
Dodajte novi redak ispod našeg prvog retka i odaberite dizajn stupca 2/3 lijevo i 1/3 desno.
Otvori ih parametri linije klikom na ikonu zupčanika.
OdaberiteKartica Stil, pomaknite se do razmak i dodajte 0px donjoj unutarnjoj margini. Zatvorite Postavke.
- Donja unutarnja margina: 0px
Dodajte i prilagodite istaknuti modul posta na blogu
Zatim ćemo dodati a blog-modul . Ovo će sadržavati naš posljednji članak. Kliknite sivu ikonu plus u lijevom stupcu našeg novog retka i dodajte modul Blog.
Sadržaj
Sous Sadržaj , unesite 1 za broj postova.
- Broj pozicija: 1
Elementi
Pomaknite se do Elementi i poništite opciju Autor i paginacija. Ostalo ćemo ostaviti na zadanim vrijednostima.
- Autor emisije: br
- Prikaži paginaciju: br
raspored
Zatim odaberite Kartica Stil i odaberite Cijeli zaslon za izgled i isključite istaknuti sloj slike.
- Model: Cijeli zaslon
- Preklapanje odabrane slike: onemogućeno
Tekst naslova
Pomaknite se do Tekst naslova . Odaberite H2 i odaberite Cormoran Infant. Odaberite Podebljano i promijenite boju u #442854.
- Umetnite naslov tri: H2
- Naslov fonta: Cormorant Infant
- Blago svjetlo Naslov: podebljani tekst
- Boja teksta naslova: #442854
Postavite veličinu fonta na 30 piksela. Promijenite visinu linije na 1.1em.
- Veličina: 30 piksela za radnu površinu, 20 piksela za tablet, 18 piksela za telefon
- Visina retka naslova: 1,1 em
Tijelo teksta
Zatim se pomaknite dolje do glavni tekst . Odaberite Cabin za font, promijenite boju u #442854 i promijenite visinu linije na 1,8em.
- Policijski zbor: kabina
- Boja teksta teksta: #442854
- Visina linije tijela: 1,8 em
Tekstualni metapodaci
Zatim se pomaknite dolje do Tekstualni metapodaci . Postavite parametre na sljedeći način:
- Font metapodataka: Cormorant Infant
- Metapodaci Prigušeno svjetlo: Uobičajeno
- Stil kopiranja metapodataka: nema
- Boja teksta metapodataka: #442854
- Veličina teksta metapodataka: desktop 16px, tablet 15px, telefon 14px
- Visina reda metapodataka: 1,8 em
razmak
Zatim se pomaknite dolje do razmak i promijenite gornju marginu u 0vw.
- Gornja marža: 0vw
Kutija sjena
Na kraju, pomaknite se dolje do Kutija sjena i onemogućite ga.
- Shadow Box: Onemogući
Dodajte i prilagodite tekstualni modul e-pošte bloga
Sada ćemo prijeći na desni stupac i kreirajte poziv na radnju putem e-pošte . Prvo dodajte tekstualni modul u desni stupac. Pritisnite sivu ikonu s plusom i potražite Tekst.
Sadržaj
Odaberite naslov 2 i unesite tekst Pretplatite se na naše ponude.
- Font: Naslov 2
- Tekst: Pretplatite se na naše ponude
Zaglavlje Tekst
Za tekstovi naslova, odaberite Center Alignment, odaberite H2, odaberite Cormorant Infant i postavite ga na podebljano.
- Poravnanje teksta: centrirano
- Tekst zaglavlja: H2
- Font zaglavlja: Cormorant Infant
- Zaglavlje mekog svjetla: podebljano
Promijenite boju na #442854, veličinu na 32px i visinu linije na 0,95em.
- Boja teksta zaglavlja: #442854
- Veličina teksta zaglavlja: 32 piksela
- Visina reda zaglavlja: 0,95 em
razmak
Na kraju, pomaknite se dolje do razmak i dodajte 10 piksela donjoj margini. Zatvorite postavke tekstualnog modula.
- Donja margina: 10px
Dodajte i prilagodite blog Optin modul e-pošte
Onda idemo stvoriti obrazac elektronička pošta . Dodajte modul Optin e-pošte ispod Tekst modula u desnom stupcu.
Sadržaj
Najprije uklonite naslov i glavni tekst.
- Naslov: Nema
- Tekst teksta: nema
Pomaknite se do Račun e-pošte i dodajte svog davatelja usluga.
Zatim se pomaknite dolje do pozadina i poništite odabir boje pozadine.
- Koristite boju pozadine: ne
polja
Uđite u Kartica Stil i promijenite boju pozadine polja u rgba(255,255,255,0) i boju teksta u #442854.
- Polja boje pozadine: rgba(255,255,255,0)
- Polja boje teksta: #442854
Pomaknite se prema dolje do mogućnosti fonta i promijenite font u kabinu, veličinu na 16px i visinu linije na 1,8em.
- Polja fonta: Kabina
- Polja veličine teksta: 16 piksela
- Visina reda polja: 1,8 em
Zatim podesite zaobljeni kut polja na 32px, širinu obruba na 2px i promijenite boju obruba u #442854.
- Kontrole zaobljenog pravokutnika: 32px
- Polja širine obruba: 2px
- Polja boje obruba: #442854
dugme
Pomaknite se do gumba i odaberite Koristite prilagođene stilove za gumb . Promijenite veličinu u 18ps, boju gumba u bijelu i boju pozadine gumba u #442854.
- Koristite prilagođene stilove za gumb: Da
- Veličina teksta gumba: 18 piksela
- Boja teksta gumba: #ffffff
- Pozadinski gumb: #442854
Promijenite radijus obruba na 50 piksela, font u Cormorant Infant i podebljajte težinu.
- Gumb radijusa obruba: 50px
- Gumb fonta: Cormorant Infant
- Gumb mekog svjetla: podebljani tekst
Na kraju, dodajmo neke margine. Unesite 20px za gornju marginu, 12px za gornji i donji padding i 32px za lijevi i desni padding. Zatvorite postavke opcije Email.
- Gumb gornje margine: 20 px
- Gornji i donji gumb za razmak: 12 px
- Gumb Lijevo i desno odsječak: 32px
Dodajte novi redak za popis postova na blogu
Sad ćemo izraditi popis stavki stranice. Prvo dodajte novi redak s jednim stupcem ispod prethodnog odjeljka.
Postavke linije
Ići Kartica Stil i dodajte 0px na Vertex Inner Margin. Zatvori postavke linije.
- Unutarnji rubni vrh: 0px
Dodajte blog modul svojoj liniji
Dodati blog-modul na svoj novi redak klikom na sivu ikonu plus i klikom na Blog.
Stiliziranje feeda posta na blogu
Promijenimo feed stranice bloga.
Sadržaj sadržaja bloga
Otvori ih Postavke blog modula i unesite 3 za broj postova. To vam omogućuje da odaberete broj postova koji se prikazuju na zaslonu.
Niži broj, poput 3, omogućuje nam da se usredotočimo na nedavne postove i smanjimo veličinu stranice. Ovo je dobar izbor ako ne objavljujete često ili želite stranicu održavati čišćom. Prikazivanje više postova, kao što je 6-9, dobra je ideja ako se želite usredotočiti na tijek bloga.
- Broj postova: 3
Unesite 1 za pomak. Ovo govori Diviju da počne s drugim postom na blogu, što nas sprječava da prikažemo isti članak koji je već bio prikazan u postu na blogu prikazanom iznad njega.
- Broj pomaka posta: 1
Elementi
Pomaknite se do Elementi . Omogućite istaknutu sliku, datum, isječak kategorija i paginaciju. Onemogućite ostalo.
- Prikaži istaknutu sliku: Da
- Podaci: Da
- Kategorije: Da
- Izvod: Da
- Paginacija: Da
Pozadina
Pristup pozadina i postavite boju pozadine pločice mreže na rgba(255,255,255,0)
- Boja pozadine pločice rešetke: rgba (255,255,255,0)
Izgled i preklapanje
Zatim idite na Kartica Stil . Ostavite raspored postavljen na Mrežu. Izabrali smo izgled pune širine za post na blogu prikazan iznad ovog. Koristit ćemo raspored mreže za ovaj feed bloga, što je zadana opcija. Onemogući istaknuti sloj slike.
- Raspored: Mreža
- Preklapanje odabrane slike: onemogućeno
Tekst naslova
Za naslovni tekst , odaberite H2. Odaberite Cormorant Infant, postavite ga na podebljano i unesite #442854 za boju.
- Umetnite naslov tri: H2
- Naslov fonta: Cormorant Infant
- Blago svjetlo Naslov: podebljani tekst
- Boja teksta naslova: #442854
Odaberite 20px za veličinu teksta. Postavite visinu linije na 1,1 em.
- Veličina teksta naslova: Desktop 20px
- Visina retka naslova: 1,1 em
Tijelo teksta
Pomaknite se do Tijelo teksta i odaberite Kabina. Postavite boju na #442854.
- Policijski zbor: kabina
- Boja teksta teksta: #442854
Postavite visinu linije na 1,8 em.
- Visina linije: 1,8 em
Tekstualni metapodaci
Pomaknite se do Tekstualni metapodaci i odaberite Cormorant Infant. Postavite težinu na normalnu, stil na nikakav, a boju na #442854.
- Font metapodataka: Cormorant Infant
- Metapodaci Prigušeno svjetlo: Uobičajeno
- Stil kopiranja metapodataka: nema
- Boja teksta metapodataka: #442854
- Veličina teksta metapodataka: desktop 16px, tablet 15px, telefon 14px
- Visina reda metapodataka: 1,8 em
Tekst paginacije
Sada na Obilježavanje strana . Za font odaberite Cormorant Infant, odaberite Bold i promijenite boju u #442854.
- Font Prikaži paginaciju: Cormorant Infant
- Prikaži Paging Soft Light: podebljano
- Boja teksta Prikaži paginaciju: #442854
razmak
Zatim ćemo prijeći na razmaka i dodajte 0vw marginu na vrhu. To sprječava da se naš modul preklapa s prethodnim modulom.
- Gornja marža: 0vw
granica
Pomaknite se do granica i unesite 0px za sva četiri kuta. To nam daje naš kvadratni oblik za kartu.
- Izgled mreže zaobljenih pravokutnika: 0px
Kutija sjena
Na kraju, pomaknite se dolje do Kutija sjena i onemogućite ga. Zatvorite postavke bloga. Odjeljak bloga je gotov.
- Kutija za sjene: nema
Dodajte novi odjeljak "Poziv na radnju" na stranicu bloga
Onda idemo izradite odjeljak "Poziv na radnju". stranice. Ovaj odjeljak uključuje pozadinsku sliku paralakse na cijelom zaslonu, kontakt i društvene veze za praćenje.
Dodajte novi odjeljak
Kliknite plavu ikonu za dodajte novi redovni odjeljak na dnu stranice.
- Odjeljak: Redovni
Stilizirajte odjeljak Poziv na radnju
Otvori ih parametri sekcije klikom na njegovu ikonu zupčanika.
Pozadina
Pomaknite se do pozadina i odaberite karticu Slika. Kliknite na sivu ikonu s oznakom Pozadinska slika.
Odaberite sliku preko cijelog zaslona iz svoje medijske biblioteke. Odaberite Koristi efekt paralakse, zatim odaberite CSS za metodu paralakse.
- Pozadinska slika
- Koristite efekt paralakse: Da
- Metoda paralakse: CSS
Pomaknite se dolje do Administratorske oznake i unesite "Podnožje" u polje. To će vam pomoći da pratite odjeljke.
- Admin Tag: Podnožje
Zatim idite na Kartica Stil.
- Unutarnja margina: 10vw (gornja i donja)
Dodajte novi redak
Kliknite zelenu ikonu plus i dodati red u jedan stupac za naš sadržaj.
dimenzioniranje
Otvori ih parametri linije i idite na karticu Stil.
- Maksimalna širina: 320 piksela
Naslov tekstualnog modula
Naš odjeljak Poziv na akciju predstavljen je naslovom. Da biste ovo stvorili, dodati tekstualni modul na liniji.
Prilagodite tekst naslova
Dodajte svoj naslov i promijenite font u Naslov 3.
- Font: Naslov 3
- Tekst: Sve o Divi
Zaglavlje Tekst
Ići Kartica Stil i pomaknite se do Tekst podnaslova . Odaberite centar za poravnanje, odaberite H3, odaberite Cormorant Infant, postavite ga na Bold i odaberite bijelu za boju.
- Poravnanje teksta: Središte
- Tekst zaglavlja: H3
- Font zaglavlja: Cormorant Infant
- Zaglavlje mekog svjetla: podebljano
- Boja teksta zaglavlja: #ffffff
- Veličina teksta zaglavlja: 42 piksela za desktop, 20 piksela za tablet, 16 piksela za telefon
- Visina reda zaglavlja: 1,1 em
razmak
Na kraju, pomaknite se dolje do razmak i dodajte 10 piksela donjoj margini. Zatvorite postavke modula.
- Donja margina: 10px
Tekstualni modul za adresu
Dodajte još jedan tekstualni modul za vašu fizičku adresu.
Stilizirajte modul Tekst fizičke adrese
Tekst adrese
Dodajte svoju adresu kao tekst odlomka.
- Stil: Paragraf
- Tekst: Vaša adresa
Tekst odlomka
Zatim idite na Tekst u Kartica Stil i odaberite Cormorant Infant, polupodebljano i postavite ga na bijelo.
- Font: Kormoran Infant
- Tekst mekog svjetla: polu-podebljano
- Boja teksta Tekst: #ffffff
- Tekst Veličina teksta: 28 px za desktop, 20 px za tablet, 16 px za telefon
- Visina retka teksta: 1,2 em
Dodajte modul pratite nas na društvenim mrežama
Naš posljednji modul je modul Pratite nas na društvenim mrežama . Dodajte ga na dno reda.
Stilizirajte Pratite nas na modulu društvenih mreža
Počet ćemo s Kartica Stil ovaj put. Odaberite Centar za poravnanje modula i promijenite boju ikone u #442854.
- Poravnanje modula: središte
- Boja ikone: #442854
Pomaknite se do pločaure i dodajte 23 piksela za zaobljene kutove.
- Zaobljeni pravokutnik: 32px
Dodajte i prilagodite svoje društvene mreže
Sada se vratite na Kartica sadržaja i dodajte sve društvene mreže koje želite uključiti. Kliknite sivu ikonu plus.
Otvori ih postavke za svaku od vaših društvenih mreža , odaberite mrežu i dodajte vezu na svoj račun. Postavite boju pozadine na #f9f3fd. Zatvorite postavke podmodula.
- Društvena mreža: vaš izbor
- URL veze na račun: vaša veza
- Boja pozadine: #f9f3fd
Spremite stranicu bloga i izađite iz vizualnog graditelja
U svakom slučaju, spremite stranicu u donjem desnom kutu i odaberite Izađite iz Visual Buildera na vrhu stranice. Spremni ste vidjeti svoj rad.
Pregled stranice bloga
Evo naših rezultata.
Preuzmite DIVI odmah!!!
Zaključak
Dakle ! Ovo je naš pogled na to kako napraviti stranicu bloga s Divi.
Divi Builder olakšava stvaranje zanimljivih izgleda, a postoji više načina za korištenje svakog od modula. Kao što je ovaj vodič istražio, moguće je koristiti više verzija modula Blog na istoj stranici za prikaz sadržaja bloga na različite načine.
Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara raspravljati o tome.
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
