Автор: 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.

Прежде чем с головой погрузиться в тему, стоит сначала узнать, как называется верхняя часть главной страницы. Для нее есть гораздо более удачное название, чем просто «верхняя часть сайта».

«Первый экран» (Above the Fold)

Это называется «выше сгиба» или «первый экран». Почему? Потому что в старые времена, когда люди еще читали бумажные газеты, их обычно складывали пополам, поэтому сразу была видна только верхняя половина. В этой верхней части, расположенной «выше сгиба», размещались самые важные заголовки дня, а развернув газету, читатель видел остальные, менее важные новости. Точно так же и на сайтах: верхняя часть страницы — это первое, что видят пользователи, а прокручивая страницу вниз, они видят остальную часть сайта, словно разворачивая газету.

Продолжая пример с газетой: представьте, что вы идете по улице и видите газетный киоск. Если заголовок на сложенной газете вас заинтересует, вы можете купить ее, чтобы прочитать остальное. С веб-сайтами происходит то же самое: если посетители заходят на ваш сайт и находят контент первого экрана интересным, они с большей вероятностью проявят интерес и прокрутят страницу вниз, чтобы узнать больше.

Исследование Нильсена

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.

В этом есть смысл, поскольку верхняя область сайта — это первое, что видит посетитель.

Зная, насколько важен контент на первом экране вашей главной страницы, что же следует там разместить?

Переходите сразу к сути

Сразу дайте понять, о чем ваш сайт. Главная страница и область первого экрана — это основа всего вашего сайта. Если посетители почувствуют растерянность, они быстро уйдут и закроют вкладку. Если вы начинающий автор книг, напишите об этом и покажите свою последнюю книгу. Если вы свадебный организатор, укажите, что вы организуете для посетителя самую незабываемую свадьбу в его жизни. Или, если вы создаете сайт для небольшого отеля, напишите, что у вас лучший отель формата «постель и завтрак» в городе. (Я использую эти примеры далее.)

Посетителям не нужно гадать, чему посвящен сайт. Они должны понимать это мгновенно — только тогда они прокрутят страницу вниз, чтобы узнать подробности.

Целенаправленно вовлекайте посетителей

Далее вам нужно подумать об основной цели вашего сайта. Зачем вообще создавался этот веб-сайт? Какой бы ни была эта причина, ее также необходимо отразить на первом экране.

Давайте вернемся к нескольким примерам, упомянутым выше. Начинающему автору книг, скорее всего, нужно привлечь больше внимания к себе. Если у вас есть бесплатная электронная книга, разместите кнопку для ее скачивания. Свадебному организатору важно, чтобы с ним связались по поводу услуг, — укажите номер телефона или добавьте контактную форму. А для небольшого отеля разместите форму бронирования вместе с номером телефона.

Что касается Page Builder Sandwich, моя цель — чтобы люди лучше узнали плагин и в итоге стали клиентами. Поэтому у меня там есть кнопка, позволяющая посетителям сразу протестировать демоверсию, и еще одна кнопка — для покупки плагина.

Дизайн первого экрана

Теперь, когда мы определились с содержимым, пришло время подумать о дизайне. Лично я предпочитаю лаконичный контент, разбитый по секциям, отсюда и сплошной фоновый цвет на нашей главной странице. Но также отличная идея — дополнить контент первого экрана изображением или видео, чтобы сделать его более живым.

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.

Заключение

Создание контента для первого экрана главной страницы — задача несложная, но требующая осмысления и тестирования. Если у вас уже есть готовый сайт, но показатель отказов в Google Analytics слишком высок, рекомендую пересмотреть контент первого экрана с учетом приведенных выше советов.

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.

Узнайте больше о 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.

Постоянные ссылки бывают самых разных видов и форм, но обычно они выглядят так, как показано ниже. Эта ссылка взята с YouTube:

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

Вы можете вставить эти URL-адреса в редактор контента, чтобы встроить содержимое. Если контент поддерживает встраивание, вы увидите, что URL преобразуется в само видео или контент. Если этого не произошло, значит, вы не можете вставлять контент с этого сайта.

Контент с каких сайтов можно встроить на мой сайт?

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

Установка плагинов позволяет добавить больше поддерживаемых сайтов

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

Еще один способ добавления контента — коды для встраивания iframe

Если вставка обычного URL-адреса не работает, есть еще один способ встроить контент. Попробуйте проверить параметры общего доступа (шеринга) на сайте, контент которого вы хотите добавить: помимо постоянной ссылки вам также может быть предоставлен небольшой фрагмент «кода для встраивания». Коды для встраивания выглядят следующим образом:

<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.

Используйте Page Builder Sandwich для добавления контента с других сайтов прямо во фронтенде

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 упрощает задачу, позволяя редактировать сайт прямо во фронтенде. Используя Page Builder Sandwich, вы легко создаете и редактируете содержимое своего сайта. Встраивать контент с других сайтов также становится намного проще.

С Page Builder Sandwich просто вставьте постоянную ссылку или код для встраивания iframe в любое место во фронтенде вашего сайта, и они сразу же преобразуются во встроенный контент — больше не нужно разбираться, на какую вкладку нужно вставлять код.

Получите Page Builder Sandwich прямо сейчас.