Je potrebné zmeniť hlavičku pri posúvaní stránky pomocou Elementor ?
Existuje mnoho správaní hlavičiek, pomocou ktorých môžete dosiahnuť Elementor Pro. Jednou z nich je zámena jednej hlavičky za inú pri posúvaní stránky. Tento článok vám ukáže ako.
Elementor Pro, ako viete, prichádza s funkciou theme Builder aby ste si mohli vytvoriť vlastnú hlavičku webové stránky WordPress. Vďaka tejto funkcii sa už nemusíte spoliehať na to, čo ponúka váš WordPress tému pokiaľ ide o prispôsobenie hlavičiek, ktoré je zvyčajne obmedzené.
Môžete pridať ľubovoľný prvok, použiť ľubovoľné nastavenie typografie a nastaviť ľubovoľné správanie.
Elementor Pro má vstavanú možnosť nastavenia pridať a lepkavá hlavička. Túto funkciu použijeme na vytvorenie hlavičky, ktorá sa mení pri rolovaní stránky. Pre tento typ správania hlavičky bude potrebný aj vlastný CSS.
Prečítať tiež: Ako vytvoriť vlastnú hlavičku vo WordPress s Elementorom
Tu je príklad hlavičky, ktorá sa mení pri rolovaní stránky.
Krok 1: Vytvorte vlastnú hlavičku
Skôr ako začnete, uistite sa, že ste upgradovali svoj Elementor na profesionálnu verziu, pretože Theme Builder je k dispozícii iba na Elementor Pro. Môžete získať profesionálnu verziu Elementor Pro oficiálna web stránka.
Keď budete pripravení, prejdite na Šablóny -> Tvorca tém na hlavnom paneli WordPress. Na informačnom paneli nástroja na tvorbu tém umiestnite kurzor myši na kartu Hlavička a kliknite na ikonu plus na vytvorenie novej šablóny hlavičky.
V knižnici šablón, ktorá sa zobrazí, si môžete vybrať preddefinovanú šablónu hlavičky, ktorá sa vám páči. Alebo, ak chcete vytvoriť hlavičku úplne od začiatku, stačí zatvoriť knižnicu šablón a otvoriť editor Elementor.
Objavte tiež: Ako vytvárať vlastné tvary v Elementore
V tomto článku vytvoríme šablónu hlavičky úplne od začiatku.
Začnite vytvárať hlavičku pridaním sekcie, potom pridajte potrebné prvky a podľa toho vytvorte štýly.
Po pridaní potrebných prvkov a vytvorení štýlov prejdite na kartu Pokročilé. Pod blokom Pokročilé, nastavte index Z na 100 a pridajte triedu CSS.header-1
Potom duplikujte sekciu hlavičky, ktorú ste práve vytvorili vyššie. Duplikovaná sekcia bude vašou druhou hlavičkou, ktorá sa zobrazí, keď sa stránka posunie nadol.
Upravte duplicitnú hlavičku. Môžete pridať ďalšie položky alebo odstrániť existujúce položky. Môžete tiež zmeniť pozadie. Všetko, čo chcete. Po dokončení úprav prejdite na kartu Pokročilé. Pod blokom Pokročilé nastavenia, premenujte triedu CSS na header-2.
Potom otvorte blok Pohybové efekty. V rozbaľovacom zozname Lepkavý, nastavený na top. Môžete definovať posun efektov v poli Offset efektov. Hodnota, ktorú tu nastavíte, bude určovať hĺbku rolovania pred efektom (v tomto prípade lepkavým).
Po dokončení úprav oboch sekcií hlavičky zmeňte ich poradie.
Upravte spodnú časť a nastavte záporný okraj tak, aby bol nad hornou časťou. Ak to chcete urobiť, prejdite na stránku na karte Spresnenie a nastavte horný okraj na približne -65.
Zverejnite svoju hlavičku kliknutím na tlačidlo PUBLISH v spodnej časti panela nastavení Elementor. Kliknutím na tlačidlo pridajte podmienku zobrazenia PRIDAJTE PODMIENKU. Kliknutím na tlačidlo ULOŽIŤ A ZAVRIEŤ po nastavení podmienok zobrazenia.
Krok 2: Pridajte vlastný CSS
CSS nižšie sa používa na ovládanie efektu prechodu. CSS môžete pridať do nástroja na prispôsobenie tém. Ísť do Vzhľad -> Prispôsobiť na hlavnom paneli WordPress. Na ovládacom paneli nástroja Theme Customizer otvorte blok dodatočný CSS a vložte nasledujúci CSS.
Útržok CSS:
.header-2 {transform: translatey (-80px); -moz-transition: všetky .3s ľahko! dôležité; -webkit-transition: všetky .3s jednoduchosť! dôležité; prechod: všetky .3s ľahké! } .elementor-sticky - effects.header-2 {výška: auto! dôležité; transform: translatey (0px); } .elementor-sticky - effects.header-1 {zobraziť: žiadne! dôležité; }
Kliknutím na tlačidlo PUBLISH uplatniť zmenu.
stručne povedané
Elementor Pro prichádza s funkciou Theme Builder, kde môžete vytvárať vlastné šablóny pre časti vašej témy, ako je napríklad hlavička. Pri vytváraní vlastnej hlavičky pomocou Elementor Theme Builder môžete nastaviť ľubovoľné správanie pomocou možnosti pridať vlastný CSS. Aj bez pridania vlastného CSS môžete efekty nastaviť ako lepivé a priehľadné.
Čítajte tiež: Ako vytvoriť stránku 404 vo WordPress s Elementorom
Samotná zmena hlavičky na rolovacej stránke ponúka určité výhody.
Môžete napríklad použiť sekundárnu hlavičku (hlavičku, ktorá sa zobrazí po posunutí stránky nadol), aby ste zvýšili šance na zdieľanie vašej stránky tým, že sa zobrazia iba tlačidlá zdieľania na sociálnych sieťach.
Získajte teraz prvok Elementor!
záver
Takže ! To je všetko pre tento tutoriál, ktorý vám ukáže, ako zmeniť hlavičku posúvania stránky na Elementore. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť v Komentáre.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
