Gusto mo bang pagbutihin ang iyong mga post sa blog? Divi sa pamamagitan ng pagdaragdag ng Hero section dito?
Ang mga full-screen na seksyon ng Hero ay mukhang mahusay sa anumang web page, ngunit ang mga ito ay lalo na mahusay sa mga post sa blog.
Kahit na ang itinatampok na imahe ay full screen, maraming mga pagpipilian sa disenyo para sa paglalagay ng pamagat at meta text. Madaling gawin sa Tagabuo ng Divi Theme .
Sa artikulong ito, makakakita kami ng ilang paraan upang magdagdag ng full-screen na seksyon ng Hero sa iyong template ng post sa blog. Divi.
Simulan na natin.
pagsisiyasat
Narito ang isang preview ng kung ano ang aming ididisenyo sa tutorial na ito.
Basahin din ang: Divi: Paano gamitin ang "Gradient Builder" para pagandahin ang iyong mga larawan
Seksyon ng Hero na may module ng bersyon ng Post Title Desktop
Hero section na may Post Title na mobile version module
Alternate Hero section layout na may Post Title desktop version module
I-download ang DIV ngayon!!!
Kahaliling layout ng seksyon ng Hero gamit ang mobile Post Title module
Hero section na may metadata na bersyon ng Desktop
Hero section na may metadata mobile na bersyon
I-download ang DIV ngayon!!!
Mga Template ng Blog Post para sa Iyong Fullscreen Hero Section
Maaari kang lumikha ng template ng mga post sa blog sa Divi Tagabuo ng Tema mula sa simula o mag-download ng template mula sa blog na Mga Elegant na Tema. Upang mahanap ang mga ito, maghanap sa blog libreng template ng blog post. Kung magda-download ka ng template, tiyaking i-unzip ito.
Para sa aming mga halimbawa, gagamitin namin ang libreng Blog Post Template para sa Fashion Designer Layout Pack ng Divi . Ginagamit din namin ang layout pack libre Header at Footer Fashion Designer .
I-download o likhain ang template ng iyong blog post para sa iyong fullscreen na seksyon ng Hero
Maaari mong i-download ang template ng iyong blog post o lumikha ng isa mula sa simula. Mag-a-upload kami ng isa, ngunit ang proseso para sa paggawa ng full-screen na seksyon ng Hero ay pareho.
Tingnan din: Divi: Paano Gumamit ng Mga Mask at Mga Pattern ng Background para sa Seksyon ng Hero
Paraan 1: Fullscreen Post Title module
Gagamitin ng paraang ito ang Module ng PostTitle . Ito ay isang mahusay na pagpipilian kung nais mong ipakita ang lahat ng impormasyon nang magkasama. Kapag nakuha mo na ang iyong template, piliin ang icon na i-edit para buksan ito.
Ang template na na-upload namin ay may seksyon na may itinatampok na larawan. Aalisin namin ang seksyong ito at magdagdag ng a Fullwidth na seksyon sa kanilang lugar.
Sélectionnez Fullwidth na Pamagat ng Post sa listahan ng mga full-width na module.
Ang lahat ng mga item ay pinili bilang default. Iwanan ang mga ito na naka-enable. Mag-scroll sa Itinatampok na Paglalagay ng Larawan at piliin Itaas ang Pamagat.
- Itinatampok na Paglalagay ng Larawan: Sa Itaas ng Pamagat
Mag-scroll sa Kulay ng background at itakda ang kulay sa #fff9f2
- Background: #fff9f2
Teksto ng pamagat
Piliin ang tab Disenyo. Para sa teksto ng pamagat, panatilihin ang H1 at piliin ang Playfair Display. Itakda ito sa Left Justified at piliin ang #34332e para sa kulay.
- Pamagat:
- Antas ng heading: H1
- Font: Playfair Display
- Paghahanay ng Teksto: kaliwa makatwiran
- Kulay ng Teksto: #34332e
Para sa laki ng teksto , itakda ang desktop na bersyon sa 65px, ang mobile na bersyon sa 42px, at ang taas ng row sa 1,2em.
- Laki ng Teksto ng Pamagat (Desktop): 65px (Desktop), 42px (Telepono)
- Taas ng Linya ng Pamagat: 1,2 em
Meta text
Mag-scroll sa Meta Text. Piliin ang Montserrat para sa font at itakda ito sa medium, uppercase, right alignment para sa desktop na bersyon at left alignment para sa mobile na bersyon. Piliin ang #7b7975 para sa kulay.
- MetaFont:
- Font: Montserrat
- Timbang: Katamtaman
- Estilo: TT
- Metatext:
- Alignment: kanan (Desktop), kaliwa (Telepono)
- Kulay: #7b7975
Itakda ang laki ng font para sa desktop na bersyon sa 14 px, para sa mobile na bersyon sa 10 px, ang letter spacing sa 1 px at ang taas ng linya sa 1,6 em. Isara ang iyong mga setting at i-save ang iyong template.
- Metatext:
- Laki (Desktop): 14px
- Laki (Telepono): 10px
- Spacing ng Letter: 1px
- Taas ng Linya: 1,6 em
Pamagat sa larawan sa background
Kung magpasya kang gusto mong lumabas ang pamagat sa itinatampok na larawan, gamitin ang parehong mga setting ng disenyo at bumalik sa tab nilalaman.
Sélectionnez Pamagat/Meta Background Image para sa Itinatampok na Paglalagay ng Larawan.
- Itinatampok na Paglalagay ng Larawan: Pamagat/Meta na Larawan sa Background
Mag-scroll sa likuran at piliin Gradient ng Background. Itakda ang kaliwang kulay sa #fff9f2, kanang kulay sa rgba(255,255,255,0), direksyon sa 90 degrees, panimulang posisyon sa 30% at piliin ang oo upang ilagay ang gradient sa itaas ng larawan ng background. Isara at i-save ang iyong mga setting.
- Mga Paghinto ng Gradient:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Gradient na Direksyon: 90 deg
- Square Gradient sa Itaas ng Background na Larawan : YES
Paraan 2: Full Screen Hero Section na may Metadata
Ang pamamaraang ito ay gagamit ng mga Text module na may dynamic na nilalaman para sa impormasyon. Isa itong magandang opsyon kung gusto mong ipakita ang lahat ng item sa iba't ibang lugar.
Una, i-download ang template at tanggalin ang unang seksyon. Gagawin naming muli ang mga module at ang mga setting ng mga ito sa kaliwang column, ngunit dadaanan namin ang mga ito para ma-configure mo ang mga ito.
Mga Setting ng Fullscreen Hero Section na may Metadata
Buksan ang mga setting ng seksyon at mag-scroll sa Larawan ng Background. Pumili Gradient ng Background at baguhin ang mga setting tulad ng sumusunod:
- Mga Paghinto ng Gradient:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Gradient na Direksyon: 90 degrees
- Square Gradient sa Itaas ng Background na Larawan : YES
Sélectionnez Larawan ng Background at piliin ang pagpipilian Gumamit ng Dynamic na Nilalaman.
Pumili Itinatampok na Larawan sa mga pagpipilian.
Piliin ang tab Disenyoat mag-scroll sa sizing. Magdagdag ng 100vh sa pinakamababang taas. Isara ang mga setting ng seksyon.
- Min Taas: 100vh
Mga Setting ng Fullscreen Hero Section na may Metadata
Susunod, magdagdag ng double column row sa seksyon.
Magdagdag ng a Module ng teksto sa kanang hanay.
Para sa kanya nilalaman, piliin Gumamit ng Dynamic na Nilalaman.
Pumili Pamagat ng Post/Archive sa listahan ng mga opsyon.
- Dynamic na Nilalaman: Pamagat ng Post/Archive
Pumunta sa tab Disenyo.
- Pamagat:
- Teksto: H1
- Font: Playfair Display
- Paghahanay ng Teksto: kaliwa makatwiran
- Kulay ng Teksto: #34332e
Para sa laki ng teksto , itakda para sa desktop na bersyon sa 65px, para sa mobile na bersyon sa 42px at row taas sa 1,2em.
- Pamagat:
- Laki ng Teksto: 65px(Desktop), 42px(Telepono)
- Taas ng Linya: 1,2 em
Mag-scroll sa Spacing at ilagay ang 50% para sa top padding. Isara ang Mga Setting.
- Padding: 50% (Nangungunang)
Maaari mo ring basahin ang artikulong ito sa: Paano Gumawa ng Hero Section gamit ang Fullwidth Header Module ng Divi
Seksyon ng bayani na may kategorya ng metadata
Magdagdag ng bagong seksyon regular sa ilalim ng seksyon ng Hero.
Buksan ang mga setting nito at itakda ang kulay background sa #fff9f2. Isara ang Mga Setting.
- Kulay ng Background: #fff9f2
Pagkatapos ay magdagdag ng a linya ng 4 na column sa bagong seksyon.
Buong screen na bayani na may teksto ng kategorya ng metadata
Magdagdag ng a Module ng teksto sa kaliwang haligi.
Buksan ang mga setting ng module at piliin Gumamit ng Dynamic na Nilalaman para sa katawan ng teksto.
Sélectionnez Mga nakaraang Kategorya sa listahan.
- Dynamic na Nilalaman: Mga Kategorya ng Post
Piliin ang tab Disenyo at mag-scroll pababa sa Heading Text. Piliin ang H4. Piliin ang Playfair Display para sa font at itakda ito sa medium, uppercase, right alignment para sa desktop na bersyon at left alignment para sa bersyon ng telepono. Piliin ang #7b7975 para sa kulay.
- Pamagat:
- Pagpapakita ng Teksto
- Font: Playfair Display
- Timbang ng Font: Katamtaman
- Estilo: TT
- Paghahanay ng Teksto: Gitna
- Kulay ng Teksto: #7b7975
Itakda ang laki ng font para sa desktop na bersyon sa 14 px, para sa mobile na bersyon sa 10 px, letter spacing sa 1 px at taas ng linya sa 1,6 em. Isara ang iyong mga setting at i-save ang iyong template.
- Pamagat 4:
- Laki (Desktop): 14px
- Laki (Telepono): 10px
- Spacing ng Letter: 1px
- Taas ng Linya: 1,6 em
Mag-scroll sa Spacing at magdagdag ng 0px sa ibabang margin. Isara ang Mga Setting.
- Margin (Ibaba): 0px
Seksyon ng Fullscreen Hero na may metadata ng Meta Text
Susunod, kopyahin ang module ng Kategorya at i-drag ito sa susunod na column. Ang bawat isa sa mga module ng Meta ay may parehong mga setting. Ipapakita namin kung paano lumikha ng unang module at pagkatapos ay kopyahin ito ng dalawang beses upang lumikha ng iba pang mga module.
May-akda
Buksan ang mga setting at tanggalin ang nilalaman pabago-bago.
Mag-click sa Gumamit ng Dynamic na Nilalaman at pumili Mag-post ng Awtor.
- Dynamic na Nilalaman: Post Author
Sa tab Disenyo, Baguhin ang mga sumusunod na setting.
- Pamagat 4:
- Font: Montserrat
- Timbang ng Font: Katamtaman
- Estilo: TT
- Text Alignment (Desktop): Gitna
- Text Alignment (Telepono): Kaliwa
- Kulay: #7b7975
Ang mga parameter ng laki ng font isama ang:
- Laki ng Teksto: 14px (Desktop), 10px (Telepono)
- Spacing ng Letter: 1px
- Taas ng Linya: 1,6 em
La ibabang margin dapat may 0px.
- Margin (Ibaba): 0px
petsa
kopya ang Author module at i-drag ito sa susunod na column.
Tanggalin mo nilalaman dynamic kasalukuyang, pumili Gumamit ng Dynamic na Nilalaman at piliin Petsa ng Pag-publish ng Post. Isara ang Mga Setting.
- Dynamic na Nilalaman: Petsa ng Pag-publish ng Post
mga komento
Pa Rin, kopya ang Post Publish Date module at i-drag ito sa huling column.
Tulad ng iba pang mga module, alisin ang dynamic na nilalaman at piliin Gumamit ng Dynamic na Nilalaman .
Pumili Bilang ng Komento sa Post mula sa iyong mga pagpipilian.
- Dynamic na Nilalaman: Bilang ng Komento sa Post
Sa pagkakataong ito magdagdag ng puwang at ang salitang Mga Komento sa field pagkatapos . Isara ang maliit na modal pagkatapos ay isara ang mga setting. I-save ang iyong trabaho.
- Pagkatapos: Mga komento
Basahin din ang: Divi: Paano ipakita ang Fullwidth Header module sa buong screen
Resultats
Seksyon ng Hero na may module ng bersyon ng Post Title Desktop
Hero section na may Post Title na mobile version module
Alternate Hero section layout na may Post Title desktop version module
Kahaliling layout ng seksyon ng Hero gamit ang mobile Post Title module
Hero section na may metadata na bersyon ng Desktop
Seksyon ng Hero na may metadata ng bersyon ng mobile
I-download ang DIV ngayon!!!
Konklusyon
Iyon lang iyon! Ito ang aming pagtingin sa kung paano magdagdag ng isang fullscreen na seksyon ng Hero sa iyong template ng post sa blog. Divi.
Mga module Divi at Theme Builder ay nag-aalok ng ilang mga opsyon para sa paggawa ng full-screen na mga seksyon ng Hero. Ang lahat ng mga pamamaraan ay gumagana nang mahusay at lahat ay may kanilang mga pakinabang.
Gamit ang mga pamamaraang ito, maaari kang magdagdag ng full-screen na seksyon ng Hero sa anumang template ng post sa blog ng Divi.
Umaasa kami na ang tutorial na ito ay magbibigay inspirasyon sa iyo para sa iyong mga susunod na proyekto ng Divi. Kung mayroon kang anumang mga alalahanin o mungkahi, hanapin kami sa ang seksyon ng mga komento upang talakayin ito.
Maaari ka ring kumonsulta aming mga mapagkukunan, kung kailangan mo ng maraming mga elemento upang maisagawa ang iyong mga proyekto ng paglikha ng mga site sa Internet.
Huwag mag-atubiling kumunsulta din sa aming gabay sa Paglikha ng blog ng WordPress o ang isa sa Divi: ang pinakamahusay na tema ng WordPress sa lahat ng oras.
Ngunit pansamantala, ibahagi ang artikulong ito sa iyong iba't ibang mga social network.
...
