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.
Zanim przejdziemy do sedna, warto najpierw dowiedzieć się, jak nazywa się górna część strony głównej. Istnieje na to lepsze określenie niż górna-część-twojej-strony.
„Above the Fold”
Nazywa się to „above the fold” (powyżej linii zgięcia). Dlaczego? Ponieważ w dawnych czasach, gdy ludzie korzystali z czegoś takiego jak gazety, zazwyczaj składano je na pół, przez co od razu widoczna była tylko ich górna część. Ta górna część – czyli „powyżej linii zgięcia” – zawierała najważniejsze nagłówki dnia, a po jej rozłożeniu widoczne były pozostałe, mniej istotne nagłówki. Podobnie jest na stronach internetowych: górna część witryny to pierwsza rzecz, którą widzą użytkownicy, a przewijając w dół, widzą resztę strony, zupełnie jak przy rozkładaniu gazety.
Pozostając przy przykładzie z gazetą: załóżmy, że idziesz ulicą i widzisz sprzedawcę gazet. Kiedy spojrzysz na gazetę i nagłówek wyda ci się interesujący, możesz ją kupić, aby przeczytać resztę. W zasadzie tak samo działa to ze stronami internetowymi – jeśli odwiedzający trafią na twoją stronę i uznają treść powyżej linii zgięcia za interesującą, mogą dać się przekonać i przewinąć w dół lub przejrzeć resztę witryny, aby zobaczyć więcej.
Badania Nielsena
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.
Ma to sens, ponieważ górny obszar strony internetowej to pierwsza rzecz, którą widzisz.
Wiedząc więc, jak ważna jest treść strony głównej powyżej linii zgięcia, co powinno się znaleźć na samej górze witryny?
Przejdź od razu do sedna
Od razu przedstaw, o czym jest twoja strona. Strona główna i obszar powyżej linii zgięcia to siła napędowa całej witryny. Jeśli odwiedzający poczują się zagubieni, szybko zrezygnują i zamkną kartę. Jeśli jesteś początkującym autorem książek, napisz o tym i zaprezentuj swoją najnowszą książkę. Jeśli jesteś konsultantem ślubnym, napisz, że zorganizujesz dla odwiedzającego najbardziej niezapomniany ślub w jego życiu. A jeśli tworzysz stronę dla swojego małego hotelu, napisz, że jesteś najlepszym pensjonatem w mieście. (Użyję tych przykładów poniżej).
Twoi odbiorcy nie powinni zgadywać, o czym jest strona. Powinni to od razu zrozumieć – tylko wtedy przewiną w dół, aby poznać więcej szczegółów.
Świadomie angażuj odbiorców
Następnie musisz pomyśleć o rzeczywistym celu swojej strony internetowej. Jaki jest w ogóle główny powód jej stworzenia? Bez względu na to, jaki to powód, musisz umieścić go również powyżej linii zgięcia.
Weźmy kilka przykładów, o których wspomniałem wyżej. Początkujący autor książki prawdopodobnie będzie chciał zyskać większy rozgłos. Jeśli masz darmowy e-book, możesz umieścić przycisk umożliwiający jego pobranie. W przypadku konsultanta ślubnego zależy ci na tym, aby ludzie kontaktowali się w sprawie usług – umieść numer telefonu lub formularz kontaktowy. Z kolei w przypadku małego hotelu dodaj formularz rezerwacji wraz z numerem telefonu.
W przypadku Page Builder Sandwich chcę, aby ludzie lepiej poznali wtyczkę i docelowo stali się klientami. Dlatego umieściłem tam przycisk, który pozwala odwiedzającym od razu wypróbować wersję demo, oraz drugi przycisk umożliwiający zakup wtyczki.
Projektowanie obszaru above the fold
Skoro wiemy już, co zamieścić, czas zdecydować o projekcie graficznym. Osobiście preferuję przejrzystą treść podzieloną na sekcje, stąd jednolite tło na naszej stronie głównej. Warto jednak uzupełnić treść powyżej linii zgięcia o obraz lub wideo, aby nadać jej więcej życia.
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.
Podsumowanie
Tworzenie treści na stronę główną powyżej linii zgięcia nie jest trudne, ale wymaga nieco przemyśleń i testów, aby zrobić to dobrze. Jeśli masz już stronę i niczego w niej nie zmieniasz, ale notujesz wysoki współczynnik odrzuceń w Google Analytics, zachęcam do ponownego przemyślenia treści w sekcji above the fold w oparciu o powyższe wskazówki.
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.
Now you can download the Lite version of Page Builder Sandwich from the 
Z przyjemnością ogłaszam, że od wersji 2.4 możesz edytować swoje treści bezpośrednio na frontendzie za pomocą Markdown!
W zeszłym tygodniu wydaliśmy wersję 2.1, która naprawiła wiele błędów i dodała okno edytora linków WordPressa do Page Builder Sandwich.
Szczęśliwego Nowego Roku dla wszystkich!
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