Jak v Divi udělat jakýkoliv element přichycený k obrazovce

V tomto návodu pro šablonu Divi si ukážeme, jak udělat jakýkoliv element přichycený k horní hraně obrazovky při rolovaní obsahem dolu. Využijeme k tomu JS plugin Sticky, který si můžete zdarma stáhnout z oficiálních stránek.

JS plugin stáhnete tak, že kliknete na oranžové tlačítko DOWNLOAD PLUGIN.

Stažený zip rozbalte a soubor jquery.sticky.js nahrajte pomocí FTP do složky js v šabloně.

Pokud používáte přímo šablonu Divi, jedná se o cestu wp-content/themes/Divi/js/.
Pokud využíváte child šablonu Divi (doporučuji) jedná se o wp-content/themes/-jmeno-slozky-sablony-/js/.

Jestliže šablona neobsahuje složku js, tak ji vytvořte.

Dále se přihlašte do WordPress administrace a v levém menu vyberte Divi -> Nastavení šablony. Na stránce nastavení pak zvolte záložku Integrace a do pole Přidat kód do < head > vašeho webu vložte následující kód.

V kódu nezapomeňte nahradit jméno domény a jméno adresáře šablony. Nastavení uložte.

V kódu můžete také změnit hodnotu u topSpacing. Ta představuje odsazení objektu od horního ohraje okna prohlížeče. V kódu jsou tři a jsou vždy přiřazeny ke třídě:

pro sticker je hodnota 200
pro sticker2 je hodnota 150
pro sticker3 je hodnota 100

Posledním krokem je přiřazení ID (třídy) k elementu. To uděláte tak, že si vyberete v Divi builderu modul, který chcete, aby se posouval a v jeho nastavení kliknete na záložku Vlastní CSS a do pole CSS identifikace vložíte sticker, sticker2 nebo sticker3. Podle toho, jak chcete, aby byl modul odsazený od horní hrany prohlížeče.