{"id":188065,"date":"2021-03-05T10:24:03","date_gmt":"2021-03-05T09:24:03","guid":{"rendered":"https:\/\/guide.jtl-software.com\/overview-of-layout-portlets\/"},"modified":"2023-06-15T15:14:52","modified_gmt":"2023-06-15T13:14:52","slug":"overview-of-layout-portlets","status":"publish","type":"page","link":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/","title":{"rendered":"Overview of layout portlets"},"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=\"overview-of-layout-portlets\">Overview of layout portlets <span id='anchor-overview-of-layout-portlets' data-href='#overview-of-layout-portlets' class='far fa-link' data-anchor><\/span><\/h1>\t<p>On this page you will find an overview of the layout portlets for the OnPage Composer that are included in JTL-Shop. Use the layout portlets to customise the layout of your content. As a rule, you can place <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-content-portlets\/\">Content portlets<\/a><\/span> within layout portlets.<\/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\/overview-layout-portlets-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\/overview-layout-portlets-jtl-shop-5-1-359x1024.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/overview-layout-portlets-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/overview-layout-portlets-jtl-shop-5-1-359x1024.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/overview-layout-portlets-jtl-shop-5-1-269x768.png 640w\" width=\"359\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"1024\" alt=\"Layout portlets in JTL-Shop\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/overview-layout-portlets-jtl-shop-5-1.png&quot;,&quot;w&quot;:379,&quot;h&quot;:1082}\" class=\"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-wawi\" id=\"accordion\">Accordion <span id='anchor-accordion' data-href='#accordion' class='far fa-link' data-anchor><\/span><\/h2>\t<p>With an accordion, you offer drop-down information. For example, you can hide another text or an image or video within the accordion. For a description of this portlet, please see <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-accordions-with-the-onpage-composer\/\">Inserting an Accordion portlet<\/a><\/span>.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"container\">Container <span id='anchor-container' data-href='#container' class='far fa-link' data-anchor><\/span><\/h2>\t<p>With the help of a container, you combine several contents. You can save containers including their contents and duplicate them to use them in several places. For a description of this portlet, please see <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 a Container Portlet<\/a><\/span>.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"divider\">Divider <span id='anchor-divider' data-href='#divider' class='far fa-link' data-anchor><\/span><\/h2>\t<p>With this portlet you insert a line to visually separate elements from each other. For a description of this portlet, please see <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-dividers-with-the-onpage-composer\/\">Inserting a Divider portlet<\/a><\/span>.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"flipcard\">Flipcard <span id='anchor-flipcard' data-href='#flipcard' class='far fa-link' data-anchor><\/span><\/h2>\t<p>With a flipcard, you insert an element that has a front and a back. For example, you can place an image on each side that is automatically flipped when clicked. For a description of this portlet, please see <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-flipcards-with-the-onpage-composer\/\">Inserting a Flipcard portlet<\/a><\/span>.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"panel\">Panel <span id='anchor-panel' data-href='#panel' class='far fa-link' data-anchor><\/span><\/h2>\t<p>A panel is a box with a fixed border that can contain other elements as well as a header. A description of this portlet can be found at <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-panels-with-the-onpage-composer\/\">Inserting a Panel portlet<\/a><\/span>.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"grid-layout\">Grid Layout <span id='anchor-grid-layout' data-href='#grid-layout' class='far fa-link' data-anchor><\/span><\/h2>\t<p>With the help of the Grid Layout portlet, you can divide a part of your page into columns. For a description of this portlet, please see <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 a Grid Layout portlet<\/a><\/span>.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"tabs\">Tabs <span id='anchor-tabs' data-href='#tabs' class='far fa-link' data-anchor><\/span><\/h2>\t<p>Tabs can be switched by the user. Each tab can contain its own content. For a description of this portlet, please see <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-tabs-with-the-onpage-composer\/\">Inserting a Tab portlet<\/a><\/span>.<\/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\/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-grid-layouts-with-the-onpage-composer\/\" title=\"Inserting grid layouts with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting grid layouts 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":128,"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-188065","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>Overview of layout portlets &#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\/overview-of-layout-portlets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Overview of layout portlets &#8211; JTL-Guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/\" \/>\n<meta property=\"og:site_name\" content=\"JTL-Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-15T13:14:52+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=\"4 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\/overview-of-layout-portlets\/\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/\",\"name\":\"Overview of layout portlets &#8211; JTL-Guide\",\"isPartOf\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\"},\"datePublished\":\"2021-03-05T09:24:03+00:00\",\"dateModified\":\"2023-06-15T13:14:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/#breadcrumb\"},\"inLanguage\":\"en-en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/#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\":\"Overview of layout portlets\"}]},{\"@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":"Overview of layout portlets &#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\/overview-of-layout-portlets\/","og_locale":"en_US","og_type":"article","og_title":"Overview of layout portlets &#8211; JTL-Guide","og_url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/","og_site_name":"JTL-Guide","article_modified_time":"2023-06-15T13:14:52+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/","url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/","name":"Overview of layout portlets &#8211; JTL-Guide","isPartOf":{"@id":"https:\/\/guide.jtl-software.com\/en\/#website"},"datePublished":"2021-03-05T09:24:03+00:00","dateModified":"2023-06-15T13:14:52+00:00","breadcrumb":{"@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/#breadcrumb"},"inLanguage":"en-en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-layout-portlets\/#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":"Overview of layout portlets"}]},{"@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\/188065","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=188065"}],"version-history":[{"count":5,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188065\/revisions"}],"predecessor-version":[{"id":194971,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188065\/revisions\/194971"}],"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=188065"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/tags?post=188065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}