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

Ол «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.

Басқа сайттардан мазмұнды сайттың алдыңғы бетінен (Frontend) қосу үшін 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 нақты сайтыңызды толығымен алдыңғы интерфейстен (frontend) өңдеуге мүмкіндік беру арқылы істі жеңілдетеді. Page Builder Sandwich пайдаланған кезде сайт мазмұнын оңай жазып, өңдейсіз. Басқа сайттардан мазмұнды ендіру де әлдеқайда оңай болады.

Page Builder Sandwich көмегімен сайттың көрінетін бетінің кез келген жеріне тұрақты сілтемені немесе iframe ендіру кодын қойсаңыз болғаны, ол бірден ендірілген мазмұнға айналады, бұдан былай мазмұнды қай қойындыға қою керектігін іздеп отырудың қажеті жоқ.

Page Builder Sandwich-ті қазір алыңыз.