Divi šablona a Elegant Themes

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

pc stůl
Autor příspěvku Tomáš Cirkl

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.

Sticky Plugin

Sticky 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.

Soubor JS

Soubor JS na hostingu

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.

Integrace v Divi nastavení

Integrace v Divi nastavení

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.

CSS identifikace

CSS identifikace

Nakonec nezapomeňte uložit modul a stránku a máte hotovo. Já jsem ukázku udělal s modulem pro přihlášení.

Ukázka přichycení

Ukázka přichycení

Zdroj: How to Make Any Divi Page Element Sticky–Divi Nation Short

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

Zanechat komentář

WordPress školení pro začátečníky a mírně pokročilé (Praha 5.3.2020).

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.