--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: "Divi 4.2: Fixní hlavička, plovoucí elementy a další" url: https://www.wplama.cz/divi-4-2/ date: 2020-02-06 modified: 2020-02-03 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [css, Divi, pozice, visual builder] --- Divi šablona a Elegant Themes # Divi 4.2: Fixní hlavička, plovoucí elementy a další [![profil 100x100](https://www.wplama.cz/wp-content/uploads/2026/11/profil-100x100.jpg "profil 100x100") **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 6. 2. 2020 2 min čtení Pozor: Článek je z roku 2020. Některé postupy se mohly změnit. ![Nové nastavení Pozice](https://www.wplama.cz/wp-content/uploads/2020/02/nove-nastaveni-pozice.jpg "Nové nastavení Pozice") Obsah článku (4 kapitoly) 1. [Vybírejte mezi fixním, absolutním nebo relativním pozicováním](https://www.wplama.cz/divi-4-2/#vybirejte-mezi-fixnim-absolutnim-nebo-relativnim-pozicovanim) 2. [Ovládání horizontálního a vertikálního odsazení](https://www.wplama.cz/divi-4-2/#ovladani-horizontalniho-a-vertikalniho-odsazeni) 3. [Nová ovládací ikona pro ruční umístění](https://www.wplama.cz/divi-4-2/#nova-ovladaci-ikona-pro-rucni-umisteni) 4. [Fixní hlavičky a plovoucí elementy](https://www.wplama.cz/divi-4-2/#fixni-hlavicky-a-plovouci-elementy) Aktualizace Divi 4.2 přináší další rozšíření vizuálního editoru. Novinky jsou zaměřeny především na pozicování elementů. Novou položku **Pozice** najdete v záložce **Pokročilé** u každého Divi elementu. Nové možnosti nastavení přidávají kontrolu nad každým elementem stránky a obsahují fixní a absolutní pozicování, díky kterému můžete po stránce volně umisťovat element. Lze takto vytvářet například fixní hlavičku a bannery, dynamické koláže fotografií nebo různé efekty překrytí. [Introducing Position Options For Divi! Including Fixed Headers & Floating Elements](about:blank) ## Vybírejte mezi fixním, absolutním nebo relativním pozicováním Jakýkoliv Divi element (modul, řádka nebo sekce) dostal tyto možnosti nastavení. Pokud se trochu orientujete v CSS, budou vám výrazy povědomé. Právě pomocí tohoto nastavení lze volně pohybovat elementem po stránce. [![Nové nastavení Pozice v Divi](https://www.wplama.cz/wp-content/uploads/2020/02/nove-nastaveni-pozice-v-divi-1024x500.png "Nové nastavení Pozice v Divi")](https://www.wplama.cz/wp-content/uploads/2020/02 / nove-nastaveni-pozice-v-divi.png) Nové nastavení Pozice v Divi **Fixed (Fixní)** – používá se pro vytvoření přichycených elementů (například fixní hlavičky nebo plovoucího baneru). Element je viditelný po celé stránce a pohybuje se společně s obrazovkou návštěvníka webu. --- **Absolute (Absolutní)** – element nevyužívá původní pozice a namísto toho se pohybuje volně po okolí nadřazeného konteineru. --- **Relative (Relativní)** – umožňuje upravit pozici elementu, ale nemění závislost na nadřazeném kontejneru. Pozice je relativní vůči elementu samému. --- Detailněji popsáno na stránkách [jakpsatweb.cz](https://www.jakpsatweb.cz/css/position.html). ## Ovládání horizontálního a vertikálního odsazení Jakmile vyberete typ pozice, zobrazí se nové vizuální rozhraní. Pozici si můžete vybrat z předpřipravených bodů nebo pomocí posuvníků horizontálního a vertikálního odsazení. [https://www.wplama.cz/wp-content/uploads/2020/02/location.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/location.mp4) ## Nová ovládací ikona pro ruční umístění Pokud máte u elementu vybrané vlastní pozicování, tak se v jeho pravém horním rohu zobrazí ikona, se kterou můžete provést ruční umístění prvku. [https://www.wplama.cz/wp-content/uploads/2020/02/anchor.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/anchor.mp4) ## Fixní hlavičky a plovoucí elementy Použitím fixní pozice vytvoříte plovoucí element. Ten může být umístěn kdekoliv v okně prohlížeče a zůstává při posunu stránkou na svém místě. ### Vytvoření vlastní fixní hlavičky Asi nejčastější využití nového nastavení bude v kombinaci s tvorbou fixní hlavičky webu s [Tvůrcem motivů](https://www.wplama.cz/divi-editor-sablony/), přes kterého si vytvoříte hlavičku na míru a poté jí jen nastavíte přichycení k horní hraně prohlížeče. [https://www.wplama.cz/wp-content/uploads/2020/02/header.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/header.mp4) ### Vytvářejte plovoucí bannery, tlačítka nebo formuláře Cokoliv může být přichyceno k prohlížeči. Vytvářejte formuláře, bannery nebo call-to-action prvky, které zůstanou neustále na očích. [https://www.wplama.cz/wp-content/uploads/2020/02/optin-1.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/optin-1.mp4) ### Skládejte prvky na sebe Když upravíte pozici na relativní nebo absolutní, tak budete moci jednoduše skládat prvky přes sebe, bez toho, aby jste narušili okolní strukturu webu. [https://www.wplama.cz/wp-content/uploads/2020/02/collage.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/collage.mp4) Chcete vidět, jak to funguje v praxi? [Podívejte se na předpřipravenou demo stránku](https://www.wplama.cz/divi-pozice), kde je naplno využito toto nové nastavení pozic elementů. - [#css](https://www.wplama.cz/stitek/css/) - [#Divi](https://www.wplama.cz/stitek/divi/) - [#pozice](https://www.wplama.cz/stitek/pozice/) - [#visual builder](https://www.wplama.cz/stitek/visual-builder/) Sdílet - - [](mailto:?subject=Divi 4.2: Fixní hlavička, plovoucí elementy a další&body=Divi 4.2: Fixní hlavička, plovoucí elementy a další https://www.wplama.cz/divi-4-2/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fdivi-4-2%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fdivi-4-2%2F) ![profil 150x150](https://www.wplama.cz/wp-content/uploads/2026/11/profil-150x150.jpg "profil 150x150") Autor Tomáš Cirkl Zakladatel WPlama. Od roku 2014 se starám o weby a e‑shopy na WordPressu a píšu o tom, co při té práci řeším. Třikrát jsem přednášel na Word Campech. 1 035 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře (8) [Přidat komentář →](https://www.wplama.cz/divi-4-2/#respond) M Miropiro [7. 2. 2020](https://www.wplama.cz/divi-4-2/#comment-103645) Onen link na předpřiravenou stránku nás přesměruje na hlavní web elegantthemes 🙂 [Odpovědět](https://www.wplama.cz/divi-4-2/#comment-103645) --- TC Tomáš Cirkl WPlama [7. 2. 2020](https://www.wplama.cz/divi-4-2/#comment-103648) Díky za upozornění, opravil jsem jej. [Odpovědět](https://www.wplama.cz/divi-4-2/#comment-103648) --- JD Jiří Doležal [23. 5. 2020](https://www.wplama.cz/divi-4-2/#comment-127076) Můžu nastavit fixně nějakou sekci tak, aby „přebila“ i hlavní menu Divi? Tzn. aby byla nad ním? Nemyslím tím menu vytvořené v Theme Builderu, ale vyloženě to hlavní menu Divi. Díky [Odpovědět](https://www.wplama.cz/divi-4-2/#comment-127076) TC Tomáš Cirkl WPlama [23. 5. 2020](https://www.wplama.cz/divi-4-2/#comment-127190) Jako přímo ve stránce? Teoreticky by to mohlo pomocí z-indexu jít. [Odpovědět](https://www.wplama.cz/divi-4-2/#comment-127190) JD Jiří Doležal [23. 5. 2020](https://www.wplama.cz/divi-4-2/#comment-127199) Ano, Prostě si vytvořím novou stránku a nechám jí v nastavení výchozí šablonu Divi, tím pádem by se v ní mělo zobrazovat defaultní menu. Pak tuto stránku zařadím do Theme Builderu a jednu sekci v této stránce fixnu nahoru a nastavím nejvyšší z-index. Zkoušel jsem to a nefunguje mi to, prostě to defaultní menu přebije cokoliv… [Odpovědět](https://www.wplama.cz/divi-4-2/#comment-127199) TC Tomáš Cirkl WPlama [23. 5. 2020](https://www.wplama.cz/divi-4-2/#comment-127203) Když přes Tvůrce motivů uděláte vlastní hlavičku, tak by měla automaticky nahradit tu výchozí. Pokud na jen konkrétní stránce nechcete hlavičku, můžete to udělat přes šablonu stránky nebo také podmínku v Tvůrci motivů. [Odpovědět](https://www.wplama.cz/divi-4-2/#comment-127203) --- --- --- --- E Emanuel [24. 8. 2020](https://www.wplama.cz/divi-4-2/#comment-151857) Dobrý den, řeším aktuální bytí se pluginu Autoptimize a zobrazení loga v hlavičce. Když je header style nastaven defaultně (v levo), tak je vše v pořádku. Avšak když nastavím Centered Inline Logo(logo je uprostřed hlavičky), tak to plugin Autoptimize blokuje a logo se vůbec nezobrazí. Po odškrtnutí v pluginu Autoptimize – Optimise JavaScript Code? Se vše zobrazuje v pořádku. Nemáte nějakou radu na úprovu kódu pro tohle? …Nejsem kodér a na forech jsem nic nenašel. :/ WP 5.5, Autoptimize 2.7.7, Divi theme builder Díky! [Odpovědět](https://www.wplama.cz/divi-4-2/#comment-151857) TC Tomáš Cirkl WPlama [24. 8. 2020](https://www.wplama.cz/divi-4-2/#comment-151907) Zdravím, nejspíše při optimalizaci JS dojde k jeho rozbití a problému s kompatibilitou s dalším skriptem. Může se to stát, doporučil bych to neaktivovat. [Odpovědět](https://www.wplama.cz/divi-4-2/#comment-151907) --- --- ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/divi-4-2/#respond) [← Předchozí článek WordCamp Praha 29. 2. 2020](https://www.wplama.cz/wordcamp-praha-29-2-2020/) [Další článek → Jak automaticky nahrát do WordPress externí obrázky](https://www.wplama.cz/jak-automaticky-nahrat-do-wordpress-externi-obrazky/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Divi šablona a Elegant Themes →](https://www.wplama.cz/wordpress/divi-elegant-themes/) ![kombinovatelne nastaveni](https://www.wplama.cz/wp-content/uploads/2026/04/kombinovatelne-nastaveni.png "kombinovatelne nastaveni") Divi šablona a Elegant Themes ### [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) 13. 4. 2026 2 min čtení --- ![command center](https://www.wplama.cz/wp-content/uploads/2026/03/command-center.png "command center") Divi šablona a Elegant Themes ### [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) 7. 4. 2026 4 min čtení --- ![spekulativni prerendering](https://www.wplama.cz/wp-content/uploads/2026/03/spekulativni-prerendering.png "spekulativni prerendering") Divi šablona a Elegant Themes ### [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) 30. 3. 2026 3 min čtení ---