Divi: Jak vytvořit lepkavou globální hlavičku

Chtěli byste vytvořit lepící záhlaví s divi ?

Vytváření lepivých hlaviček probíhá hladce od příchodu témata, ale zjistili jsme, že mnoho lidí neví, jak je vytvořit bez použití dalšího kódu. Je to však docela snadné udělat také díky lepivým možnostem divi.

Ve skutečnosti je to nejen jednodušší, ale tato metoda nabízí více možností přizpůsobení designu.

V tomto tutoriálu si proto uděláme čas, abychom vám ukázali, jak vytvořit ultra personalizovanou lepicí hlavičku pomocí parametrů divi.

přehled

Než se vrhneme na tento tutoriál, podívejme se na výsledek, kterého chceme dosáhnout.

Vytvořte strukturu prvku záhlaví

Vytvořte novou šablonu globálního záhlaví

Otevřete Divi Theme Builder a začněte vytvářet nové globální nebo vlastní záhlaví.

Část 1 Parametry

Přechodové pozadí

Jakmile jsme v editoru šablon, začneme vytvořením struktury našich prvků záhlaví. Ve druhé části tohoto tutoriálu se zaměříme na použití různých nastavení lepivého záhlaví k dokončení návrhu lepivého záhlaví.

Čtěte také: Jak vytvořit posuvné a tlačné menu v DIVI

V editoru šablon si všimnete sekce. Otevřete tuto sekci a použijte pozadí s přechodem.

Barva 1: #ffba60
Barva 2: #ffd6a0
Směr gradientu: 90 stupňů
Výchozí pozice: 50%
Konečná pozice: 50 %

vzdálenost

Poté ve výchozím nastavení odstraňte všechny vnitřní okraje (nahoře a dole).

Vertex vnitřního okraje: 0px
Spodní vnitřní okraj: 0px

Přidat nový řádek

Struktura kolony

Abychom vytvořili horní lištu záhlaví, přidáme do naší sekce nový řádek s následující strukturou sloupců:

dimenzování

Bez přidání jakýchkoli modulů ještě otevřete nastavení řádku a změňte nastavení velikosti následujícím způsobem:

Použít vlastní šířku okapu: Ano
Rozteč sloupců: 1
Maximální šířka: 95%
Maximální šířka: 2 pixelů

vzdálenost

Přidejte také vlastní vnitřní okraje (nahoře a dole).

Vertex vnitřního okraje: 15px
Spodní vnitřní okraj: 15px

Hlavní prvek CSS

A abychom zajistili, že sloupce zůstanou na menších obrazovkách vedle sebe, přidáme do hlavního prvku řádku na kartě Upřesnit řádek kódu CSS.

display: flex;

Do sloupce 1 přidejte modul „Sledujte nás na sociálních sítích“.

Přidejte vybrané sociální sítě

Je čas přidat moduly, počínaje modulem 'Sledujte nás na sociálních sítích' ve sloupci 1. Přidejte sociální sítě podle svého výběru spolu s jejich odpovídajícími odkazy.

Odstraňte barvu pozadí z každé sociální sítě

Pokračujte odebráním každé barvy pozadí ze sociální sítě jednotlivě.

Nastavení ikon

Poté se vraťte do obecného nastavení modulu a změňte barvu ikony na kartě návrhu.

Barva ikony: #26333a

vzdálenost

Také přidejte horní okraj.

Horní okraj: 5 pixelů

Přidejte modul Tlačítko do sloupce 2

Přidat text na tlačítko

Ve sloupci 2 je jediným modulem, který potřebujeme, modul Button. Přidejte text dle vlastního výběru.

Přidání odkazu

Pak přidejte odkaz.

Zarovnání tlačítka

Dále se přepněte na kartu Styl a změňte zarovnání tlačítka.

Zarovnání tlačítek: vpravo

Nastavení tlačítek

Přizpůsobíme také tlačítko.

Použít vlastní styly pro tlačítko: Ano
Velikost textu tlačítka: 14px
Barva textu tlačítka: #26333a
Šířka okraje tlačítka: 2px
Barva ohraničení tlačítka: #26333a
Poloměr okraje tlačítka: 0 pixelů

Tlačítka pro mezery mezi písmeny: 4px
Tlačítko Soft Light: Tučný text
Tlačítko stylu kopírování: velká písmena
Zobrazit tlačítko: ano

vzdálenost

A dokončíme nastavení modulu přidáním vnitřních okrajů (Nahoře a Dole) do nastavení mezer.

Vertex vnitřního okraje: 10px
Spodní vnitřní okraj: 10px