Autor: Neil Lock

What you put in the top of your front page has a huge impact on the success or failure of your website. Put the wrong thing in, and you’ll probably see your visitors quickly navigating away from your site. Put the right content there and you may see your sales go up.

This article isn’t an all-in-one guide for creating above the fold content, nor is about an all-encompassing rule on what you should put in. Rather, I will give you a few tips, recommendations and a little bit of helpful research about this topic.

Než se do toho pustíme po hlavě, je dobré nejprve vědět, jak se horní části vaší úvodní stránky vlastně říká. Existuje pro ni lepší název než horní-část-vašeho-webu.

„Above the Fold“

Říká se jí „Above the Fold“ (nad ohybem). Proč? Protože v dobách, kdy lidstvo četlo věci zvané noviny, bývaly tyto noviny obvykle přeložené napůl, takže byla hned vidět jen jejich horní část. Tato horní část, tedy část „nad ohybem“, obsahovala nejdůležitější titulky dne, a teprve když jste noviny rozložili, uviděli jste zbytek méně důležitých zpráv. Podobně je tomu i u webových stránek – horní část vašeho webu je to první, co lidé uvidí, a teprve když sjedou dolů, uvidí zbytek webu, podobně jako při rozložení novin.

Zůstaňme ještě u příkladu s novinami – představte si, že jdete po ulici a vidíte prodejce novin. Když noviny zahlédnete a titulek vás zaujme, dost možná si je koupíte, abyste si přečetli zbytek. U webových stránek je to v podstatě totéž: pokud návštěvníci narazí na váš web a obsah v části nad ohybem je zaujme, možná tomu dají šanci a sjedou dolů nebo si prohlédnou zbytek webu, aby zjistili víc.

Nielsenův výzkum

Earlier I said that your above the fold content may make or break your site. Nielsen Normal Group has written a few research articles about this across the years. I’ll quote the summary of their article The Fold Manifesto: Why the Page Fold Still Matters

The average difference in how users treat info above vs. below the fold is 84%.

If you just got confused about the wording of the quote, I did too at the start. Let me clarify: That study doesn’t mean that 84% of people do not scroll down, on the other hand I’ve seen other research say that most people do scroll down to the bottom of the page. It also doesn’t mean that the lower part isn’t important. Instead it means that the behavior of your visitors in your site is largely impacted by your content above the fold.

To dává smysl, protože horní část webu je to první, co vidíte.

Když už tedy víte, jak důležitý je obsah nad ohybem na vaší úvodní stránce, co byste do horní části webu měli umístit?

Jděte přímo k věci

Rovnou uveďte, o čem váš web vlastně je. Úvodní stránka a oblast nad ohybem jsou životodárnou mízou celého vašeho webu. Pokud se návštěvníci budou cítit ztraceni, rychle odejdou a záložku zavřou. Jste-li začínající autor knih, napište to a představte svou nejnovější knihu. Pokud jste svatební koordinátor, napište, že jste svatební koordinátor, který návštěvníkovi připraví tu nejnezapomenutelnější svatbu v životě. Nebo pokud tvoříte web pro svůj malý hotel, napište, že jste ten nejlepší penzion ve městě. (Tyto příklady využiji níže.)

Vaši návštěvníci by neměli hádat, o čem web je. Měli by to pochopit okamžitě – jedině tak sjedou dolů, aby si prohlédli další podrobnosti.

Cíleně zaujměte své návštěvníky

Dále se musíte zamyslet nad skutečným účelem svého webu. Z jakého důvodu jste vůbec web zakládali? Ať už je důvod jakýkoli, musíte jej také umístit nad ohyb.

Vezměme si těch několik příkladů, které jsem zmínil výše. Jakožto začínající autor knih budete pravděpodobně chtít větší publicitu. Pokud máte e-knihu zdarma, můžete umístit tlačítko, kterým si ji návštěvníci stáhnou. U svatebního koordinátora budete chtít, aby vás lidé kontaktovali ohledně vašich služeb – uveďte své telefonní číslo nebo kontaktní formulář. A v případě malého hotelu vložte rezervační formulář společně s telefonním číslem.

V případě Page Builder Sandwich chci, aby se lidé s pluginem lépe seznámili a nakonec se stali zákazníky. Mám tam proto tlačítko, které návštěvníkům umožní si demo hned vyzkoušet, a další tlačítko pro nákup pluginu.

Návrh oblasti nad ohybem

Teď, když už víme, co tam umístit, přichází čas rozhodnout o designu. Osobně preferuji čistý, do sekcí členěný obsah, proto máme na úvodní stránce jednolité pozadí. Skvělý nápad je také doplnit obsah nad ohybem obrázkem nebo videem, aby působil živěji.

Here’re a few examples of what you can do about your front page.

Add a background image. A large background image behind your large statement is a great eye-catcher and can further encourage visitor engagement. For new book author, maybe adding a background image illustrating the setting of his free ebook would entice people more.

Add an introduction video. Admit it, people can be lazy, especially when it comes to reading. So if your site is a bit complicated, it might be a good idea to add a short video that introduces your site/product quickly. For the wedding organizer, then this can be a video of their latest wedding. Or for our site for example, we can add in a quick intro about the features of our plugin.

Add a video background. This is a bit of a trend nowadays, but I find it appealing at times. If this suits your taste, then this might be a good idea.. I know PayPal had a video background before in their site. For the small hotel, you can put in a stationary video of a scenic area of your hotel as the backdrop.

Závěr

Vytvořit obsah nad ohybem pro vaši úvodní stránku není těžké, ale vyžaduje to trochu přemýšlení a testování, aby to fungovalo správně. Pokud již web máte a jste s ním spokojeni, ale v Google Analytics vidíte vysokou míru okamžitého opuštění, doporučuji vám zkusit přehodnotit obsah nad ohybem podle výše uvedených tipů.

If you have tips on creating above the fold content, kindly share them in the comments!

Page Builder Sandwich can Help You Design Your Front Page & Above The Fold Content

Page Builder Sandwich is a WordPress plugin that allows you to create any design you want without writing any piece of code.

Zjistěte více o Page Builder Sandwich

There may be times where you want to add supporting videos from YouTube or Vimeo into your site. Or maybe you want to add Tweets from Twitter, or content from other websites like Flickr and Instagram. You can embed these content easily in your WordPress site.

To do this, all you need to do is find the permalink for the content. In some sites like YouTube, the permalink is simply the current URL. For other sites like Reddit or Vimeo, you’ll have to find the “permalink”, “share” or “embed” button to get the URL. In some sites like Facebook, you’ll have to click the date of the status or post in order to get the permalink.

Trvalé odkazy mají mnoho podob a forem, ale obvykle vypadají jako ten níže. Tento pochází z YouTube:

https://www.youtube.com/watch?v=dQw4w9WgXcQ​

Tyto adresy URL můžete vložit do editoru obsahu a obsah tím vložit. Pokud jej lze vložit, uvidíte, že se adresa URL převede na skutečné video nebo obsah. Pokud ne, znamená to, že obsah z tohoto webu vložit nelze.

Jaké weby mohu na svůj web vložit?

Not all sites can be embedded into your WordPress site. The WordPress Codex has a list of sites which you can embed: https://codex.wordpress.org/Embeds

Instalace pluginů může přidat více podporovaných webů

If the content you want to embed isn’t in the list in the WordPress Codex, there is another way. Installing plugins can add more embeddable sites. For example, installing Jetpack allows you to embed wall posts from Facebook.

There are plenty more out there that add more sites, do a search for “oEmbed provider” in the WordPress.org plugin repository to find more. Here’s a link to the plugin repo for your convenience: https://wordpress.org/plugins/search.php?type=term&q=oembed+provider

Další způsob, jak přidat obsah – Kódy pro vložení iframe

Pokud pouhé vložení adresy URL nefunguje, existuje ještě další způsob, jak obsah vložit. Zkuste zkontrolovat možnosti sdílení webu, který chcete zahrnout; kromě trvalého odkazu můžete také získat krátký „kód pro vložení“. Kódy pro vložení vypadají takto:

<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>​

Copy that then in your WordPress content editor, click on the text tab on the top of the editor and paste that in. After you’ve pasted that in, head back to the visual tab, you’ll see if it works when the embed code now looks like the actual content that will get embedded. You can’t do this in the visual tab, pasting it from there would just show the pasted code in your site, it won’t get converted into the content.

Použijte Page Builder Sandwich k přidání obsahu z jiných webů přímo z frontendu

While adding content from other sites seem easy, doing things in the administration side of WordPress is a bit of a hassle. You have to know whether to add it in the visual tab or text tab, and you’ll have to preview your page or post in order to see how it would look like when viewed by your site’s visitors.

Page Builder Sandwich usnadňuje práci tím, že vám umožňuje upravovat váš skutečný web přímo z frontendu. Když používáte Page Builder Sandwich, píšete a upravujete obsah webu snadno. Vkládání obsahu z jiných webů je také mnohem snazší.

S Page Builder Sandwich stačí kamkoli na frontendu vašeho webu vložit buď trvalý odkaz, nebo kód iframe pro vložení, a ten se ihned převede na vložený obsah – už nemusíte zjišťovat, do které záložky máte co vložit.

Získejte Page Builder Sandwich nyní.