Divi: Kako koristiti modul Fullwidth Header za kreiranje odjeljka Hero

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

Izgradite odeljak heroja site Web od nule ili korištenjem Divi Fullwidth Header modula su dva načina za stvaranje privlačnog dizajna za vaše sajt. 

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

Idemo!

Važnost sekcija heroja web stranice

Odeljak za heroje je prvi deo koji je vaš posjetitelja vidi kada stignu na tvoj site Web. Ovo je često baner pune širine i može se nazvati i zaglavljem heroja. To je istaknuto mjesto na vašoj web stranici jer ima moć da ostavi trajan prvi utisak.

Pročitajte takođe: Divi: Kako prikazati modul Fullwidth Header na cijelom ekranu

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

Kreirajte odjeljak heroja od nule

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

Pogledajmo prednosti i nedostatke ovog pristupa.

Prednosti ovog pristupa

Prvo, pogledajmo prednosti izgradnje odjeljka Hero web stranice od nule koristeći Divi.

• Potpuna kontrola dizajna
• Koristite bilo koji Divi modul

Nedostaci ovog pristupa

Pogledajmo sada nedostatke kreiranja odjeljka heroja od nule.

• Morate graditi od nule
• Zahtijeva više modova

Kreirajte odjeljak Hero s modulom Divi Fullwidth Header

Kreiranje odeljka heroja pomoću Divi Fullwidth Header modula olakšava kreiranje privlačnog dizajna koji odgovara mobilnim uređajima za samo nekoliko minuta. 

Pogledajmo prednosti i nedostatke ovog pristupa.

Prednosti ovog pristupa

Hajde da pogledamo prednosti izgradnje Hero sekcije sa Divi Fullwidth Header modulom.

• Sve tvoje sadržaja nalazi se u jednom modulu
• Dizajn je već optimizovan

Nedostaci ovog pristupa

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

• Manja fleksibilnost s dizajnom

Divi Fullwidth Header modul dolazi sa opcijama za sadržaja unaprijed definirani, dok mnogi mogu biti ograničeni ako želite da dodate dio sadržaja koji nije dostupan u modulu. To znači da ćete imati manje fleksibilnosti s cjelokupnim dizajnom.

Izgradnja dva Hero sekcija korak po korak

Sada kada razumete prednosti i nedostatke oba pristupa, hajde da napravimo svaki odeljak Heroja tako da možete tačno da vidite kako svaki pristup funkcioniše.

Kreirajte novu stranicu sa Divi Builder-om

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

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

Kreirajte svoj odjeljak za heroje od nule

Sada kada je naša stranica postavljena, krenimo sa kreiranjem odjeljka heroja od nule.

Preuzmite DIVI sada!!!

Aktivirajte "Divi Builder"

Da bismo koristili Divi-jev drag and drop graditelj, morat ćemo aktivirati Visual Builder klikom na dugme “Koristite DiviBuilder”. Ovo će ponovo učitati stranicu koristeći Divi Visual Builder.

Odaberite: Izgradite od nule

Sada kada se vaša stranica ponovo učitala s omogućenim vizualnim graditeljem, kliknite na opcije “ GRADITE OD NULE tako da imamo praznu stranicu za rad pri dizajnu.

Dodajte red i konfigurirajte stupce

Kreirajte red sa sljedećom strukturom stupaca.

Dodaj modove

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

• 2 tekstualna modula, razdjelnik, dugme u lijevoj koloni
• 1 Modul slike u srednjoj koloni
• 1 Modul slike u desnoj koloni

Stilski odjeljak

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: Semi Bold
  • 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: 10px
• Maksimalna širina: 260px

osnovni tekst

Prilagodite tekst tijela:

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

dugme

Sada prilagodimo dugme.

Na kartici Dugme:

• Koristi prilagođene stilove za dugme: Da
• Veličina teksta dugmeta: 14px
• Boja teksta: #ffffff
• Pozadina dugmeta:
• Širina ivice: 0 piksela
• Poluprečnik granice: 0 piksela

Na kartici Razmak:

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

Dodajte slike

Dodajte slike u slikovne module.

Podesite postavke linije

Parametri u liniji:

• Margina (lijeva): 15vw

Podesite 2. kolonu

U drugoj koloni 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 paddinga.

Dakle! Sada imate potpuno dizajniran prilagođeni odjeljak za heroje.

Preuzmite DIVI sada!!!

Kreirajte svoj odjeljak Hero s Divi-jevim Fullwidth Header modulom

Sada da vidimo kako ponovo kreirati ovu sekciju Hero koristeći Divi-jev Fullwidth Header modul.

Preuzmite DIVI sada!!!

Dodajte stranicu i odaberite Napravi od nule

Dodajte novu stranicu, dajte joj naslov, zatim kliknite na “Koristi Divi Builder”, a zatim odaberite Build From Scratch.

Umetnite odjeljak pune širine i zaglavlje pune širine

Umetni odjeljak Puna širina, zatim odaberite FullwidthHeader u biblioteci modula.

sadržaj

Dodajte tekstualni sadržaj u modul na kartici Tekst.

Slike

Dodajte slike u karticu sa slikama.

Promijenite boju pozadine

Na kartici u pozadini konfigurirajte sljedeću postavku:

• Pozadina: #1D1D25

Tekst zaglavlja

Konfigurirajte postavke teksta zaglavlja:

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

osnovni tekst

Konfigurirajte postavke osnovnog teksta:

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

Tekst titla

Konfigurirajte postavke teksta naslova:

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

dugmad

Sada prilagodimo dva dugmeta.

dugme jedan

Na kartici Button One, konfigurirajte sljedeće postavke:

• Koristite prilagođene stilove za dugme jedan: Da
• ButtonOne
  • Pozadina: #4c594c
  • Širina ivice: 0 piksela
  • Poluprečnik granice: 0px
  • Prikaži ikonu : DA
  • Prikaži samo ikonu pri prelasku miša: Ne
  • Padding: 25 piksela (vrh i dno); 25px (lijevo), 50px (desno)

Dugme dva

Na kartici Button Two konfigurirajte sljedeće postavke:

• Koristite prilagođene stilove za dugme dva: DA
• Dugme širina dvije granice: 0 piksela
• Poluprečnik granice: 0px
• Padding: 25px (gore, dolje, lijevo i desno)
• Button Box Shadow: Odaberite 4
• Horizontalna pozicija senke okvira: 0px
• Box Shadow Vertikalna pozicija: 2px
• Boja senke: #ffffff

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

Vidi također: Divi: Kako kreirati prelaze u pozadini između elemenata

Preuzmite DIVI sada!!!

zaključak

Pravljenje sekcije Hero pomoću Divi-a je jednostavno, bilo da gradite od nule ili koristite modul Fullwidth Header. Obje opcije vam omogućavaju da kreirate zadivljujući dizajn zaglavlja koji vas zanima posjetitelja. 

Ovisno o vašim jedinstvenim potrebama, bilo koja opcija je odlična opcija koju treba uzeti u obzir prilikom stiliziranja vašeg odjeljka Hero. 

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

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.

...