--- site_name: WPlama site_description: Internetové stránky na WordPressu snadno a česky site_url: https://www.wplama.cz contact_email: tomas@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] --- 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](https://www.youtube.com/embed/SEWmgTC83Hc?feature=oembed) ## 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ů.