1. Vytvorenie hlavičky v Elementor Theme Builder Prejdite do Templates > Theme Builder vo vašom Elementor. Kliknite na Add New a vyberte Header. Vytvorte flexbox kontajner a pridajte do neho všetky požadované prvky hlavičky, ako je logo, navigácia a ďalšie. 2. Pridanie vlastného CSS Otvorte hlavičku v Elementor-e (na toto budete potrebovať Elementor Pro) Kliknite na vytvorený flexbox kontajner a prejdite do jeho nastavení. Prejdite do záložky Advanced a otvorte sekciu Custom CSS. Skopírujte nasledujúci kód, ktorý pridá glass efekt na zmenšenej hlavičke, zmení veľkosť loga a pridá tieň, keď používateľ scrolluje: .header-container { background-color: rgba(255, 255, 255, 0.85); /* Farba pozadia s glass efektom */ backdrop-filter: blur(10px); /* Glass efekt */ height: 100px; /* Výška pôvodnej (nemeniacej sa) hlavičky - zmeniť na reálnu výšku hlavičky*/ transition: 0.45s cubic-bezier(.4, 0, .2, 1); } .header-container.elementor-sticky--active { height: 70px; /* Výška zmenšenej hlavičky */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Tieň pod zmenšenou hlavičkou */ } .header-container .site-logo { max-width: 180px; /* Maximálna šírka loga v pôvodnej (nemeniacej sa) hlavičke */ height: auto; /* Automatická výška loga, aby sa zachoval pomer strán */ transition: 0.45s cubic-bezier(.4, 0, .2, 1); } .header-container.elementor-sticky--active .site-logo { max-width: 90px; /* Maximálna šírka loga v zmenšenej hlavičke */ } /*! elementor - v3.22.0 - 26-06-2024 */ .elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{position:relative;min-height:22px;min-width:22px}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;width:22px;height:22px} 3. Nastavenie CSS tried kontajneru hlavičky a kontajneru loga Hlavička Kliknite na hlavný flexbox kontajner hlavičky a prejdite do jeho nastavení. Prejdite do záložky Advanced, do poľa CSS Class. Tu nastavte hodnotu header-container (prípadne použite iný názov, no nezabudnúť zmeniť aj v kóde vyššie). Logo Kliknite na flexbox kontajner s obrázkom loga a prejdite do jeho nastavení. Prejdite do záložky Advanced, do poľa CSS Class. Tu nastavte hodnotu site-logo (prípadne použite iný názov, no opäť nezabudnúť zmeniť aj v kóde vyššie). 4. Nastavenie efektu zmenšenia V nastaveniach flexbox kontajnera vyberte možnosť, ktorá povolí sticky efekt a nastavte ho na Top. Nastavte podmienky, pri ktorých má byť efekt aktivovaný. Po dokončení týchto krokov by ste mali mať funkčnú a atraktívnu zmenšujúcu sa hlavičku, ktorá sa automaticky mení pri scrollovaní stránky. Prispôsobte triedy a identifikátory podľa vašich konkrétnych nastavení a požiadaviek na dizajn.
/*! elementor - v3.5.0 - 12-12-2021 */ .elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}
prejsť na článok/*! elementor - v3.13.2 - 11-05-2023 */ .elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .e
prejsť na článokPotřebujete udělat kvalitní profesionální logo, ale vůbec nerozumíte grafickým programům? Nemáte tušení jak by mělo vypadat, co by mělo obsahovat, jaký font a barvy vybrat? Vytvoření kvalitního loga není rozhodně pro každého. Logo je náš nosný základ, dle
prejsť na článok/*! elementor - v3.18.0 - 20-12-2023 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;bo
prejsť na článokAko si zarobiť peniaze Ako vytvoriť zaujímavé vizitky, ktoré fungujú? Myslíte si, že vizitky už patria akurát do múzea a v online časoch nemajú miesto? Možno budete prekvapení, ale aj dnes ešte majú význam. Dobre pripravená vizitka otvára nové možnosti, t
prejsť na článok