{"id":1264,"date":"2016-11-27T17:36:35","date_gmt":"2016-11-27T16:36:35","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=1264"},"modified":"2017-10-01T09:09:55","modified_gmt":"2017-10-01T07:09:55","slug":"the-anathomy-of-a-home-or-landingpage","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/11\/27\/the-anathomy-of-a-home-or-landingpage\/","title":{"rendered":"The &#8216;anathomy&#8217; of a home- or landingpage"},"content":{"rendered":"<p><strong>With the initial development of WordPress as a blogging platform, the &#8216;anathomy&#8217; of the homepage was structured around a list of blogposts. With the changing application needs from users, the structure of a home- or landingpage can have many more variations.<\/strong><!--more--><\/p>\n<p>Basicly WordPress offers posts and pages. Posts can be displayed as &#8216;summaries&#8217; on one page or as individual posts. Pages are single content containers, posts are timeline based content components. If you build any specific application with the use of custom post types, the same &#8216;rules&#8217; for posts are applied for custom post types, together with their taxonomies.<\/p>\n<h3>Base choice<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-1273\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/homepage-ez.jpg\" alt=\"homepage-ez\" width=\"109\" height=\"288\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-1322\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/colbaltapps.jpeg\" alt=\"colbaltapps\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/colbaltapps.jpeg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/colbaltapps-150x150.jpeg 150w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/>The base choice for the homepage is either to display blogposts in some kind of list order of to display a static page. In the years theme developers tried to develop workarounds to make other homepage structures. Most solutions were based on creating\u00a0extra widget areas to be used on the homepage. One of our most favorite solutions was the EZ feature in <a href=\"https:\/\/cobaltapps.com\/downloads\/dynamik-website-builder\/\" target=\"_blank\">Dynamik Website Builder<\/a> from Cobaltapps. Dynamik is a childtheme with the Genesis framework and offered a very flexible solution the customize the homepage differently with various content components. Each of the blocks shown in the left example is a widget area in which any kind of widget could be placed to display any content.<\/p>\n<h3>Featured Page widget<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-1275\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/genesis-featured-page.jpg\" alt=\"genesis-featured-page\" width=\"275\" height=\"409\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/genesis-featured-page.jpg 343w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/genesis-featured-page-202x300.jpg 202w\" sizes=\"auto, (max-width: 275px) 100vw, 275px\" \/>With the Genesis Featured Page widget any page could be shown in any of the pre-made widgets areas on the homepage. This solution works\u00a0fine for many applications. But their are some limitations. First of al the number of possible widgets is fixed. In this case the maximum is a grid size of 3 x 3 widgets. It is not easy to make extra rows or columns, since this is &#8216;just&#8217; a fixed solution within the Dynamik childtheme. We have used it many years and we could (kind of) live with that limitation. You have to set all paramters for each widget individually, there are no &#8216;global&#8217; settings avaiable for displaying the featured pages on the homepage grid.<\/p>\n<blockquote><p>This solution is often called &#8216;widgetized homepage&#8217;<\/p><\/blockquote>\n<h3>Beaver Builder<\/h3>\n<p>With the arrival of Beaver Builder, pages became even more flexibel and could be created with more flexibility without the use of widgets. The rows and columns concept offers great flexibility without touching one line of code to add an extra columns (up until 6) if that would be required in some case at any moment.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1280\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/bb-layout.jpg\" alt=\"bb-layout\" width=\"1440\" height=\"830\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/bb-layout.jpg 1440w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/bb-layout-300x173.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/bb-layout-768x443.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/bb-layout-1024x590.jpg 1024w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p>In the example above one row has been created with four &#8216;<strong>Callout<\/strong>&#8216; columns. Each of the columns must be adjusted\u00a0with content individually, the &#8216;Read More&#8217; button could link\u00a0to a static page with more details. Although much more flexible, still there are no global settings to do this on a choice of pages.<\/p>\n<h3>Content Grid<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1302 alignright\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/posts-grid-3.jpg\" alt=\"posts-grid-3\" width=\"426\" height=\"262\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/posts-grid-3.jpg 1079w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/posts-grid-3-300x185.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/posts-grid-3-768x473.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/posts-grid-3-1024x630.jpg 1024w\" sizes=\"auto, (max-width: 426px) 100vw, 426px\" \/>On this website we use the &#8216;Content Grid&#8217; block from the <a href=\"https:\/\/wpbeaveraddons.com\/\" target=\"_blank\">PowerPack add-on<\/a>. This is a very powerful module, since it can handle various types of content and all global settings can be set of the whole grid.<\/p>\n<p>On our homepage the content grid populates our blogposts in a 3 x 2 grid (3 columns, 2 rows). Many paramters can be set globally for al individual &#8216;boxes&#8217;:<\/p>\n<ul>\n<li>ordering type<\/li>\n<li>ordering flow (descending, ascending)<\/li>\n<li>offset (with which post to start)<\/li>\n<li>display specific posts<\/li>\n<li>display posts with specific categories<\/li>\n<li>display posts with specific tags<\/li>\n<li>display posts from specific authors<\/li>\n<\/ul>\n<p>Also control over &#8216;how&#8217;\u00a0(metadata) content can be displayed:<\/p>\n<ul>\n<li>using content of the excerpt of specific length of the content<\/li>\n<li>settings for the &#8216;read \u00a0more&#8217; button<\/li>\n<li>featured image settings<\/li>\n<li>meta data settings<\/li>\n<\/ul>\n<h3>Pages<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-344\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/07\/beaveraddons-logo-150x150.jpg\" alt=\"beaveraddons-logo-150x150\" width=\"150\" height=\"150\" \/>If you would like to display (part of) pages on your homepage, this module is also very powerful. In standard mode it &#8216;just&#8217; displays the page in the order you created them. But you can influence the order by selecting\u00a0pages individually in the filter row &#8216;<strong>Pages<\/strong>&#8216;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1318\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-settings.jpg\" alt=\"content-grid-settings\" width=\"1440\" height=\"833\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-settings.jpg 1440w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-settings-300x174.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-settings-768x444.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-settings-1024x592.jpg 1024w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p>Choose &#8216;<strong>Pages<\/strong>&#8216; in Post Type for setting the page content in the grid. The <strong>Filter<\/strong> settings offer you the power to set any specific order of the page (summary) display in the grid. In that way you can determine which pages you want on your homepage to get the best attention of the main content you want to display.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1320\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-pages.jpg\" alt=\"content-grid-pages\" width=\"1440\" height=\"835\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-pages.jpg 1440w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-pages-300x174.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-pages-768x445.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/content-grid-pages-1024x594.jpg 1024w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>With the initial development of WordPress as a blogging platform, the &#8216;anathomy&#8217; of the homepage was structured around a list of blogposts. With the changing application needs from users, the structure of a home- or landingpage can have many more variations.<\/p>","protected":false},"author":2,"featured_media":344,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,3],"tags":[61,5,51,48],"class_list":["post-1264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-review","category-test","tag-contactgrid","tag-dynamik","tag-genesis","tag-powerpack"],"_links":{"self":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/comments?post=1264"}],"version-history":[{"count":3,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1264\/revisions"}],"predecessor-version":[{"id":1338,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1264\/revisions\/1338"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media\/344"}],"wp:attachment":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media?parent=1264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/categories?post=1264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/tags?post=1264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}