Divi: Kako koristiti modul Fullwidth Header za stvaranje odjeljka Hero

Želite li stvoriti odjeljak Hero Divi s modulom Fullwidth Header ili ga sami dizajnirati?

Izgradite odjeljak heroja web stranica od nule ili pomoću modula Divi Fullwidth Header dva su načina za stvaranje privlačnog dizajna za vaš web stranica. 

U ovom ćemo članku pogledati prednosti i nedostatke korištenja modula Fullwidth Header u odnosu na stvaranje vlastitog odjeljka Hero s Divi.

Idemo!

Važnost odjeljaka heroja web stranice

Odjeljak Hero prvi je odjeljak koji vaš posjetitelji vidjeti kada stignu na vaš web stranica. Ovo je često banner pune širine i može se nazvati i Hero Header. To je istaknuto mjesto na vašoj web stranici jer ima moć ostaviti trajan prvi dojam.

Pročitajte također: Divi: Kako prikazati modul Fullwidth Header na cijelom zaslonu

Stoga je važno da je dizajniran tako da bude lak za čitanje, a da i dalje bude privlačan i uvjerljiv. Odjeljci heroja web stranice važni su jer mogu privući pozornost potencijalnih kupaca, brzo opisati stranicu i dovesti do dodatnog angažmana i potencijalnih potencijalnih kupaca. Odjeljci heroja trebali bi biti brendirani, uključivati ​​H1 naslov i CTA.

Stvorite odjeljak Hero od nule

Dizajniranje odjeljka Hero od nule omogućuje vam potpunu kontrolu nad dizajnom i sadržaj. Ovisno o vašoj situaciji i potrebama, ovo bi moglo biti izvrsno rješenje za vašu web stranicu. 

Pogledajmo prednosti i mane ovog pristupa.

Prednosti ovog pristupa

Prvo, pogledajmo prednosti izrade odjeljka Hero web stranice od nule pomoću Divija.

• Potpuna kontrola dizajna
• Koristite bilo koji Divi modul

Nedostaci ovog pristupa

Sada pogledajmo nedostatke stvaranja odjeljka heroja od nule.

• Morate graditi od nule
• Zahtijeva više modova

Stvorite odjeljak Hero s modulom Divi Fullwidth Header

Stvaranje glavnog odjeljka pomoću modula Divi Fullwidth Header olakšava stvaranje privlačnog dizajna prilagođenog mobilnim uređajima u samo nekoliko minuta. 

Pogledajmo prednosti i mane ovog pristupa.

Prednosti ovog pristupa

Pogledajmo prednosti izgradnje odjeljka Hero s modulom Divi Fullwidth Header.

• Sve tvoje sadržaj je u jednom modulu
• Dizajn je već optimiziran

Nedostaci ovog pristupa

Sada procijenimo nedostatke dizajniranja odjeljka Hero s modulom Divi Fullwidth Header.

• Manja fleksibilnost s dizajnom

Modul Divi Fullwidth Header dolazi s opcijama za sadržaj unaprijed definirani, dok se mnogi mogu ograničiti ako želite dodati dio sadržaja koji nije dostupan u modulu. To znači da ćete imati manje fleksibilnosti s cjelokupnim dizajnom.

Izgradnja dva dijela Heroja korak po korak

Sada kada razumijete prednosti i nedostatke oba pristupa, napravimo svaki odjeljak Heroja kako biste mogli vidjeti kako točno svaki pristup funkcionira.

Stvorite novu stranicu s Divi Builderom

Da biste započeli, morat ćete učiniti sljedeće:

1. Instalirajte Divi  na vašoj web stranici WordPress.
2. Dodajte stranicu i dodijelite joj naslov.
3. Omogući vizualni alat

Stvorite svoj odjeljak Hero od nule

Sada kada je naša stranica postavljena, počnimo ispočetka stvarati odjeljak heroja.

Preuzmite DIVI sada!!!

Aktivirajte "Divi Builder"

Kako bismo koristili Divi drag and drop builder, morat ćemo aktivirati Visual Builder klikom na gumb "Koristite DiviBuilder". Ovo će ponovno učitati stranicu pomoću Divi Visual Buildera.

Odaberite: Izgradite od nule

Sada kada se vaša stranica ponovno učitala s omogućenim vizualnim alatom, kliknite opcije " IZGRADITE OD NULE tako da imamo praznu stranicu za rad prilikom projektiranja.

Dodajte redak i konfigurirajte stupce

Napravite red sa sljedećom strukturom stupaca.

Dodajte modifikacije

Sada dodajmo module sadržaja koji će nam trebati.

• 2 tekstualna modula, razdjelnik, gumb u lijevom stupcu
• 1 Modul slike u srednjem stupcu
• 1 Modul slike u desnom stupcu

Odjeljak za stil

Sada konfigurirajmo postavke odjeljka.

Dodajte odjeljak, a zatim konfigurirajte sljedeće postavke:

• Pozadina: #1d1d25

Stil teksta zaglavlja

Prilagodite tekst zaglavlja:

• Naslov 1:
  • Težina fonta: polu podebljano
  • Boja teksta: #ffffff
  • Veličina teksta: 90px
  • Visina linije: 1,1 em

separator

Konfigurirajte postavke razdjelnika:

• Boja linije: rgba(255,255,255,0.3)
• Težina razdjelnika: 10 px
• Maksimalna širina: 260 px

glavni tekst

Prilagodite tekst tijela:

• Boja teksta: rgba(255,255,255,0.7)
• Veličina teksta: 13px
• Visina linije: 1,8 em

dugme

Sada prilagodimo gumb.

Na kartici Gumb:

• Koristi prilagođene stilove za gumb: Da
• Veličina teksta gumba: 14px
• Boja teksta: #ffffff
• Pozadina gumba:
• Širina obruba: 0 piksela
• Radijus obruba: 0 piksela

Na kartici Razmak:

• Gornji i donji dio: 40 px
• Lijevo i desno: 20 px

Dodajte slike

Dodajte slike slikovnim modulima.

Podesite postavke linije

Parametri linije:

• Margina (lijevo): 15vw

Podesite 2. stupac

U drugom stupcu konfigurirajte ove postavke:

Prilagođeni CSS

Zalijepite sljedeći kod u odjeljak koda glavnog elementa:

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

razmak

Dodajte 100 piksela gornjeg ispuna.

Dakle ! Sada imate potpuno dizajniran prilagođeni odjeljak Hero.

Preuzmite DIVI sada!!!

Stvorite svoj odjeljak Hero s Divi-jevim modulom Fullwidth Header

Pogledajmo sada kako ponovno stvoriti ovaj Hero odjeljak koristeći Divijev modul Fullwidth Header.

Preuzmite DIVI sada!!!

Dodajte stranicu i odaberite Izradi od nule

Dodajte novu stranicu, dodijelite joj naslov, zatim kliknite na "Use Divi Builder" i odaberite Build From Scratch.

Umetnite odjeljak pune širine i zaglavlje pune širine

Umetni odjeljak Puna širina, zatim odaberite Zaglavlje pune širine u biblioteci modula.

Sadržaj

Dodajte tekstualni sadržaj u modul na kartici Tekst.

Slike

Dodajte slike u karticu sa slikama.

Promjena boje pozadine

Na kartici pozadine konfigurirajte sljedeću postavku:

• Pozadina: #1D1D25

Zaglavlje Tekst

Konfigurirajte postavke teksta zaglavlja:

• Težina fonta naslova: Podebljano
• Veličina teksta: 90px

glavni tekst

Konfigurirajte postavke teksta tijela:

• Boja teksta tijela: rgba(255,255,255,0.55)

Tekst podnaslova

Konfigurirajte postavke teksta naslova:

• Težina fonta podnaslova: Podebljano
• Boja teksta: #4C594C
• Razmak između slova: 3px

tipke

Sada prilagodimo dva gumba.

gumb jedan

Na kartici Button One konfigurirajte sljedeće postavke:

• Koristite prilagođene stilove za gumb jedan: Da
• Gumb jedan
  • Pozadina: #4c594c
  • Širina obruba: 0 piksela
  • Polumjer ruba: 0px
  • Prikaži ikonu: DA
  • Prikaži samo ikonu pri lebdenju: Ne
  • Padding: 25 piksela (vrh i dno); 25px(lijevo), 50px(desno)

Dugme dva

Na kartici Button Two konfigurirajte sljedeće postavke:

• Koristi prilagođene stilove za gumb dva: DA
• Širina dva ruba gumba: 0 piksela
• Polumjer ruba: 0px
• Razmak: 25 px (gore, dolje, lijevo i desno)
• Sjena okvira gumba: Odaberite 4
• Horizontalni položaj sjene okvira: 0px
• Okomiti položaj sjene okvira: 2 px
• Boja sjene: #ffffff

Dakle ! Sada imate potpuno dizajniran odjeljak Hero koristeći Divi Fullwidth Header modul.

Vidi također: Divi: Kako stvoriti pozadinske prijelaze između elemenata

Preuzmite DIVI sada!!!

Zaključak

Izrada odjeljka Hero s Divi je jednostavna, bilo da gradite od nule ili koristite modul Fullwidth Header. Obje vam opcije omogućuju stvaranje zadivljujućih dizajna zaglavlja koji će privući vaš interes posjetitelji. 

Ovisno o vašim jedinstvenim potrebama, bilo koja je opcija izvrsna opcija za razmatranje kada stilizirate odjeljak Hero. 

Nakon što pročitate prednosti i nedostatke oba, kako biste dizajnirali svoj odjeljak Hero?

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.

...