{"id":187966,"date":"2021-03-05T10:25:27","date_gmt":"2021-03-05T09:25:27","guid":{"rendered":"https:\/\/guide.jtl-software.com\/inserting-grid-layouts-with-the-onpage-composer\/"},"modified":"2023-08-21T13:50:27","modified_gmt":"2023-08-21T11:50:27","slug":"inserting-grid-layouts-with-the-onpage-composer","status":"publish","type":"page","link":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/","title":{"rendered":"Inserting grid layouts with the OnPage Composer"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row][vc_column width=&#8221;1\/3&#8243; responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;order-md&#8220;: &#8220;1&#8220;, &#8220;col-lg&#8220;: &#8220;4&#8220;, &#8220;order-lg&#8220;: &#8220;12&#8220;}&#8221; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<div id=\"toc\">\n\t<div class=\"card border-0 bg-rysywhite mt-0 mt-lg-5 mb-5 w-100\" data-toc-element>\n\t\t<div class=\"d-none d-lg-flex flex-column\">\n\t\t\t<span class=\"fa-layers mx-auto mt--4 fa-fw fa-3x text-shaftblue\">\n\t\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t\t<span class=\"fas fa-inverse fa-list-ul\" data-fa-transform=\"shrink-8\"><\/span>\n\t\t\t<\/span>\n\t\t\t<span class=\"font-weight-bold text-shaftblue text-center h5 mt-3 mb-0\">Contents<\/span>\n\t\t<\/div>\n\t\t<div class=\"d-block d-lg-none\">\n\t\t\t<a class=\"text-decoration-none card-header-link collapsed\" data-toggle=\"collapse\" href=\"#collapse-toc\" aria-expanded=\"false\" aria-controls=\"collapse-toc\">\n\t\t\t\t<div class=\"card-header d-flex bg-white align-items-center\" role=\"tab\" id=\"heading-toc\">\n\t\t\t\t\t<span class=\"h4 mb-0 d-flex align-items-center\">\n\t\t\t\t\t\t<span class=\"fa-layers fa-fw fa-2x mr-2 text-shaftblue\">\n\t\t\t\t\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t\t\t\t\t<span class=\"fas fa-inverse fa-list-ul\" data-fa-transform=\"shrink-8\"><\/span>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span>Contents<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<span class=\"flex-shrink-0 ml-auto fas fa-caret-down text-gray\"><\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/a>\n\t\t<\/div>\n\t\t<div id=\"collapse-toc\" class=\"collapse show\" data-parent=\"#toc\" role=\"tabpanel\" aria-labelledby=\"heading-toc\">\n\t\t\t<div class=\"card-body p-4 table-of-content\">\n\t\t\t\t<ul data-toc-headings=\"h2, h3, h4\" data-toc class=\"list-shop\"><\/ul>\n\t\t\t<\/div>\n\t    <\/div>\n\t<\/div>\n<\/div>[\/vc_column][vc_column responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;col-md&#8220;: &#8220;8&#8220;, &#8220;order-md&#8220;: &#8220;12&#8220;, &#8220;order-lg&#8220;: &#8220;1&#8220;}&#8221; width=&#8221;2\/3&#8243; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<h1 class=\"d-flex align-items-center hl-shop\" id=\"inserting-grid-layouts-with-the-onpage-composer\">Inserting grid layouts with the OnPage Composer <span id='anchor-inserting-grid-layouts-with-the-onpage-composer' data-href='#inserting-grid-layouts-with-the-onpage-composer' class='far fa-link' data-anchor><\/span><\/h1><div class=\"custom-box\">\n\t<div class=\"d-flex align-items-center mb-4\">\n\t\t\t\t\t\t\t<span class=\"mr-3 fa-stack flex-shrink-0 fa-1x\">\n\t\t\t<span class=\"fas fa-circle fa-stack-2x text-shaftblue\"><\/span>\n\t\t\t\t\t<span class=\"flex-shrink-0 fas fa-clipboard-list text-white fa-stack-1x\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\n\t\t<h3 class=\"mb-0 \" id=\"your-task-initial-situation\">Your task\/initial situation <span id='anchor-your-task-initial-situation' data-href='#your-task-initial-situation' class='far fa-link' data-anchor><\/span><\/h3>\t<\/div>\n\t<div class=\"box-content\">\n\t\tYou would like to divide a part of your page into responsive columns. For this purpose, you can use a so-called grid layout.\t<\/div>\n<\/div>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"inserting-a-grid-layout\">Inserting a grid layout <span id='anchor-inserting-a-grid-layout' data-href='#inserting-a-grid-layout' class='far fa-link' data-anchor><\/span><\/h2><ol start=\"1\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li class=\"media-single-line\">\n\tLog in to the back end of JTL-Shop and switch to the front end of JTL-Shop.<\/li><li >\n\tOpen the page you want to edit and click the OnPage Composer icon at the top left of the page to open the OnPage Composer for that page.<\/li><li class=\"media-single-line\">\n\tDrag the <span class=\"highlight\">Grid Layout<\/span> portlet to the desired position in the OnPage Composer.<\/li><\/ol>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/add-grid-layout-portlet-opc-jtl-shop-5-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/add-grid-layout-portlet-opc-jtl-shop-5-1-1024x792.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/add-grid-layout-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/add-grid-layout-portlet-opc-jtl-shop-5-1-1024x792.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/add-grid-layout-portlet-opc-jtl-shop-5-1-768x594.png 640w\" width=\"1024\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"792\" alt=\"Inserting a portlet for a grid layout in the OnPage Composer\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/add-grid-layout-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:1089,&quot;h&quot;:842}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<ol start=\"4\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li class=\"media-single-line\">\n\tClick on the pencil icon to open the&nbsp;<span class=\"highlight\">Edit Grid Layout<\/span>&nbsp;window.<\/li><li >\n\tUnder <span class=\"highlight\">Panes<\/span>, select how you want your page to be divided. You have the option of selecting various ready-made layouts. Alternatively, select <span class=\"highlight\">User-defined<\/span> and enter your own division.<\/li><\/ol><div class=\"media-object media-object-border d-flex align-items-top\">\n\t\n\t\t\t\t<span class=\"mt-1 mr-3 fa-stack flex-shrink-0 fa-1x columnsize-fa-2x\">\n\t\t<span class=\"far fa-circle fa-stack-2x text-shop\"><\/span>\n\t\n\t\t<span class=\"fas fa-search-plus text-shop fa-stack-1x\"><\/span>\n\t\t\t<\/span>\n\t\t\t<span class=\"media-content border-shop\">\n\t\n\t\t\t<span style=\"color: #5cbcf6;\"><strong>Details on the layout:<\/strong><\/span> Each row consists of 12 column units. For example, if you enter 12, there is only one column, 6 + 6 means that there are 2 equal columns. 9 + 3 is a page division into three quarters and one quarter. This way you can divide your page into up to 12 columns. It is important to note that different layouts can be stored depending on the device, but each device must have the same number of columns. So, for example, if you want a layout with 2 columns of the same size (6 + 6) to be used on a desktop device, but the columns are displayed one below the other in the mobile view, select 12 + 12 (a full row of 12 column units each) as the layout there. You can see live in the preview how your current selection is displayed.\t\t\t<\/span>\n\t\n\t<\/div>\n\n\n\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/general-grid-layout-portlet-opc-jtl-shop-5-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/general-grid-layout-portlet-opc-jtl-shop-5-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/general-grid-layout-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/general-grid-layout-portlet-opc-jtl-shop-5-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/general-grid-layout-portlet-opc-jtl-shop-5-1-768x450.png 640w\" width=\"887\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"520\" alt=\"General tab for a grid layout\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/general-grid-layout-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:887,&quot;h&quot;:520}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<ol start=\"6\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tSave the settings. You will now see the columns of the newly inserted grid layout on your page.<\/li><li >\n\tThen add more portlets to the grid layout to fill it with the desired content. Please note that all contents of the 1st column will be displayed before the 2nd column in the mobile view. If necessary, it is therefore advisable to insert several grid layouts one after the other in order to structure the content correctly in the mobile view.<\/li><li >\n\tFollow the further steps to preview and publish an edited page at&nbsp;<span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/editing-pages-with-the-onpage-composer\/\">Editing pages with the OnPage Composer<\/a><\/span>.<\/li><\/ol><h2 class=\"d-flex align-items-center hl-wawi\" id=\"layout-tab\">Layout tab <span id='anchor-layout-tab' data-href='#layout-tab' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/layout-grid-layout-portlet-opc-jtl-shop-5-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/layout-grid-layout-portlet-opc-jtl-shop-5-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/layout-grid-layout-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/layout-grid-layout-portlet-opc-jtl-shop-5-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/layout-grid-layout-portlet-opc-jtl-shop-5-1-768x688.png 640w\" width=\"886\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"794\" alt=\"Setting the layout for a grid layout in the OnPage Composer\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/layout-grid-layout-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:886,&quot;h&quot;:794}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><strong>Background colour:<\/strong> Here you can set a colour to be displayed in the background of the grid.<\/p>\n<hr  \/>\n\t<p><strong>Font colour:<\/strong> Here you set the colour of the font for the grid. This setting has no effect on grid layouts.<\/p>\n<hr  \/>\n\t<p><strong>Font size:<\/strong>&nbsp;Here you set the size of the font. Enter a CSS value here, e.g&nbsp;<span class=\"TextRun BCX7 SCXW218896037\" lang=\"en\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\">5px, 0.5em, etc. This setting has no effect on grid layouts.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><strong>Border style\/Border colour:<\/strong> Here you can specify whether the grid layout should have a border and what colour it should be.<\/p>\n<hr  \/>\n\t<p><strong>Border rounding:<\/strong>&nbsp;Here you can specify whether the border should be rounded. You can specify the distance from the corner at which the rounding will start. You must specify a border style before you can do this. Enter a CSS value, e.g&nbsp;<span class=\"TextRun BCX7 SCXW218896037\" lang=\"en\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\">5px, 0.5em, etc.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><span class=\"TextRun BCX7 SCXW218896037\" lang=\"en\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\"><strong>Custom class names:<\/strong> Enter here the class names to be appended to the class attribute of the portlet. The names you assign here can be, for example, CSS classes that are defined in the theme of the template. For more information, please see the <a href=\"https:\/\/jtl-devguide.readthedocs.io\/projects\/jtl-shop\/de\/latest\/shop_templates\/eigenes_theme.html\">developer documentation<\/a>.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><span class=\"TextRun BCX7 SCXW218896037\" lang=\"en\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\"><strong>Hide portlet:<\/strong> Select here whether the portlet should be hidden when viewed on certain end devices. XS stands for mobile phones, SM for tablets, MD for desktop computers and LG for large desktop computers.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><strong>Margin:<\/strong>&nbsp;Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge. The element is reduced\/moved accordingly.<\/p>\n<hr  \/>\n\t<p><strong>Border:<\/strong>&nbsp;Here you can set the size of the frame in pixels for each page.<\/p>\n<hr  \/>\n\t<p><strong>Padding:<\/strong>&nbsp;Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"animation-tab\">Animation tab <span id='anchor-animation-tab' data-href='#animation-tab' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/animation-grid-layout-portlet-opc-jtl-shop-5-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/animation-grid-layout-portlet-opc-jtl-shop-5-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/animation-grid-layout-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/animation-grid-layout-portlet-opc-jtl-shop-5-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/animation-grid-layout-portlet-opc-jtl-shop-5-1-768x578.png 640w\" width=\"885\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"666\" alt=\"Setting an animation for a grid\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/animation-grid-layout-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:885,&quot;h&quot;:666}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><strong>Animation type:<\/strong> Here you can define in which way your grid should be animated.<\/p>\n<hr  \/>\n\t<p><strong>Duration:<\/strong> Here you can define how long the entire animation of the grid should last.<\/p>\n<hr  \/>\n\t<p><strong>Delay:<\/strong>&nbsp;Here you can define how much time should elapse before the first animation starts and before the next begins.<\/p>\n<hr  \/>\n\t<p><strong>Distance (pixels):<\/strong>&nbsp;Here you can define the minimum distance between the upper edge of the corresponding element and the lower edge of the browser window that must be reached before the animation starts.<\/p>\n<hr  \/>\n\t<p><strong>Repetition:<\/strong>&nbsp;Here you define how often the animation is to be repeated in total.<\/p>\n<div class=\"mt-5 card\">\n\t\t\t<span class=\"fa-layers mx-auto mt--4 fa-fw fa-3x text-shop\">\n\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t<span data-fa-transform=\"shrink-8\" class=\"fas fa-link fa-inverse\"><\/span>\n\t\t<\/span>\n\t\t\t<div class=\"card-body p-4\">\n\t\t<p class=\"d-flex align-items-center hl-wawi h4\">Related topics<\/p>\n<ul class=\"list-reset list-icons list-custom-square list-shop\">\n\t\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/\" title=\"Overview of layout portlets\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tOverview of layout portlets\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-accordions-with-the-onpage-composer\/\" title=\"Inserting accordions with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting accordions with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-containers-with-the-onpage-composer\/\" title=\"Inserting containers with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting containers with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-dividers-with-the-onpage-composer\/\" title=\"Inserting dividers with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting dividers with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-flipcards-with-the-onpage-composer\/\" title=\"Inserting flipcards with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting flipcards with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-panels-with-the-onpage-composer\/\" title=\"Inserting panels with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting panels with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-tabs-with-the-onpage-composer\/\" title=\"Inserting tabs with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting tabs with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t<\/ul>\t<\/div>\n<\/div>[\/vc_column][\/vc_row]<\/div>","protected":false},"excerpt":{"rendered":"Contents Contents Inserting tabs with the OnPage Composer Your task\/initial situation You want to display content within tabs on a <a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/\">[...]<\/a>","protected":false},"author":2,"featured_media":0,"parent":188596,"menu_order":134,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"tags":[],"class_list":["post-187966","page","type-page","status-publish","hentry","pages_category-opc-layout-portlets-en"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Inserting grid layouts with the OnPage Composer &#8211; JTL-Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inserting grid layouts with the OnPage Composer &#8211; JTL-Guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/\" \/>\n<meta property=\"og:site_name\" content=\"JTL-Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T11:50:27+00:00\" \/>\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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/\",\"name\":\"Inserting grid layouts with the OnPage Composer &#8211; JTL-Guide\",\"isPartOf\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\"},\"datePublished\":\"2021-03-05T09:25:27+00:00\",\"dateModified\":\"2023-08-21T11:50:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/#breadcrumb\"},\"inLanguage\":\"en-en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"JTL-Shop\",\"item\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OnPage Composer\",\"item\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Inserting grid layouts with the OnPage Composer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/\",\"name\":\"JTL-Guide\",\"description\":\"Dokumentation f\u00fcr die gesamte Produktfamilie von JTL\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/guide.jtl-software.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-en\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Inserting grid layouts with the OnPage Composer &#8211; JTL-Guide","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:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/","og_locale":"en_US","og_type":"article","og_title":"Inserting grid layouts with the OnPage Composer &#8211; JTL-Guide","og_url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/","og_site_name":"JTL-Guide","article_modified_time":"2023-08-21T11:50:27+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/","url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/","name":"Inserting grid layouts with the OnPage Composer &#8211; JTL-Guide","isPartOf":{"@id":"https:\/\/guide.jtl-software.com\/en\/#website"},"datePublished":"2021-03-05T09:25:27+00:00","dateModified":"2023-08-21T11:50:27+00:00","breadcrumb":{"@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/#breadcrumb"},"inLanguage":"en-en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"JTL-Shop","item":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/"},{"@type":"ListItem","position":2,"name":"OnPage Composer","item":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/"},{"@type":"ListItem","position":3,"name":"Inserting grid layouts with the OnPage Composer"}]},{"@type":"WebSite","@id":"https:\/\/guide.jtl-software.com\/en\/#website","url":"https:\/\/guide.jtl-software.com\/en\/","name":"JTL-Guide","description":"Dokumentation f\u00fcr die gesamte Produktfamilie von JTL","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/guide.jtl-software.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-en"}]}},"_links":{"self":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/187966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/comments?post=187966"}],"version-history":[{"count":5,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/187966\/revisions"}],"predecessor-version":[{"id":230986,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/187966\/revisions\/230986"}],"up":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188596"}],"wp:attachment":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/media?parent=187966"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/tags?post=187966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}