1. Vytvorenie hlavičky v Elementor Theme Builder

  1. Prejdite do Templates > Theme Builder vo vašom Elementor.
  2. Kliknite na Add New a vyberte Header.
  3. 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

  1. Otvorte hlavičku v Elementor-e (na toto budete potrebovať Elementor Pro)
  2. Kliknite na vytvorený flexbox kontajner a prejdite do jeho nastavení.
  3. Prejdite do záložky Advanced a otvorte sekciu Custom CSS.
  4. 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 */ 
}

3. Nastavenie CSS tried kontajneru hlavičky a kontajneru loga

Vytváranie atraktívnej a dynamickej hlavičky, ktorá sa zmenšuje pri scrollovaní, môže výrazne zlepšiť používateľský zážitok na vašej webovej stránke. Tento návod vám ukáže, ako to dosiahnuť pomocou Elementor Pro a flexbox kontajnerov, vrátane glass efektu, zmenšenia loga a štýlového box shadow.

Hlavička

  1. Kliknite na hlavný flexbox kontajner hlavičky a prejdite do jeho nastavení.
  2. 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

    1. Kliknite na flexbox kontajner s obrázkom loga a prejdite do jeho nastavení.
    2. 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

    1. V nastaveniach flexbox kontajnera vyberte možnosť, ktorá povolí „sticky“ efekt a nastavte ho na „Top“.
    2. 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.