Jak používat efekt lepicí hlavičky a posouvání s Elementorem

Záhlaví je obecně první věcí, kterou člověk při návštěvě vašeho webu vidí, a slouží jako základ pro jeho prozkoumání.

Ať už máte webové stránky elektronického obchodu, osobní webové stránky, webové stránky pro vzdělávání, komunitní fórum nebo webové stránky pro média, záhlaví je to, co usnadňuje procházení a příjemné používání.

Rychlé záhlaví jsou mezi webovými designéry stále oblíbenější pro organizaci a strukturu webových stránek pro lepší navigaci uživatelů.

V tomto kurzu vám ukážeme, jak vytvořit přilnavou hlavičku pomocí Elementoru.

Lepkavé záhlaví umožňují uživatelům zobrazit záhlaví stránky a sekci nabídky bez ohledu na to, jak daleko se posouvají.

• Krok 1: Vytvoření nabídky
• Krok 2: Vytvoření záhlaví v Elementoru
• Krok 3: Použití Elementoru k vytvoření šablony záhlaví
• KROK 4: Jak zvýraznit záhlaví Elementoru
• Krok 5: Přizpůsobte si naše CSS
• Závěr

Krok 1: Vytvoření nabídky

Chcete-li na svůj web přidat lepivé záhlaví, přejděte na wp-admin > Vzhled > Nabídky a vytvořte hlavní nabídku. V záhlaví zadejte sekci, kterou chcete zobrazit.

Krok 2: Vytvoření záhlaví v Elementoru

dokončíte vytváření hlavní nabídky, přejděte na Šablony Elementor > Tvůrce motivů Vyberte oblast záhlaví na stránce tvůrce motivu a klikněte na „ Přidat nové záhlaví “.

Pojmenujte šablonu záhlaví a na vyskakovací obrazovce Vytvořit šablonu

Poté budete přesměrováni na stránku úprav Elementor. Můžete buď použít jednu z předem připravených šablon záhlaví, nebo si navrhnout vlastní od začátku.

V tomto tutoriálu začneme úplně od začátku s naší lepivou hlavičkou Elementor.

Než začneme navrhovat šablonu, v editoru Elementor můžete vidět různé widgety záhlaví. Pomocí těchto sekcí můžeme rychle a snadno navrhnout záhlaví.

Krok 3: Použití Elementoru k vytvoření šablony záhlaví

Vytvořte rozvržení se dvěma sloupci. Ujistěte se, že šířka obsahu sekce je nastavena na „ Boxed “.

V nastavení šířky obsahu v části Upravit Elementor nastavte šířku prvního sloupce na 20 % ve sloupci „ Upravit “.

Umístěte logo svého webu do prvního sloupce a zarovnejte jej doleva.

Přidejte nabídku Nav do druhého sloupce a vyberte hlavní nabídku, kterou jste vytvořili v kroku 1. Zarovnejte navigační nabídku doprava.

U tohoto tutoriálu ponecháme záhlaví jednoduché. Záhlaví můžete zpřesnit přidáním barvy pozadí, efektů vznášející se animace, tlačítek a dalších prvků.

KROK 4: Jak zvýraznit záhlaví Elementoru

Nyní, když jsme vytvořili naše základní záhlaví Elementor, je na čase jej změnit na Sticky header.

Chcete-li tak učinit, přejděte do části Upravit (část Celé záhlaví). Vyberte Upřesnit > Pohybové efekty z rozevírací nabídky.

Vyberte „ sticky to the Top “ pod pohybovými efekty a poté „ devices “, kde chcete, aby se zobrazilo nalepené záhlaví.

Lepkavé záhlaví je téměř vždy nežádoucí na zařízeních velikosti tabletu a téměř vždy je nežádoucí i na mobilních obrazovkách. V důsledku toho klikněte na „x“ vedle obou možností v části Sticky On a ponechte vybranou pouze možnost „Desktop“.

Až budete se svou prací spokojeni, klikněte na „ Publikovat “; tím se aktivuje lepivé záhlaví, ale v tuto chvíli nenahradí vaše aktuální záhlaví motivu.

Elementor vás po publikování vyzve k přidání podmínky pro vaše záhlaví. Přidáním podmínek můžete na webu zobrazit záhlaví, kdekoli chcete.

Chtěli jsme, aby se toto záhlaví zobrazovalo na celém webu, s vynecháním stránky 404. V důsledku toho jsme do výběru zahrnuli celý web a stránku 404 vynechali.

Jak vidíte, použití Elementoru k vytvoření přizpůsobené hlavičky Sticky je jednoduché a bezbolestné!

Zajistěte, aby váš záhlaví Elementor vypadalo mnohem lépe Používání vlastního CSS Elementor vám umožňuje přizpůsobit lepkavé záhlaví přidáním třídy CSS, aby byl stylovější.

Zde můžete přizpůsobit výšku, barvu pozadí, přechod a lepkavé efekty záhlaví.

Vraťte se do oblasti Upravit, aby bylo vaše nalepovací záhlaví stylovější (část Celé záhlaví). Vyberte Upřesnit > Pohybové efekty z rozevírací nabídky.

nastavte „ Offset efektů “ na 100. Když návštěvník použije váš web, jedná se o vzdálenost posouvání, kde dojde k efektu posouvání.

Nastavte offset pohybu na 100.

Mějte prosím na paměti, že možnosti Ofsetových efektů budou fungovat, pouze pokud je použit vlastní CSS. Pokud tedy nepřidáváte vlastní CSS, můžete poslední možnost přeskočit.

Před publikováním konečného lepivého záhlaví můžete volitelně přidat podmínky do posledního lepivého záhlaví. Příklad amp záhlaví je místo, kde chcete, aby se lepivé záhlaví zobrazilo. amp příklad si můžete vybrat kritéria „ celý web “.

Nyní budete chtít na svůj web zahrnout nějaké vlastní CSS. Vlastní CSS je poměrně flexibilní a pokud jste obeznámeni s jeho fungováním, můžete zahrnout cokoli chcete.

Dokončili jsme čištění; nyní přejdeme ke složitosti webu, včetně přidání vlastního kódu CSS. Ukážeme základy i pokročilé techniky pro získání efektů lepivých hlaviček zdarma pro Elementor. Pokud používáte Elementor 2.9 nebo vyšší, můžete použít CSS na začlenění tohoto CSS do svého webu.

Chcete -li zahrnout vlastní CSS, postupujte podle níže uvedených postupů:

• Chcete-li otevřít nabídku hamburgerů, najděte ji v levém horním rohu nabídky Elementor a vyberte ji.
• V rozevírací nabídce pod sekcí Globální styl vyberte možnost Vybrat styly motivů.
• Vyberte vlastní CSS z rozevírací nabídky v této sekci (barva se změní na modrou z předchozí genetické červené barvy).

Poté vložte níže uvedený kód CSS.

header.sticky-header {--hlavička-výška: 90px; --opacity: 0,90; -zmenšit: 0,80; --sticky-background-color: #0e41e5; --transition: .3s easy-in-out; přechod: barva pozadí var (-přechod), obrázek pozadí var (-přechod), filtr pozadí pozadí var (-přechod), krytí var (-přechod); } header.sticky-header.elementor-sticky-efekty {background-color: var (-sticky-background-color)! important; obrázek na pozadí: žádný! důležité; opacity: var (-opacity)! important; -webkit-backdrop-filter: rozostření (10px); filtr pozadí: rozostření (10 pixelů); } header.sticky-header> .elementor-container {přechod: min-height var (-přechod); } header.sticky-header.elementor-sticky-efekty> .elementor-container {min-height: calc (var (-header-height) * var (-shrink-me))! important; výška: calc (var (-výška záhlaví) * var (-zmenšit-me)); } header.sticky-header .elementor-nav-menu .elementor-item {transition: padding var (-transition); } header.sticky-header.elementor-sticky-efekty .elementor-nav-menu .elementor-item {padding-bottom: 10px! important; padding-top: 10px! důležité; } header.sticky-header> .elementor-container .logo img {přechod: max-width var (-přechod); } header.sticky-header.elementor-sticky-efekty .logo img {max-width: calc (100% * var (-shrink-me)); } 

Krok 5: Přizpůsobte si naše CSS

Výše uvedené pokyny vás provedou procesem vytváření zmenšující se lepkavé hlavičky v Elementoru. Pokud se chcete dozvědět více podrobností o tom, jak dále přizpůsobit záhlaví, můžete se podívat na níže uvedený kód CSS, který vám umožní být kreativnější s návrhem záhlaví. V závislosti na vašich potřebách si můžete přizpůsobit přilnavou hlavičku Elementor změnou mnoha nastavení a její větší či menší přilnavostí. Doporučujeme použít editor kódu k začlenění této změny CSS přímo do Elementoru. Můžete použít Visual Studio Code nebo Atom, které vám pomohou při rychlém sestavení kódu a využití výhod. Tyto editory lze volně používat a lze k nim přistupovat z různých systémů, včetně Windows, Mac OS X a Linux.

Tato část předvede, jak můžete upravit efekty zmenšující záhlaví Elementor pomocí šablony stylů CSS. Pokud provedete pouze jednu změnu vlastní vlastnosti, bude okamžitě změněna tak, aby odpovídala zbytku kódu CSS.

Možnosti přizpůsobení pro klesající záhlaví jsou k dispozici celkem pěti různými způsoby. Ne všechny proměnné musí být přizpůsobeny, ale máte možnost tak učinit, pokud se rozhodnete. Jakmile se rozhodnete, které proměnné chcete upravit, můžete pouze tyto proměnné upravit a ostatní parametry ponechat beze změny.

Zde je pět proměnných CSS, přičemž výchozí hodnoty pro každou proměnnou jsou zobrazeny červeně.

Lepkavá barva pozadí je #0e41e5 a výška záhlaví je 90 pixelů. Mezi další možnosti stylingu patří: neprůhlednost 0,90, zmenšení 0,80, opacita 0,90 a přechod mezi lehkostí a zjednodušením 300 ms.

Vlastní vlastnosti jsou prvky, které se objevují za dvojitou pomlčkou „ -“ v našem ex amp le kódu, a najdete je uvedené v horní části našeho amp kódu. Vše, co je požadováno, je upravit hodnotu, která se zobrazí za dvojtečkou a před středníkem ve větě.

Pro ex amp le, chcete-li zvýšit výšku záhlaví 100px, tady je návod, jak to bude vypadat před a po změně výšky:

Dříve byla výška záhlaví 90 pixelů; poté byla výška záhlaví 100 pixelů.

Pomocí Elementoru můžete navrhnout lepivou nabídku záhlaví několika různými způsoby. Nejen, že můžete vytvořit bezplatnou přilnavou hlavičku Elementor, ale můžete také přizpůsobit záhlaví přidáním vlastního CSS. Pomocí tohoto průvodce krok za krokem je možné získat podrobné pokyny, jak sestrojit zmenšující se lepkavou záhlaví Elementor pomocí Elementoru a vyladit váš CSS.

Elementor obsahuje různé šablony záhlaví; každý je odlišný a elegantní a pomáhá vašim divákům při procházení vašich webových stránek.

S Elementorem máte úplnou kontrolu nad stylem záhlaví vašich webových stránek. Pro ex amp le, můžete umístit logo webu ve středu stránky a hlavním menu pod ním. Nad hlavní záhlaví můžete přidat záhlaví, které zobrazí telefonní číslo, odkazy na sociální média a další informace.

Zde je jen několik amp z mnoha možností návrhu záhlaví, které jsou uživatelům Elementoru k dispozici.

Závěr

Zahrnutí lepkavé hlavičky na váš web může návštěvníkům usnadnit procházení vašich stránek a zvýšit počet kliknutí do všech oblastí vašeho webu.

Elementor eliminuje potřebu ručně generovat lepivé záhlaví pomocí Javascriptu a CSS, což bylo dříve požadováno. Vytvoření přilnavé hlavičky pro váš web nebylo nikdy jednodušší než nyní, díky lepivým záhlavím Elementor.