Chtěli byste vytvořit lepící zápatí s DIVI, které se při posouvání dolů plně odhalí?
Přidání lepivého zápatí do vašeho Webové stránky může přinést ten malý dodatečný dotek, který jste hledali Webové stránky. Efekt „Odhalit“, který umožňuje odhalit zápatí při rolování dolů, dodá vašim webovým stránkám velmi okouzlující vzhled.
Obvykle tento efekt vyžaduje vlastní CSS, což je omezující a obtížně použitelné. Ale díky DIVI toho snadno dosáhnete.
V tomto tutoriálu vám ukážeme, jak vytvořit efekt Reveal ve vašem nalepovacím zápatí. Stačí k tomu několik snadných kroků.
Začněme!
přehled
Zde je stručný přehled lepivého zápatí s efektem Reveal, který vytvoříme v tomto tutoriálu.
Vytvořte novou šablonu zápatí
Návštěva Divi >> Theme Builder z řídicího panelu WordPress.
Tam klikněte na "Přidat globální zápatí"
Pak si vyberte „Budování globálního zápatí“
V tomto tutoriálu použijeme předem připravené rozvržení pro urychlení procesu vytváření, ale můžete to udělat i od začátku. Chcete-li to provést, klikněte "Načíst z knihovny".
Pod vyskakovacím oknem Načíst z knihovny, najděte a použijte rozvržení " Marina O stránce » z balíčku rozložení Marina.
Po načtení rozvržení odstraňte všechny sekce kromě sekce zápatí. Tuto sekci zápatí použijeme k přidání efektu Odhalit.
Přidejte efekt Reveal a udělejte zápatí lepkavé
Udělejte zápatí lepkavé
Nejprve musíme udělat zápatí lepkavé. Chcete-li to provést, otevřete nastavení sekce a klikněte na kartu pokročilý. Pod "Efekty posouvání", změňte nastavení následovně:
- Sticky Position: Sticky to bottom
Aktualizujte Z index pro lepivý stav
Dále musíme našemu oddílu zápatí přiřadit z-index 0, když je oddíl v lepivém stavu. To umožní sekci zůstat za ostatními sekcemi nebo prvky v těle stránky při posouvání.
Chcete-li to provést, aktualizujte polohu Z indexu kliknutím na lepící ikonu vedle možnosti Z Index. Poté aktualizujte Z index na 0.
- Z index (lepkavý): 0
Aktualizujte zástupný znak Z indexu pro pevné zápatí
Když je prvku přiřazena lepivá pozice v Divi, automaticky se vytvoří také duplicitní zástupný prvek. To poskytuje funkce potřebné k umístění a navrhování lepivých prvků pomocí Divi Builder.
Viz též: Jak vytvořit globální záhlaví pomocí Divi's Theme Builder
V tomto případě je zástupný symbol sekce zápatí vytvořen s výchozím z-indexem 1. Nechceme, aby naše skutečná pevná sekce zápatí (nyní s Z-indexem 0) za zástupnou sekcí, takže musíme aktualizovat Z index zástupného symbolu na -1.
Chcete-li to provést, nejprve přidejte vlastní třídu CSS do sekce zápatí takto:
- Třída CSS: sticky-footer-reveal
Poté otevřete nastavení stránky pomocí nabídky nastavení Tvůrce témat.
Přejít na „ Pokročilý " a do pole zadejte následující CSS Přizpůsobte CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Tím přinutíte zástupný symbol zůstat za lepivým zápatím.
Uložit změny
Po dokončení uložte změny provedené v šabloně zápatí.
Uložte také změny Divi Theme Builder.
Konečný výsledek
Chcete-li zobrazit konečný výsledek, zobrazte stránku a posuňte se.
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
V Divi, přidání nalepovací zápatí do vašeho Webové stránky nevyžaduje plugin nebo složité vlastní CSS. Pomocí konstruktoru témata, můžete snadno vytvořit šablonu zápatí pomocí Efekt odhalení za pár minut.
Doufejme, že to dá vašemu návrhu zápatí jemnou podporu s atraktivní interakcí Návštěvníci ocení. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Viz také 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.
...
