{"id":273208,"date":"2024-10-09T15:07:50","date_gmt":"2024-10-09T13:07:50","guid":{"rendered":"https:\/\/guide.jtl-software.com\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/"},"modified":"2024-10-09T15:07:54","modified_gmt":"2024-10-09T13:07:54","slug":"detailed-description-layout-tab","status":"publish","type":"page","link":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/","title":{"rendered":"Detailed description: Layout tab"},"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 class=\"d-flex align-items-center hl-shop\" id=\"detailed-description-layout-tab-portlet\">Detailed description: Layout tab (Portlet) <span id='anchor-detailed-description-layout-tab-portlet' data-href='#detailed-description-layout-tab-portlet' class='far fa-link' data-anchor><\/span><\/h1>\t<p>On this page, you will find a detailed description of the functions of the <span class=\"highlight\">Layout<\/span> tab of the portlets in the OnPage Composer. You can reach the tab by opening the OnPage Composer, selecting any portlet, clicking the <span class=\"highlight\">pen icon<\/span>, and switching to the <span class=\"highlight\">Layout<\/span> tab.<\/p>\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\/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\/layout-dialogue-box-jtl-shop-5.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/layout-dialogue-box-jtl-shop-5.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/layout-dialogue-box-jtl-shop-5-1024x864.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/layout-dialogue-box-jtl-shop-5-768x648.png 640w\" width=\"1076\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"908\" alt=\"Detailed description layout tab jtl shop 5\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/layout-dialogue-box-jtl-shop-5.png&quot;,&quot;w&quot;:1076,&quot;h&quot;:908}\" class=\"border-defaultgray border-xl-w-1 border-xl 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<h2 class=\"d-flex align-items-center hl-shop\" id=\"pane-a\">Pane A <span id='anchor-pane-a' data-href='#pane-a' class='far fa-link' data-anchor><\/span><\/h2>\t<p><strong>Background colour:<\/strong> Set a colour to appear in the background of the portlet. Click in the input field and enter a colour code directly or select a colour from the colour selection.<\/p>\n<hr  \/>\n\t<p><strong>Font colour:<\/strong> Set the font colour of the portlet. Click in the input field and enter a colour code directly or select a colour from the colour selection. Please note that the <span class=\"highlight\">font colour<\/span> setting has no effect on some portlets, as this setting can be overwritten by individual style sheets (e.g. the active template).<\/p>\n<hr  \/>\n\t<p><strong>Font size: <\/strong>Specify the font size in pixels (px), em, or as a percentage, e.g 5px, 0.5em, or 50%.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-b\">Pane B <span id='anchor-pane-b' data-href='#pane-b' class='far fa-link' data-anchor><\/span><\/h2>\t<p><strong>Padding:<\/strong> Specify the space between the element, such as an image or text, and the border. If you do not set a border, the padding is considered to be the space between the element and the &#8220;imaginary&#8221; border. You can specify the space in CSS units such as pixels (px), em or rem, e.g. 1.5em or 1rem. If you specify only a number without a unit, the number will automatically be interpreted as a pixel.<\/p>\n<hr  \/>\n\t<p><strong>Border:<\/strong> Enter the size of the border. You can specify the space in CSS units such as pixels (px), em or rem, e.g. 1.5em or 1rem. If you specify only a number without a unit, the number will automatically be interpreted as a pixel.<\/p>\n<hr  \/>\n\t<p><strong>Margin:<\/strong> Specify how large the space between the border and other elements should be. You can specify the space in CSS units such as pixels (px), em or rem, e.g. 1.5em or 1rem. If you specify only a number without a unit, the number will automatically be interpreted as a pixel.<\/p>\n<div class=\"media-object media-object-border d-flex align-items-top\">\n\t\n\t\t\n\t\t<span class=\"mt-1 mr-3 flex-shrink-0 far fa-info-circle fa-2x columnsize-fa-2x text-shop\"><\/span>\n\t\t\t<span class=\"media-content border-shop\">\n\t\n\t\t\t<span style=\"color: #5cbcf6;\"><strong>Note:<\/strong><\/span> <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 set margins of the portlets are fixed and do not automatically adjust to different screen sizes. To create responsive spaces, read the guide entry: <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/centring-content-with-the-onpage-composer\/\">Centring content with the OnPage Composer<\/a><\/span>.<\/span><\/span>\t\t\t<\/span>\n\t\n\t<\/div>\n\n\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-c\">Pane C: <span id='anchor-pane-c' data-href='#pane-c' class='far fa-link' data-anchor><\/span><\/h2>\t<p><strong>Border style:<\/strong> From the drop-down menu, select whether the portlet should have a border and specify the type of border. If you select <span class=\"highlight\">Unset<\/span>, no border is displayed.<\/p>\n<hr  \/>\n\t<p><strong>Border colour: <\/strong>Select a colour for the border of the element. Click in the input field and enter a colour code directly or select a colour from the colour selection.<\/p>\n<hr  \/>\n\t<p><strong>Border rounding:<\/strong> If you want the border to be rounded, enter a value here in pixels (px), em or as a percentage, e.g 5px, 0.5em or 50%. The larger this value, the more rounded the corners. You can specify the distance from the corner at which the rounding will start.<\/p>\n<hr  \/>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"pane-d\">Pane D: <span id='anchor-pane-d' data-href='#pane-d' class='far fa-link' data-anchor><\/span><\/h2>\t<p><strong>Custom class names:<\/strong> Enter the CSS class names to be assigned to the portlet via class attribute. <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 class names that you assign can be controlled using the active theme or with custom CSS in the template settings.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><strong>Hide portlet for XS\/SM\/MD\/LG:<\/strong> Select whether the portlet should be hidden when viewed on certain devices. XS stands for mobile phones, SM for tablets, MD for desktop computers and LG for large desktop computers.<\/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\/detailed-description-layout-tab\/\">[&#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-273208","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>Detailed description: Layout tab &#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\/detailed-description-layout-tab\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Detailed description: Layout tab &#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\/detailed-description-layout-tab\/\" \/>\n<meta property=\"og:site_name\" content=\"JTL-Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-09T13:07:54+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=\"5 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\/detailed-description-layout-tab\/\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/\",\"name\":\"Detailed description: Layout tab &#8211; JTL-Guide\",\"isPartOf\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\"},\"datePublished\":\"2024-10-09T13:07:50+00:00\",\"dateModified\":\"2024-10-09T13:07:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/#breadcrumb\"},\"inLanguage\":\"en-en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/#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\":\"Detailed description: Layout tab\"}]},{\"@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":"Detailed description: Layout tab &#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\/detailed-description-layout-tab\/","og_locale":"en_US","og_type":"article","og_title":"Detailed description: Layout tab &#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\/detailed-description-layout-tab\/","og_site_name":"JTL-Guide","article_modified_time":"2024-10-09T13:07:54+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/","url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/","name":"Detailed description: Layout tab &#8211; JTL-Guide","isPartOf":{"@id":"https:\/\/guide.jtl-software.com\/en\/#website"},"datePublished":"2024-10-09T13:07:50+00:00","dateModified":"2024-10-09T13:07:54+00:00","breadcrumb":{"@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/#breadcrumb"},"inLanguage":"en-en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/detailed-description-layout-tab\/#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":"Detailed description: Layout tab"}]},{"@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\/273208","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=273208"}],"version-history":[{"count":3,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/273208\/revisions"}],"predecessor-version":[{"id":273217,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/273208\/revisions\/273217"}],"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=273208"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/tags?post=273208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}