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í 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 vám umožňuje vybrat si hlavní rozvržení vlastního záhlaví a zápatí.
- Co je to záhlaví a co dělá?
- Co je to zápatí, přesně?
- Jak vytvořit záhlaví
- Vývoj šablony záhlaví
- Provádění změn v nabídce záhlaví
- Publikace záhlaví
- Jak udělat zápatí
- Vývoj šablony zápatí
- Úpravy zápatí
- Dokončený produkt
- Zkontrolujte, zda vaše sekce záhlaví a zápatí reaguje.
- Dotahování věcí do konce
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-29.png)
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í.
Elementor vám umožňuje vybrat si hlavní rozvržení vlastního záhlaví a zápatí.
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í.
Vybral jsem si č. 7 předem připravená šablona záhlaví; 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 tuhle párty odstartovat.
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í.
Co je to zápatí, přesně?
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.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-30.png)
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í:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-31.png)
Jakmile si vyberete šablonu, měla by se zobrazit v horní části sekce úprav Elementor:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-32.png)
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.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-1300x725.gif)
Jakmile se rozhodnete pro logo, klikněte na Publikovat .
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-33-1300x729.png)
Logo vašeho webu by nyní mělo být v záhlaví, pokud obnovíte rozhraní Elementor:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-34.png)
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í:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-35.png)
Zde je struktura naší nabídky, kterou můžete vidět v šabloně záhlaví:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-36.png)
Pokud máte více než jednu nabídku, můžete v případě potřeby aktualizovat obsah.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-1.gif)
Jeho vlastnosti můžete upravovat stejně jako jakýkoli jiný widget.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-2.gif)
Pokud potřebujeme přidat další položky, můžeme do naší hlavičky přidat další sekce:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-3.gif)
Začněme přidáním záhlaví a některých ikon sociálních médií:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-4.gif)
Poté můžete provést libovolné změny. Takto dopadla naše úprava:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-37.png)
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:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-5-1300x695.gif)
A zde je amp stránky z našeho živého webu:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-38-1300x737.png)
Jak udělat zápatí
Vývoj šablony zápatí
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:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-39-1300x713.png)
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.
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-40-1300x714.png)
Šablona, kterou jsme pro náš web vybrali, je následující:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-41-1300x715.png)
Úpravy zápatí
Záhlaví uvidíte, jakmile začnete upravovat (pokud nastavíte podmínku, že se zobrazí na všech stránkách).
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-6-1300x717.gif)
Změňte zápatí podle potřeby; Takto vypadá naše revize:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-42-1300x515.png)
Po dokončení publikujte zápatí:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-7-1300x714.gif)
Dokončený produkt
Takto vypadá konečný výsledek. Na našem webu se nyní používá záhlaví i zápatí:
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-8-1300x731.gif)
Zkontrolujte, zda vaše sekce záhlaví a zápatí reaguje.
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é byly nakonec opraveny pomocí 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 Elementor 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í.