Uz Divi, čak su i blogovi modul i vaš "blog" možete postaviti bilo gdje na vašem web stranica i u različitim formatima. Možete kombinirati module bloga i bočne trake za stvaranje klasičnog dizajna bloga. 1 stupac, 2 stupca ili 3 stupca mogu se stvoriti pomoću modula bloga i bočne trake.

Kako dodati blog modul na svoju stranicu

Prije nego što dodate blog modul na svoju stranicu, prvo morate pristupiti Divi Builderu. Jednom Divi tema instaliran na vašem web stranica, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Klikom na ovaj gumb možete aktivirati Divi Builder, koji će vam omogućiti pristup svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate svoje web stranica uzvodno ako ste prijavljeni na nadzornu ploču WordPressa.

Jednom ušli u Visual Builder, možete kliknuti sivi gumb plus da biste dodali novi modul na svoju stranicu. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu. Imamo sjajne vodiče o korištenju elemenata linije i dijelovi od Divi.

Pronađite modul bloga na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da možete upisati i riječ "blog", a zatim kliknuti enter za automatsko pronalaženje i dodavanje modula bloga! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su mogućnosti podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

Slučaj upotrebe modula bloga s rasporedom mreže u specijaliziranom odjeljku s desnom bočnom trakom

U ovom ću primjeru dodati blog modul na stranicu bloga. Ova stranica bloga ima potpuno zaglavlje s donjim modulom za pretraživanje. Ispod modula za pretraživanje dodat ću specijalizirani odjeljak s modulom bloga s lijeve strane i odjeljkom bočne trake s desne strane. Bočna traka s desne strane sadrži widget nedavnog posta, modul za optimizaciju e-pošte i modul za osobu.

Ovako izgleda primjer stranice.

Imajte na umu da je blog modul u rasporedu rešetki na lijevoj strani posebnog odjeljka.

Počnimo.

Upotrijebite vizualni alat za dodavanje specijaliziranog odjeljka sa sljedećim izgledom:

Od vas će se zatražiti da dodate stupac ili redak s dva stupca za lijevu stranu. Odaberite redak 1 stupac.

Zatim dodajte liniju modula bloga.

Ažurirajte postavke bloga na sljedeći način:

Opcije sadržaja

Broj postova: 6
Saznajte više Gumb: ON
Prikaži stranicu: NE
Boja pozadine mreže: #ffffff

Mogućnosti dizajna

Izgled: Mreža
Koristi Dropshadow: uključeno
Ikona u boji prekrivanja: #ffffff
Zadržite pokazivač iznad boje: rgba (224,153,0,0.51) zaglavlje
policija:
Zaglavlje veličine fonta: 21px
Boja teksta zaglavlja: # 333333
Razmak slova: 1px
Visina reda zaglavlja: 1.2 em
Granica: DA
Boja obruba: # f0f0f0
Širina granice: 1px
Stil obruba: Solid

Opcije Avancées

Prilagođeni CSS (gumb Pročitajte više):

boja: # e09900;
blok za gledanje;
tekst uskladiti: centar;
margina-gore: 10px;
rub: 1px solid #ccc;
padding: 5px;
Transformacija teksta: velikim slovima;
razmak između slova: 1px;

Napredni prilagođeni gumb CSS za gumb Pročitaj više stvara prilagođeni izgled koji odgovara dizajnu.

U odjeljak desne bočne trake izgleda specijalnog odjeljka morat ćete dodati modul bočne trake koji umeta widget nedavnih postova. Ispod ćete morati dodati modul Optin za e-poštu. A zatim u odjeljku Optinisanje e-pošte morate dodati modul Osoba s podacima o autoru.

To je sve!

Opcije sadržaja bloga

Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, poput teksta, slika i ikona. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će biti na ovoj kartici.

Broj predmeta (Broj predmeta)

Postavite broj poruka koje želite prikazati. Morat ćete imati poruke za sve što se pojavljuje u ovom modulu.

Odaberite kategorije koje želite uključiti u feed poruka. Ovdje će se pojaviti sve kategorije poruka koje ste stvorili kako biste ih odabrali / poništili.

Uključene su kategorije

Odaberite kategorije koje želite uključiti u feed.

Format meta-datuma

Ovdje postavite format datuma koji želite prikazivati ​​na svojim postovima na blogu. Zadani izgled je M j, Y format (6. siječnja 2014.) Pogledajte WordPress codex na datume za više opcija.

Sadržaj

Prikazivanjem cjelovitog sadržaja neće se skratiti vaši postovi na indeksnoj stranici. Prikaži isječak prikazat će samo tekst vašeg isječka.

Offset broj

Odaberite broj poruka koje želite nadoknaditi. Ako, na primjer, kompenzirate s 3 posta, prva tri posta u vašem feedu bloga neće se prikazati.

Prikaži istaknutu sliku

Ova opcija omogućuje vam da odaberete želite li da se minijature pojavljuju u modulu bloga.

Pročitajte više gumb

Ovdje možete postaviti želite li prikazati vezu "pročitaj više" nakon isječka ili ne.

Autor emisije

Odaberite želite li prikazati autora svakog bloga u metaokvipu posta ispod naslova posta.

Prikaži datum

Odaberite želite li ili ne želite da se datum svakog članka stvori u polju Meta meta ispod naslova poruke.

Prikaži kategorije

Odaberite želite li ili ne prikazivati ​​kategorije oglasa u meta području ispod naslova objave.

Pogledajte broj komentara

Odaberite želite li ili ne želite prikazivati ​​broj komentara u meta okviru ispod naslova.

Pogledajte prikazivanje stranica

Odaberite želite li prikazati paginaciju za ovaj feed. Da biste omogućili numeriranje straničenja, morat ćete instalirati dodatak WP Page Navi .

Oznaka uprave

Ovo će promijeniti oznaku modula u generatoru radi lakše identifikacije. Kada se koristi prikaz WireFrame u Visual Builderu, ove će se oznake pojaviti u bloku modula sučelja Divi Builder.

Opcije izrade bloga

Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ova kartica omogućuje vam izmjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete prilagoditi gotovo sve.

raspored

Možete odabrati prikazivanje postova na blogu u mreži ili rasporedu pune širine.

Prekrivena slika

Ako je ova opcija omogućena, boja i ikona sloja prikazuju se kada posjetitelj zadrži pokazivač iznad odabrane slike poruke.

Boja ikone sloja

Ovdje možete postaviti prilagođenu boju ikone sloja.

Pokriva boju poklopca

Ovdje možete definirati prilagođenu boju za sloj.

Izbornik ikona Hover

Ovdje možete definirati prilagođenu ikonu za sloj.

Boja teksta

Si blog postavljen na svijetlu pozadinu, boja teksta treba biti postavljena na "Tamno". Viza, da blog postavljen na tamnu pozadinu, boja teksta treba biti postavljena na "Svijetlo".

Font zaglavlja

Font zaglavlja možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima sjajnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljane, kurzivne, velike i podcrtane opcije.

Veličina fonta zaglavlja

Ovdje možete prilagoditi veličinu teksta zaglavlja. Možete povući klizač intervala da biste povećali ili smanjili veličinu teksta ili možete izravno unijeti željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Boja teksta zaglavlja

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju zaglavlja, odaberite ovu boju iz alata za odabir boja pomoću ove opcije.

Razmak zaglavlja u slovima

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova teksta zaglavlja, pomoću klizača intervala prilagodite razmak ili unesite veličinu razmaka koji želite u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Visina reda zaglavlja

Visina retka utječe na razmak između svakog retka teksta zaglavlja. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos desno od kursora. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Font tijela

Font vašeg tijela možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima sjajnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljane, kurzivne, velike i podcrtane opcije.

Veličina fonta tijela

Ovdje možete prilagoditi veličinu teksta tijela. Možete povući klizač intervala da biste povećali ili smanjili veličinu teksta ili možete izravno unijeti željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Boja teksta tijela

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta tijela, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Prostor tijela slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova vašeg tjelesnog teksta, upotrijebite klizač intervala za podešavanje razmaka ili unesite veličinu razmaka koji želite u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Visina tijela linije

Visina retka utječe na razmak između svakog retka osnovnog teksta. Ako želite povećati razmak između svakog retka, upotrijebite klizač intervala za podešavanje prostora ili unesite željenu veličinu prostora u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Metas font

Font svog meta-teksta možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima sjajnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljane, kurzivne, velike i podcrtane opcije.

Metas font veličine

Ovdje možete prilagoditi veličinu svog meta teksta. Možete povući klizač intervala da biste povećali ili smanjili veličinu teksta ili možete izravno unijeti željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Boja teksta za meta

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju metateksta, odaberite ovu boju iz alata za odabir boja pomoću ove opcije.

Razmak meta slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova vašeg meta-teksta, upotrijebite klizač intervala za podešavanje prostora ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Visina meta linije

Visina retka utječe na razmak između svakog retka vašeg meta-teksta. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili u polje unesite željenu veličinu razmaka desno od kursora. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Koristite granicu

Omogućivanjem ove opcije postavit ćete obrub oko vašeg modula. Ovu granicu možete prilagoditi pomoću sljedećih uvjetnih parametara.

Boja granice

Ova opcija utječe na boju vašeg obruba. Odaberite prilagođenu boju iz alata za odabir boja da biste je primijenili na vaš obrub.

Širina granice

Granice su prema zadanim postavkama široke 1 piksel. Ovu vrijednost možete povećati povlačenjem klizača raspona ili unosom prilagođene vrijednosti u polje za unos s desne strane klizača. Podržane prilagođene jedinice mjere, što znači da možete promijeniti zadanu jedinicu iz "px" u nešto drugo, npr. Em, vh, vw itd.

Granični stil

Granice podržavaju osam različitih stilova, uključujući: pune, točkaste, točkaste, dvostruke, žlijeb, greben, umetak i početak. Na padajućem izborniku odaberite stil koji želite primijeniti na vašu granicu.

Napredne mogućnosti bloga

Na kartici Napredno pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Također možete primijeniti prilagođene CSS klase i ID-ove na modul, koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.

CSS ID

Unesite neobavezni CSS ID koji ćete koristiti za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.

CSS klasa

Unesite izborne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za stvaranje prilagođenog CSS stila. Možete dodati više klasa, odvojenih razmakom. Ovi razredi se mogu koristiti u vašem Divi tema Podređeni ili u prilagođenom CSS-u koji dodajete na svoju stranicu ili web mjesto pomoću Divi Theme Options ili Divi Builder Postavke stranice.

Prilagođeni CSS

Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih elemenata modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati CSS izravno u svaki element. CSS unosi u ovim postavkama već su ugrađeni sa stilskim oznakama. Dakle, morate unijeti CSS pravila odvojena zarezom.

vidljivost

Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti mobilni dizajn uklanjanjem nekih elemenata sa stranice.

To je sve za ovaj vodič.