Chtěli byste vědět, jak vytvořit sekci Hrdina s modulem Divi's Fullwidth Header?
Vytvoření sekce Hrdina je skvělý způsob, jak na ni upozornit obsah důležité pro vaši stránku. Toto je a obsah velká velikost, kterou můžete použít k vyprávění svého příběhu, sdílení informací o své práci nebo zvýraznění produktu či služby.
S modulem Divi Fullwidth Header můžete přidat nadpis, podnadpis, dvě tlačítka, hlavní text, obrázek loga a obrázek záhlaví. Samozřejmě můžete také použít možnosti pozadí k přidávání a kombinování obrázků, přechodů, barev, vzorů a masek.
Všechna tato nastavení můžete změnit v nastavení modulu, aniž byste museli přepínat mezi více moduly obrázků, textu a tlačítek.
V tomto tutoriálu vám ukážeme, jak vytvořit atraktivní a poutavou sekci Hero pomocí modulu Divi's Fullwidth Header.
Je pryč!
přehled
Zde je náhled toho, co budeme navrhovat.
Co potřebujete, abyste mohli začít
Než začnete, ujistěte se, že máte na svém počítači nejnovější verzi Divi Webové stránky.
Nyní jste připraveni začít!
Jak vytvořit sekci hrdiny pomocí modulu Divi Fullwidth Header Module
Čtěte také: Divi: Jak používat „Tvůrce přechodů“ ke zkrášlení obrázků
Vytvořte novou stránku s předdefinovaným rozložením
Začněme tím, že použijeme předdefinované rozložení z knihovny Divi. Pro tento návrh použijeme domovskou stránku balení pro veterinární lékaře.
Z řídicího panelu Worpress přidejte novou stránku do své Webové stránky
Zadejte název a poté vyberte možnost Použijte Divi Builder.
Pro tento příklad použijeme předdefinované rozložení z knihovny Divi. Tak vybírejte Procházet rozvržení.
Najděte a vyberte rozvržení chovatel psů.
vybrat Použijte toto rozvržení přidat rozvržení na stránku.
Nyní jsme připraveni navrhnout.
Přidejte modul Fullwidth Header
Znovu vytvoříme sekci hrdiny pomocí modulu Fullwidth Header. Přidejte na stránku novou sekci v plné šířce pod stávající záhlaví.
Přidejte do sekce modul Fullwidth Header.
Dále odstraňte původní sekci záhlaví.
Přizpůsobte modul Fullwidth Header
Přidat obsah
Otevřete nastavení modulu a přidejte obsah vedle modulu:
- Název: Veterinář
- Podtitul: Divivet. Sloužit našim nejlepším přátelům
- Tlačítko #1: Všechny služby
- Tlačítko č. 2: Domluvte si schůzku
- Tělo: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.
Dále přidejte obrázek záhlaví.
Nastavení pozadí přechodu
Přejděte na nastavení pozadí. Odstraňte původní barvu pozadí a poté přidejte přechod na pozadí.
- 0 %: rgba (255,170,205,0.48)
- 40 %: rgba (110,66,255,0.24)
- 87 %: rgba (124,239,255,0.71)
- Typ přechodu: Eliptický
- Pozice gradientu: vpravo
Poté vyberte kartu Pozadí masky a přidejte masku pozadí.
- Pozadí masky: Rohová kulička
- Barva masky: #FFFFFF
- Transformace: vertikální
Přizpůsobte text
Přepnout na kartu Design a změnit nastavení titulků
- Název písma: Nunito
- Váha písma názvu: Ultra Bold
- Styl písma: TT (velká písmena)
- Barva textu nadpisu: #a9cb6b
- Velikost textu: 14px
- Mezera nadpisu: 2px
Přejděte do sekce Hlavní text a přizpůsobit písmo.
- Barva textu: #000000
- Velikost textu těla:
- Plocha: 18px
- Telefon: 14px
- Výška linie těla: 1.8 m
Viz také: Divi: Jak přizpůsobit košík a ikony vyhledávání v modulu "Nabídka plné šířky".
Dále otevřete nastavení titulků a upravte písmo.
- Písmo titulků: Nunito
- Tloušťka písma titulků: Tučné
- Barva textu: #000000
Nakonec změňte velikost textu
- Velikost textu titulků:
- Plocha: 56px
- Pohyblivé: 32px
- Výška řádku titulků: 1.2 m
Přizpůsobit tlačítko #1
Dále přizpůsobíme styly tlačítek. Začněte povolením vlastních stylů pro tlačítko jedna a poté upravte velikost textu.
- Použít vlastní styly pro tlačítko: ANO
- Velikost textu tlačítka: 14px
Přidejte k tlačítku přechod pozadí. Hodnoty gradientu jsou následující:
- 58 %: #316EFF
- 100 %: #1D2B60
- Směr gradientu: 90 stupňů
Dále upravte nastavení ohraničení a nastavení písma.
- Tlačítko jedna:
- Šířka okraje: 0px
- Poloměr ohraničení: 80px
- Mezera mezi písmeny: 2px
- Písmo: Nunito
- Tloušťka písma: Ultra Bold
- Styl: TT (velká písmena)
- Zobrazit tlačítko jedna ikona: NE
Dále upravte nastavení okrajů a odsazení pro návrh plochy a přidejte stín rámečku.
- Tlačítko One Margin
- Horní: 200 pixelů
- Dole: 0px
- Polstrování tlačítka XNUMX:
- Horní: 16 pixelů
- Spodní: 16px
- Vlevo: 2 em
- Vpravo: 50 em
- Box Shadow: View Capture
Použijte responzivní nastavení k nastavení různých hodnot okrajů a odsazení na mobilních zařízeních.
- Tlačítko One Margin-Top-Mobile: 25px
- Button One Padding-Right-Mobile: 10em
Přizpůsobit tlačítko #2
Nejprve klikněte pravým tlačítkem na tlačítko #1 a klikněte Kopírovat styly tlačítka XNUMX.
Dále klikněte pravým tlačítkem na tlačítko 1 a vložte styly z tlačítka #XNUMX.
Nyní můžeme přizpůsobit tlačítko dva. Změňte barvu textu.
- Barva tlačítka dvě barvy: #121F60
Upravte přechod pozadí pro tlačítko XNUMX.
- 30 %: rgba (0,229,198,0)
- 100 %: #00e5c6
Pomocí responzivních nastavení upravte gradient pozadí pro mobilní zařízení.
- 0 %: rgba (0,229,198,0)
- 100 %: #00e5c6
Dále upravte okraj a odsazení pro návrh plochy.
- Okraj tlačítka dva:
- Nahoře: 0 pixelů
- Dole: 0px
- Vlevo: 30 %
- Polstrování dvou tlačítek:
- Horní: 16 pixelů
- Dole: 16px
- Vlevo: 48 em
- Vpravo: 2 em
Použijte nastavení responzifq k nastavení různých hodnot okrajů a odsazení pro mobilní design.
- Tlačítko 5 – levý okraj – mobilní: XNUMX %
- Polstrování dvou tlačítek:
- Levý mobil: 35 %
- Pravý mobil: 5 %
Vlastní CSS
Nakonec je hotova převážná část projektové práce. Nyní musíme přidat vlastní CSS k dokončení návrhu. Přepnout na kartu pokročilý a otevřete sekci Vlastní CSS.
Nejprve začněme s CSS pro obrázek záhlaví. Tento CSS umožňuje zobrazení obrázku záhlaví nad tlačítkem.
z-index: 1;
position:relative;
Dále vlastní CSS v názvu. Pomocí responzivního nastavení nastavíme různé hodnoty pro zobrazení na počítači a na mobilu.
Pro stolní počítač:
padding-top:50px;
padding-bottom:30px;
Pro mobil:
padding-top:5px;
padding-bottom:10px;
Nakonec přidejte následující CSS na tlačítko jedna a tlačítko dva.
white-space: nowrap;
Konečný výsledek
Zde je konečný návrh naší hlavní sekce hrdiny v plné šířce.
Čtěte také: Divi: Jak vytvořit sekci členů týmu jako kolotoč
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Modul Fullwidth Header vám umožňuje snadno vytvořit krásnou sekci Hrdina, kde budete inzerovat své služby a informovat vás o nich Návštěvníci o čem to mluvíš Webové stránky.
Vestavěná nastavení usnadňují přizpůsobení každého aspektu záhlaví a vše je na jednom místě, takže není třeba přepínat mezi více moduly, abyste vytvořili svou sekci Hrdina.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
