{"id":272209,"date":"2024-10-02T15:45:11","date_gmt":"2024-10-02T13:45:11","guid":{"rendered":"https:\/\/guide.jtl-software.com\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/"},"modified":"2024-10-14T15:43:19","modified_gmt":"2024-10-14T13:43:19","slug":"centring-content-with-the-onpage-composer","status":"publish","type":"page","link":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/","title":{"rendered":"Centring content 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\" data-toc class=\"list-shop\"><\/ul>\n\t\t\t<\/div>\n\t    <\/div>\n\t<\/div>\n<\/div>[\/vc_column][vc_column width=&#8221;2\/3&#8243; 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; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<h1 data-ai=\"include\" class=\"d-flex align-items-center hl-shop\" id=\"centring-content-with-the-onpage-composer\">Centring content with the OnPage Composer <span id='anchor-centring-content-with-the-onpage-composer' data-href='#centring-content-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 want to centre content such as images or texts on an online shop page using the OnPage Composer. You would like the margins of this content to automatically adjust to the screen size of different devices.\t<\/div>\n<\/div>\n<h2 class=\"d-flex align-items-center hl-shop\" id=\"general-information-on-margins-in-portlets\">General information on margins in portlets <span id='anchor-general-information-on-margins-in-portlets' data-href='#general-information-on-margins-in-portlets' class='far fa-link' data-anchor><\/span><\/h2>\t<p>The margins of portlets are fixed, i.e. they do not automatically adjust to the screen size of the device on which the online shop is opened. For example, if you enter very high values as margins, this can lead to a lot of white space being displayed on mobile devices. Read the instructions on this page to create centred and responsive content.<\/p>\n<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<strong><span style=\"color: #5cbcf6;\">Detail:<\/span><\/strong> You can edit the margins of portlets by selecting the portlet in the OnePage Composer, clicking the pen icon, and going to the <span class=\"highlight\">Layout<\/span> tab. For more information on this topic, click here: <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/\">Detailed description: Layout tab<\/a><\/span>.\t\t\t<\/span>\n\t\n\t<\/div>\n\n\n<h2 class=\"d-flex align-items-center hl-shop\" id=\"responsively-centring-content-with-the-onpage-composer\">Responsively centring content with the OnPage Composer <span id='anchor-responsively-centring-content-with-the-onpage-composer' data-href='#responsively-centring-content-with-the-onpage-composer' class='far fa-link' data-anchor><\/span><\/h2>\t<p>There are two ways to responsively centre content with the OnPage Composer.<\/p>\n<h3 class=\"d-flex align-items-center hl-shop\" id=\"centring-content-with-the-container-portlet\">Centring content with the container portlet <span id='anchor-centring-content-with-the-container-portlet' data-href='#centring-content-with-the-container-portlet' class='far fa-link' data-anchor><\/span><\/h3><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<strong><span style=\"color: #5cbcf6;\">Details:<\/span><\/strong> Containers are used to group portlets. For example, if you want to group an image with the respective heading, create a container and add the image and the heading to the container. You can then conveniently move the image and its heading as one grouped element. Read more on the topic: <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-containers-with-the-onpage-composer\/\">Inserting containers with the OnPage Composer<\/a><\/span>.\t\t\t<\/span>\n\t\n\t<\/div>\n\n\n<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><\/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\/onpage-composer-icon-front-end-jtl-shop-5.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/onpage-composer-icon-front-end-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/onpage-composer-icon-front-end-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/onpage-composer-icon-front-end-jtl-shop-5-1024x61.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/onpage-composer-icon-front-end-jtl-shop-5-768x45.png 640w\" width=\"2368\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"140\" alt=\"Opc Symbol Jtl Shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/onpage-composer-icon-front-end-jtl-shop-5.png&quot;,&quot;w&quot;:2368,&quot;h&quot;:140}\" 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=\"3\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tIn the <span class=\"highlight\">Portlets<\/span> tab, in the <span class=\"highlight\">Layout<\/span> area, click on the <span class=\"highlight\">Container<\/span> tile and add the container to your online shop via drag and drop.<\/li><li class=\"media-single-line\">\n\tClick on the pen icon to open the <span class=\"highlight\">Edit Container<\/span> dialogue box.<\/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\/opc-edit-container-button-jtl-shop-5.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/opc-edit-container-button-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/opc-edit-container-button-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/opc-edit-container-button-jtl-shop-5-1024x255.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/opc-edit-container-button-jtl-shop-5-768x191.png 640w\" width=\"2526\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"628\" alt=\"Edit container button Jtl Shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/opc-edit-container-button-jtl-shop-5.png&quot;,&quot;w&quot;:2526,&quot;h&quot;:628}\" 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=\"5\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li class=\"media-single-line\">\n\tActivate the <span class=\"highlight\">Boxed container<\/span> check box.<\/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\/opc-edit-container-dialogue-box-jtl-shop-5.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/opc-edit-container-dialogue-box-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/opc-edit-container-dialogue-box-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/opc-edit-container-dialogue-box-jtl-shop-5-1024x557.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/opc-edit-container-dialogue-box-jtl-shop-5-768x418.png 640w\" width=\"1077\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"586\" alt=\"Edit container dialogue box Jtl Shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/opc-edit-container-dialogue-box-jtl-shop-5.png&quot;,&quot;w&quot;:1077,&quot;h&quot;:586}\" 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<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<strong><span style=\"color: #5cbcf6;\">Detail:<\/span><\/strong> If you activate the <span class=\"highlight\">Boxed container<\/span> setting, the entire container is centred and restricted to a fixed width. Empty space is automatically created to the left and right of the container. <span data-teams=\"true\"><span class=\"ui-provider a b c d e f g h i j k l m n o p q r s t u v w x y z ab ac ae af ag ah ai aj ak\" dir=\"ltr\">The exact size of the container is determined on the basis of the available space on the device. <\/span><\/span>The container automatically adjusts to different screen sizes.\t\t\t<\/span>\n\t\n\t<\/div>\n\n\n<ol start=\"6\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li class=\"media-single-line\">\n\tClick <span class=\"highlight\">Save<\/span>.<\/li><li >\n\tIn the <span class=\"highlight\">Portlets<\/span> tab, in the <span class=\"highlight\">Content<\/span> area, use drag and drop to add content to the container, such as a heading and an image.<\/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\/oopc-add-content-to-container-jtl-shop-5.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/oopc-add-content-to-container-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/oopc-add-content-to-container-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/oopc-add-content-to-container-jtl-shop-5-1024x352.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/oopc-add-content-to-container-jtl-shop-5-768x264.png 640w\" width=\"2534\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"871\" alt=\"Add content to container Opc Jtl Shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/oopc-add-content-to-container-jtl-shop-5.png&quot;,&quot;w&quot;:2534,&quot;h&quot;:871}\" 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>You have successfully created a responsive container with content. You can move this container as required.<\/p>\n<h3 class=\"d-flex align-items-center hl-shop\" id=\"centring-content-with-the-grid-layout\">Centring content with the grid layout <span id='anchor-centring-content-with-the-grid-layout' data-href='#centring-content-with-the-grid-layout' class='far fa-link' data-anchor><\/span><\/h3><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<strong><span style=\"color: #5cbcf6;\">Detail:<\/span><\/strong> With the <span class=\"highlight\">grid layout <\/span> portlet, you can add columns to your online shop, which you then fill with content. These columns behave responsively, i.e. the display of the columns automatically adjusts to different screen sizes. Read more on the topic:<span style=\"color: #5cbcf6;\"> <a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-grid-layouts-with-the-onpage-composer\/\">Inserting grid layouts with the OnPage Composer<\/a><\/span>.\t\t\t<\/span>\n\t\n\t<\/div>\n\n\n<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><\/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\/onpage-composer-icon-front-end-jtl-shop-5.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/onpage-composer-icon-front-end-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/onpage-composer-icon-front-end-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/onpage-composer-icon-front-end-jtl-shop-5-1024x61.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/onpage-composer-icon-front-end-jtl-shop-5-768x45.png 640w\" width=\"2368\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"140\" alt=\"Opc Symbol Jtl Shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/onpage-composer-icon-front-end-jtl-shop-5.png&quot;,&quot;w&quot;:2368,&quot;h&quot;:140}\" 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=\"3\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tIn the <span class=\"highlight\">Portlets&nbsp; <\/span>tab, in the <span class=\"highlight\">Layout<\/span> area, click on the <span class=\"highlight\">Grid layout<\/span> tile and add the grid layout to your online shop via drag and drop.<\/li><li class=\"media-single-line\">\n\tClick on the pen icon to open the <span class=\"highlight\">Edit Grid Layout<\/span>&nbsp;dialogue box.<\/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\/opc-grid-layout-edit-button-jtl-shop-5.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/opc-grid-layout-edit-button-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/opc-grid-layout-edit-button-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/opc-grid-layout-edit-button-jtl-shop-5-1024x389.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/opc-grid-layout-edit-button-jtl-shop-5-768x292.png 640w\" width=\"2527\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"961\" alt=\"Edit grid layout icon Jtl Shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/opc-grid-layout-edit-button-jtl-shop-5.png&quot;,&quot;w&quot;:2527,&quot;h&quot;:961}\" 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=\"5\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tTo centre content, in the <span class=\"highlight\">General<\/span> tab, in the <span class=\"highlight\">Segmentation<\/span> area, set a segmentation of 3 columns, e.g. 3+6+3.<\/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\/opc-edit-grid-layout-dialogue-box-jtl-shop-5.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/opc-edit-grid-layout-dialogue-box-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/opc-edit-grid-layout-dialogue-box-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/opc-edit-grid-layout-dialogue-box-jtl-shop-5-1024x614.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/opc-edit-grid-layout-dialogue-box-jtl-shop-5-768x460.png 640w\" width=\"1076\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"645\" alt=\"Edit grid layout Jtl Shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/opc-edit-grid-layout-dialogue-box-jtl-shop-5.png&quot;,&quot;w&quot;:1076,&quot;h&quot;:645}\" 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 class=\"media-single-line\">\n\tClick <span class=\"highlight\">Save<\/span>.<\/li><li class=\"media-single-line\">\n\tAdd the desired content, such as an image, to the middle column of the grid layout portlet.<\/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\/opc-add-content-to-grid-jtl-shop-5.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/opc-add-content-to-grid-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/opc-add-content-to-grid-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/opc-add-content-to-grid-jtl-shop-5-1024x353.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/opc-add-content-to-grid-jtl-shop-5-768x265.png 640w\" width=\"2534\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"874\" alt=\"Add content to grid Jtl Shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/opc-add-content-to-grid-jtl-shop-5.png&quot;,&quot;w&quot;:2534,&quot;h&quot;:874}\" 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>You have successfully created content using the grid layout portlet. Since you have not added any content to the left and right columns, the content is centred in the middle column. In addition, the column layout automatically adjusts to different screen sizes.<\/p>\n[\/vc_column][\/vc_row]<\/div>","protected":false},"excerpt":{"rendered":"[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;][\/vc_column][vc_column width=&#8221;2\/3&#8243; responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;col-md&#8220;: &#8220;8&#8220;, &#8220;order-md&#8220;: <a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/\">[&#8230;]<\/a>","protected":false},"author":25,"featured_media":0,"parent":188596,"menu_order":109,"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-272209","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Centring content 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\/centring-content-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=\"Centring content with the OnPage Composer &#8211; JTL-Guide\" \/>\n<meta property=\"og:description\" content=\"[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;][\/vc_column][vc_column width=&#8221;2\/3&#8243; responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;col-md&#8220;: &#8220;8&#8220;, &#8220;order-md&#8220;: [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/\" \/>\n<meta property=\"og:site_name\" content=\"JTL-Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-14T13:43:19+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\/centring-content-with-the-onpage-composer\/\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/\",\"name\":\"Centring content with the OnPage Composer &#8211; JTL-Guide\",\"isPartOf\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\"},\"datePublished\":\"2024-10-02T13:45:11+00:00\",\"dateModified\":\"2024-10-14T13:43:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/#breadcrumb\"},\"inLanguage\":\"en-en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-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\":\"Centring content 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":"Centring content 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\/centring-content-with-the-onpage-composer\/","og_locale":"en_US","og_type":"article","og_title":"Centring content with the OnPage Composer &#8211; JTL-Guide","og_description":"[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;][\/vc_column][vc_column width=&#8221;2\/3&#8243; responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;col-md&#8220;: &#8220;8&#8220;, &#8220;order-md&#8220;: [...]","og_url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/","og_site_name":"JTL-Guide","article_modified_time":"2024-10-14T13:43:19+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\/centring-content-with-the-onpage-composer\/","url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/","name":"Centring content with the OnPage Composer &#8211; JTL-Guide","isPartOf":{"@id":"https:\/\/guide.jtl-software.com\/en\/#website"},"datePublished":"2024-10-02T13:45:11+00:00","dateModified":"2024-10-14T13:43:19+00:00","breadcrumb":{"@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/#breadcrumb"},"inLanguage":"en-en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-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":"Centring content 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\/272209","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/comments?post=272209"}],"version-history":[{"count":5,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/272209\/revisions"}],"predecessor-version":[{"id":273616,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/272209\/revisions\/273616"}],"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=272209"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/tags?post=272209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}