Ž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:
- Instalirajte Divi na vašoj web stranici WordPress.
- Dodajte stranicu i dodijelite joj naslov.
- 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.
...