{"id":20399,"date":"2020-09-14T13:21:40","date_gmt":"2020-09-14T13:21:40","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=20399"},"modified":"2023-06-02T07:57:31","modified_gmt":"2023-06-02T07:57:31","slug":"jetgridbuilder-settings-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/","title":{"rendered":"Posts Grid Builder Widget Overview"},"content":{"rendered":"\n<p>JetGridBuilder plugin allows users to create impressive posts and terms grids in the Elementor page builder. With its help, you can manually change the size, positions, and appearance of every post in the grid. JetGridBuilder is highly flexible and allows you to customize the grid any way you like. Let\u2019s take a closer look at the features that give you such a wide range of tools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"title1\">How to add the grid to the page<\/h2>\n\n\n\n<p>After downloading the JetGridBuilder plugin, go to your website\u2019s WP Dashboard and open Plugins > Add New. Click the \u201cUpload Plugin\u201d and \u201cChoose File\u201d buttons, select the downloaded ZIP archive with the plugin, and then hit \u201c<strong>Install Now<\/strong>.\u201d<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/plugin-install.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/plugin-install-2x.png 2x\" alt=\"plugin installation\" class=\"wp-image-20414\"><\/figure><\/div>\n\n\n\n<p>When the installation is over, press the \u201c<strong>Activate Plugin<\/strong>\u201d button. Now JetGritBuilder is ready for work. Go to the <strong>Pages <\/strong>menu tab and select the page where you would like to place the grid. Click the \u201c<strong>Edit with Elementor<\/strong>\u201d button. In the left-side widget menu, find the <strong>Posts Grid Builder<\/strong> and <strong>Terms Grid Builder<\/strong> widgets.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/grid-builder-widget.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/grid-builder-widget-2x.png 2x\" alt=\"Grid Builder widgets\" class=\"wp-image-20404\"><\/figure><\/div>\n\n\n\n<p>Their settings menus are almost the same but the <strong>Posts Grid Builder<\/strong> has more features, so let\u2019s take it as an example. Drag-and-drop it to the page. Before you add some posts, the block will be empty.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/no-posts.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/no-posts-2x.png 2x\" alt=\"Grid Builder without posrs\" class=\"wp-image-20412\"><\/figure><\/div>\n\n\n\n<p>Hit the \u201c<strong>Add Posts<\/strong>\u201d button. In the appeared window, you will see the list of all posts and post types that you created if you have the JetEngine plugin. Select the posts you want to show and press the \u201c<strong>Select<\/strong>\u201d button. The size of every tile and the height of the grid could be easily changed manually.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/grid-resize.webm\"><\/video><\/figure>\n\n\n\n<p>Now you can see the grid, so it is time to go through the settings.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"title2\">Grid settings section<\/h2>\n\n\n\n<p>There are three submenus in the <strong>Content <\/strong>tab. The first of them is the <strong>Grid <\/strong>submenu. When you open it, the first option will be the <strong>Posts <\/strong>feature that allows you to add new posts to the grid any time you need it. Let\u2019s take a look at the other settings.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/grid-settings-1.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/grid-settings-1-2x.png 2x\" alt=\"Grid settings\" class=\"wp-image-20406\"><\/figure><\/div>\n\n\n\n<ul>\n<li><strong>Vertical Compact<\/strong>. When this toggle is not enabled, you can place the post tiles anywhere on the grid. And if you turn it on, the posts will be automatically aligned to the top;<\/li>\n\n\n\n<li><strong>Gutter<\/strong>. In this field you can choose the width of the gap between grid cells;<\/li>\n\n\n\n<li><strong>Number of columns<\/strong>. The min number of columns in the grid is 3 and the max is 50. Between those values, you are free to choose;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/grid-settings-2.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/grid-settings-2-2x.png 2x\" alt=\"Grid settings\" class=\"wp-image-20408\"><\/figure><\/div>\n\n\n\n<ul>\n<li><strong>Items Type<\/strong>. This drop-down menu allows you to choose the general look of the post tiles. If you select the \u201cPost Content\u201d option, the content of the post will be shown right on the tile. The \u201cJetEngine Listing\u201d option gives you an opportunity to choose one of the previously made listings and use its design for the tiles in a grid;<\/li>\n<\/ul>\n\n\n\n<div class=\"attention-banner info-banner\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2018\/12\/information-icon.svg\" alt=\"knowledge base information icon\" width=\"30\" height=\"30\"><strong>NOTE.<\/strong>\nBe aware that the design of the listing will have a higher priority over the styling options in the <strong>Style<\/strong> tab. If you need a unique design, it is better to do it from scratch right in the Style tab.<\/div>\n\n\n\n<ul>\n<li><strong>Items Style<\/strong>. Here you can define some additional appearance options of the post tiles. In the \u201cStandard\u201d view, the thumbnail will be placed over the text info, and in \u201cContent Overlay\u201d mode, the text will be shown over the picture;<\/li>\n\n\n\n<li><strong>Woo Item Type<\/strong>. This and the next feature will be handy if you put the WooCommerce products to the grid. Here you can select to show the items in the way you set using the JetWooBuilder plugin;<\/li>\n\n\n\n<li><strong>Woo Item Style<\/strong>. Here again, you can choose the tiles appearance type \u2013 the one where the thumbnail is shown over the text or the one where information overlays the picture;<\/li>\n\n\n\n<li><strong>Loading Spinner<\/strong>. If you want to show a specific animated icon when the posts are loading, turn this toggle on. You will also be able to choose whether you want to show the spinner only during the loading process. Besides that, you can also select the type of animated icon for it.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"title3\">Post Item settings section<\/h2>\n\n\n\n<p>All the toggles you see in this settings section can show or hide the parts of the post tile and change its layout. For example, if you turn the <strong>Thumbnail <\/strong>toggle off, the featured picture won\u2019t be shown in the tile. And if you enable it, you will also have an opportunity to select its size. That works for each of the post tile parts \u2013 title, description, author, date, etc. Play a little with the switches to decide what layout looks best on your website.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/post-item-settings-1.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/post-item-settings-1-2x.png 2x\" alt=\"Post Item settings\" class=\"wp-image-20416\"><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/post-item-settings-2.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/post-item-settings-2-2x.png 2x\" alt=\"Post Item settings\" class=\"wp-image-20418\"><\/figure><\/div>\n\n\n\n<p>You can also change the order of the tile elements in the <strong><em>Style &gt; Post Item Elements Order<\/em><\/strong> submenu.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/elements-order.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/elements-order-2x.png 2x\" alt=\"Post Items order\" class=\"wp-image-20402\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"title4\">WooCommerce Product settings section<\/h2>\n\n\n\n<p>If you want to create a product grid and use the WooCommerce plugin for your website, this submenu is meant to help you decide on the elements of the tile to be shown. Each toggle can show or hide some parts of the information. For example, if you choose not to show the rating of the product, just turn the <strong>Star Rating<\/strong> toggle off. The order of the elements can be changed in the <strong><em>Style &gt; Post Item Elements Order<\/em><\/strong> submenu.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/woocommerce-product-setings.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/woocommerce-product-setings-2x.png 2x\" alt=\"Woocommerce Product settings\" class=\"wp-image-20422\"><\/figure><\/div>\n\n\n\n<p>When you are done with the settings, proceed to the <strong>Style <\/strong>tab, and create a design that will match your taste and needs. For example, something like that:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/grid-front.webm\"><\/video><\/figure>\n\n\n\n<p>So, that\u2019s all about JetGridBuilder settings. Terms Grid Builder happens to have almost the same list of settings, and the description of those features will match the ones you already read.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JetGridBuilder plugin allows users to create impressive posts and terms grids in the Elementor page builder. With its help, you can manually change the size, positions, and appearance of every post in the grid. JetGridBuilder is highly flexible and allows you to customize the grid any way you like. Let\u2019s take a closer look at [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[490],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetGridBuilder: Full Features Overview | Crocoblock<\/title>\n<meta name=\"description\" content=\"Explore the capabilities of JetGridBuilder, a free JetPlugin for Elementor page builder. Creating impressive posts or terms grid has never been easier.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetGridBuilder: Full Features Overview | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Explore the capabilities of JetGridBuilder, a free JetPlugin for Elementor page builder. Creating impressive posts or terms grid has never been easier.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-02T07:57:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/plugin-install.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/\",\"name\":\"JetGridBuilder: Full Features Overview | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2020-09-14T13:21:40+00:00\",\"dateModified\":\"2023-06-02T07:57:31+00:00\",\"description\":\"Explore the capabilities of JetGridBuilder, a free JetPlugin for Elementor page builder. Creating impressive posts or terms grid has never been easier.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Posts Grid Builder Widget Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetGridBuilder: Full Features Overview | Crocoblock","description":"Explore the capabilities of JetGridBuilder, a free JetPlugin for Elementor page builder. Creating impressive posts or terms grid has never been easier.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/","og_locale":"en_US","og_type":"article","og_title":"JetGridBuilder: Full Features Overview | Crocoblock","og_description":"Explore the capabilities of JetGridBuilder, a free JetPlugin for Elementor page builder. Creating impressive posts or terms grid has never been easier.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/","og_site_name":"Help Center","article_modified_time":"2023-06-02T07:57:31+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/09\/plugin-install.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/","name":"JetGridBuilder: Full Features Overview | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2020-09-14T13:21:40+00:00","dateModified":"2023-06-02T07:57:31+00:00","description":"Explore the capabilities of JetGridBuilder, a free JetPlugin for Elementor page builder. Creating impressive posts or terms grid has never been easier.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetgridbuilder\/jetgridbuilder-settings-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Posts Grid Builder Widget Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/20399"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=20399"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=20399"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=20399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}