{"id":187639,"date":"2021-03-18T16:29:29","date_gmt":"2021-03-18T15:29:29","guid":{"rendered":"https:\/\/guide.jtl-software.com\/creating-banners-with-the-onpage-composer\/"},"modified":"2023-06-15T15:39:40","modified_gmt":"2023-06-15T13:39:40","slug":"creating-banners-with-the-onpage-composer","status":"publish","type":"page","link":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/","title":{"rendered":"Creating banners 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=\"creating-banners-with-the-onpage-composer\">Creating banners with the OnPage Composer <span id='anchor-creating-banners-with-the-onpage-composer' data-href='#creating-banners-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 display a banner on a page of your online shop. A banner is an image that can contain several clickable areas and can be animated.\t<\/div>\n<\/div>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"creating-a-banner\">Creating a banner <span id='anchor-creating-a-banner' data-href='#creating-a-banner' class='far fa-link' data-anchor><\/span><\/h2><ol start=\"1\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\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 >\n\tDrag the <span class=\"highlight\">Banner<\/span> portlet anywhere in the OnPage Composer. The <span class=\"highlight\">Edit Banner <\/span>dialogue opens.<\/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-banner-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-banner-portlet-opc-jtl-shop-5-1-1024x407.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/add-banner-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/add-banner-portlet-opc-jtl-shop-5-1-1024x407.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/add-banner-portlet-opc-jtl-shop-5-1-768x305.png 640w\" width=\"1024\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"407\" alt=\"Editing a banner in the OnPage Composer\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/add-banner-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:1777,&quot;h&quot;:706}\" 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 >\n\tClick on <span class=\"highlight\">Click to upload<\/span>. A window opens with all the media files that are available to you in the OnPage Composer.<\/li><li >\n\tDrag and drop the image file for your banner into the window or right-click in the window and select <span class=\"highlight\">Upload file<\/span>, navigate to the file, and select it.<\/li><li class=\"media-single-line\">\n\tThen double-click on your graphic file to apply it to your banner.<\/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\/general-banner-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-banner-portlet-opc-jtl-shop-5-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/general-banner-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/general-banner-portlet-opc-jtl-shop-5-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/general-banner-portlet-opc-jtl-shop-5-1-596x768.png 640w\" width=\"781\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"1006\" alt=\"Uploaded banner in the OnPage Composer of JTL-Shop\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/general-banner-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:781,&quot;h&quot;:1006}\" 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>Alternative text:<\/strong> Enter an alternative text (alt text) for the uploaded image. This text can be interpreted by search engines, among others.<\/p>\n<ol start=\"7\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tClick <span class=\"highlight\">New zone<\/span>, to assign a link zone to the banner. Further settings for the zone open.<\/li><li >\n\tUse the red area to set the size of the zone. All places within the zone can be clicked on later by your customers.<\/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\/new-zone-banner-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\/new-zone-banner-portlet-opc-jtl-shop-5-1-652x1024.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/new-zone-banner-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/new-zone-banner-portlet-opc-jtl-shop-5-1-652x1024.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/new-zone-banner-portlet-opc-jtl-shop-5-1-489x768.png 640w\" width=\"652\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"1024\" alt=\"Setting up a zone for a banner\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/new-zone-banner-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:781,&quot;h&quot;:1226}\" 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>Title:<\/strong> Here you can enter a title for the zone. It is displayed when you move the mouse over the banner zone.<\/p>\n<hr  \/>\n\t<p><strong>URL:<\/strong> Here you can store a link to which the banner zone leads when clicked on.<\/p>\n<hr  \/>\n\t<p><strong>CSS class<:<\/strong> If you have defined your own CSS classes, you can specify them here.<\/p>\n<hr  \/>\n\t<p><strong>Item:<\/strong> Here you can search for an item to be linked in the zone and displayed when a customer moves the cursor over the zone.<\/p>\n<hr  \/>\n\t<p><strong>Open link in new tab:<\/strong> Here you can specify whether the stored link should be opened in a separate tab.<\/p>\n<ol start=\"9\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tFalls Sie mehrere Zonen definieren m\u00f6chten, klicken Sie auf <span class=\"highlight\">Neue Zone<\/span> und konfigurieren Sie Ihre n\u00e4chste Zone auf die gleiche Weise.<\/li><li class=\"media-single-line\">\n\tClick <span class=\"highlight\">Save<\/span> to apply your settings for the portlet.<\/li><li >\n\tFollow the further steps to preview and publish an edited page at <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><h3 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><\/h3>\t<p>You can make further settings in 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-banner-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-banner-portlet-opc-jtl-shop-5-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/layout-banner-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/layout-banner-portlet-opc-jtl-shop-5-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/layout-banner-portlet-opc-jtl-shop-5-1-768x691.png 640w\" width=\"781\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"703\" alt=\"Setting the layout for a portlet\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/layout-banner-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:781,&quot;h&quot;:703}\" 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 banner. The colour is only visible if you set a padding (see below).<\/p>\n<hr  \/>\n\t<p><strong>Font colour:<\/strong> Here you set the colour of the font. This setting has no effect on banners.<\/p>\n<hr  \/>\n\t<p><strong>Schriftgr\u00f6\u00dfe:<\/strong> Hier stellen Sie die Gr\u00f6\u00dfe der Schrift ein. Geben Sie hier einen CSS-Wert ein, z. B. <span class=\"TextRun BCX7 SCXW218896037\" lang=\"DE-DE\" xml:lang=\"DE-DE\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\">5px, 0.5em usw. <\/span><\/span>Diese Einstellung hat bei Bannern keine Auswirkung.<\/p>\n<hr  \/>\n\t<p><strong>Border style\/Border colour:<\/strong> Here you can specify whether the banner should have a border and what colour it should be.<\/p>\n<hr  \/>\n\t<p><strong>Rahmenabrundung:<\/strong> Hier k\u00f6nnen Sie festlegen, ob der Rahmen abgerundet sein soll. Sie geben jeweils an, mit welchem Abstand zur Ecke die Abrundung starten soll. Voraussetzung ist, dass Sie einen Rahmenstil ausgew\u00e4hlt haben. Geben Sie hier einen CSS-Wert ein, z. B. <span class=\"TextRun BCX7 SCXW218896037\" lang=\"DE-DE\" xml:lang=\"DE-DE\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\">5px, 0.5em usw.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><strong>Custom class names:<\/strong> Enter 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 <span class=\"TextRun BCX7 SCXW218896037\" lang=\"DE-DE\" xml:lang=\"DE-DE\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\"><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><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.<\/p>\n<hr  \/>\n\t<p><strong>Margin:<\/strong> 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> Here you can set the size of the frame in pixels for each page.<\/p>\n<hr  \/>\n\t<p><strong>Padding:<\/strong> Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge.<\/p>\n<h3 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><\/h3>\t<p>In this tab you can animate your banner.<\/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\/animation-banner-portlet-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-banner-portlet-jtl-shop-5-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/animation-banner-portlet-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/animation-banner-portlet-jtl-shop-5-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/animation-banner-portlet-jtl-shop-5-1-768x578.png 640w\" width=\"887\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"668\" alt=\"Setting an animation for a banner in the OPC\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/animation-banner-portlet-jtl-shop-5-1.png&quot;,&quot;w&quot;:887,&quot;h&quot;:668}\" 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 banner should be animated.<strong><br \/>\n<\/strong><\/p>\n<hr  \/>\n\t<p><strong>Duration:<\/strong> Here you can define how long the entire animation of the banner should last.<\/p>\n<hr  \/>\n\t<p><strong>Delay:<\/strong> 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> 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> 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-content-portlets\/\" title=\"Overview of content portlets\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tOverview of content 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\/creating-buttons-with-the-onpage-composer\/\" title=\"Creating buttons with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating buttons 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\/creating-image-sliders-with-the-onpage-composer\/\" title=\"Creating image sliders with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating image sliders 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\/creating-countdowns-with-the-onpage-composer\/\" title=\"Creating countdowns with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating countdowns 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\/creating-galleries-with-the-onpage-composer\/\" title=\"Creating galleries with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating galleries 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\/creating-headlines-with-the-onpage-composer\/\" title=\"Creating headlines with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating headlines 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-an-image-with-the-onpage-composer\/\" title=\"Inserting an image with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting an image 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\/creating-product-streams-with-the-onpage-composer\/\" title=\"Creating product streams with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating product streams 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-texts-with-the-onpage-composer\/\" title=\"Inserting texts with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting texts 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-videos-with-the-onpage-composer\/\" title=\"Inserting videos with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting videos 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 videos with the OnPage Composer Your task\/initial situation You would like to embed a video from YouTube <a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-texts-with-the-onpage-composer\/\">[...]<\/a>","protected":false},"author":2,"featured_media":0,"parent":188596,"menu_order":118,"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-187639","page","type-page","status-publish","hentry","pages_category-opc-content-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>Creating banners 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\/creating-banners-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=\"Creating banners with the OnPage Composer &#8211; JTL-Guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/\" \/>\n<meta property=\"og:site_name\" content=\"JTL-Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-15T13:39:40+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\/creating-banners-with-the-onpage-composer\/\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/\",\"name\":\"Creating banners with the OnPage Composer &#8211; JTL-Guide\",\"isPartOf\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\"},\"datePublished\":\"2021-03-18T15:29:29+00:00\",\"dateModified\":\"2023-06-15T13:39:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/#breadcrumb\"},\"inLanguage\":\"en-en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-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\":\"Creating banners 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":"Creating banners 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\/creating-banners-with-the-onpage-composer\/","og_locale":"en_US","og_type":"article","og_title":"Creating banners with the OnPage Composer &#8211; JTL-Guide","og_url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/","og_site_name":"JTL-Guide","article_modified_time":"2023-06-15T13:39:40+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\/creating-banners-with-the-onpage-composer\/","url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/","name":"Creating banners with the OnPage Composer &#8211; JTL-Guide","isPartOf":{"@id":"https:\/\/guide.jtl-software.com\/en\/#website"},"datePublished":"2021-03-18T15:29:29+00:00","dateModified":"2023-06-15T13:39:40+00:00","breadcrumb":{"@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/#breadcrumb"},"inLanguage":"en-en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-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":"Creating banners 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\/187639","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=187639"}],"version-history":[{"count":5,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/187639\/revisions"}],"predecessor-version":[{"id":195814,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/187639\/revisions\/195814"}],"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=187639"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/tags?post=187639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}