{"id":31328,"date":"2022-01-02T10:46:00","date_gmt":"2022-01-02T08:46:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=31328"},"modified":"2026-09-25T14:12:05","modified_gmt":"2026-09-25T11:12:05","slug":"customize-layout-loop","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/customize-layout-loop\/","title":{"rendered":"Customize the layout of a Loop Grid"},"content":{"rendered":"<!-- Original article: https:\/\/elementor.com\/help\/customize-layout-loop\/ -->\n\n<p class=\"wp-block-paragraph\">Loop Grid allows you to build highly customized lists of posts, helping give your site a unique look.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After building a Loop Grid, you can customize how the entries will appear.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Determine the Loop Grid layout<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li><p>Select the Loop Grid. It is probably easiest to access the Loop Grid using the Structure window.<\/p><\/li><li><p>Go to the <strong>Content <\/strong>tab<\/p><\/li><li><p>Open the <strong>Layout <\/strong>section.&nbsp;<\/p><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/636514c4e86c005604e161356c6c8663.png\" alt=\"loop-grid-layout\" data-alt=\"loop-grid-layout\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><p>Under Layout you can:<\/p><ul class=\"\"><li><p>Switch to an existing different loop template.<br><\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/ffd28ad83cf08b98479b98b9ce09f281.png\" alt=\"loop-grid-layout-2\" data-alt=\"loop-grid-layout-2\"><\/figure><ul class=\"\"><li><p>Using the <strong>Choose a template <\/strong>textbox, type in the name of the loop you want to use and then select if from the dropdown menu.&nbsp;&nbsp;&nbsp;<\/p><\/li><\/ul><\/li><li><p>Change the number of columns on the page.<br><\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/4a50c1caa2838be2d6327886fd843275.png\" alt=\"loop-grid-layout-3\" data-alt=\"loop-grid-layout-3\"><\/figure><ul class=\"\"><li><p>This will affect the number of posts\\listings your users will see in each row. You can use this in conjunction with limiting the number of items per page (see below) to adjust the design. We recommend trying a few different combinations to see which is best for you.<\/p><\/li><\/ul><\/li><li><p>Set how many items will appear on a page.<br><\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/3dd3fd38b343234b33844deaf8eceb68.png\" alt=\"loop-grid-layout-4\" data-alt=\"loop-grid-layout-4\"><\/figure><ul class=\"\"><li><p>From this field you can control the number of posts that will be presented on the page. Combined with the number of columns you\u2019ll have on the page, this will affect how many rows should be seen. For example, if you choose to display a total of six posts in a three column layout each page will contain two rows of three items.<\/p><\/li><\/ul><\/li><li><p>Turn Masonry on and off. The Masonry setting will automatically arrange items to make the best use of the available screen space.<\/p><\/li><\/ul><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/09\/Without-masonry.png\" alt=\"A loop with masonry turned off\" data-alt=\"A loop with masonry turned off\" class=\"wp-image-31332\"><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Loop Grid allows you to build highly customized lists of posts, helping give your site a unique look. After building a Loop Grid, you can customize how the entries will appear. Determine the Loop Grid layout Select the Loop Grid. It is probably easiest to access the Loop Grid using the Structure window. Go to [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3e9c76e135c24b9c167ae"],"footnotes":""},"categories":[1437],"tags":[1389,1388,1387,1390,1398,1235],"class_list":["post-31328","post","type-post","status-publish","format-standard","hentry","category-widgets","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Customize the layout of a Loop Grid | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Customize the layout of a Loop Grid in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/customize-layout-loop\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize the layout of a Loop Grid | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Customize the layout of a Loop Grid in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/customize-layout-loop\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-02T08:46:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-25T11:12:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/636514c4e86c005604e161356c6c8663.png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Customize the layout of a Loop Grid\",\"datePublished\":\"2022-01-02T08:46:00+00:00\",\"dateModified\":\"2026-09-25T11:12:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/\"},\"wordCount\":261,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/npi-backend.dev.cx.elementor.red\\\/npi-api\\\/api\\\/media\\\/wordpress-media\\\/636514c4e86c005604e161356c6c8663.png\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Widgets\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/\",\"name\":\"Customize the layout of a Loop Grid | Elementor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/npi-backend.dev.cx.elementor.red\\\/npi-api\\\/api\\\/media\\\/wordpress-media\\\/636514c4e86c005604e161356c6c8663.png\",\"datePublished\":\"2022-01-02T08:46:00+00:00\",\"dateModified\":\"2026-09-25T11:12:05+00:00\",\"description\":\"Learn everything about Customize the layout of a Loop Grid in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/#primaryimage\",\"url\":\"https:\\\/\\\/npi-backend.dev.cx.elementor.red\\\/npi-api\\\/api\\\/media\\\/wordpress-media\\\/636514c4e86c005604e161356c6c8663.png\",\"contentUrl\":\"https:\\\/\\\/npi-backend.dev.cx.elementor.red\\\/npi-api\\\/api\\\/media\\\/wordpress-media\\\/636514c4e86c005604e161356c6c8663.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/customize-layout-loop\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build with the Editor\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/build-with-the-editor\\\/widgets\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Customize the layout of a Loop Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customize the layout of a Loop Grid | Elementor","description":"Learn everything about Customize the layout of a Loop Grid in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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:\/\/elementor.com\/help\/customize-layout-loop\/","og_locale":"en_US","og_type":"article","og_title":"Customize the layout of a Loop Grid | Elementor","og_description":"Learn everything about Customize the layout of a Loop Grid in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/customize-layout-loop\/","og_site_name":"Help","article_published_time":"2022-01-02T08:46:00+00:00","article_modified_time":"2026-09-25T11:12:05+00:00","og_image":[{"url":"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/636514c4e86c005604e161356c6c8663.png","type":"","width":"","height":""}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Customize the layout of a Loop Grid","datePublished":"2022-01-02T08:46:00+00:00","dateModified":"2026-09-25T11:12:05+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/"},"wordCount":261,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/#primaryimage"},"thumbnailUrl":"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/636514c4e86c005604e161356c6c8663.png","keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro"],"articleSection":["Widgets"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/","url":"https:\/\/elementor.com\/help\/customize-layout-loop\/","name":"Customize the layout of a Loop Grid | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/#primaryimage"},"thumbnailUrl":"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/636514c4e86c005604e161356c6c8663.png","datePublished":"2022-01-02T08:46:00+00:00","dateModified":"2026-09-25T11:12:05+00:00","description":"Learn everything about Customize the layout of a Loop Grid in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/customize-layout-loop\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/#primaryimage","url":"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/636514c4e86c005604e161356c6c8663.png","contentUrl":"https:\/\/npi-backend.dev.cx.elementor.red\/npi-api\/api\/media\/wordpress-media\/636514c4e86c005604e161356c6c8663.png"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/customize-layout-loop\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Build with the Editor","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Customize the layout of a Loop Grid"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/31328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=31328"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/31328\/revisions"}],"predecessor-version":[{"id":171149,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/31328\/revisions\/171149"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=31328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=31328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=31328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}