Chceli by ste prispôsobiť modul Divi's Fullwidth Header vyvážením primárneho a sekundárneho tlačidla?
Modul divi Záhlavie s plnou šírkou uľahčuje pridávanie krásnych sekcií s hrdinami webové stránky. Modul je dodávaný s dvoma tlačidlami, textom nadpisu, textom titulkov, hlavným textom, logom a obrázkom, vďaka čomu sú možnosti prispôsobenia nekonečné.
V dnešnom článku vám ukážeme, ako znovu vytvoriť sekcie hrdinov pomocou Hlavička Divi Fullwidth. Náš návrh začneme pomocou 3 vopred pripravených balíkov rozloženia a navrhneme naše sekcie so zameraním na vyváženie primárneho a sekundárneho tlačidla.
Chceme, aby primárne tlačidlo vyniklo, pretože je to naša primárna výzva na akciu, pričom sekundárne tlačidlo zostáva viditeľné a dostupné bez toho, aby sme predbiehali primárne tlačidlo.
Princípy návrhu primárneho a sekundárneho tlačidla
Primárne tlačidlá a sekundárne tlačidlá pomáhajú pri sprievodcovi Návštevníci váš webové stránky na určité akcie. Primárne tlačidlá sú zvyčajne najbežnejšou alebo želanou akciou a sekundárne tlačidlá sú menej bežnou akciou. To pomáha usmerňovať Návštevníci tam, kam chcú ísť.
Za týmto účelom by primárne tlačidlá mali vizuálne vyniknúť a sekundárne tlačidlá by nemali toľko vyčnievať. To znamená, že hlavné tlačidlá by mali byť výraznejšie a mali by mať väčšiu vizuálnu váhu, aby upútali viac pozornosti.
Teraz, keď sme pochopili, ako fungujú primárne a sekundárne tlačidlá, poďme k návodu!
prehľad
Tu je pohľad na tri hlavičky s plnou šírkou, ktoré dnes navrhneme.
Začnime vytvorením novej stránky pomocou Divi Builder
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Prečítajte si tiež: Divi: Ako používať masky a vzory pozadia pre sekciu hrdinov
Dizajn prvého príkladu
Teraz, keď je naša stránka nastavená, začnime s hlavičkou celej šírky vstupnej stránky UX.
Konfigurácia našej stránky
Skôr ako začneme prispôsobovať, budeme musieť načítať preddefinovaný balík rozloženia UX z knižnice Divi. Keď aktivujete Visual Builder, zobrazia sa tri možnosti, vyberte Prehľadávať rozloženia.
Načítať balík rozloženia
Načítanie balíka rozloženia UX na vašu stránku:
- Na karte "Predpripravené rozloženia", použite funkciu vyhľadávania na nájdenie balíka rozloženia UX.
- Keď ho nájdete, kliknite naň. Tým sa zobrazia podrobnosti o rozložení a dostupné stránky.
- Kliknite na Pristátiea kliknite na tlačidlo „Použiť toto rozloženie“.
Znovu vytvoríme hornú časť rozloženia ako modul Hlavička s plnou šírkou.
Odstráňte prvú časť
Keďže sa chystáme znova vytvoriť prvú sekciu pomocou modulu Fullwidth Header, budeme musieť túto sekciu odstrániť. Umiestnite kurzor myši na sekciu a kliknite na ikonu odpadkového koša.
Pridajte celú šírku sekcie
Skôr ako budeme môcť pridať hlavičku s plnou šírkou, musíme pridať sekciu s plnou šírkou.
Kliknite na šípku "+" pre zobrazenie sekcií Divi kliknite na "Plná šírka". Toto automaticky vyvolá knižnicu Divi Fullwidth Module.
Pridajte hlavičku na celú šírku
V knižnici modulov Divi Fullwidth kliknite na " Hlavička s plnou šírkou„.
Pridajte obsah
Než začneme modul prispôsobovať, pridajme ho obsah potrebné pre tento modul.
Pridajte textový obsah
Na karte Text pridajte obsah suivant:
- Názov: Zlepšite svoje znalosti dizajnu UX
- Podtitul: Kurz dizajnu UX
- Tlačidlo #1: Prehľad kurzu
- Tlačidlo č. 2: Zistite viac
- Telo: predvolené
Pridajte obrázky
Teraz, keď máme naše obsah text na mieste, musíme do nášho návrhu pridať dva obrázky.
- Na karte snímky, pridajte obrázok loga (hviezdičky) a obrázok hlavičky (fotku osoby, ktorá drží telefón).
Zmeňte farbu pozadia
Na karte pozadia, nakonfigurujte tento parameter:
- Farba pozadia: #131517
Prispôsobte hlavičku s plnou šírkou
Teraz, keď je náš obsah nastavený, pridajme k nemu nejaký štýl prostredníctvom dizajn.
Posuňte ikonu nadol
Pridajme ikonu rolovania nadol, šípku nadol.
- Zobraziť tlačidlo rolovania nadol: ÁNO.
- Vyberte ikonu šípky nadol.
- Farba ikony rolovať nadol: #000
Obraz
Dodajme našim obrázkom krivky zaoblením rohov.
Na karte Obraz, nakonfigurujte nasledujúce nastavenia:
- Obrázok Zaoblené rohy : Kliknutím na tlačidlo reťazového prepojenia odpojíte rohy a potom do vstupných polí vľavo dole a vpravo dole napíšete 1000 XNUMX pixelov. Tým sa zaoblia ľavý dolný a pravý dolný roh našich obrázkov.
Názov textu
Tu prispôsobíme text nadpisu tohto modulu. V záložke Text nadpisu, nakonfigurujte tieto nastavenia:
- Názov:
- Písmo: PT Sans
- Hrúbka písma: tučné
- Veľkosť textu: 5 rem
- Výška riadku: 1,2 em
hlavný text
Tu prispôsobujeme text tela pre tento modul. V záložke BodyText, nakonfigurujte tieto nastavenia:
- Písmo tela: Mukta
- Veľkosť hlavného textu: 18 pixelov
Text titulkov
Tu prispôsobujeme text titulkov pre tento modul. V záložke Text titulkov, nakonfigurujte tieto nastavenia:
- Titulky:
- Písmo: Mukta
- Hrúbka písma: tučné
- Štýl: veľké písmená
- Farba textu: #13d678
- Medzera medzi písmenami: 3px
tlačidlo jedna
Tu môžeme definovať vlastné štýly pre tlačidlo jedna: hlavné tlačidlo. V záložke Tlačidlo jedna, nakonfigurujte tieto nastavenia:
- Použiť vlastný štýl pre tlačidlo XNUMX: ÁNO
- Tlačidlo jedna:
- Farba textu: #ffffff
- Farba pozadia: #13d678
- Šírka okraja: 0 pixelov
- Polomer okraja: 100 pixelov
- Písmo: Mukta
- Hrúbka písma: tučné
- Zobraziť tlačidlo jedna ikona: ÁNO
- Ikona: Šípka doprava
- Zobraziť ikonu pri umiestnení kurzora myši iba na tlačidlo XNUMX: Nie
Tlačidlo dva
Teraz si prispôsobme druhý: sekundárne tlačidlo. V záložke Tlačidlo dva, nakonfigurujte tieto nastavenia:
- Použiť vlastný štýl pre tlačidlo: ÁNO
- Tlačidlo dva
- Farba textu: #ffffff
- Farba pozadia: #303030
- Šírka okraja: 0 pixelov
- Polomer okraja: 100 pixelov
- Písmo: Mukta
- Hrúbka písma: tučné
- Zobraziť ikonu tlačidla dva: Áno
- Ikona tlačidla dva: Šípka doprava
- Zobraziť ikonu iba na tlačidle po umiestnení kurzora myši XNUMX: ÁNO
Pridať odkazy na tlačidlá
Nezabudnite pridať odkazy na svoje tlačidlá! V záložke odkaz, nakonfigurujte nasledujúce nastavenia:
- Adresa URL odkazu tlačidla 1: Sem prilepte adresu URL tlačidla 1.
- Adresa URL odkazu tlačidla 1: Sem prilepte adresu URL tlačidla 2.
Uložte svoju prácu
Teraz, keď máme našu plne navrhnutú hlavičku s plnou šírkou, nezabudnite si svoj návrh uložiť!
- Kliknite na zelenú šípku v pravom dolnom rohu okna modulu.
- ušetríte
- Ukončite VisualBuilder.
Čítajte tiež: Divi: Ako vytvoriť sekciu Fluid Hero
Bavte sa experimentovaním
Spôsobov prispôsobenia modulu Divi Fullwidth Header je neúrekom. Využitie primárneho tlačidla a sekundárneho tlačidla vám môže pomôcť nasmerovať vás Návštevníci na stránku, ktorú majú zobraziť, alebo vykonať akciu (napríklad odoslanie žiadosti), ktorú má vykonať.
Pozrime sa na ďalšie dva príklady hlavičiek s plnou šírkou, ktoré majú primárne tlačidlo, ktoré vyniká.
Hlavička na celú šírku z balíka „Centrum dôchodcov“.
Štýly tlačidiel
Poďme sa pozrieť na jedinečné štýly primárneho a sekundárneho tlačidla.
tlačidlo jedna
Na karte Button One nakonfigurujte nasledujúce nastavenia:
- Použiť vlastné štýly pre tlačidlo XNUMX: ÁNO
- Tlačidlo jedna:
- Veľkosť textu: 14px
- Farba textu: #ffffff
- Farba pozadia: #0a0a0a
- Šírka okraja: 0 pixelov
- Polomer okraja: 10 pixelov
- Medzera medzi písmenami: 3px
- Hrúbka písma: tučné
- Štýl písma: TT
- Zobraziť ikonu pri umiestnení kurzora myši iba na tlačidlo Buttpn One: ÁNO
- Výplň tlačidla: 15 pixelov (horná a dolná časť), 25 pixelov (ľavá a pravá)
Tlačidlo dva
Na karte Tlačidlo dva, nakonfigurujte nasledujúce nastavenia:
- Použiť vlastný štýl pre tlačidlo: ÁNO
- Tlačidlo dva:
- Veľkosť textu: 14px
- Farba textu: #ffffff
- Farba pozadia: #0a0a0a
- Šírka okraja: 0 pixelov
- Polomer okraja: 10 pixelov
- Hrúbka písma: tučné
- Štýl písma: TT
- Výplň tlačidla: 10px (dole), 10px (ľavý a pravý)
A je to tu! Dve jedinečné tlačidlá, jedno, ktoré vyniká a druhé, ktoré zaberá druhé miesto.
Hlavička na celú šírku balíka „Finančné plánovanie“.
Štýly tlačidiel
Poďme sa pozrieť na jedinečné štýly primárneho a sekundárneho tlačidla.
tlačidlo jedna
Na karte Tlačidlo jeden, nakonfigurujte nasledujúce nastavenia:
- Použiť vlastný štýl pre tlačidlo XNUMX: ÁNO
- Tlačidlo jedna:
- Veľkosť textu: 18px
- Farba textu: #ffffff
- Farba pozadia: #1b4ffe
- Výplň: 15px()Horná a Dolná časť); 25 pixelov (ľavý a pravý)
Tlačidlo dva
Na karte Tlačidlo dva, nakonfigurujte nasledujúce nastavenia:
- Použiť vlastný štýl pre tlačidlo XNUMX: ÁNO
- Tlačidlo dva:
- Farba textu: #1b4ffe
- Farba pozadia: Čistá
- Farba ikony: #1b4ffe
Stiahnite si DIVI teraz!!!
záver
Modul Divi Fullwidth Header uľahčuje vytváranie úžasných sekcií Hero na vašom počítači webové stránky.
Strategické použitie primárnych a sekundárnych tlačidiel zlepší vašu používateľskú skúsenosť a pomôže návštevníkom webových stránok vykonávať akcie, ktoré chcú vykonať.
Možnosti prispôsobenia sú nekonečné s hlavičkou s plnou šírkou, takže sa bavte pri experimentovaní!
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.
...
