Jak vytvořit jednostránkový web ve WordPressu

Mnohé úspěšné webové stránky jsou rozsáhlé, komplexní záležitosti se spoustou stránek a obsahu. Někdy však ve světě webdesignu opravdu platí, že více je méně. A proto se vám možná vyplatí místo tradičního přístupu vytvořit jednostránkový web ve WordPressu.

V tomto článku se podrobněji seznámíme s výhodami a využitím tohoto typu webu. Poté vám ukážeme, jak vytvořit jednostránkový web ve WordPressu v pouhých třech krocích. Začněme!

📚 Obsah:

Proč byste mohli chtít vytvořit jednostránkový web

Většina webových stránek má více stránek. Obvykle se jedná minimálně o úvodní stránku, stránku s kontakty, stránku o vás a stránky s jakýmkoli obsahem nebo službami, které nabízíte.

Jednostránkový web naproti tomu zhušťuje všechny důležité informace do jediné úvodní stránky, často tak, že obsahuje několik vyhrazených sekcí. Jednostránkový design webu nabízí řadu výhod, například:

• Jednoduchost, která návštěvníkům usnadňuje orientaci na webu a nalezení toho, co potřebují.
• Snadná údržba, protože je třeba udržovat jen velmi málo obsahu.

Jednostránkový design samozřejmě není správnou volbou pro každý web. Velké, komplexní weby mají své místo. Pokud však provozujete malý firemní web, portfolio nebo jednoduchý výkladní skříň, můžete o tomto formátu uvažovat.

Zásadní prvky jednostránkového webu

Pokud se váš web rozprostírá pouze na jedné stránce, musíte si velmi dobře rozmyslet, co do něj zahrnete. Je důležité poskytnout všechny informace, které bude vaše publikum potřebovat, aniž byste stránku přeplnili nebo zahltili. Vše, co na stránku přidáte, by tam mělo být z nějakého důvodu.

Pokud chcete vytvořit jednostránkový web, jsou zde některé ze základních prvků:

• Výrazná výzva k akci (CTA), například tlačítko pro registraci, kontakt nebo nákup.
• Část O vás, která vysvětluje, kdo jste vy, vaše společnost nebo organizace.
• Brandingové prvky, jako je vaše logo a slogan.
• Seznam produktů nebo služeb, je-li to relevantní.
• Odkazy na vaše další místa a obsah na webu, včetně profilů na sociálních sítích.
• Kontaktní informace, pokud možno včetně různých kanálů.

Důležité je také věnovat pozornost pořadí těchto prvků. Obecně platí, že nejdůležitější informace a CTA budete chtít umístit na začátek, kontaktní údaje a odkazy blíže ke konci stránky. Zamyslete se nad tím, co bude vaše publikum potřebovat vidět a v jakém pořadí, a to vám pomůže určit, jaké prvky zařadit a jak je uspořádat.

Nakonec – to, že používáte jednostránkový design webu, nemusí nutně znamenat, že nemůžete mít blog. Pokud přesto chcete blog zahrnout, WordPress vám umožní odkazovat na blog i z domovské stránky jednostránkového webu.

Jak vytvořit jednostránkový web (PŘESNÉ KROKY)

Nyní si řekneme, jak vlastně postupovat při návrhu webu. Nejprve si pro inspiraci prohlédněte některé existující příklady jednostránkových webových stránek. Pak přejděte k prvnímu kroku.

Krok 1: Určete zaměření svého webu

Jak jsme si již řekli, rozhodnutí vytvořit jednostránkový web znamená, že budete muset velmi pečlivě zvážit jeho design. To zahrnuje i to, abyste si ujasnili jeho cíle. Když jste omezeni na jedinou stránku, budete si chtít vybrat jednu nebo dvě klíčové věci, na které se zaměříte.

Pro to zvažte hlavní CTA, kolem kterého bude váš web navržen. Co chcete, aby návštěvníci udělali – přihlásili se ke členství, zakoupili produkt, zúčastnili se akce nebo si vás najali na práci? Vše na stránce by mělo lidi vybízet k této akci. To znamená, že jim poskytnete informace, které budou potřebovat, vysvětlíte jim výhody a jasně uvedete další kroky.

Krok 2: Vyberte kvalitní jednostránkové téma

Pokud jste se rozhodli vytvořit jednostránkový web ve WordPressu, můžete použít libovolné téma. Chytrou strategií je však často zvolit jednostránkové téma, které bylo vytvořeno speciálně pro návrh tohoto typu webu. Tato témata umožňují jednoduše zahrnout všechny potřebné informace při zachování atraktivního designu.

Při výběru jednostránkového tématu se zaměřte na následující:

• Tvůrce stránek s předpřipravenými prvky, které budete potřebovat, jako je například sekce kontaktů.
• Způsob rozdělení stránky na více sekcí, které lze vizuálně odlišit.
• Navigaci, která umožňuje návštěvníkům přecházet na různé sekce na stránce.
• Snadný způsob přidávání CTA tlačítek a jejich personalizace.

Existuje spousta jednostránkových témat. Například Neve je víceúčelové téma, které je ideální pro stručné, ale komplexní jednostránkové weby. Je kompatibilní s mnoha oblíbenými nástroji pro tvorbu stránek, obsahuje živý nástroj pro přizpůsobení a pomůže vám rychle nastavit jednostránkový web. Obsahuje také předpřipravené sekce pro kontaktní informace, váš životopis, výkladní skříň a mnoho dalšího.

Krok 3: Navrhněte své stránky

Když víte, co chcete na své stránky zahrnout, máte jasno o jejich zaměření a vybrali jste silné téma, můžete začít stránky skutečně navrhovat. Budete chtít, aby byla vhodná pro vaše publikum, odrážela váš styl a byla optimalizovaná pro splnění vašich cílů – což znamená, že byste neměli jednoduše postupovat podle nějakého vzorce.

Několik návrhů, které byste měli mít při sestavování webu na paměti:

• Udržujte stránku jednoduchou a neobsahujte nic, co neslouží jasnému účelu
• Jasně odlište jednotlivé sekce pomocí různých záhlaví, pozadí apod.
• Vytvořte navigaci, která návštěvníky rychle přeskočí do potřebných sekcí.
• Zajistěte, aby vaše primární CTA byly výrazné a přesvědčivé.

Podle těchto rad budete schopni vytvořit úžasnou jednostránkovou stránku během chvilky.

Teď si povíme něco o nástrojích. Jak tedy můžete co nejefektivněji a nejrychleji vytvořit skvělý jednostránkový web?

Vytvořte jednostránkový web pomocí nástroje Elementor

Elementor je snadno použitelný a funkčně bohatý nástroj pro tvorbu stránek, který umožňuje snadno vytvořit libovolný počet stránek v rámci webu WordPress. Díky tomu je ideálním nástrojem pro vytvoření skvělého jednostránkového webu.

V následujících kapitolách vám ukážeme, jak na to. Příklad, který použijeme, je web pro obchod s ovocem a zeleninou. Web bude mít:

• jednu stránku s mnoha sekcemi, ve kterých bude umístěn obsah
• nabídku, na kterou mohou návštěvníci kliknout a přejít přímo do příslušných sekcí
• záhlaví, ve kterém se nachází logo a nabídka
• zápatí

Tady je náhled, jak bude web na konci vypadat:

Podrobně si projdeme jednotlivé kroky, ale zde je základní postup:

1. Nainstalujte si bezplatné téma Neve.
2. Nainstalujte si doplněk Elementor, pokud jste tak ještě neučinili.
3. Nastavte „plátno“ webu – záhlaví, zápatí a menu.
4. Přidejte obsah pomocí Elementoru.
5. Připojte menu k různým sekcím ve vašem designu, abyste vytvořili efekt navigace na jedné stránce.
6. Nastavte svůj design jako domovskou stránku webu.

Nainstalujte si bezplatné téma Neve

• Přejděte na Vzhled → Motivy → Přidat nové v ovládacím panelu WordPress.
• Vyhledejte „Neve“
• Klikněte na tlačítko Instalovat
• Poté, co WordPress motiv nainstaluje, klikněte na tlačítko Aktivovat, abyste jej uvedli do provozu

Instalace bezplatného pluginu Elementor

• Přejděte na Pluginy → Přidat nový
• Vyhledejte „Elementor“
• Instalace a aktivace bezplatného pluginu Elementor Page Builder.

S čistou instalací WordPressu, aktivním tématem Neve a nástrojem pro tvorbu stránek Elementor jste nyní připraveni vytvořit svůj jednostránkový web.

Nastavení záhlaví, zápatí a menu

Pomocí motivu Neve nastavíte záhlaví, zápatí a menu svého jednostránkového webu.

Záhlaví

Přejděte na ovládací panel WordPressu a kliknutím na Vzhled → Motivy → Přizpůsobit si přizpůsobte motiv Neve:

Nejprve vyberete barvy a pozadí webu

Dále na panelu Přizpůsobení klikněte na Záhlaví → Změnit logo a přidejte logo svého webu. Upravte šířku loga, přidejte název webu, ikonu webu a slogan. Zvolte, zda chcete v záhlaví zobrazit nebo skrýt název webu a slogan.

Na kartě Rozložení vyberte rozložení záhlaví i barvu a nastavte výplň a okraje. Případně vyberte jednu z předvoleb záhlaví.

Menu

Dále je třeba vytvořit navigační menu, které se bude zobrazovat v záhlaví. To provedete kliknutím na tlačítko Menu → Vytvořit nové menu. Pojmenujte jej a nastavte jeho Umístění nabídky na hodnotu Primární nabídka.

Klikněte na Další a Přidat položky. Zde přidejte názvy sekcí, které budete vytvářet. Například Hlavní, O nás, Produkty a Kontakt. To provedete kliknutím na tlačítko Vlastní odkazy.

Do pole URL zadejte hashtag následovaný názvem dané sekce. Později, až budete nastavovat Elementor, jej nakonfigurujete tak, aby tyto odkazy vedly do konkrétních sekcí vašeho návrhu. Například:

• #about-us
• #products
• #contact

Zápatí

Přejděte na zápatí a přidejte text a barvu pozadí. Zde můžete přidat libovolný obsah:

Stisknutím tlačítka Publikovat uložíte všechny změny

V této fázi má váš web záhlaví, zápatí a menu. Měla by vypadat nějak jako níže. Nyní jste připraveni použít Elementor k přidání obsahu, který se nachází mezi záhlavím a zápatím:

Vytvořte novou stránku a přidejte obsah pomocí Elementoru

Chcete-li začít, přejděte na Stránky → Přidat nové a vytvořte novou stránku. Stránku pojmenujte. Pokud téma poskytuje postranní panely, zobrazí se i ty. Boční panely však můžete vyjmout nastavením Atributů stránky na celou šířku.

Na nově otevřené stránce klikněte na možnost Upravit pomocí nástroje Elementor. Otevře se panel na levé straně. Na pravé straně je oblast pro úpravy, kde uvidíte, jak se webová stránka utváří.

Krátké seznámení s rozhraním Elementoru

Než budeme pokračovat, podívejme se na panel Elementoru. Obsahuje mnoho kreativních prvků nebo widgetů, jako jsou nadpisy, odstavce, obrázky nebo videa. Ty můžete přidávat do obsahu jejich přetažením.

V levém horním rohu panelu se nachází nabídka hamburger, která otevírá mnoho možností. Zde budete moci upravit barvy, písma a styl motivu na globální úrovni. Netřeba dodávat, že to ušetří spoustu času při přidávání nových stránek.

Z této karty můžete také kdykoli odejít na ovládací panel WordPressu.

V dolní části panelu se nacházejí možnosti pro úpravu nastavení stránky, pojmenování stránky, zobrazení historie úprav a přepínání mezi responzivními režimy. K dispozici je také navigátor, který zobrazuje uspořádané zobrazení stránky.

Klepnutím na ikonu oka můžete zobrazit náhled stránky, a když je připravena k živému spuštění, stiskněte tlačítko Publikovat.

Nyní je čas začít přidávat obsah.

Dva způsoby, jak vytvořit jednostránkový web pomocí nástroje Elementor

V této fázi se můžete rozhodnout, zda budete při vytváření jednostránkového webu pomocí nástroje Elementor postupovat dvěma způsoby:

1. Vložit jednu z předpřipravených šablon nástroje Elementor a poté ji upravit podle potřeby. Za tímto účelem klikněte na ikonu složky v živém náhledu vašeho návrhu a otevře se vám řada šablon, některé zdarma a mnohé profesionální. Na kartě Stránky najdete zcela hotové návrhy celých stránek. Na kartě Bloky najdete předpřipravené šablony pro konkrétní části větší stránky (to je nejužitečnější pro jednostránkový web).

Kliknutím na libovolnou šablonu ji můžete vložit. Pak budete moci plně přizpůsobit každý prvek.

2. Případně můžete začít od nuly kliknutím na tlačítko plus pro přidání sekce a vytvořit svůj návrh z prázdného plátna.

Pro účely tohoto návodu použijeme kombinaci obou metod – první sekci našeho webu vytvoříme od nuly a pak si vybereme z bloků šablon pro vyplnění zbývajících sekcí.

Jak vytvořit sekce jednostránkového webu pomocí nástroje Elementor

Elementor používá sekce, sloupce a widgety k vytvoření rozvržení jakékoli stránky. Sekce jsou největší stavební bloky a můžete do nich přidávat sloupce. Uvnitř těchto sekcí nebo sloupců budete moci přidávat požadované widgety.

Klepnutím na znaménko „+“ přidáte sekci a vyberete strukturu sloupců.

Při najetí na sekci se zobrazí modrý rámeček s úchytem v horní části. Tato rukojeť umožňuje přidat novou prázdnou sekci nad stávající sekci nebo sekci upravit/odstranit. Kliknutím na tečky uprostřed získáte přístup k ovládacím prvkům sekce – rozvržení, styl a pokročilé. Dále můžete sekce přesouvat nahoru nebo dolů tažením za tečky a kliknutím pravým tlačítkem myši vyvolat další možnosti, například duplikovat nebo odstranit.

Podobně můžete kliknutím na úchyt ikony sloupce v horním rohu zvolit rozložení sloupců v sekci. Můžete také upravit šířku sloupců a mezeru mezi nimi. Kliknutím pravým tlačítkem myši na políčka můžete přidat další sloupce, duplikovat stávající, odstranit je a podobně.

Z panelu Elementor můžete do sloupce přetáhnout libovolný prvek (tzv. widget). Jakmile přidáte prvek do sloupce nebo sekce, v pravém horním rohu se zobrazí ikona tužky. Kliknutím na tuto ikonu vyvoláte v panelu Elementor možnosti úpravy obsahu, stylování a pokročilé úpravy.

Jak vytvořit první sekci

První sekci použijeme k tomu, abychom návštěvníky seznámili s povahou podniku a něco málo o něm. K tomuto účelu můžete použít celou šířku oddílu, abyste mohli nést obrázek na pozadí. Při úpravách rozvržení sekce můžete upravit šířku obsahu a roztáhnout sekci na celou šířku stránky, a to pouhým přepnutím tlačítka.

Chcete-li přidat obrázek na pozadí, zvolte možnost upravit sekci klepnutím na tečky v úchytu. Navštivte kartu Styl, která se zobrazí na panelu, a nahrajte obrázek z knihovny médií. Upravte velikost obrázku i překrytí.

V rámci sekce přidáme jeden sloupec a vycentrujeme jej v rámci sekce. Uvnitř sloupce použijeme tři widgety – Nadpis, který návštěvníkům sdělí, že prodáváte čerstvé ovoce a zeleninu, textový editor, který upozorní na možnost doručení domů, a tlačítko, odkud si návštěvníci mohou objednat.

Přidání widgetu Záhlaví:

Přetažení textového widgetu:

Přidání widgetu Tlačítko:

Nyní můžete každý widget přizpůsobit pomocí možností úprav.

Pokud chcete, můžete widgety přidat také do tří samostatných sloupců, a to přidáním sloupců kliknutím na ikonu sloupce. Důležité je přitom poznamenat, že každý widget lze drobně upravit z hlediska rozvržení, stylu a dalších parametrů.

Vytvoření zbývajících sekcí

Když je první sekce hotová, můžete přejít ke zbývajícím třem – O nás, Produkty a Kontakt.

Jak již bylo zmíněno, k vytvoření těchto tří sekcí použijeme hotové bloky šablon z knihovny Elementor. Elementor má mnoho bezplatných bloků šablon v každé z těchto kategorií a v knihovně lze vyhledávat.

Pro sekci O nás zvolíme jednoduchý blok šablony s nadpisem, textovým editorem a widgetem videa. To vše můžete nahradit vlastním obsahem.

Blok šablony s nahrazeným obsahem:

Stejným způsobem můžete použít bloky šablony pro sekce Produkty a Kontakt. Šablona použitá pro sekci Kontakt je vybavena ikonami sociálních sítí. Kliknutím na kartu Styl můžete ovládat barvu ikon, jejich velikost, výplň a další prvky.

Protože Elementor umožňuje velké množství přizpůsobení, můžete tyto sekce upravit tak, aby vypadaly jinak než importované šablony.

Když dokončíte požadované změny, klikněte na zelené tlačítko Publikovat a změny budou na webu živé.

Propojte nabídku s jednostránkovými sekcemi

Chcete-li mít klikací navigační nabídku, musíte jednotlivé sekce v návrhu Elementoru propojit s navigační nabídkou, kterou jste vytvořili v kroku č. 3.

Propojte navigační nabídku s jednostránkovými sekcemi. Za tímto účelem otevřete ID sekce a přejděte na kartu Upřesnit. Do pole CSS ID panelu Elementor v příslušné sekci vyplňte správný název sekce bez hashtagu.

Příklad pokud vaše menu odkazuje na #about-us, přidáte CSS ID jako about-us. Poté postup opakujte pro všechny sekce, na které chcete odkazovat:

Nastavte svůj návrh jako domovskou stránku

Jako poslední krok můžete právě vytvořenou stránku nastavit jako domovskou stránku jednostránkového webu vytvořeného pomocí nástroje Elementor. Za tímto účelem přejděte do Nastavení → Čtení. Klepněte na tlačítko Vybrat statickou stránku v části Vaše domovská stránka se zobrazuje a vyberte design, který jste vytvořili. Nakonec klikněte na tlačítko Uložit změny.

Pokud vás některý krok mate, máme pro vás kompletního průvodce nastavením statické domovské stránky WordPressu.

Nakonec je vaše jednostránková webová stránka připravena. Zde je příklad, jak může vypadat:

Závěr

Tady jsou tři jednoduché kroky, které vám umožní vytvořit jednostránkový web ještě dnes:

1. Určete si zaměření svého webu.
2. Vyberte si kvalitní jednostránkové téma, například Neve.
3. Pokud je to potřeba, navrhněte svůj web pomocí nástroje Elementor.

Pokud je to nutné.