Jak používat efekty lepivé hlavičky a rolování s Elementorem

Záhlaví je obecně první věc, kterou člověk uvidí, když navštíví váš web, a slouží jako základ pro to, jak jej prozkoumá.

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 usnadňuje používání.

Sticky headers se stávají stále oblíbenějšími mezi webovými designéry, aby organizovaly a strukturovaly web pro lepší uživatelskou navigaci.

V tomto tutoriálu vám ukážeme, jak vytvořit lepící záhlaví pomocí Elementor.

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

• Krok 1: Vytvořte nabídku
• Krok 2: Vytvoření záhlaví v Elementor
• Krok 3: Pomocí Elementoru vytvořte šablonu záhlaví
• KROK 4: Jak zajistit, aby hlavička Elementor byla lepkavá
• Krok 5: Přizpůsobte naše CSS
• Závěr

Krok 1: Vytvořte nabídku

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 Elementor

Po dokončení konstrukce hlavní nabídky přejděte do části Š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 hlaviček, nebo si navrhnout vlastní od začátku.

V tomto tutoriálu začneme od nuly s naší lepicí hlavičkou Elementor.

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

Krok 3: Pomocí Elementoru vytvořte šablonu 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 navigační nabídku do druhého sloupce a vyberte hlavní nabídku, kterou jste vytvořili v kroku 1. Zarovnejte navigační nabídku doprava.

Pro tento tutoriál ponecháme záhlaví jednoduché. Záhlaví můžete vylepšit přidáním barvy pozadí, efektů animace, tlačítek a dalších prvků.

KROK 4: Jak zajistit, aby hlavička Elementor byla lepkavá

Nyní, když jsme vytvořili naši základní hlavičku Elementor, je čas přeměnit ji na hlavičku Sticky.

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

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

Lepkavá hlavička je téměř vždy nežádoucí na zařízeních velikosti tabletu a téměř vždy je nežádoucí i na obrazovkách mobilních zařízení. V důsledku toho klikněte na „x“ vedle obou možností pod Sticky On a ponechte vybranou pouze „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 záhlaví. Přidáním podmínek můžete záhlaví zobrazit kdekoli na webu.

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

Jak můžete vidět, použití Elementoru k vytvoření personalizované Sticky hlavičky je jednoduché a bezbolestné!

Udělejte z vašeho Elementor Sticky Header mnohem lepší vzhled Použití Custom CSS Elementor vám umožňuje přizpůsobit si sticky header přidáním CSS třídy, aby bylo stylovější.

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

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

V tomto případě nastavte „ Offset efektů Když návštěvník použije váš web, jedná se o vzdálenost posouvání, při které dochází k efektu posouvání.

Nastavte posun pohybu na 100.

Mějte prosím na paměti, že možnosti Offset Effects budou fungovat pouze při použití Custom CSS. Pokud tedy nepřidáváte žádné 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 k poslednímu lepivému záhlaví. Příkladem amp s lepivým záhlavím je místo, kde chcete, aby se lepivé záhlaví zobrazilo. Jako příklad amp vybrat kritéria „ celý web “.

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

Dokončili jsme úklid; nyní se přesuneme ke složitosti webu, včetně přidání vlastního CSS kódu. Ukážeme si jak základy, tak pokročilé techniky pro získání bezplatných efektů sticky header pro Elementor. Pokud používáte Elementor 2.9 nebo vyšší, můžete k začlenění tohoto CSS na svůj web použít pravidla globálního stylu.

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

• Chcete-li otevřít nabídku hamburgerů, vyhledejte ji v levém horním rohu nabídky Elementor a vyberte ji.
• Z rozevírací nabídky pod sekcí Globální styl vyberte možnost Vybrat styly motivu.
• Vyberte Custom CSS z rozbalovací nabídky v této sekci (barva se změní na modrou z původní geneticky červené barvy).

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

header.sticky-header { --header-height: 90px; --opacity: 0,90; --shrink-me: 0,80; --sticky-background-color: #0e41e5; --přechod: 0,3s náběh a výstup; přechod: background-color var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacity var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) ; obrázek na pozadí: žádný ; neprůhlednost: var(--opacity) ; -webkit-backdrop-filter: blur(10px); filtr pozadí: blur(10px); } header.sticky-header > .elementor-container { přechod: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me)); výška: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { přechod: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px; padding-top: 10px; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

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

Výše uvedené pokyny vás provedou procesem vytváření klesajícího lepivého záhlaví v Elementoru. Pokud se chcete dozvědět více podrobností o tom, jak dále personalizovat záhlaví, můžete se podívat na kód CSS uvedený níže, 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 nalepovací záhlaví Elementor tím, že změníte četná nastavení a učiníte jej více či méně lepivým. K začlenění této změny CSS přímo do Elementoru doporučujeme použít editor kódu. Můžete použít Visual Studio Code nebo Atom, které vám pomohou rychle sestavit kód a sklízet výhody. Tyto editory jsou zdarma k použití a lze k nim přistupovat z různých systémů, včetně Windows, Mac OS X a Linux.

Tato část ukáže, jak můžete upravit efekty zmenšené hlavičky Elementor pomocí šablony stylů CSS. Pokud provedete pouze jednu změnu uživatelské 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 pokud se tak rozhodnete, máte možnost to udělat. Jakmile se rozhodnete, které proměnné chcete upravit, můžete upravit pouze tyto proměnné a zbytek parametrů 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ě.

Barva pozadí Sticky je #0e41e5 a výška záhlaví je 90px. Mezi další možnosti stylingu patří: neprůhlednost 0,90, smrštění 0,80, neprůhlednost 0,90 a přechod náběhu/zklidnění 300 ms.

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

amp , pokud chcete zvýšit výšku záhlaví na 100 pixelů, zde je návod, jak by to vypadalo před a po změně výšky:

Předtím byla výška záhlaví 90 pixelů; poté byla výška záhlaví 100 pixelů.

Pomocí Elementoru můžete navrhnout nabídku s lepící hlavičkou několika různými způsoby. Nejen, že můžete vytvořit bezplatnou lepicí hlavičku Elementor, ale můžete si ji také přizpůsobit přidáním vlastního CSS. Pomocí tohoto podrobného průvodce je možné získat podrobné pokyny, jak vytvořit klesající lepivou hlavičku Elementor pomocí Elementor a vyladit své 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 naprostou kontrolu nad stylem záhlaví vašich webových stránek. Můžete amp umístit logo webu do středu stránky a hlavní nabídku pod něj. Nad hlavní záhlaví můžete přidat záhlaví, abyste zobrazili telefonní číslo, odkazy na sociální sítě a další informace.

Zde je jen několik amp mnoha možností návrhu záhlaví dostupných uživatelům Elementor.

Závěr

Zahrnutí lepivého záhlaví na váš web může návštěvníkům usnadnit procházení vašeho webu a zvýšit počet kliknutí do všech oblastí vašeho webu.

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