Želite li poboljšati svoje objave na blogu? Divi dodavanjem odjeljka Hero?
Odjeljci heroja na cijelom zaslonu izgledaju sjajno na bilo kojoj web-stranici, ali posebno su sjajni na postovima na blogu.
Iako je prikazana slika na cijelom zaslonu, postoji mnogo mogućnosti dizajna za postavljanje naslova i meta teksta. Lako je to učiniti s Graditelj tema Divi .
U ovom ćemo članku vidjeti nekoliko načina za dodavanje odjeljka Hero na cijelom zaslonu u predložak posta na blogu. Divi.
Počnimo.
pregled
Evo pregleda onoga što ćemo dizajnirati u ovom vodiču.
Pročitajte također: Divi: Kako koristiti "Gradient Builder" za uljepšavanje vaših slika
Hero odjeljak s naslovom objave modulom verzije za stolna računala
Hero odjeljak s modulom mobilne verzije naslova posta
Izgled alternativnog odjeljka Heroja s modulom verzije naslova objave za stolna računala
Preuzmite DIVI sada!!!
Alternativni izgled odjeljka Hero s modulom naslova mobilnog posta
Hero odjeljak s metapodacima Desktop verzija
Hero odjeljak s mobilnom verzijom metapodataka
Preuzmite DIVI sada!!!
Predlošci postova na blogu za vaš odjeljak heroja preko cijelog zaslona
Predložak postova na blogu možete izraditi u Divi Theme Builder od nule ili preuzmite predložak s bloga Elegant Themes. Da biste ih pronašli, pretražite blog “predložak besplatnog posta na blogu”. Ako preuzmete predložak, obavezno ga raspakirajte.
Za naše primjere koristit ćemo besplatni predložak posta na blogu za Divi's Fashion Designer Layout Pack . Također koristimo paket izgleda besplatno Modni dizajner zaglavlja i podnožja .
Preuzmite ili izradite svoj predložak posta na blogu za odjeljak Hero na cijelom zaslonu
Možete preuzeti svoj predložak posta na blogu ili ga izraditi ispočetka. Prenijet ćemo jedan, ali postupak za stvaranje odjeljka Hero na cijelom zaslonu je isti.
Vidi također: Divi: Kako koristiti maske i pozadinske uzorke za herojsku sekciju
Metoda 1: Modul naslova objave preko cijelog zaslona
Ova metoda će koristiti PostTitle modul . To je dobar izbor ako želite prikazati sve informacije zajedno. Kada imate svoj predložak, odaberite ikonu za uređivanje da biste ga otvorili.
Predložak koji smo učitali ima odjeljak s istaknutom slikom. Uklonit ćemo ovaj odjeljak i dodati a Odjeljak pune širine na svom mjestu.
odabrati Naslov posta pune širine na popisu modula pune širine.
Sve su stavke odabrane prema zadanim postavkama. Ostavite ih uključenima. Pomaknite se na Istaknuti položaj slike i odaberite Iznad naslova.
- Položaj istaknute slike: iznad naslova
Pomaknite se do Boja pozadine i postavite boju na #fff9f2
- Pozadina: #fff9f2
Tekst naslova
Odaberite karticu Oblikovati. Za tekst naslova zadržite H1 i odaberite Playfair Display. Postavite ga na Left Justified i odaberite #34332e za boju.
- Naslov:
- Razina 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, a visinu retka na 1,2em.
- Veličina teksta naslova (stolno računalo): 65 px (stolno računalo), 42 px (telefon)
- Visina retka naslova: 1,2 em
Meta tekst
Pomaknite se do Meta tekst. 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
- Metatekst:
- Poravnanje: desno (stolno računalo), lijevo (telefon)
- Boja: #7b7975
Postavi veličina fonta za desktop verziju na 14 px, za mobilnu verziju na 10 px, razmak između slova 1 px i visina linije 1,6 em. Zatvorite svoje postavke i spremite predložak.
- Metatekst:
- 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 se naslov pojavi na istaknutoj slici, upotrijebite iste postavke dizajna i vratite se na karticu Sadržaj.
odabrati Naslov/meta pozadinska slika za Istaknuti položaj slike.
- Položaj istaknute slike: naslov/meta pozadinska slika
Pomaknite se do pozadina i odaberite Gradijent pozadine. Postavite lijevu boju na #fff9f2, desnu boju na rgba(255,255,255,0), smjer na 90 stupnjeva, početnu poziciju na 30% i odaberite Da za postavljanje gradijenta iznad slike pozadine. Zatvorite i spremite svoje postavke.
- Gradijent zaustavljanja:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Smjer gradijenta: 90 stupnjeva
- Kvadratni gradijent iznad pozadinske slike: DA
Metoda 2: Odjeljak heroja preko cijelog zaslona s metapodacima
Ova metoda će koristiti tekstualne module sa dinamički sadržaj za informaciju. Ovo je dobra opcija ako želite prikazati sve stavke na različitim mjestima.
Najprije preuzmite predložak i izbrišite prvi odjeljak. Ponovno ćemo kreirati module i njihove postavke u lijevom stupcu, ali proći ćemo kroz njih kako biste ih mogli konfigurirati.
Postavke odjeljka heroja preko cijelog zaslona s metapodacima
Otvorite postavke za odjeljak i pomaknite se do Pozadina slike. Izaberi Gradijent pozadine i promijenite postavke na sljedeći način:
- Gradijent zaustavljanja:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Smjer gradijenta: 90 stupnjeva
- Kvadratni gradijent iznad pozadinske slike: DA
odabrati Pozadina slike i odaberite opciju Koristite dinamički sadržaj.
Izabrati Izdvojene slike u opcijama.
Odaberite karticu dizajni pomaknite se do dimenzioniranje. Dodajte 100vh minimalnoj visini. Zatvorite postavke odjeljka.
- Minimalna visina: 100 vh
Postavke odjeljka heroja preko cijelog zaslona s metapodacima
Zatim odjeljku dodajte redak s dva stupca.
Dodati Tekstni modul u desnom stupcu.
Za njegovo sadržaj, odaberite Koristite dinamički sadržaj.
Izabrati Naslov objave/arhive na popisu opcija.
- Dinamički sadržaj: naslov objave/arhive
Idi na karticu Dizajn.
- Naslov:
- Tekst: H1
- Font: Playfair Display
- Poravnanje teksta: poravnato lijevo
- Boja teksta: #34332e
Za veličinu tekstovi , postavite za desktop verziju na 65px, za mobilnu verziju na 42px i visinu reda na 1,2em.
- Naslov:
- Veličina teksta: 65 px (stolno računalo), 42 px (telefon)
- Visina linije: 1,2 em
Pomaknite se do Razmještanje i unesite 50% za gornji dio. Zatvori postavke.
- Ispuna: 50% (vrh)
Također možete pročitati ovaj članak na: Kako stvoriti hero odjeljak s Divi-jevim modulom zaglavlja pune širine
Odjeljak heroja s kategorijom metapodataka
Dodajte novi odjeljak redovito pod rubrikom Heroj.
Otvorite njegove postavke i postavite boja pozadina na #fff9f2. Zatvori postavke.
- Boja pozadine: #fff9f2
Zatim dodajte a linija od 4 stupca u novi odjeljak.
Heroj na cijelom zaslonu s tekstom kategorije metapodataka
Dodati Tekstni modul u lijevom stupcu.
Otvorite postavke modula i odaberite Koristite dinamički sadržaj za tijelo teksta.
odabrati Prošle kategorije na popisu.
- Dinamički sadržaj: kategorije postova
Odaberite karticu dizajn i pomaknite se prema dolje do Tekst naslova. Odaberite H4. Odaberite Playfair Display za font i postavite ga na srednja, velika slova, desno poravnanje za verziju za stolno računalo i lijevo poravnanje za verziju za telefon. Odaberite #7b7975 za boju.
- Naslov:
- Prikaz teksta
- Font: Playfair Display
- Težina fonta: Srednja
- Stil: TT
- Poravnanje teksta: središte
- 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 retka na 1,6 em. Zatvorite svoje postavke i spremite predložak.
- Naslov 4:
- Veličina (Desktop): 14px
- Veličina (telefon): 10px
- Razmak između slova: 1px
- Visina linije: 1,6 em
Pomaknite se do Razmještanje i dodajte 0px na donju marginu. Zatvori postavke.
- Margina (donja): 0px
Odjeljak Hero na cijelom zaslonu s metapodacima teksta
Zatim kopirajte modul Kategorija i povucite ga u sljedeći stupac. Svaki od Meta modula ima iste postavke. Pokazat ćemo kako izraditi prvi modul, a zatim ga dvaput kopirati za izradu ostalih modula.
Autor
Otvorite postavke i izbrišite sadržaj dinamičan.
Kliknite Koristite dinamički sadržaj i odaberite Autor posta.
- Dinamički sadržaj: autor posta
U kartici dizajn, Promijenite sljedeće postavke.
- Naslov 4:
- Font: Montserrat
- Težina fonta: Srednja
- Stil: TT
- Poravnanje teksta (radna površina): središte
- Poravnanje teksta (telefon): lijevo
- Boja: #7b7975
Parametri od veličina fonta uključuju:
- Veličina teksta: 14 px (stolno računalo), 10 px (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 povucite ga u sljedeći stupac.
Obriši sadržaj dinamičan trenutni, izaberite Koristite dinamički sadržaj i odaberite Datum objave objave. Zatvori postavke.
- Dinamički sadržaj: Datum objave
Komentari
U svakom slučaju, kopija modul Post Publish Date i povucite ga do zadnjeg stupca.
Kao i kod drugih modula, uklonite dinamički sadržaj i odaberite Koristite dinamički sadržaj .
Izabrati Objavite broj komentara od vaših izbora.
- Dinamički sadržaj: Broj komentara
Ovaj put dodajte razmak i riječ Komentari u polje nakon . Zatvorite mali modal pa zatvorite postavke. Sačuvajte svoj rad.
- Nakon: Komentari
Pročitajte također: Divi: Kako prikazati modul Fullwidth Header na cijelom zaslonu
Résultats
Hero odjeljak s naslovom objave modulom verzije za stolna računala
Hero odjeljak s modulom mobilne verzije naslova posta
Izgled alternativnog odjeljka Heroja s modulom verzije naslova objave za stolna računala
Alternativni izgled odjeljka Hero s modulom naslova mobilnog posta
Hero odjeljak s metapodacima Desktop verzija
Hero odjeljak s metapodacima mobilne verzije
Preuzmite DIVI sada!!!
Zaključak
To je to to je sve! Ovo je naš pogled na to kako dodati odjeljak Hero na cijelom zaslonu u predložak posta na blogu. Divi.
Moduli Divi i Theme Builder nude nekoliko opcija za stvaranje odjeljaka heroja preko cijelog zaslona. Sve metode rade jako dobro i sve imaju svoje prednosti.
Koristeći ove metode, možete dodati odjeljak Hero na cijelom zaslonu u bilo koji Divi predložak posta na blogu.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o 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.
...
