Jak používat záhlaví a zápatí s Elementorem

Záhlaví a zápatí webu jsou základními prvky. Ve většině případů záhlaví poskytuje navigační odkazy, které zjednodušují navigaci do různých částí webu. Na druhou stranu zápatí obsahuje důležité informace, které mohou návštěvníci webu vyžadovat, jako je adresa firmy nebo kontaktní údaje, abychom uvedli několik amp .

Záhlaví a zápatí poskytuje aktuální téma uživatele na WordPress. Ty jsou obvykle dobře navržené a vhodné pro většinu jejich použití. Pokud však chcete upravit svá témata, budete muset změnit kód; V tomto případě se hodí zásuvné plugin Page Builder. Můžete je použít k vytvoření a změně komponent webové stránky, aniž byste znali jakýkoli kód.

Tento tutoriál nás naučí, jak vytvořit záhlaví a zápatí webu. Bude použit Elementor Pro (protože základní verze Elementoru neobsahuje funkce nejdůležitější pro tvorbu těchto komponent). Stáhněte si tedy Elementor Pro a ujistěte se, že je zapnutý.

Proč byste si jako tvůrce stránek měli vybrat Elementor?

Elementor je nejpokročilejší tvůrce stránek, který uživatelům umožňuje používat prémiové prvky k vytváření nádherných návrhů a rozvržení. Je to velmi výhodné pro nováčky, kteří nemají žádné předchozí znalosti kódování. Editor drag 'n' drop v Elementor umožňuje uživatelům přesouvat widgety a položky.

Elementor je vizuální tvůrce stránek, který umožňuje uživatelům vidět, jak jejich stránky vypadají bez přepínání režimů.

Dalším přesvědčivým argumentem pro použití Elementoru je, že většinu práce lze dokončit bez nákladů. Jejich bezplatná edice je více než schopná poskytnout dostatečné možnosti úprav stránek. Projdeme si však bezplatnou i placenou verzi, abyste si mohli vybrat tu, která nejlépe vyhovuje vašim potřebám.

Níže jsou uvedeny některé z důležitých aspektů Elementoru, díky kterým se vyplatí:

  • Funkce drag and drop je podporována.
  • Má velké množství šablon.
  • Celkem existuje více než 90 widgetů.
  • Pro responzivní podporu není vyžadováno žádné kódování.
  • K dispozici jsou možnosti opakování a zpět.
  • K dispozici je automatické ukládání.

Pomohlo by, kdybyste se před vytvořením jedinečného záhlaví rozhodli pro obecné uspořádání požadovaných sekcí záhlaví a zápatí. Pohled na předem připravené rozvržení sekce záhlaví vám může poskytnout mnoho možností.

Můžete si vybrat z různých sekcí záhlaví; nejběžnější a nejmoderněji vypadající záhlaví obsahuje logo webu v levém rohu, navigační panel uprostřed a sekci vyhledávacího panelu vpravo.

Existuje nekonečné množství možností a můžete si vytvořit libovolné rozvržení.

Zvolil jsem předpřipravenou šablonu záhlaví č. 7; Toto je nejběžnější a nejjednodušší přístup k použití záhlaví na webu WordPress. Zkopírujte a vložte název šablony záhlaví do Šablony > Záhlaví > šablona vyhledávání > vložte zkopírovaný název záhlaví .

Když najdete požadovanou šablonu záhlaví, vyberte „Upravit pomocí Elementor“ a budete přesměrováni do sekce Tvůrce záhlaví Elementor Pro.

Pojďme tuto párty začít.

Co je to záhlaví a co dělá?

Horní část vaší webové stránky se nazývá „záhlaví webu“. Záhlaví je obvykle stejné na celém webu. Některé webové stránky však používají různá záhlaví pro různé části webu.

Návrh záhlaví poskytne vašim uživatelům první dojem z vašeho webu, ať už se dostali na vaši domovskou stránku, stránku s informacemi nebo jiný individuální obsah. A pokud je dobře navržený, upoutá pozornost uživatele a přiměje ho k dalšímu posouvání a čtení.

Záhlaví může také pomoci při propagaci identity značky vaší společnosti.

Používám funkce, jako je logo společnosti, písmo, barvy a celkový jazyk značky.

Navigace na webu, vyhledávání na webu, nákupní košík (pro prodejní weby), tlačítka s výzvou k akci (CTA) a další funkce, které zlepšují uživatelský dojem a zvyšují míru konverze, to vše se nachází v záhlaví.

Zápatí je část webové stránky, která se zobrazuje ve spodní části stránky. Obvykle se zobrazují neustále na celém webu, na všech stránkách a příspěvcích, podobně jako v záhlaví.

Zápatí jsou často přehlížena, což je plýtvání potenciálem, protože se objevují na každé stránce webu. Jsou stejně důležité pro hlavičky.

Váš návrh zápatí může zobrazovat užitečné a důležité informace, jako je registrace k newsletteru, informace o autorských právech, podmínky použití a soukromí, mapa webu, kontaktní informace, mapy, navigace na webových stránkách a mnoho dalšího, v závislosti na nastavení, které vyberete.

Jak vytvořit záhlaví

V této sekci vytvoříme vlastní záhlaví. Nedělejte si starosti, pokud to vypadá zastrašující; nebudeme začínat od nuly. Místo toho použijeme šablony Elementór Pro, navržené designérským týmem Elementor.

Vývoj šablony záhlaví

Na panelu administrátora WordPress umístěte kurzor na Šablony a kliknutím na Přidat nový vytvořte naši hlavičku.

Jakmile budete nasměrováni, objeví se modální okno. vyberte Záhlaví , pojmenujte Záhlaví a klikněte na „ Vytvořit šablonu “:

Tím se spustí editor Elementor. Poté se vám zobrazí seznam šablon, ze kterých si můžete vybrat. Vyberte si tedy ten, který vás osloví:

Jakmile si vyberete šablonu, měla by se zobrazit v horní části sekce úprav Elementor:

Vytvoření loga: Prvním krokem je vytvoření loga. Nastavte logo v živém editoru webu a vložte jej do záhlaví. Vyberte logo kliknutím na Identitu webu.

Jakmile se rozhodnete pro logo, klikněte na Publikovat .

Logo vašeho webu by nyní mělo být v záhlaví, pokud obnovíte rozhraní Elementor:

Poté můžete provést libovolné změny.

Provádění změn v nabídce záhlaví

Další věc, kterou bychom měli udělat, je změnit menu. Pokud jste vygenerovali nabídku, šablona ji automaticky začlení:

Zde je struktura naší nabídky, kterou můžete vidět v šabloně záhlaví:

Pokud máte více než jednu nabídku, můžete v případě potřeby aktualizovat obsah.

Jeho vlastnosti můžete upravovat stejně jako jakýkoli jiný widget.

Pokud potřebujeme přidat další položky, můžeme do naší hlavičky přidat další sekce:

Začněme přidáním záhlaví a některých ikon sociálních médií:

Poté můžete provést libovolné změny. Naše úprava dopadla takto:

Publikace záhlaví

Jakmile dokončíte úpravy, můžete nyní záhlaví publikovat. amp použijeme záhlaví na celém našem webu , takže tuto volbu vybereme po výběru Přidat podmínku:

A zde je amp stránky z našeho živého webu:

Proces vytváření zápatí je velmi podobný procesu vytváření záhlaví. Chcete-li jej vytvořit, vytvořte novou šablonu zápatí takto:

Pak se rozhodněte pro šablonu. Zápatí mají různé tvary a velikosti. Některé obsahují informace o firmě, zatímco jiné mají kontaktní formuláře. Vyberte šablonu, která je vhodná pro vaše požadavky.

Šablona, ​​kterou jsme pro náš web vybrali, je následující:

Záhlaví uvidíte, jakmile začnete upravovat (pokud nastavíte podmínku, že se zobrazí na všech stránkách).

Změňte zápatí podle potřeby; Takto vypadá naše revize:

Po dokončení publikujte zápatí:

Hotový výrobek

Takto vypadá konečný výsledek. Na našem webu se nyní používá záhlaví i zápatí:

Toto je nejdůležitější fáze a musíte zajistit, aby sekce záhlaví a zápatí reagovaly. Protože nabídka v plné šířce obvykle nevyhovuje mobilnímu zobrazení, musíte vědět, jak bude váš návrh vypadat na mobilní obrazovce. Responzivní přepínače ve spodní části postranního panelu Elementor mohou změnit verzi pro mobily a karty.

Odezvu záhlaví a zápatí můžete otestovat různými způsoby. Můžete amp použít nástroje jako Browserstack, CrossBrowser Testing a Google Resizer, abyste zajistili, že vaše webové stránky budou co nejcitlivější. Můžete to udělat také ručně experimentováním s různými zařízeními.

Dotahování věcí do konce

Doufám, že vám tato příručka pomohla při rychlém vývoji vašich jedinečných sekcí záhlaví a zápatí pomocí Elementor Pro. WordPress má mnoho funkcí, ale umožňuje pouze několik úprav v záhlaví a zápatí, které nakonec opraví tvůrce stránek Elementor Pro. Díky daleko lepší kontrole nad prvky vašeho webu můžete nyní lépe demonstrovat vizi vašeho webu. Kromě toho byla funkčnost Elementoru vylepšena pomocí bezplatných doplňků, které uživatelům umožňují přizpůsobit své webové stránky pomocí pokročilejších možností.

Hanson F.

Poslední příspěvky

Porovnání témat WordPress: Astra vs OceanWP

Dvě z nejpopulárnějších témat WordPress na trhu jsou Astra a OceanWP. Profesionální…

2. ledna 2022

Porovnání témat zpráv WordPress: Noviny vs. Astra

Vytvoření vynikajícího zpravodajského webu z vás nevyžaduje, abyste se stali webdesignérem. My…

25. října 2021

Vytvořte webové stránky související se zprávami s tématem novin

Téma Noviny je jedním z nejvýznamnějších témat WordPress navržených tagDiv, a…

18. října 2021

Jak vytvořit eCommerce pomocí Avada WooCommerce Builder

Pokud jde o nastavení internetového obchodu, WooCommerce je plugin . To…

4. října 2021

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,…

21. září 2021

Jak používat Avada Header, Footer a Tvůrce rozložení sloupců

Náš vlastní nástroj pro tvorbu stránek, Avada Builder, je nyní k dispozici ve dvou rozhraních: Avada…

16. září 2021