{"id":4909,"date":"2020-06-03T09:36:59","date_gmt":"2020-06-03T09:36:59","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=4909"},"modified":"2020-06-09T12:12:58","modified_gmt":"2020-06-09T12:12:58","slug":"guide-create-a-grid","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/en\/wp-grid-builder\/guide-create-a-grid\/","title":{"rendered":"Guide create a grid"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>&nbsp;<\/p>\n<div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element \" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<div>\n<div class=\"container flex items-center justify-between\">\n<h1 class=\"entry-title\">Create a Grid<\/h1>\n<\/div>\n<\/div>\n<div id=\"article-wrapper\" class=\"container\">\n<p>In this guide, we will show you the main steps to create a fully functional grid. Grid settings provide further options and possibilities which are not presented in this guide. However, all grid settings have descriptions in the admin interface and are self explanatory.<\/p>\n<p>To get started, you need to set which content from WordPress you want to query and display in your grid. You will find, in <strong>Grid Settings &gt; Content Query<\/strong>, 3 types of content:<\/p>\n<ul>\n<li><strong>Post type<\/strong>s (posts, pages, media or custom post type)<\/li>\n<li><strong>Term<\/strong>s (categories, tags or custom taxonomy terms)<\/li>\n<li><strong>User<\/strong>s (WordPress users)<\/li>\n<\/ul>\n<div class=\"wp-block-columns has-3-columns\">\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-source-types-1-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1209\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-source-types-1-1024x576-1.png\" alt=\"Grid settings - Post types source\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Content type \u2013 Post types<\/p>\n<\/div>\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-source-types-2-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1210\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-source-types-2-1024x576-1.png\" alt=\"Grid settings - Terms source\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Content type \u2013 Terms<\/p>\n<\/div>\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-source-types-3-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1211\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-source-types-3-1024x576-1.png\" alt=\"Grid settings - Users source\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Content type \u2013 Users<\/p>\n<\/div>\n<\/div>\n<p>Depending of the selected source, you will find settings to adjust the content displayed in your grid. For example, if you use post type, as source type, you will be able to query posts by taxonomy term(s). Each source has its own settings to fine tune content queried and displayed in the grid.<\/p>\n<p>Gridbuilder \u1d42\u1d3e works with <a href=\"https:\/\/codex.wordpress.org\/Post_Formats\">WordPress post formats<\/a> to handle media in each card (post, term or user).<\/p>\n<p>In <strong>Grid Settings &gt; Media Formats<\/strong>, you will be able to set which media formats are allowed in your cards. It means that you can allow or not gallery, audio or video formats.<\/p>\n<p><strong>Gridbuilder \u1d42\u1d3e can automatically fetch the first media in the post content<\/strong> according to the post format. If you want a such behaviour, you need to enable the option <strong>First Media Content<\/strong><\/p>\n<div class=\"wp-block-columns has-2-columns\">\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/first-media-content-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1214\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/first-media-content-1024x576-1.png\" alt=\"First media content\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>First media content<\/p>\n<\/div>\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/04\/post-audio-format-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-893\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/04\/post-audio-format-1024x576-1.png\" alt=\"Post audio format\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Post audio format<\/p>\n<\/div>\n<\/div>\n<p>Otherwise, <strong>you can set media format and media content in<\/strong><strong>preview mode<\/strong> in your grid settings. In preview mode, each grid item has a settings button to edit the post, user or term.<\/p>\n<div class=\"wp-block-columns has-2-columns\">\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-preview-mode-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1216\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-preview-mode-1024x576-1.png\" alt=\"Grid settings - Preview mode\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Grid settings \u2013 Preview mode<\/p>\n<\/div>\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/04\/grid-settings-preview-mode-media-formats-1024x576-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-920\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/04\/grid-settings-preview-mode-media-formats-1024x576-1.jpg\" alt=\"Preview mode - Media format\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Preview mode \u2013 Media format<\/p>\n<\/div>\n<\/div>\n<p>When you set up a media format in preview mode this applies to the post\/user\/term. So, these settings will be used in all grids because it\u2019s attached to a post\/user\/term custom field.<\/p>\n<p>Once you have set content to display in your grid, you need to set the type of layout of your grid. There are 3 types of layout:<\/p>\n<ul>\n<li><strong>Masonry<\/strong>: This layout applies a number of columns to each item and keep natural heights according to image aspect ratio and content length.<\/li>\n<li><strong>Metro<\/strong>: This layout applies a number of columns and rows to each item. So, in most of cases it will crop images and it cuts content which overflows.<\/li>\n<li><strong>Justified<\/strong>: This layout applies an average row height to each item and keep natural width of images. It preserves image aspect ratio but it cuts content which overflows.<\/li>\n<\/ul>\n<div class=\"wp-block-columns has-2-columns\">\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-grid-layout-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1218\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-grid-layout-1024x576-1.png\" alt=\"Grid settings - Grid layout\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Grid settings \u2013 Grid layout<\/p>\n<\/div>\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/04\/grid-settings-preview-mode-card-style-1024x576-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-921\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/04\/grid-settings-preview-mode-card-style-1024x576-1.jpg\" alt=\"Preview mode - Card style\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Preview mode \u2013 Card style<\/p>\n<\/div>\n<\/div>\n<p>Each type of layout has its own settings like the number of columns, the row height, etc.<\/p>\n<p><strong>In preview mode, you will be able to set the number of columns and rows of each post\/user\/term<\/strong>. These settings will be used in all grids because it\u2019s attached to a post\/user\/term custom field.<\/p>\n<p>In <strong>Grid Settings &gt; Card styles<\/strong> you will be able to assign card(s) to your grid. If you use as source type Post Type, you will be able to assign cards per post type and per post format.<\/p>\n<div class=\"wp-block-columns has-2-columns\">\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-card-styles-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1220\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2020\/04\/grid-settings-card-styles-1024x576-1.png\" alt=\"Grid settings - Card styles\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Grid settings \u2013 Card styles<\/p>\n<\/div>\n<div class=\"wp-block-column\">\n<p><a href=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/04\/grid-settings-cards-selector-1024x576-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-927\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/04\/grid-settings-cards-selector-1024x576-1.png\" alt=\"Grid settings - Cards selector\" width=\"1024\" height=\"576\" \/><\/a><\/p>\n<p>Grid settings \u2013 Cards selector<\/p>\n<\/div>\n<\/div>\n<p><strong>A card corresponds to a Grid Style (Masonry, Justified or Metro). Masonry cards can only be used with a Masonry grid style.<\/strong> This restriction is due to the fact that Justified and Metro styles constrain cards in height. So, it\u2019s not possible to have content above or under the thumbnail like with a Masonry card. Otherwise content will overflow.<br \/>\nHowever, Justified and Metro cards can be used with any kind of grid style.<\/p>\n<p>That\u2019s it, you\u2019ve just created and set up a grid. Now, your grid needs to be inserted in your page thanks to <a href=\"https:\/\/the7kennisbank.nl\/wp-grid-builder\/resources\/shortcodes-blocks-widgets\/\">shortcode<\/a> or <a href=\"https:\/\/the7kennisbank.nl\/wp-grid-builder\/resources\/shortcodes-blocks-widgets\/\">Gutenberg block<\/a><\/p>\n<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>&nbsp;<\/p>\n","protected":false},"author":2,"featured_media":5011,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[44,52,43],"tags":[],"class_list":["post-4909","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-documentation","category-guides","category-wp-grid-builder","category-44","category-52","category-43","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=4909"}],"version-history":[{"count":11,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4909\/revisions"}],"predecessor-version":[{"id":6096,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/4909\/revisions\/6096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/5011"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=4909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=4909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=4909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}