Chceli by ste vytvoriť sekciu Hero Divi s modulom Fullwidth Header alebo si ju navrhnúť sami?
Zostavte časť s hrdinami webové stránky od začiatku alebo pomocou modulu Divi Fullwidth Header sú dva spôsoby, ako vytvoriť pútavý dizajn pre váš webové stránky.
V tomto článku sa pozrieme na výhody a nevýhody používania modulu Fullwidth Header oproti vytváraniu vlastnej sekcie Hero s Divi.
Poďme!
Dôležitosť sekcií hrdinov webovej stránky
Sekcia Hrdina je úplne prvou sekciou, ktorú máte Návštevníci uvidíte, kedy prídu na váš webové stránky. Toto je často banner s plnou šírkou a môže sa nazývať aj hlavička hrdinu. Je to popredné miesto na vašom webe, pretože má schopnosť zanechať trvalý prvý dojem.
Čítajte tiež: Divi: Ako zobraziť modul Fullwidth Header na celej obrazovke
Je preto dôležité, aby bol navrhnutý tak, aby sa dal ľahko čítať a zároveň bol pútavý a pútavý. Sekcie hrdinu webových stránok sú dôležité, pretože môžu upútať pozornosť potenciálnych zákazníkov, rýchlo opísať stránku a viesť k ďalšej interakcii a potenciálnych potenciálnych zákazníkov. Sekcie hrdinov by mali byť značkové, obsahovať titul H1 a výzvu na akciu.
Vytvorte sekciu Hrdina od začiatku
Navrhnutie sekcie Hero od začiatku vám umožní mať úplnú kontrolu nad dizajnom a obsah. V závislosti od vašej situácie a potrieb by to mohlo byť skvelé riešenie pre váš web.
Poďme sa pozrieť na výhody a nevýhody tohto prístupu.
Výhody tohto prístupu
Najprv sa pozrime na výhody budovania sekcie hrdinu webovej stránky od začiatku pomocou Divi.
- Plná kontrola dizajnu
- Použite ľubovoľný modul Divi
Nevýhody tohto prístupu
Teraz sa pozrime na nevýhody vytvorenia sekcie hrdinu od začiatku.
- Musíte stavať od nuly
- Vyžaduje viacero modov
Vytvorte sekciu Hero s modulom Divi Fullwidth Header
Vytvorenie sekcie hrdinu pomocou modulu Divi Fullwidth Header zjednodušuje vytvorenie pútavého, mobilného responzívneho dizajnu v priebehu niekoľkých minút.
Poďme sa pozrieť na výhody a nevýhody tohto prístupu.
Výhody tohto prístupu
Poďme sa pozrieť na výhody budovania sekcie Hero s modulom Divi Fullwidth Header.
- Všetko tvoje obsah je v jedinom module
- Dizajn je už optimalizovaný
Nevýhody tohto prístupu
Teraz zhodnoťme nevýhody návrhu sekcie Hero s modulom Divi Fullwidth Header.
- Menšia flexibilita s dizajnom
Modul Divi Fullwidth Header prichádza s možnosťami pre obsah preddefinované, pričom mnohé môžu byť obmedzené, ak chcete pridať časť obsahu, ktorý nie je dostupný v module. To znamená, že budete mať menšiu flexibilitu s celkovým dizajnom.
Stavba dvoch sekcií Hero krok za krokom
Teraz, keď ste pochopili klady a zápory oboch prístupov, poďme zostaviť každú časť Hero, aby ste presne videli, ako každý prístup funguje.
Vytvorte novú stránku pomocou Divi Builder
Ak chcete začať, budete musieť urobiť nasledovné:
- Nainštalujte Divi na svojej webovej stránke WordPress.
- Pridajte stránku a pomenujte ju.
- Povoliť vizuálny nástroj
Vytvorte si sekciu Hero od začiatku
Teraz, keď je naša stránka nastavená, začnime od začiatku vytvárať sekciu hrdinu.
Stiahnite si DIVI teraz!!!
Aktivujte "Divi Builder"
Aby sme mohli použiť Divi's drag and drop builder, budeme musieť aktivovať Visual Builder kliknutím na tlačidlo „Použiť DiviBuilder“. Tým sa stránka znova načíta pomocou Divi Visual Builder.
Vyberte: Stavať od začiatku
Teraz, keď sa vaša stránka znova načítala s povoleným vizuálnym nástrojom, kliknite na možnosti “ STAVAJTE OD ODČIATKU aby sme pri navrhovaní mali prázdnu stránku, s ktorou môžeme pracovať.
Pridajte riadok a nakonfigurujte stĺpce
Vytvorte riadok s nasledujúcou štruktúrou stĺpcov.
Pridajte mody
Teraz pridáme obsahové moduly, ktoré budeme potrebovať.
- 2 Textové moduly, oddeľovač, tlačidlo v ľavom stĺpci
- 1 Obrazový modul v strednom stĺpci
- 1 Obrazový modul v pravom stĺpci
Štýlová sekcia
Teraz nakonfigurujeme nastavenia sekcie.
Pridajte sekciu a potom nakonfigurujte nasledujúce nastavenia:
- Pozadie: #1d1d25
Štýl textu hlavičky
Prispôsobiť text hlavičky:
- Nadpis 1:
- Hmotnosť písma: polotučné
- Farba textu: #ffffff
- Veľkosť textu: 90px
- Výška riadku: 1,1 em
oddeľovač
Nakonfigurujte nastavenia rozdeľovača:
- Farba čiary: rgba (255,255,255,0.3)
- Hmotnosť oddeľovača: 10px
- Maximálna šírka: 260 pixelov
text tela
Prispôsobiť text tela:
- Farba textu: rgba (255,255,255,0.7)
- Veľkosť textu: 13px
- Výška riadku: 1,8 em
gombík
Teraz prispôsobme tlačidlo.
Na karte Tlačidlo:
- Použiť vlastné štýly pre tlačidlo: Áno
- Veľkosť textu tlačidla: 14px
- Farba textu: #ffffff
- Pozadie tlačidla:
- Šírka okraja: 0 pixelov
- Polomer okraja: 0 pixelov
Na karte Medzery:
- Horná a dolná časť: 40 pixelov
- Vľavo a vpravo: 20 pixelov
Pridajte obrázky
Pridajte obrázky do obrázkových modulov.
Upravte nastavenia linky
Parametre riadku:
- Okraj (vľavo): 15vw
Upravte 2. stĺpec
V druhom stĺpci nakonfigurujte tieto nastavenia:
Vlastné CSS
Prilepte nasledujúci kód do časti kódu hlavného prvku:
argin-right: -15vw!important;
z-index: 100!important;vzdialenosť
Pridajte 100 pixelov vrchnej výplne.
Je to tu ! Teraz máte plne navrhnutú vlastnú sekciu Hero.
Stiahnite si DIVI teraz!!!
Vytvorte si sekciu Hero pomocou modulu Divi's Fullwidth Header
Teraz sa pozrime, ako znovu vytvoriť túto sekciu Hero pomocou modulu Divi Fullwidth Header.
Stiahnite si DIVI teraz!!!
Pridajte stránku a vyberte možnosť Zostaviť od začiatku
Pridajte novú stránku, pomenujte ju, kliknite na „Použiť Divi Builder“ a potom vyberte Vytvoriť od začiatku.
Vložte sekciu s plnou šírkou a hlavičku s plnou šírkou
Vložte oddiel Plná šírka, potom vyberte Hlavička s plnou šírkou v knižnici modulov.
Obsah
Pridajte textový obsah do modulu na karte Text.
snímky
Pridajte obrázky na kartu obrázkov.
Zmeňte farbu pozadia
Na karte pozadia nakonfigurujte nasledujúce nastavenie:
- Pozadie: #1D1D25
Text hlavičky
Konfigurácia nastavení textu hlavičky:
- Hmotnosť písma nadpisu: tučné
- Veľkosť textu: 90px
text tela
Konfigurácia nastavení textu tela:
- Farba textu tela: rgba (255,255,255,0.55)
Text titulkov
Nakonfigurujte nastavenia textu titulkov:
- Hmotnosť písma titulkov: tučné
- Farba textu: #4C594C
- Medzera medzi písmenami: 3px
tlačidla
Teraz si prispôsobíme dve tlačidlá.
tlačidlo jedna
Na karte Button One nakonfigurujte nasledujúce nastavenia:
- Použiť vlastné štýly pre tlačidlo XNUMX: Áno
- Tlačidlo jeden
- Pozadie: #4c594c
- Šírka okraja: 0 pixelov
- Polomer okraja: 0px
- Zobraziť ikonu: ÁNO
- Zobraziť ikonu iba pri umiestnení kurzora myši: Nie
- Výplň: 25 pixelov (hore a dole); 25 pixelov (vľavo), 50 pixelov (vpravo)
Tlačidlo dva
Na karte Button Two nakonfigurujte nasledujúce nastavenia:
- Použiť vlastné štýly pre tlačidlo XNUMX: ÁNO
- Tlačidlo Šírka dvoch okrajov: 0 pixelov
- Polomer okraja: 0px
- Výplň: 25 pixelov (hore, dole, vľavo a vpravo)
- Button Box Shadow: Vyberte 4
- Horizontálna poloha tieňa rámčeka: 0px
- Vertikálna poloha tieňa rámčeka: 2px
- Farba tieňa: #ffffff
Je to tu ! Teraz máte plne navrhnutú sekciu Hero pomocou modulu Divi Fullwidth Header.
Pozri tiež: Divi: Ako vytvoriť prechody na pozadí medzi prvkami
Stiahnite si DIVI teraz!!!
záver
Vytvorenie sekcie Hero s Divi je jednoduché, či už staviate od začiatku alebo používate modul Fullwidth Header. Obe možnosti vám umožňujú vytvárať úžasné návrhy hlavičiek, ktoré zaujmú vás Návštevníci.
V závislosti od vašich jedinečných potrieb je každá z týchto možností skvelou možnosťou, ktorú treba zvážiť pri úprave sekcie Hrdina.
Po prečítaní výhod a nevýhod oboch, ako by ste navrhli svoju časť Hrdina?
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
