Ιστολόγιο

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. Γιατί; Επειδή παλαιότερα, όταν η ανθρωπότητα είχε αυτά τα πράγματα που ονομάζονταν εφημερίδες, συνήθως διπλώνονταν στη μέση, ώστε μόνο το επάνω μέρος να είναι άμεσα ορατό. Αυτό το επάνω τμήμα ή τμήμα «above the fold» περιείχε τον/τους πιο σημαντικό/ούς τίτλο/ους της ημέρας και στη συνέχεια, όταν την ξεδιπλώνατε, βλέπατε τους υπόλοιπους λιγότερο σημαντικούς τίτλους. Παρομοίως στους ιστότοπους, το επάνω μέρος του ιστοτόπου σας είναι το πρώτο πράγμα που βλέπουν οι άνθρωποι και στη συνέχεια, καθώς κάνετε κύλιση προς τα κάτω, βλέπετε τον υπόλοιπο ιστότοπο, όπως ακριβώς ξεδιπλώνετε μια εφημερίδα.

Μένοντας στο παράδειγμα της εφημερίδας, ας υποθέσουμε ότι περπατάτε στον δρόμο και βλέπετε έναν εφημεριδοπώλη. Όταν βλέπετε την εφημερίδα, αν ο τίτλος είναι ενδιαφέρων, μπορεί απλώς να αγοράσετε την εφημερίδα για να δείτε τα υπόλοιπα. Αυτό είναι ουσιαστικά το ίδιο και με τους ιστότοπους: αν οι επισκέπτες περάσουν από τον ιστότοπό σας και βρουν το περιεχόμενο above the fold ενδιαφέρον, τότε μπορεί απλώς να πειστούν και να κάνουν κύλιση προς τα κάτω ή να δουν τον υπόλοιπο ιστότοπό σας για να μάθουν περισσότερα.

Η έρευνα του Nielsen

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.

Αυτό είναι λογικό, καθώς το επάνω μέρος ενός ιστοτόπου είναι το πρώτο πράγμα που βλέπετε.

Γνωρίζοντας λοιπόν πόσο σημαντικό είναι το περιεχόμενο above the fold της αρχικής σας σελίδας, τι πρέπει να βάλετε στο επάνω μέρος του ιστοτόπου σας;

Μπείτε κατευθείαν στο θέμα

Δηλώστε αμέσως ποιο είναι το θέμα του ιστοτόπου σας. Η αρχική σας σελίδα και η περιοχή above the fold είναι η καρδιά ολόκληρου του ιστοτόπου σας. Αν οι επισκέπτες σας νιώσουν χαμένοι, θα αποχωρήσουν γρήγορα και θα κλείσουν την καρτέλα. Αν είστε νέος συγγραφέας βιβλίων, γράψτε ότι είστε συγγραφέας και παρουσιάστε το τελευταίο σας βιβλίο. Αν είστε διοργανωτής γάμων, γράψτε ότι είστε διοργανωτής γάμων που θα χαρίσει στον επισκέπτη σας τον πιο αξέχαστο γάμο που είχε ποτέ. Ή αν δημιουργείτε έναν ιστότοπο για το μικρό σας ξενοδοχείο, γράψτε ότι είστε το καλύτερο bed and breakfast στην πόλη. (Θα χρησιμοποιήσω αυτά τα παραδείγματα περισσότερο παρακάτω.)

Οι επισκέπτες σας δεν θα πρέπει να μαντεύουν περί τίνος πρόκειται ο ιστότοπος. Θα πρέπει να το καταλαβαίνουν αμέσως· μόνο τότε θα κάνουν κύλιση προς τα κάτω για να δουν περισσότερες λεπτομέρειες.

Προσελκύστε στοχευμένα τους επισκέπτες σας

Στη συνέχεια, πρέπει να σκεφτείτε τον πραγματικό σκοπό του ιστοτόπου σας. Ποιος είναι ο λόγος δημιουργίας του ιστοτόπου σας εξαρχής; Όποιος κι αν είναι ο λόγος, πρέπει να τον συμπεριλάβετε επίσης above the fold.

Ας πάρουμε τα λίγα παραδείγματα που ανέφερα παραπάνω. Για έναν νέο συγγραφέα βιβλίων, πιθανότατα θα θέλετε περισσότερη προβολή. Αν έχετε ένα δωρεάν ebook, μπορείτε να τοποθετήσετε ένα κουμπί για να το κατεβάσουν οι επισκέπτες σας. Για τον διοργανωτή γάμων, θα θέλετε οι άνθρωποι να επικοινωνήσουν μαζί σας για τις υπηρεσίες σας, οπότε βάλτε τον αριθμό του τηλεφώνου σας ή μια φόρμα επικοινωνίας. Ή για το μικρό ξενοδοχείο, βάλτε μια φόρμα κράτησης μαζί με τον αριθμό του τηλεφώνου σας.

Για το Page Builder Sandwich, θέλω οι άνθρωποι να γνωρίσουν καλύτερα το πρόσθετο και τελικά να γίνουν πελάτες. Έτσι, έχω ένα κουμπί εκεί που επιτρέπει στους επισκέπτες να δοκιμάσουν αμέσως το demo και ένα άλλο κουμπί για να αγοράσουν το πρόσθετο.

Σχεδιασμός του above the fold

Τώρα που ξέρουμε τι να βάλουμε, ήρθε η ώρα να αποφασίσουμε για τον σχεδιασμό. Προσωπικά, προτιμώ καθαρό, χωρισμένο σε ενότητες περιεχόμενο, εξ ου και το μονόχρωμο φόντο στην αρχική μας σελίδα. Αλλά είναι επίσης καλή ιδέα να συνοδεύσετε το περιεχόμενο above the fold με μια εικόνα ή ένα βίντεο για να το κάνετε πιο ζωντανό.

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.

Συμπέρασμα

Η δημιουργία περιεχομένου above the fold για την αρχική σας σελίδα δεν είναι δύσκολη, αλλά απαιτεί λίγη σκέψη και δοκιμές για να γίνει σωστά. Αν έχετε ήδη έναν ιστότοπο και είστε ικανοποιημένοι με αυτόν, αλλά έχετε υψηλό ποσοστό εγκατάλειψης στο Google Analytics, τότε σας ενθαρρύνω να προσπαθήσετε να ξανασκεφτείτε το περιεχόμενό σας above the fold με τις παραπάνω συμβουλές.

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.

Οι μόνιμοι σύνδεσμοι (permalinks) έχουν πολλές μορφές και σχήματα, αλλά συνήθως μοιάζουν όπως αυτό παρακάτω. Αυτό προέρχεται από το 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 για να προσθέσετε περιεχόμενο από άλλους ιστότοπους από το Frontend

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 τώρα.