{"id":9169,"date":"2024-05-13T07:00:26","date_gmt":"2024-05-13T07:00:26","guid":{"rendered":"https:\/\/musilda.cz\/?p=9169"},"modified":"2024-05-13T07:00:26","modified_gmt":"2024-05-13T07:00:26","slug":"jak-ve-wordpressu-vytvorit-landing-page","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-ve-wordpressu-vytvorit-landing-page\/","title":{"rendered":"Jak ve WordPressu vytvo\u0159it landing page?"},"content":{"rendered":"\n
Landing page je str\u00e1nka, kter\u00e1 slou\u017e\u00ed k jednomu konkr\u00e9tn\u00edmu \u00fa\u010delu. Nej\u010dast\u011bji se jedn\u00e1 o str\u00e1nku, kter\u00e1 reprezentuje samostatn\u00fd produkt, nebo slu\u017ebu. Landing page tak\u00e9 b\u00fdv\u00e1 \u010dasto myln\u011b ozna\u010dovan\u00e1 jako domovsk\u00e1, co\u017e nen\u00ed pravda.<\/p>\n\n\n\n
Landing page se d\u00e1 oproti home page jednodu\u0161e rozpoznat. Krom\u011b v\u00fd\u0161e zm\u00edn\u011bn\u00fdch bod\u016f existuje mnoho dal\u0161\u00edch ind\u00edci\u00ed, kter\u00e9 n\u00e1m napov\u00ed, o jakou str\u00e1nku se ve skute\u010dnosti jedn\u00e1.<\/p>\n\n\n\n
N\u00ed\u017ee si uk\u00e1\u017eeme jednotliv\u00e9 rozd\u00edly mezi landing page a home page na webu Shopify.<\/p>\n\n\n\n
Domovsk\u00e1 str\u00e1nka webu se zam\u011b\u0159uje na vytv\u00e1\u0159en\u00ed prost\u0159ed\u00ed, kter\u00e9 u\u017eivatele navede na jednotliv\u00e9 sekce webu. Krom\u011b toho zde najdeme spousta obsahu, nespo\u010det produkt\u016f, nab\u00edzen\u00fdch slu\u017eeb atd.).<\/p>\n\n\n\n
Home page obvykle obsahuje horn\u00ed naviga\u010dn\u00ed menu pro jednoduchou navigaci u\u017eivatel\u016f na webu.<\/p>\n\n\n\n
Domovsk\u00e1 str\u00e1nka si \u010dasto z\u00edsk\u00e1v\u00e1 nov\u00e9 n\u00e1v\u0161t\u011bvn\u00edky formou tzv. organick\u00e9 n\u00e1v\u0161t\u011bvnosti (n\u00e1v\u0161t\u011bvn\u00edci, kte\u0159\u00ed p\u0159i\u0161li na na\u0161i webovou str\u00e1nku p\u0159irozen\u011b prost\u0159ednictv\u00edm vyhled\u00e1va\u010d\u016f).<\/p>\n\n\n\n
Na druh\u00e9 stran\u011b stoj\u00ed landing page, kter\u00e1 nepropaguje cel\u00fd web, ale pouze jednu ur\u010ditou sekci. M\u00e1 pouze jeden hlavn\u00ed c\u00edl, kter\u00fdm m\u016f\u017ee b\u00fdt nap\u0159\u00edklad z\u00edsk\u00e1v\u00e1n\u00ed email\u016f od n\u00e1v\u0161t\u011bvn\u00edk\u016f, prodej produktu\/slu\u017eby, nebo registrace.<\/p>\n\n\n\n
U landing page je naopak v\u00fdhodn\u00e9 menu skr\u00fdt. Bez naviga\u010dn\u00edho menu se u\u017eivatel\u00e9 budou moci l\u00e9pe soust\u0159edit na c\u00edl dan\u00e9 landing page. U n\u011bkter\u00fdch web\u016f po skryt\u00ed naviga\u010dn\u00edho menu u landing page do\u0161lo ke zv\u00fd\u0161en\u00ed konverzi u\u017eivatel\u016f a\u017e o 40%.<\/p>\n\n\n\n
Zdroj n\u00e1v\u0161t\u011bvnosti landing page je obvykle z placen\u00e9 reklamy. Pomoc\u00ed reklamy samoz\u0159ejm\u011b m\u016f\u017eeme odkazovat u\u017eivatele tak\u00e9 na domovskou str\u00e1nku, ale tento postup se v\u011bt\u0161inou nedoporu\u010duje.<\/p>\n\n\n\n
Kdy\u017e u\u017e ch\u00e1peme z\u00e1kladn\u00ed rozd\u00edly mezi jednotliv\u00fdmi str\u00e1nkami, m\u016f\u017eeme se pustit do tvorby samotn\u00e9 landing page.<\/p>\n\n\n\n
Pro tvorbu landing page existuje hned n\u011bkolik zp\u016fsob\u016f. My se v\u0161ak zam\u011b\u0159\u00edme na tvorbu bez jak\u00e9hokoliv pluginu pomoc\u00ed nativn\u00edho Gutenberg editoru:<\/p>\n\n\n\n
P\u0159ed tvorbou se zamysl\u00edme nad samotn\u00fdm c\u00edlem landing page. Jako p\u0159\u00edklad si vytvo\u0159\u00edme str\u00e1nku, ve kter\u00e9 bude hlavn\u00edm c\u00edlem registrace u\u017eivatel\u016f na webu.<\/p>\n\n\n\n
Str\u00e1nky > P\u0159ehled str\u00e1nek > Vytvo\u0159it novou str\u00e1nku<\/strong><\/p>\n\n\n\n Po vytvo\u0159en\u00ed str\u00e1nky dostaneme mo\u017enost pou\u017e\u00edt ji\u017e vytvo\u0159en\u00fd layout webu, kter\u00fd n\u00e1sledn\u011b m\u016f\u017eeme upravit.<\/p>\n\n\n\n V dne\u0161n\u00edm \u010dl\u00e1nku vzory nebudeme pou\u017e\u00edvat a za\u010dneme s tvorbou od nuly.<\/p>\n\n\n\n Gutenberg je vestav\u011bn\u00fd WordPress editor, ve kter\u00e9m m\u00e1me k dispozici n\u011bkolik dostupn\u00fdch blok\u016f, pomoc\u00ed kter\u00fdch jsme schopni cel\u00fd web postavit.<\/p>\n\n\n\n Vysv\u011btlen\u00ed Gutenberg editoru:<\/strong><\/p>\n\n\n\n Stru\u010dn\u00e9 vysv\u011btlen\u00ed v\u0161ech Gutenberg blok\u016f najdete zde<\/strong><\/a>.<\/p>\n\n\n\n Po p\u00e1r minut\u00e1ch je landing page p\u0159ipraven\u00e1 k pou\u017eit\u00ed. V\u0161echny pou\u017eit\u00e9 bloky najdete v lev\u00e9m panelu. Prvn\u00ed sekce je \u0159e\u0161en\u00e1 pomoc\u00ed dvou sloupc\u016f a druh\u00e1 pomoc\u00ed skupiny, u kter\u00e9 je nastavena barva pozad\u00ed na zelenou. <\/p>\n\n\n\n Pro odsazen\u00ed prvk\u016f se pou\u017eil blok „mezera“. Tla\u010d\u00edtko bude m\u00edt za \u00fakol odkazovat n\u00e1v\u0161t\u011bvn\u00edky na registra\u010dn\u00ed str\u00e1nku s formul\u00e1\u0159em.<\/p>\n\n\n\n Po dokon\u010den\u00ed ulo\u017e\u00edme \u00fapravy.<\/p>\n\n\n\n Zmi\u0148oval jsem, \u017ee u landing page je vhodn\u00e9 naviga\u010dn\u00ed menu skr\u00fdt. To provedeme n\u00e1sledovn\u011b:<\/p>\n\n\n\n Skryt\u00ed naviga\u010dn\u00edho menu:<\/strong><\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n
3) Vzory<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\n
4) Z\u00e1klady Gutenbergu<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\n
\n
5) Tvorba landing page pomoc\u00ed Gutenberg blok\u016f<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\n
6) Odstran\u011bn\u00ed vrchn\u00edho menu<\/h3>\n\n\n\n
\n
<\/a><\/figure>\n\n\n\n
\n
<\/a><\/figure>\n\n\n\n
\n
<\/a><\/figure>\n\n\n\n
\n
<\/a><\/figure>\n\n\n\n
7) Fin\u00e1ln\u00ed vzhled landing page<\/h3>\n\n\n\n