{"id":54718,"date":"2024-04-07T13:52:00","date_gmt":"2024-04-07T11:52:00","guid":{"rendered":"https:\/\/wp-web.design\/?page_id=54718"},"modified":"2026-05-10T09:46:16","modified_gmt":"2026-05-10T07:46:16","slug":"above-the-fold-how-to-receive-visitors-on-your-homepage","status":"publish","type":"blog","link":"https:\/\/netzwerk.design\/en\/blog\/above-the-fold-wie-empfangen-sie-besucher-auf-ihrer-startseite\/","title":{"rendered":"Above the fold - How do you receive visitors on your homepage?"},"content":{"rendered":"<p class=\"gb-text gb-text-e4072b28\">Good web design today places great value on a clear and simple design of the user interface (UI) and user experience (UX). Otherwise, visitors will quickly leave the website, a lost opportunity to convince and win over customers with your own content (quality content).<\/p>\n\n\n\n<div class=\"gb-element-83225004 alignfull\">\n<h2 id=\"above-the-fold\" class=\"gb-text-f01f16af\"><span class=\"gb-shape\"><svg viewbox=\"0 0 64 64\" height=\"1em\" width=\"1em\" style=\"vertical-align: -0.125em;\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M57.247 24.222c.973-2.628 1.254-5.134.555-7.383c-.322.029-.656.044-.998.044C46.562 16.883 28.46 4.006 27.09 2C21.445 10.223 9.613 16.545 4.265 23.635c-2.164 2.869-3.246 5.004-1.093 8.286l22.549 28.973c1.017 1.377 3.01 1.489 4.429.219c0 0 18.492-23.729 31.851-31.071c-1.004-1.961-2.675-3.918-4.754-5.82M25.328 54.754l-.094.065l-.085.074a5.768 5.768 0 0 0-.912 1.041L4.699 30.831c-1.407-2.177-1.008-3.323 1.063-6.067c2.349-3.113 6.103-6.135 10.078-9.334c4.132-3.326 8.388-6.75 11.514-10.646c5.16 4.246 19.593 13.621 28.932 13.964c1.12 10.997-21.682 29.536-30.958 36.006\" fill=\"currentColor\"><\/path><path d=\"m19.993 14.158l25.205 19.75l.898-.804L20.649 13.57zm8.214 10.513l-10.316-8.632s-3.59 2.292-7.938 7.319l9.152 9.462l9.102-8.149M5.606 28.06l19.468 23.861l3.595-3.217L7.913 24.973s-1.809.979-2.307 3.087m21.814 1.368l11.309 10.27l3.593-3.217l-11.775-9.852zm-6.254 5.599l10.377 11.104l3.592-3.216l-10.842-10.687zm6.691-24.271l-1.525 4.282l.956.696l4.855-4.347l-.95-.598l-3.345 2.995l1.479-4.174l-.992-.626l-4.627 4.142l.829.603zm4.155 8.423l.926-.831l-2.825-2.008l1.281-1.146l2.509 1.718l.891-.799l-2.537-1.694l1.058-.946l2.809 1.817l.912-.815l-3.884-2.452l-4.918 4.403zm3.009 2.192l3.839-2.325l1.257-.796l-.834 1.078l-2.47 3.351l1.193.869l7.388-3.799l-1.402-.885l-4.051 2.318l-1.034.626l.694-.913l2.401-3.287l-1.348-.85l-3.745 2.321l-.995.629l.685-.871l2.268-3.207l-1.264-.798l-3.661 5.753zm13.886.334c-.909-.571-1.758-.844-2.552-.828c-.788.017-1.434.254-1.943.71c-.559.5-.747 1.019-.563 1.557c.108.323.452.79 1.039 1.408l.607.638c.362.376.595.684.697.92c.1.239.051.448-.146.624c-.337.301-.776.358-1.315.174a3.844 3.844 0 0 1-.938-.515c-.57-.406-.847-.797-.84-1.174c.004-.206.117-.442.338-.708l-1.311-.914c-.591.529-.815 1.119-.667 1.774c.149.661.656 1.313 1.536 1.955c.877.643 1.75.987 2.608 1.025c.867.037 1.581-.191 2.131-.686c.54-.482.732-1 .578-1.551c-.098-.353-.373-.764-.817-1.232l-.995-1.05c-.379-.396-.605-.671-.682-.828c-.12-.239-.077-.45.13-.634c.225-.202.513-.284.865-.249c.357.035.729.178 1.118.428c.353.228.602.464.741.708c.215.368.155.723-.175 1.06l1.477.973c.614-.592.806-1.219.577-1.878c-.224-.653-.725-1.223-1.498-1.707\" fill=\"currentColor\"><\/path><\/svg><\/span><span class=\"gb-text\">Above the Fold<\/span><\/h2>\n\n\n\n<p class=\"gb-text gb-text-5bc49885\">The \"above the fold\" area on a website plays a special role in the first contact with the visitor and their \"tuning in\" to the entire website. The term \"above the fold\" originates from the print media. Newspapers were the fastest way to disseminate and receive information far and wide. As can be seen in the photo in the article, a common distribution channel for newspapers was newsstand sales. Newspapers are folded once and the top half of the front page is prominently displayed on the newsstand. This is the \"lead story\" for this issue. The title is correspondingly large-format and informative. This area above the fold decides whether or not the newspaper is bought that day. Everything in this upper half of the title is referred to as \"above the fold\".<\/p>\n\n\n\n<p class=\"gb-text gb-text-c843139f\">The term and its meaning can be applied to a website, because the \"above the fold\" of a website is the area that is immediately in the visitor's field of vision. The design and content of this area are therefore particularly important in web development. How do you welcome your visitors on your homepage?<\/p>\n<\/div>\n\n\n\n<h2 id=\"der-pagehero-schlussel-zum-ersten-eindruck\" class=\"gb-text gb-text-7c3dceff\">The \"Page Hero\" - key to the first impression<\/h2>\n\n\n\n<p class=\"gb-text\">The \"above the fold\" area or \"page hero\" plays a crucial role in the first impression your website makes on visitors. It should be carefully designed to attract visitors' attention and encourage them to stay on the page and explore it further.<\/p>\n\n\n\n<h3 id=\"kriterien-fur-die-gestaltung-des-pagehero\" class=\"gb-text\">Criteria for the design of the Page Hero<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Meaningful and appealing headline\n<ul class=\"wp-block-list\">\n<li>The headline should be clear and concise and immediately convey to visitors what the page is about. It should arouse curiosity and encourage further reading.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Visually appealing graphics, background image or video\n<ul class=\"wp-block-list\">\n<li>A high-quality image or a short video can attract the attention of visitors. Make sure that the visual element is relevant and of high quality to convey professionalism.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Short and concise text\n<ul class=\"wp-block-list\">\n<li>Summarise the core message in a few sentences. The text should be easy to understand and appealing in order to arouse the interest of visitors.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Clear call-to-actions (CTAs)\n<ul class=\"wp-block-list\">\n<li>Place highly visible CTAs in the page hero area. These calls to action should encourage visitors to take a specific action, such as making a purchase, signing up for a newsletter or finding out more about your offer.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Consistent design\n<ul class=\"wp-block-list\">\n<li>Use colours, fonts and design elements that match your brand image. A consistent design strengthens the recognisability and trust of visitors.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 id=\"funktionelle-elemente-des-pagehero\" class=\"gb-text\">Functional elements of the Page Hero<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigation menu\n<ul class=\"wp-block-list\">\n<li>A well-structured and easily accessible navigation menu makes it easier for visitors to find their way around your website and improves the user experience.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Search bar if required\n<ul class=\"wp-block-list\">\n<li>A prominently placed search bar allows visitors to quickly and easily find the information they are looking for.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Contact information\n<ul class=\"wp-block-list\">\n<li>Offer direct contact options such as a telephone number, email address or live chat to facilitate communication with visitors.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Social media links\n<ul class=\"wp-block-list\">\n<li>Integrate links to your social media profiles to give visitors more opportunities to interact with your brand and stay up to date.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Language selection\n<ul class=\"wp-block-list\">\n<li>If your website is internationally orientated, you should offer an easily accessible language selection to improve the user experience for visitors from different countries.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 id=\"fazit\" class=\"gb-text-517bed22\"><span class=\"gb-shape\"><svg viewbox=\"0 0 64 64\" height=\"1em\" width=\"1em\" style=\"vertical-align: -0.125em;\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M57.247 24.222c.973-2.628 1.254-5.134.555-7.383c-.322.029-.656.044-.998.044C46.562 16.883 28.46 4.006 27.09 2C21.445 10.223 9.613 16.545 4.265 23.635c-2.164 2.869-3.246 5.004-1.093 8.286l22.549 28.973c1.017 1.377 3.01 1.489 4.429.219c0 0 18.492-23.729 31.851-31.071c-1.004-1.961-2.675-3.918-4.754-5.82M25.328 54.754l-.094.065l-.085.074a5.768 5.768 0 0 0-.912 1.041L4.699 30.831c-1.407-2.177-1.008-3.323 1.063-6.067c2.349-3.113 6.103-6.135 10.078-9.334c4.132-3.326 8.388-6.75 11.514-10.646c5.16 4.246 19.593 13.621 28.932 13.964c1.12 10.997-21.682 29.536-30.958 36.006\" fill=\"currentColor\"><\/path><path d=\"m19.993 14.158l25.205 19.75l.898-.804L20.649 13.57zm8.214 10.513l-10.316-8.632s-3.59 2.292-7.938 7.319l9.152 9.462l9.102-8.149M5.606 28.06l19.468 23.861l3.595-3.217L7.913 24.973s-1.809.979-2.307 3.087m21.814 1.368l11.309 10.27l3.593-3.217l-11.775-9.852zm-6.254 5.599l10.377 11.104l3.592-3.216l-10.842-10.687zm6.691-24.271l-1.525 4.282l.956.696l4.855-4.347l-.95-.598l-3.345 2.995l1.479-4.174l-.992-.626l-4.627 4.142l.829.603zm4.155 8.423l.926-.831l-2.825-2.008l1.281-1.146l2.509 1.718l.891-.799l-2.537-1.694l1.058-.946l2.809 1.817l.912-.815l-3.884-2.452l-4.918 4.403zm3.009 2.192l3.839-2.325l1.257-.796l-.834 1.078l-2.47 3.351l1.193.869l7.388-3.799l-1.402-.885l-4.051 2.318l-1.034.626l.694-.913l2.401-3.287l-1.348-.85l-3.745 2.321l-.995.629l.685-.871l2.268-3.207l-1.264-.798l-3.661 5.753zm13.886.334c-.909-.571-1.758-.844-2.552-.828c-.788.017-1.434.254-1.943.71c-.559.5-.747 1.019-.563 1.557c.108.323.452.79 1.039 1.408l.607.638c.362.376.595.684.697.92c.1.239.051.448-.146.624c-.337.301-.776.358-1.315.174a3.844 3.844 0 0 1-.938-.515c-.57-.406-.847-.797-.84-1.174c.004-.206.117-.442.338-.708l-1.311-.914c-.591.529-.815 1.119-.667 1.774c.149.661.656 1.313 1.536 1.955c.877.643 1.75.987 2.608 1.025c.867.037 1.581-.191 2.131-.686c.54-.482.732-1 .578-1.551c-.098-.353-.373-.764-.817-1.232l-.995-1.05c-.379-.396-.605-.671-.682-.828c-.12-.239-.077-.45.13-.634c.225-.202.513-.284.865-.249c.357.035.729.178 1.118.428c.353.228.602.464.741.708c.215.368.155.723-.175 1.06l1.477.973c.614-.592.806-1.219.577-1.878c-.224-.653-.725-1.223-1.498-1.707\" fill=\"currentColor\"><\/path><\/svg><\/span><span class=\"gb-text\">Conclusion<\/span><\/h2>\n\n\n\n<p class=\"gb-text\">By carefully designing the page hero and integrating functional elements, you can attract the attention of your visitors and create a positive user experience. This not only contributes to customer acquisition, but also improves the SEO ranking of your website by increasing user interaction and dwell time.<\/p>\n\n\n\n<p class=\"gb-text\">I attach great importance to the \"above the fold\" area when designing a website. Even for a redesign and relaunch of an existing website, this area is both the key and the starting point for the design and structure of the entire subsequent website.<\/p>\n\n\n\n<p class=\"gb-text gb-text-7b698aaf\">If you want to have your website revised:<\/p>\n\n\n\n<a class=\"gb-text button-cta gb-text-5048d4b5\" href=\"\/en\/contact\/\">Please contact me<\/a>","protected":false},"excerpt":{"rendered":"<p>In the analogue newspaper world, the term \"above the fold\" refers to the area visible on the folded newspaper. What does this have to do with user experience?<\/p>","protected":false},"featured_media":117694,"template":"","meta":{"_acf_changed":false,"_seopress_titles_title":"Above the fold \u2013 Besucher auf der Startseite gut empfangen","_seopress_titles_desc":"Der Begriff Above the fold bezeichnet in der analogen Zeitungswelt den auf der gefalteten Zeitung sichtbaren Bereich.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"above the fold,user experience,ui,ue","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":{"85852":{"rich_snippets_lb":{"opening_hours":[{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}},{"am":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}},"pm":{"start":{"hours":"00","mins":"00"},"end":{"hours":"00","mins":"00"}}}]}}},"_nd_vani_enabled":false,"footnotes":""},"class_list":["post-54718","blog","type-blog","status-publish","has-post-thumbnail","hentry","infinite-scroll-item"],"acf":[],"_links":{"self":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog\/54718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/types\/blog"}],"version-history":[{"count":0,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/blog\/54718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/media\/117694"}],"wp:attachment":[{"href":"https:\/\/netzwerk.design\/en\/wp-json\/wp\/v2\/media?parent=54718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}