Pevné pruhy zápatí mohou být pohodlným způsobem, jak uchovat důležité informace Webové stránky v popředí, když uživatel interaguje s obsahem vaší stránky na jakémkoli zařízení.
Stejně jako u Divi, pruh zápatí obvykle existuje jako statický prvek na samém konci stránky po hlavním obsahu zápatí. Zahrnují věci jako text o autorských právech a ikony sociálních médií.
Pokud však neskryjete obsah pruhu zápatí ve spodní části stránky, můžete vytvořit vlastní pruh zápatí, který se vznáší ve spodní části obrazovky, když se uživatel posouvá.
V tomto kurzu se chystáme navrhnout plně přizpůsobenou lištu zápatí pomocí generátoru motivů Divi. To se vám bude hodit, abyste tyto malé, ale důležité kousky obsahu měli neustále na dohled.
Možný výsledek
Zde je přehled pevné patky, kterou budeme navrhovat.
Jak přidat šablonu pevného zápatí ke stažení na webu Divi
VAROVÁNÍ!: Přidáním tohoto modelu nahradíte šablona webových stránek ve výchozím nastavení (pokud jej máte) na svém webu Divi. Doporučujeme jej přidat na testovací web, abyste na živém webu nic nepokazili.
Chcete-li importovat šablonu pruhu pevného zápatí sami Webové stránky, rozbalte stažený soubor zip, abyste získali přístup k souboru JSON.
Poté přejděte na řídicí panel WordPress a přejděte na Divi> Tvůrce motivů.
Poté klikněte na ikonu přenositelnosti v pravém horním rohu stránky.
V okně přenositelnosti vyberte soubor JSON, který jste právě rozbalili, a vyberte možnost „Stáhnout zálohu před importem“ pro případ, že jste dříve měli něco v šablona webových stránek výchozí, které jste nechtěli přepsat.
Poté klikněte na tlačítko Importovat.
Nakonec uložte změny do generátoru motivu a zobrazte živou stránku, abyste viděli pevný zápatí.
Nyní k tutoriálu, dobře?
Část 1: Přidání globální zápatí
Tvůrce motivů Divi vám umožňuje nahradit výchozí zápatí novým aktualizací šablona webových stránek výchozí.
Chcete-li vytvořit globální zápatí, přejděte na řídicí panel WordPress a přejděte na Divi> Tvůrce motivů. Poté klikněte na místo „Přidat globální zápatí“ ve výchozí šabloně webu.
Poté v rozevíracím seznamu vyberte možnost „Vytvořit vlastní zápatí“.
Tím se nasadí editor modelu rozložení, kde budete okamžitě vyzváni se třemi možnostmi, jak chcete začít stavět. Vyberte možnost „Vytvořit od začátku“.
Část 2: Vytvoření pevné zápatí
Nyní, když provádíme úpravy z editoru rozložení šablony, můžeme začít navrhovat pevnou lištu zápatí. Po dokončení budete mít pevnou zápatí se třemi sloupci, které jsou připraveny na obsah.
Přidejte řádek se třemi sloupci
Nejprve přidejte do řádku rozložení se třemi sloupci.
Výška sekce
Jakmile jsou přidány tři sloupce, přidejme definovanou výšku oddílu. To je důležité k vytvoření prostoru ve spodní části stránky, kde pevná linka nakonec skončí. Odebereme také výchozí horní a dolní výplň.
Chcete-li nastavit výšku a výplň, otevřete nastavení sekce a aktualizujte následující:
- Výška: 85px
- Výplň: 0px vysoká, 0px nízká
Nastavení linky
Nyní, když je naše sekce připravena, jsme připraveni přizpůsobit řádek tak, aby sloužil jako pevná lišta zápatí. Otevřete nastavení řádku a aktualizujte následující:
kontext
- Barva pozadí: # 1a1e36
Velikost a mezery
- Šířka okapu: 1
- Šířka: 100%
- Maximální šířka: 100%
- Výplň: 0px nahoru, 0px dolů, 3% vlevo, 3% vpravo
Vlastní CSS
I když je řádek pevný, chceme, aby výška řádku odpovídala výšce nadřazené sekce, aby prostor ve spodní části stránky řádku řádně obsahoval. A chceme se ujistit, že obsah řádku zůstane svisle zarovnaný. Chcete-li to provést, přidejte do hlavního prvku řádku následující vlastní CSS:
Kancelář
výška: zdědit! důležité; displej: flex; zarovnání-položky: střed;
telefon
výška: zdědit! důležité; displej: blok;
Pevné polohování
Aby byla čára upevněna tak, aby se vznášela ve spodní části obrazovky, musíme jí dát pevnou polohu ve středu dole takto:
- Pozice: pevná
- Poloha: dolní střed
Část 2: Vytvoření obsahu pevné zápatí
V tomto okamžiku máme připravenou pevnou zápatí pro obsah. Do každého ze tří sloupců můžeme přidat libovolný obsah, který chceme. Ale protože se jedná o „pruh“ zápatí, který je omezen na 85 pixelů na výšku, musíme omezit množství obsahu. Z tohoto důvodu přidáme malou nabídku s dynamickým logem a 4 položky nabídky ve sloupci 1. Ve sloupci 2 přidáme text chráněný autorskými právy s dynamickým aktuálním rokem. Ve sloupci 3 přidáme tři ikony sledování sociálních médií.
Přidejte nabídku do sloupce 1
Ve sloupci 1 přidejte modul nabídky.
Vyberte nabídku
Poté vyberte jednu z nabídek, které jste již vytvořili Webové stránky. Ujistěte se, že máte položky nabídky na 4 nebo méně.
Přidejte logo webu jako dynamický obsah
V nabídce loga dynamicky přidáme logo webu. Při umístění kurzoru nad oblast náhledu loga klikněte na ikonu „Použít dynamický obsah“. Potom z rozevíracího seznamu vyberte logo webu.
Odebrat pozadí
Poté odeberte výchozí pozadí nabídky tak, aby bylo průhledné.
Menu design
V tomto okamžiku jsme připraveni přidat do nabídky nějaký design. U tohoto designu to ponecháme jednoduché a malé. Aktualizujte následující parametry návrhu:
- Nabídka písma: Overpass
- Barva textu nabídky: # b59c61
- Obrázek sépie: 100%
- Maximální výška loga: 50 pixelů
Do sloupce 2 přidejte text chráněný autorskými právy
Jakmile je nabídka na místě, přejděte do sloupce 2 a přidejte text autorských práv.
Přidat textový modul
Do sloupce 2 přidejte nový textový modul.
Dynamicky přidejte aktuální datum s textem před a za textem
Zde budeme kreativní s dynamickým obsahem pro zobrazení aktuálního roku v textu chráněném autorskými právy. Tím zajistíte, že rok bude automaticky aktualizován po celou dobu životnosti webu.
Chcete-li to provést, klikněte na ikonu „Použít dynamický obsah“ a v seznamu vyberte „Aktuální datum“.
V rozbalovacím okně Aktuální datum aktualizujte následující údaje:
- Před:
- 01
Copyright ©
- Po:
- 01
| Tous Droits Reservés
- Date Format : zvyk
- Vlastní formát data : 20 let
Formátování textu
Aktualizujte text a okraje následujícím způsobem:
- Písmo textu: Overpass
- Barva textu: # b59c61
- Zarovnání textu: střed
- Margin (pouze telefon): 10 pixelů nahoře, 10 pixelů na dně
To podporuje text autorských práv.
Do sloupce 3 přidejte ikony sledování sociálních médií
Ve sloupci 3 přidejte modul pro sledování sociálních médií.
Přidejte sociální sítě
Na kartě Obsah přidejte na web potřebné sociální sítě. Pro tento návrh používáme tři z nich.
Nastavení sledování sociálních médií
Dále aktualizujte nastavení designu pro všechny ikony sledování sociálních médií následujícím způsobem:
- Zarovnání modulu: rovný (stolní a tablet), střed (telefon)
- Barva ikony: # 1a1e36
- Použijte vlastní velikost ikony: ANO
- Velikost písma ikony: 16px (desktop a tablet), 14px (telefon)
Aktualizujte nastavení sociálních médií
Chcete-li aktualizovat design jednotlivé ikony sociální sítě, otevřete nastavení první sítě a aktualizujte následující:
- Barva pozadí: #ffffff
- Výplň: 8 pixelů vpravo, 8 pixelů vlevo
- Zaoblené rohy: 8px
Rozšiřte nastavení sociálních médií na všechny
Poté otevřete nabídku dalších nastavení pro první síť a vyberte možnost „ Rozšířit styly položek "v seznamu. V rozbalovacím okně Rozšířit styly vyberte možnost Rozšířit styly v Tento sloupec „A klikněte Rozbalte .
Tím se rozšíří design na zbývající ikony ve sloupci.
Závěrečné myšlenky
Přidání pevné lišty zápatí má v některých případech smysl. Výška lišty je dostatečně malá, aby nerozptylovala mobil nebo nezabírala příliš mnoho místa. A dává vám možnost přidávat důležité CTA pro lepší konverze a plynulejší uživatelský zážitek.
Pro tento návrh je vytvořen prostor ve spodní části stránky nastavením pevné výšky pro sekci a poté povolením pevné linie zdědit výšku sekce (i když je pevná).
Další zdroje
Zde je seznam ressources další, které vám mohou pomoci při vytváření designu vašeho webu s Divi.
- Jak vytvořit vlastní přihlašovací stránku na Divi
- Jak přidat navigační modul plné šířky na Divi
- Jak vytvořit posuvník celé obrazovky na Divi
- Jak přidat kruhový čítač na Divi
