Divi: Paano gamitin ang Fullwidth Header module para gumawa ng Hero section

pagkakapantay Gaetan | Divi, Divi Tutorials

Gusto mo bang gumawa ng Hero Divi section na may Fullwidth Header module o magdisenyo ng isa?

Bumuo ng hero section ng Website mula sa simula o paggamit ng Divi Fullwidth Header module ay ang dalawang paraan upang lumikha ng isang kapansin-pansing disenyo para sa iyo web site. 

Sa artikulong ito, titingnan natin ang mga kalamangan at kahinaan ng paggamit ng isang Fullwidth Header module kumpara sa paggawa ng sarili mong Hero section gamit ang Divi.

Sabihin pumunta!

Ang Kahalagahan ng Mga Seksyon ng Bayani sa Website

Ang seksyon ng Hero ay ang pinakaunang seksyon na iyong bisita tingnan kung kailan sila dumating sa iyo Website. Ito ay madalas na isang buong lapad na banner at maaari ding tawaging Hero Header. Isa itong kilalang lugar sa iyong website dahil may kapangyarihan itong mag-iwan ng pangmatagalang unang impression.

Basahin din ang: Divi: Paano ipakita ang Fullwidth Header module sa buong screen

Kaya't mahalaga na ito ay idinisenyo sa paraang madaling basahin habang kapansin-pansin at nakakahimok pa rin. Mahalaga ang mga seksyon ng Website Hero dahil maaari nilang makuha ang atensyon ng mga potensyal na customer, mabilis na ilarawan ang isang page, at humantong sa karagdagang pakikipag-ugnayan at mga potensyal na lead. Dapat na may tatak ang mga seksyon ng bayani, may kasamang H1 na pamagat at CTA.

Gumawa ng seksyon ng Hero mula sa simula

Ang pagdidisenyo ng seksyon ng Hero mula sa simula ay nagbibigay-daan sa iyong magkaroon ng kumpletong kontrol sa disenyo at nilalaman. Depende sa iyong sitwasyon at mga pangangailangan, ito ay maaaring maging isang mahusay na solusyon para sa iyong website. 

Tingnan natin ang mga kalamangan at kahinaan ng diskarteng ito.

lumikha ng seksyong Hero sa Divi gamit ang Fullwidth Header module

Mga pakinabang ng diskarteng ito

Una, tingnan natin ang mga pakinabang ng pagbuo ng seksyong Hero ng website mula sa simula gamit ang Divi.

  • Buong kontrol sa disenyo
  • Gumamit ng anumang Divi module

Mga disadvantages ng diskarteng ito

Ngayon tingnan natin ang mga downside ng paglikha ng isang hero section mula sa simula.

  • Kailangan mong bumuo mula sa simula
  • Nangangailangan ng maraming mod

Gumawa ng seksyong Hero gamit ang Divi Fullwidth Header module

Ang paggawa ng hero section gamit ang Divi Fullwidth Header module ay nagpapadali sa paggawa ng isang kapansin-pansin, mobile responsive na disenyo sa loob lamang ng ilang minuto. 

Tingnan natin ang mga kalamangan at kahinaan ng diskarteng ito.

lumikha ng seksyong Hero sa Divi gamit ang Fullwidth Header module

Mga pakinabang ng diskarteng ito

Tingnan natin ang mga benepisyo ng pagbuo ng isang Hero section gamit ang Divi Fullwidth Header module.

  • Lahat ng iyong nilalaman ay nasa iisang modyul
  • Na-optimize na ang disenyo

Mga disadvantages ng diskarteng ito

Ngayon, suriin natin ang mga disadvantages ng pagdidisenyo ng isang Hero section gamit ang Divi Fullwidth Header module.

  • Mas kaunting flexibility sa disenyo

Ang module ng Divi Fullwidth Header ay may mga opsyon para sa nilalaman paunang natukoy, habang marami ang maaaring limitado kung naghahanap ka upang magdagdag ng isang piraso ng nilalaman na hindi magagamit sa module. Nangangahulugan ito na magkakaroon ka ng mas kaunting kakayahang umangkop sa pangkalahatang disenyo.

Hakbang-hakbang na pagtatayo ng dalawang seksyon ng Hero

Ngayong naiintindihan mo na ang mga kalamangan at kahinaan ng parehong mga diskarte, buuin natin ang bawat seksyon ng Hero para makita mo nang eksakto kung paano gumagana ang bawat diskarte.

lumikha ng seksyong Hero sa Divi gamit ang Fullwidth Header module

Gumawa ng bagong page gamit ang Divi Builder

Upang makapagsimula, kakailanganin mong gawin ang sumusunod:

  1. I-install ang Divi  sa iyong website ng WordPress.
  2. Magdagdag ng pahina at bigyan ito ng pamagat.
  3. Paganahin ang visual builder

Gawin ang iyong Hero section mula sa simula

Ngayong naka-set up na ang ating page, simulan natin ang paggawa ng hero section mula sa simula.

lumikha ng seksyong Hero sa Divi gamit ang Fullwidth Header module

I-download ang DIV ngayon!!!

I-activate ang "Divi Builder"

Upang magamit ang drag and drop builder ng Divi, kakailanganin naming i-activate ang Visual Builder sa pamamagitan ng pag-click sa button "Gumamit ng DiviBuilder". Ire-reload nito ang page gamit ang Divi Visual Builder.

Piliin: Bumuo mula sa simula

Ngayong na-reload na ang iyong page na may pinaganang visual builder, mag-click sa mga opsyon " BUMUO MULA SA SCRATCH para magkaroon tayo ng blangko na page na gagamitin kapag nagdidisenyo.

Magdagdag ng row at i-configure ang mga column

Gumawa ng row na may sumusunod na column structure.

Magdagdag ng mga mod

Ngayon, idagdag natin ang mga module ng nilalaman na kakailanganin natin.

  • 2 Text Modules, divider, isang button sa kaliwang column
  • 1 Image Module sa gitnang column
  • 1 Image Module sa kanang column

Seksyon ng istilo

Ngayon ay i-configure natin ang mga setting ng seksyon.

Magdagdag ng seksyon, pagkatapos ay i-configure ang mga sumusunod na setting:

  • Background: #1d1d25

Estilo ng teksto ng header

I-customize ang text ng header:

  • Pamagat 1:
    • Timbang ng Font: Semi Bold
    • Kulay ng Teksto: #ffffff
    • Laki ng Teksto: 90px
    • Taas ng Linya: 1,1 em

panghiwalay

I-configure ang mga setting ng divider:

  • Kulay ng Linya: rgba(255,255,255,0.3)
  • Timbang ng Divider: 10px
  • Max na Lapad: 260 pixels

teksto ng katawan

I-customize ang body text:

  • Kulay ng Teksto: rgba(255,255,255,0.7)
  • Laki ng Teksto: 13px
  • Taas ng Linya: 1,8 em

butones

Ngayon, i-customize natin ang button.

Sa tab na Button:

  • Gumamit ng Mga Custom na Estilo Para sa Button: Oo
  • Laki ng Teksto ng Pindutan: 14px
  • Kulay ng Teksto: #ffffff
  • Background ng Button:
  • Lapad ng Border: 0 pixels
  • Radius ng Border: 0 pixels

Sa tab na Spacing:

  • Itaas at Ibaba: 40px
  • Kaliwa at Kanan: 20px

Magdagdag ng Mga imahe

Idagdag ang mga larawan sa mga module ng larawan.

Ayusin ang mga setting ng linya

Mga parameter sa linya:

  • Margin (Kaliwa): 15vw
Ayusin ang 2nd column

Sa pangalawang column, i-configure ang mga setting na ito:

Pasadyang CSS

I-paste ang sumusunod na code sa seksyon ng code ng pangunahing elemento:

argin-right: -15vw!important;
z-index: 100!important;

pagitan

Magdagdag ng 100 pixels ng top padding.

Ayun ! Mayroon ka na ngayong ganap na idinisenyong custom na seksyon ng Hero.

I-download ang DIV ngayon!!!

Gawin ang iyong Hero section gamit ang Fullwidth Header module ng Divi

Ngayon tingnan natin kung paano muling likhain ang Hero section na ito gamit ang Fullwidth Header module ng Divi.

I-download ang DIV ngayon!!!

Magdagdag ng page at piliin ang Build From Scratch

Magdagdag ng bagong page, bigyan ito ng pamagat, pagkatapos ay mag-click sa “Use Divi Builder” pagkatapos ay piliin ang Build From Scratch.

Maglagay ng fullwidth na seksyon at fullwidth na header

Ipasok ang seksyon Buong lapad, pagkatapos ay piliin Fullwidth na Header sa silid-aklatan ng modyul.

Nilalaman

Idagdag ang tekstong nilalaman sa module sa tab na Teksto.

Images

Idagdag ang mga larawan sa tab na larawan.

Baguhin ang kulay ng background

Sa tab na background, i-configure ang sumusunod na setting:

  • Background: #1D1D25

Header text

I-configure ang mga setting ng text ng header:

  • Tigat ng Font ng Pamagat: Bold
  • Laki ng Teksto: 90px

teksto ng katawan

I-configure ang mga setting ng body text:

  • Kulay ng Teksto ng Katawan: rgba(255,255,255,0.55)

Teksto ng subtitle

I-configure ang mga setting ng caption text:

  • Timbang ng Subtitle ng Font: Bold
  • Kulay ng Teksto: #4C594C
  • Spacing ng Letter: 3px

buttons

Ngayon, i-customize natin ang dalawang button.

isang pindutan

Sa tab na Button One, i-configure ang mga sumusunod na setting:

  • Gumamit ng Mga Custom na Estilo Para sa Unang Pindutan: Oo
  • Unang Pindutan
    • Background: #4c594c
    • Lapad ng Border: 0 pixels
    • Radius ng Border: 0px
    • Ipakita ang Icon : OO
    • Ipakita Lamang ang Icon sa Hover: Hindi
    • Padding: 25 pixels (Itaas at Ibaba); 25px(kaliwa), 50px(kanan)

Ikalawang Pindutan

Sa tab na Dalawang Pindutan, i-configure ang mga sumusunod na setting:

  • Gumamit ng Mga Custom na Estilo Para sa Ikalawang Pindutan: OO
  • Pindutan Dalawang Lapad ng Border: 0 pixels
  • Radius ng Border: 0px
  • Padding: 25px (Itaas, Ibaba, Kaliwa at Kanan)
  • Shadow ng Button Box: Piliin ang ika-4
  • Pahalang na Posisyon ng Box Shadow: 0px
  • Posisyon ng Box Shadow Vertical: 2px
  • Kulay ng Anino: #ffffff
lumikha ng seksyong Hero sa Divi gamit ang Fullwidth Header module

Ayun ! Mayroon ka na ngayong ganap na idinisenyong Hero section gamit ang Divi Fullwidth Header module.

Tingnan din: Divi: Paano gumawa ng mga transition sa background sa pagitan ng mga elemento

Seksyon ng Hero Divi

I-download ang DIV ngayon!!!

Konklusyon

Ang pagbuo ng seksyong Hero gamit ang Divi ay madali, kung ikaw ay nagtatayo mula sa simula o gumagamit ng Fullwidth Header module. Ang parehong mga pagpipilian ay nagbibigay-daan sa iyo upang lumikha ng mga nakamamanghang disenyo ng header na kumukuha ng interes sa iyo bisita. 

Depende sa iyong mga natatanging pangangailangan, ang alinmang opsyon ay isang mahusay na opsyon upang isaalang-alang kapag ini-istilo ang iyong Hero section. 

Pagkatapos basahin ang mga kalamangan at kahinaan ng pareho, paano mo ididisenyo ang iyong Hero section?

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.

...

Mag-post ng puna

Ang iyong email address ay hindi mai-publish. Mga kinakailangang patlang ay minarkahan *

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang mga hindi gustong. Matuto nang higit pa tungkol sa kung paano ginagamit ang data ng iyong mga komento.