15 přesvědčivých příkladů obsahu nad záhybem pro inspiraci

Osm sekund – to je průměrná délka lidské pozornosti. To znamená, že pokud jste obchodník, váš obsah musí cílovou skupinu nadchnout, potěšit a považovat ho za užitečný… za méně než osm sekund.

Možná, že z hlediska sociálních médií je váš obsah výkonný. Rezonuje s publikem a získává vám angažovanost. Ale je možné, že když se podíváte na metriky webových stránek, bude se vyprávět jiný příběh.

Pokud je doba sezení nízká a míra odskočení vysoká, je možné, že vám trvá déle než 12 sekund, než upoutáte pozornost návštěvníka, což pro generování potenciálních zákazníků není nejlepší.

Možná ztrácíte návštěvnost, protože obsah, který návštěvníci webu vidí při první návštěvě vaší stránky, není dostatečně zajímavý, aby je na ní udržel. Vaše vstupní stránky mohou být přesvědčivé v době, kdy je prohlížeči začnou procházet, ale pokud nejsou oslnivé a uživatelsky přívětivé hned na začátku, mohou je prohlížeči snadno odkliknout.

To znamená, že váš obsah nad záhybem by pravděpodobně mohl být přepracován, aby návštěvníky zaujal.

Pokud má váš web přesvědčivý obsah nad záhybem, pravděpodobně zaznamenáte vyšší míru konverze a nižší míru odchodu. Pokud si nejste jisti, zkuste se sami otestovat tím, že se na svůj web podíváte z nové perspektivy – kdybyste byli novým návštěvníkem, zůstali byste na webu na první pohled?

Pokud je vaše odpověď „nejsem si jistý“, nebojte se, probereme to, ale nejprve si probereme, co znamená, že obsah má být nad záhybem.

Obsah, který je nad záhybem, je to, co vtáhne prohlížeče na váš web. Webová stránka, která se pomalu načítá, je přeplněná informacemi a špatně se používá, pravděpodobně čtenáře nepřitáhne stejně jako stránka s opačným designem.

Povíme si o několika způsobech, jak zajistit, aby obsah nad záhybem ohromil webové prohlížeče.

Nejlepší postupy pro design webových stránek nad záhybem

Při navrhování webové stránky mějte na paměti tyto postupy. Udrží pozornost čtenářů a povzbudí je k prozkoumání zbytku webu.

Udržujte jednoduchý design.

Obsah nad záhybem by neměl být extrémně rušný – pokud ano, čtenáři by nemuseli vědět, kam se podívat jako první, a kliknout pryč ze stránky. Případně pokud nebudou schopni rychle najít odpověď na svůj úkol, pravděpodobně si vyberou jinou webovou stránku.

Aby vaše stránka vypadala profesionálně, přehledně a uživatelsky přívětivě, zkuste do záhybu přidat jeden tematický obrázek nebo multimédium, například GIF nebo video. Pak přidejte krátký titulek, který vaši stránku představí, a pod něj větu, která stránku podrobněji popíše.

Udělejte obsah poutavý.

Jedním ze způsobů, jak udržet pozornost prohlížeče, jsou jednoduché webové stránky. Ale když už se na ni dostanou, využijte příležitosti, abyste je potěšili. Například když píšete nadpisy a hlavní text, měly by odrážet hlas vaší značky.

Nemusíte dělat velké změny, abyste prohlížeč potěšili. Například pokud je na stránce tlačítko CTA, zkuste místo nápisu „Zjistěte více“ použít „Připraveni začít?“

Pokud je hlavní fotografie na vaší stránce statická, zkuste místo ní předat stejné sdělení pomocí GIFu. Kromě toho, pokud je celá vaše kopie jednobarevná, zkuste přidat jednu nebo dvě další barvy – dobrým pravidlem je začlenit barvy vaší značky, abyste dosáhli profesionality a konzistence se zbytkem webu.

Navrhujte obsah s ohledem na použitelnost.

Především by se s vaším obsahem mělo snadno pracovat. Pokud například pracujete na obsahu nad záhybem produktové stránky. ujistěte se, že obsah nad záhybem funguje, jak má.

Řekněme, že obsah nad záhybem vaší produktové stránky tvoří video. Načítá se správně, obsahuje titulky a možnosti zvuku?“

Dále myslete na zkušenosti uživatele. Pokud váš obsah nad záhybem obsahuje video, které se automaticky přehrává, přeruší interakci uživatele se stránkou? Chcete-li s tímto problémem bojovat, ujistěte se, že se video přehrává potichu a v případě potřeby obsahuje titulky.

Řešte výzvy pro čtenáře.

Váš obsah nad záhybem by měl odpovídat na výzvy prohlížeče. Pro ilustraci řekněme, že pracujete pro poskytovatele služeb e-mailového marketingu a prohlížeč vyhledá „software pro e-mailový marketing“ a přistane na vaší domovské stránce.

Váš obsah by tedy měl obsahovat několik, ne-li všechna klíčová slova „automatizovaný software pro e-mailový marketing“ v nějaké podobě. Váš titulek by například mohl znít „Automatizace e-mailů pro marketéry“ a v doprovodném textu jej rozvést.

To je tedy několik pokynů, které byste měli mít při tvorbě obsahu na paměti. Dále se podíváme na příklady některých webových stránek se skvělým obsahem nad záhybem.

15 přesvědčivých příkladů obsahu nad záhybem, které mohou inspirovat váš vlastní

Wistia

Wistia umožňuje svým uživatelům vytvářet dynamická videa pro marketingové kampaně. Jejich obsah nad záhybem představuje služby společnosti Wistia pomocí kombinace multimédií: GIFů, videí a krátkého textu, který ukazuje možnosti služby:

Zdroj obrázku

Video na domovské stránce zastaví prohlížeč v jeho stopách. Pravděpodobně stráví více času sledováním klipu inspirovaného talk-show, který vysvětluje služby společnosti Wistia. Když jako spotřebitel vidím na webové stránce skutečné lidi, je to lákavé a nutí mě to k dalšímu zkoumání.

Jednoduchá domovská stránka, jako je ta společnosti Wistia, působí nenuceně. Příjemná atmosféra zjednodušené domovské stránky navozuje profesionální dojem. A po zhlédnutí videa si prohlížeči udělají představu o nabídce softwaru přímo od odborníků na marketing.

Velocity Partners

Velocity Partners, B2B marketingová agentura, nemá video s přehledem společnosti pro svůj obsah nad záhybem. Místo toho má na domovské stránce fascinující interaktivní slideshow, která vysvětluje, proč by inovativní marketéři měli využívat nové formáty obsahu k vyprávění osvěžujících příběhů:

Image Source

„Skvělé marketingové tahy,“ popisují, čím se firma zabývá, a jsou krátké, jednoduché a výstižné, takže nechávají slideshow dělat těžkou práci, pokud jde o přilákání návštěvníků. Sdělení nad záhybem u společnosti Velocity Partners vzbuzuje zvědavost a následně i pobídku k dalšímu rolování.

Je však důležité poznamenat, že pokud chcete použít obsah nad záhybem podobně jako společnost Velocity Partners, ujistěte se, že prvních několik vteřin slideshow, stejně jako vaše kopie, jsou nejpoutavější. Pokud tomu tak nebude, prohlížeč pravděpodobně nebude mít chuť zůstat na webu déle než do přečtení titulku.

VeryGoodCopy

VeryGoodCopy je kreativní agentura, která vytváří články, vstupní stránky, webové stránky a e-maily pro značky. Nad záhybem webové stránky nechává kopii popsat, co může společnost uživatelům poskytnout:

Zdroj obrázku

Titulek vyjadřuje příležitost pro marketéry naučit se přesvědčovat s využitím dostatečného bílého prostoru, lákavého titulku, stručného popisu témat jejich obsahu, sociálního důkazu a živé výzvy k akci. Tento jednoduchý a poutavý design nad záhybem upoutá pozornost jejich návštěvníků a přesvědčí je, aby si prohlédli jejich mikropříspěvky.

Shopify

Obrázky jsou způsobem, jakým obsah nad záhybem na webu společnosti Shopify vybízí čtenáře k prozkoumání. Shopify umožňuje podnikatelům zahájit vlastní podnikání v oblasti elektronického obchodování a spoléhá se na ně, spíše než na kopie, při vysvětlování funkcí softwaru:

Zdroj obrázků

Hlavní stránka obsahuje umělecké obrázky a lákavé video, které v prohlížeči zanechá trvalý dojem. A přestože je kopie řídká, slogan je nabitý smyslem a nutí návštěvníky kliknout na zelený CTA pro zahájení zkušebního provozu.

Ann Handley

Tato autorka bestsellerů Wall Street Journal a partnerka společnosti MarketingProfs, Ann Handley, použila domovskou stránku svého webu, aby na prohlížeče zapůsobila zdůrazněním marketingové zdatnosti. Hrdiny jsou zde hypertextové odkazy a propojení – odkazování na jiné stránky webu může přinést více kliknutí na různé stránky webu, jako například titulky Handleyové:

Zdroj obrázku

Využívá také bílý prostor, uvítací obrázek sebe sama, chytlavý slogan, přesvědčivou kopii a živou výzvu k akci, aby přesvědčila návštěvníky, aby zvážili spolupráci s ní. Z této domovské stránky návštěvník ví, jak Handley vypadá, co má za sebou a jak ji kontaktovat. Co se týče obsahu nad záhybem, je to trefa do černého.

Mint

Obsah nad záhybem může maximalizovat jednoduchost, jako je tomu u Mintu, softwaru pro &plánování rozpočtu. Jednoduchá, ale profesionální domovská stránka účinně zprostředkovává představu o společnosti a o tom, jak může zákazníkům pomoci.

Všimněte si kopie v titulku – ve dvou větách se emocionálně spojí se čtenářem a otevře mu dveře k prozkoumání webu společnosti, která ho zná:

Zdroj obrázku

Mint má také fotografii své aplikace v akci, která upoutá pozornost návštěvníků webu. Ta pomáhá prohlížeči představit si, jak bude aplikace vypadat, pokud se rozhodnou zaregistrovat.

InVision

Jak dynamicky zobrazit příběhy zákazníků nad záhybem? Podívejme se na elegantní příklad společnosti InVision:

Zdroj obrázku

InVision je společnost zabývající se designem digitálních produktů, která pomáhá uživatelům snadno vytvářet elegantní působivé webové stránky, takže tým designérů společnosti věděl, že domovská stránka musí návštěvníky zaujmout. To se podařilo, automaticky přehrává tichou verzi přehledového videa společnosti, doplněnou o reference rozhodujících osob ze společností, jako je Uber a Twitter.

Kopie, která je navrstvená nad videem, skvěle stručně vysvětluje, co společnost pro uživatele dělá, a CTA „Navždy zdarma“ dokonce láká mě, marketéra, který nechce navrhovat webové stránky, abych se začal dozvídat více o nabídce softwaru. Také neskrývá tituly těchto rozhodujících osob z videa – „Dantley Davis, Netflix Design Director“ je dostatečně velká spodní třetina, která může zachytit oči uživatelů, když se nedívají (Moje rozhodně zachyceny byly).

Animalz

Podobně jako VeryGoodCopy je Animalz agentura pro obsahový marketing, jejíž web nebombarduje návštěvníky sděleními o svých službách v designu nad záhybem. Místo toho návštěvníky vítá titulek „Nejlepší obsahový marketing na světě se děje zde“, který marketéra, jako jsem já, láká k dalšímu čtení, aby se dozvěděl jak:

Zdroj obrázku

Kopie CTA se liší od běžných tlačítek CTA. „Pojďme si promluvit“ namísto „Klikněte sem a dozvíte se více!“ naznačuje, že po kliknutí na CTA se návštěvníci dostanou ke skutečnému člověku, který jim může nabídnout více informací o službě.

Stránka také využívá bílý prostor a používá jednoduché, ručně kreslené obrázky, které čtenáře lákají k rolování dolů. Fialová čtverečkovaná čára prochází stránkou dolů, aby představila nejlepší zákazníky společnosti Animalz, a vede k formuláři pro kontaktování společnosti.

Ahrefs

Možná pracujete pro společnost, která chce mít nenáročnou domovskou stránku, která zprostředkuje zvonky a píšťalky produktu, aniž by stránku zahltila přehršlí informací. Pokud na vás tento popis sedí, podívejte se na přístup Ahref nad záhybem:

Zdroj obrázků

Titulek webové stránky popisuje, co služba dělá: pomáhá uživatelům zlepšit jejich SEO. To je dále podpořeno menším titulkem a CTA sděluje prohlížečům informace o cenách.

Spokojení zákazníci jsou uvedeni dole, těsně před záhybem, aby poskytli ucelený přehled o tom, jak může být Ahrefs přínosem pro úspěšné firmy. Pokud chcete, aby vaše domovská stránka používala spíše kopie než vizuály, zkuste ji prezentovat jednoduchým způsobem, který nepoužívá více než 30 slov, jako to udělala společnost Ahrefs.

Twitch

Po zadání Twitch.tv do prohlížeče se okamžitě ponoříte do toho, co web nabízí: živé přenosy pro hráče. Jakmile totiž prohlížeč vstoupí na web, začne se automaticky přehrávat představený živý stream:

Zdroj obrázku

Ačkoli může být trochu zarážející, že z prohlížeče najednou uslyšíte hlasy, design Twitch nad záhybem nepoužívá k popisu svých služeb žádnou kopii. Místo toho mohou uživatelé rovnou přejít k ukázce obsahu a sami procházet streamy, aniž by si museli vytvářet účet nebo cokoli číst. Mohou pokračovat v posouvání, aby si prohlédli oblíbené streamy, na jeden kliknout a odtud prozkoumat možnosti webu.

Vzhledem k tomu, jak web celkově funguje, tento přístup nad záhybem funguje. Twitch nabízí návštěvníkům vyzkoušení svých služeb, aniž by museli cokoli číst. Vizuální platformy podobné Twitchi mohou z této metody těžit a přitáhnout vizuální studenty i nevizuální studenty.

Skillshare

Skillshare používá video k vysvětlení většiny svých služeb nad záhybem. Protože software nabízí online kurzy v různých oborech, video zobrazuje přehled toho, co vám Skillshare pomůže dokázat, naučit se a cítit:

Zdroj obrázku

Video ukazuje sebevědomě vypadající dospělé lidi, kteří se noří do svých vášní, což je to, s čím Skillshare uživatelům pomáhá. Vrstvení textu inspiruje návštěvníky k tomu, aby prozkoumali svou kreativitu pomocí softwaru – a začali zdarma.

Flock

Pokud víte, že webu vaší společnosti prospěje mediální mix obsahu nad záhybem, zvažte, zda k tomu nepřistupovat podobně jako aplikace pro zasílání zpráv Flock. Klíčem k použití mixu obsahu na domovské stránce je navrhnout ji tak, aby informace nerušily zážitek prvního návštěvníka vašeho webu:

Zdroj obrázku

Všimněte si, jak jsou gify použity ke zvýraznění měnícího se textu, který zobrazuje funkce aplikace. Podpůrný ručně kreslený obrázek ilustruje, jak Flock funguje, a text CTA zobrazuje trochu osobnosti. Použití kombinace médií ke zpestření domovské stránky může být tak jednoduché jako jeden pohyblivý obrázek, klikací tlačítko a kresba, která návštěvníkům zobrazí přehled o vaší společnosti.

King Arthur Flour

Obsah nad záhybem tohoto bostonského dodavatele pekařských přísad King Arthur Flour je špičkový. Dává návštěvníkům na výběr, aby se podívali na videonávod, jak upéct kváskový chléb s využitím nabídky společnosti:

Zdroj obrázku

Mohl jsem si udělat představu o nabídce společnosti: stránka na Facebooku (na které se nachází pořad o pečení této firmy), recepty, často kladené otázky o pečení, produkty k zakoupení a dokonce i „horká linka pro pekaře“, která funguje jako stránka Kontakt.

Funkce slideshow, vybavené lesklou fotografií a vlastním CTA, mi poskytly kompletní přehled o tom, co všechno může společnost pro začínající pekaře udělat. Přesahuje rámec pouhých produktů firmy a místo toho nabízí užitečné informace pro pekaře obecně, což je vstřícné pro někoho, kdo může mít z pečení chleba strach.“

Clarkisha Kent

Jste freelancer a přemýšlíte, jak svůj obsah nad záhybem vyzdvihnout mezi konkurencí? Pokud ano, při navrhování domovské stránky se ujistěte, že splňuje dvě věci: zobrazuje osobnost a umožňuje snadnou navigaci.

Je to proto, že zatímco vaše práce vás musí předcházet, vaše osobnost také, zejména jako freelancer. Pokud jste spisovatel jako Clarkisha Kentová, musí vaše texty prodávat, stejně jako to dělají její webové stránky:

Zdroj obrázku

Zařazení fotografie hlavy a zajímavého titulku rychle ukáže více o tom, kdo je Kentová jako spisovatelka, a jaký úhel pohledu pravděpodobně zaujme jako přispěvatelka na webové stránky. Její navigační panel obsahuje odkazy na virální tweety, které vytvořila, a výstřižky z jiných publikací, takže její domovská stránka nemusí

Naopak, její domovská stránka slouží jako úvod, který ji může předcházet před zbytkem webu. Když prohlížeče upoutá minimalistická webová stránka s textem s úsečkami, pravděpodobně budou mít zájem prozkoumat webovou stránku, aby tuto mezeru zaplnili. Když jsem si například přečetl: „Přinášeč chaosu“, okamžitě jsem chtěl vědět jak, což mě přimělo podívat se na její předchozí práci.

Good Witch Kitchen

To je další příklad toho, jak vyjádřit osobnost své značky, pokud jste na volné noze nebo vlastníte malou firmu. Good Witch Kitchen je název podniku holistické výživové poradkyně Kristen Ciccolini. Hned pod záhybem je rychlá slideshow publikací, v nichž se objevila práce Ciccoliniové, než se ponoříte do úvodu:

Zdroj obrázku

Logo Ciccoliniové, jasný obrázek související s jejím řemeslem a přesná kopie poskytují rychlý pohled na atmosféru, kterou Good Witch Kitchen zprostředkovává:

Teď, když máte inspiraci, jak udržet zákazníky na svých vstupních stránkách, jakou strategii použijete pro ty své? Už se těším, co vymyslíte.

.