Želite li poboljšati svoje postove na blogu? divi dodavanjem odjeljka heroja?
Odjeljci Hero preko cijelog ekrana izgledaju sjajno na bilo kojoj web stranici, ali su posebno sjajni na objavama na blogu.
Iako je prikazana slika preko cijelog ekrana, postoji mnogo opcija dizajna za postavljanje naslova i meta teksta. Lako je to uraditi sa Divi Theme Builder .
U ovom članku ćemo vidjeti nekoliko načina za dodavanje odjeljka Hero preko cijelog ekrana u predložak posta na blogu. Divi.
Počnimo.
pregled
Evo pregleda onoga što ćemo dizajnirati u ovom vodiču.
Pročitajte takođe: Divi: Kako koristiti "Gradient Builder" da uljepšate svoje slike
Odjeljak Hero sa modulom za radnu verziju naslova posta
Odjeljak Hero sa modulom za mobilnu verziju Post Title
Alternativni izgled odjeljka Hero s modulom desktop verzije Post Title
Preuzmite DIVI sada!!!
Alternativni izgled odjeljka heroja s mobilnim modulom naslova posta
Odjeljak heroja s metapodacima Desktop verzija
Odjeljak heroja sa mobilnom verzijom metapodataka
Preuzmite DIVI sada!!!
Predlošci postova na blogu za vaš odeljak heroja preko celog ekrana
Možete kreirati šablon blog postova u divi Theme Builder od nule ili preuzmite predložak sa bloga Elegant Themes. Da biste ih pronašli, pretražite blog “besplatni šablon za blog objave”. Ako preuzmete predložak, obavezno ga otpakujte.
Za naše primjere koristit ćemo besplatni predložak objave na blogu za Divi's Fashion Designer Layout Pack . Koristimo i paket rasporeda besplatno Modni dizajner zaglavlja i podnožja .
Preuzmite ili kreirajte predložak posta na blogu za svoj odjeljak Hero na cijelom ekranu
Možete preuzeti predložak posta na blogu ili ga kreirati od nule. Učitaćemo jedan, ali proces za kreiranje sekcije heroja preko celog ekrana je isti.
Vidi također: Divi: Kako koristiti maske i pozadinske obrasce za odjeljak heroja
Metoda 1: Modul naslova posta na cijelom ekranu
Ova metoda će koristiti PostTitle modul . To je dobar izbor ako želite da prikažete sve informacije zajedno. Kada dobijete predložak, odaberite ikonu za uređivanje da biste ga otvorili.
Šablon koji smo postavili ima odjeljak sa istaknutom slikom. Uklonit ćemo ovaj odjeljak i dodati a Odjeljak pune širine na svom mestu.
izabrati Naslov posta pune širine na listi modula pune širine.
Sve stavke su odabrane po defaultu. Ostavite ih uključenim. Skrolujte do Istaknuto postavljanje slike i izaberite Iznad naslova.
- Položaj istaknute slike: Iznad naslova
Dođite do Boja pozadine i postavite boju na #fff9f2
- Pozadina: #fff9f2
Naslov teksta
Odaberite karticu Dizajn. Za tekst naslova zadržite H1 i odaberite Playfair Display. Postavite ga na lijevo poravnato i odaberite #34332e za boju.
- Naslov:
- Nivo naslova: H1
- Font: Playfair Display
- Poravnanje teksta: poravnato lijevo
- Boja teksta: #34332e
Za veličina teksta , postavite desktop verziju na 65px, mobilnu verziju na 42px i visinu reda na 1,2em.
- Veličina teksta naslova (Desktop): 65px (Desktop), 42px (Telefon)
- Visina retka naslova: 1,2 em
Meta tekst
Dođite do Meta Text. Odaberite Montserrat za font i postavite ga na srednje, velika slova, desno poravnanje za desktop verziju i lijevo poravnanje za mobilnu verziju. Odaberite #7b7975 za boju.
- MetaFont:
- Font: Montserrat
- Težina: srednja
- Stil: TT
- meta tekst:
- Poravnanje: desno (Desktop), lijevo (telefon)
- Boja: #7b7975
Postavite veličina slova za desktop verziju od 14 px, za mobilnu verziju na 10 px, razmak između slova 1 px i visina linije na 1,6 em. Zatvorite postavke i sačuvajte šablon.
- meta tekst:
- Veličina (Desktop): 14px
- Veličina (telefon): 10px
- Razmak između slova: 1px
- Visina linije: 1,6 em
Naslov na pozadinskoj slici
Ako odlučite da želite da se naslov pojavi na odabranoj slici, koristite iste postavke dizajna i vratite se na karticu sadržaj.
izabrati Naslov/meta pozadinska slika sipati Istaknuto postavljanje slike.
- Istaknuto postavljanje slike: Naslov/meta pozadinska slika
Dođite do pozadina i izaberite Gradijent pozadine. Postavite lijevu boju na #fff9f2, desnu boju na rgba(255,255,255,0), smjer na 90 stepeni, početnu poziciju na 30% i odaberite da da postavite gradijent iznad slike pozadine. Zatvorite i sačuvajte postavke.
- Gradijent zaustavlja:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Smjer gradijenta: 90 stepeni
- Kvadratni gradijent iznad pozadinske slike: DA
Metoda 2: Odeljak heroja preko celog ekrana sa metapodacima
Ova metoda će koristiti tekstualne module sa dinamički sadržaj za informaciju. Ovo je dobra opcija ako želite da prikažete sve stavke na različitim mjestima.
Prvo preuzmite predložak i izbrišite prvi odjeljak. Ponovo ćemo kreirati module i njihove postavke u lijevoj koloni, ali ćemo ih prošetati kako biste ih mogli konfigurirati.
Postavke odjeljka heroja cijelog ekrana s metapodacima
Otvorite postavke sekcija i dođite do Pozadinska slika. Odaberite Gradijent pozadine i promijenite postavke na sljedeći način:
- Gradijent zaustavlja:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Smjer gradijenta: 90 stepeni
- Kvadratni gradijent iznad pozadinske slike: DA
izabrati Pozadinska slika i odaberite opciju Koristite dinamički sadržaj.
izabrati Istaknuta slika u opcijama.
Odaberite karticu dizajni dođite do dimenzioniranje. Dodajte 100vh minimalnoj visini. Zatvorite postavke odjeljka.
- Minimalna visina: 100vh
Postavke odjeljka heroja cijelog ekrana s metapodacima
Zatim dodajte red sa dvostrukom kolonom u odjeljak.
Dodajte a Tekstualni modul u desnoj koloni.
Za njegovo sadržaja, izaberite Koristite dinamički sadržaj.
izabrati Naslov posta/arhive na listi opcija.
- Dinamički sadržaj: naslov posta/arhive
Idi na karticu Dizajn.
- Naslov:
- Tekst: H1
- Font: Playfair Display
- Poravnanje teksta: poravnato lijevo
- Boja teksta: #34332e
Za veličinu od Texte , postaviti za desktop verziju na 65px, za mobilnu verziju na 42px i visinu reda na 1,2em.
- Naslov:
- Veličina teksta: 65px (Desktop), 42px (Telefon)
- Visina linije: 1,2 em
Dođite do razmak i unesite 50% za gornji padding. Zatvorite Postavke.
- Podstava: 50% (vrh)
Ovaj članak možete pročitati i na: Kako napraviti odjeljak heroja s Divijevim modulom zaglavlja pune širine
Odjeljak heroja sa kategorijom metapodataka
Dodajte novi odjeljak redovno u odeljku Heroj.
Otvorite njegove postavke i postavite boja pozadina na #fff9f2. Zatvorite Postavke.
- Boja pozadine: #fff9f2
Zatim dodajte a ligne od 4 kolone u novi odjeljak.
Junak preko cijelog ekrana s tekstom kategorije metapodataka
Dodajte a Tekstualni modul u lijevom stupcu.
Otvorite postavke modula i odaberite Koristite dinamički sadržaj za tijelo teksta.
izabrati Prošle kategorije na listi.
- Dinamički sadržaj: Kategorije objava
Odaberite karticu dizajn i skrolujte dole do Tekst naslova. Odaberite H4. Odaberite Playfair Display za font i postavite ga na srednje, velika slova, desno poravnanje za desktop verziju i lijevo poravnanje za verziju telefona. Odaberite #7b7975 za boju.
- Naslov:
- Prikaz teksta
- Font: Playfair Display
- Težina fonta: srednja
- Stil: TT
- Poravnanje teksta: Centar
- Boja teksta: #7b7975
Postavite veličinu fonta za desktop verziju na 14 px, za mobilnu verziju na 10 px, razmak između slova na 1 px i visinu reda na 1,6 em. Zatvorite postavke i sačuvajte šablon.
- Naslov 4:
- Veličina (Desktop): 14px
- Veličina (telefon): 10px
- Razmak između slova: 1px
- Visina linije: 1,6 em
Dođite do razmak i dodajte 0px na donju marginu. Zatvorite Postavke.
- Margina (donja): 0px
Odjeljak heroja na cijelom ekranu s metapodacima meta teksta
Zatim kopirajte modul kategorije i prevucite ga u sljedeću kolonu. Svaki od Meta modula ima ista podešavanja. Pokazat ćemo kako kreirati prvi modul, a zatim ga dvaput kopirati da biste kreirali ostale module.
autora
Otvorite postavke i izbrišite sadržaja dinamičan.
kliknite na Koristite dinamički sadržaj i odaberite Post-Autor.
- Dinamički sadržaj: Autor objave
U kartici dizajn, Promijenite sljedeće postavke.
- Naslov 4:
- Font: Montserrat
- Težina fonta: srednja
- Stil: TT
- Poravnanje teksta (Desktop): Centar
- Poravnanje teksta (telefon): lijevo
- Boja: #7b7975
Parametri od veličina slova uključuju:
- Veličina teksta: 14px (Desktop), 10px (Telefon)
- Razmak između slova: 1px
- Visina linije: 1,6 em
La donja margina mora imati 0px.
- Margina (donja): 0px
Datum
kopija modul Autor i prevucite ga u sljedeću kolonu.
Izbriši sadržaja dinamičan trenutno, izaberite Koristite dinamički sadržaj i izaberite Datum objave. Zatvorite Postavke.
- Dinamički sadržaj: Datum objave
komentari
Na kraju, kopija modul Datum objave i prevucite ga do zadnje kolone.
Kao i kod drugih modula, uklonite dinamički sadržaj i odaberite Koristite dinamički sadržaj .
izabrati Post Comment Count od vaših izbora.
- Dinamički sadržaj: Broj objava komentara
Ovaj put dodajte razmak i riječ Komentari u polje nakon . Zatvorite mali modal, a zatim zatvorite postavke. Sačuvajte svoj rad.
- Poslije: Komentari
Pročitajte takođe: Divi: Kako prikazati modul Fullwidth Header na cijelom ekranu
Rezultati
Odjeljak Hero sa modulom za radnu verziju naslova posta
Odjeljak Hero sa modulom za mobilnu verziju Post Title
Alternativni izgled odjeljka Hero s modulom desktop verzije Post Title
Alternativni izgled odjeljka heroja s mobilnim modulom naslova posta
Odjeljak heroja s metapodacima Desktop verzija
Odjeljak heroja s metapodacima mobilne verzije
Preuzmite DIVI sada!!!
zaključak
To je to, to je sve! Ovo je naš pogled na to kako dodati odjeljak heroja preko cijelog ekrana u predložak posta na blogu. divi.
Moduli divi i Theme Builder nude nekoliko opcija za kreiranje sekcija heroja preko celog ekrana. Sve metode rade vrlo dobro i svaka ima svoje prednosti.
Koristeći ove metode, možete dodati odjeljak Hero preko cijelog ekrana u bilo koji predložak za objavu na Divi blogu.
Nadamo se da će vas ovaj vodič inspirisati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
