{"id":15,"date":"2020-02-28T15:57:37","date_gmt":"2020-02-28T15:57:37","guid":{"rendered":"http:\/\/wiki2.plumserver.com\/knowledge-base\/creating-html-banner"},"modified":"2021-07-23T07:00:59","modified_gmt":"2021-07-23T11:00:59","slug":"magento-1-banner-pro-v1-creating-html-banner","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner","title":{"rendered":"Creating HTML Banner"},"content":{"rendered":"\n<h2 id=\"magento-html-banner-configuration\">Magento HTML Banner Configuration<\/h2>\n\n\n\n<p>In this article you will learn how to create Magento HTML Banner in your <a href=\"\/magento-1-banner-pro\">Banner Pro Extension<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-warning\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Important Information:<\/p>\n\n\n\n<p><strong>Before you proceed with creating HTML Banner, please, make sure you have already created <a href=\"\/docs\/magento-1-banner-pro\/v1\/configuration#managing-placeholders\n\" title=\"Magento Banner Pro v1.x Configuration\">a placeholder<\/a> for this banner, as well as <a href=\"\/docs\/magento-1-banner-pro\/v1\/configuration#creating-new-campaign\n\" title=\"Magento Banner Pro v1.x Configuration\">a campaign<\/a> and <a href=\"\/docs\/magento-1-banner-pro\/v1\/configuration#configuring-banner-groups\n\" title=\"Magento Banner Pro v1.x Configuration\">a banner group<\/a>.<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<h3 id=\"creating-html-banner\">Creating HTML Banner<\/h3>\n\n\n\n<p>Follow these steps in order to create new Static Image Banner for your Magento Store.<\/p>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Detailed description:<\/p>\n\n\n\n<ol><li><strong>In the campaign tree you may see the banner group you have created.<\/strong><\/li><li><strong>Go to &#8220;Banners&#8221; tab.<\/strong><\/li><li><strong>Press on the &#8220;Add New Banner&#8221; button to create new banner.<\/strong><\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" src=\"\/docs\/wp-content\/uploads\/2020\/05\/1_magento_banner_pro_creating_static_banner.jpg\" alt=\"1 magento banner pro creating static banner\" width=\"1206\" height=\"638\"><\/figure>\n\n\n\n<p>Now you may create your custom HTML banner. Please, check the step-by-step guide below.<\/p>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Detailed description:<\/p>\n\n\n\n<ol><li><strong>&#8220;Name&#8221;:<\/strong> specify the name of a banner in this field.<\/li><li><strong>&#8220;Status&#8221;:<\/strong> option allows you to enable or disable a banner.<\/li><li><strong>&#8220;Banner Group&#8221;:<\/strong> field shows you the banner group this banner is assigned to.<\/li><li><strong>&#8220;Placeholder&#8221;:<\/strong> option allows you to set the location where the banner will be displayed at your store.<\/li><li>In the <strong>&#8220;Show Only On Product Pages&#8221;<\/strong> field you may choose whether the banner will be displayed on the product pages only.<\/li><li>Input the number in the <strong>&#8220;Priority&#8221;<\/strong> field. <strong>Note:<\/strong> The smaller the number &#8211; the higher is the priority. Banners with the highest priority will be displayed in banner sliders and static banners first.<\/li><li><strong>&#8220;Destination URL&#8221;:<\/strong> enter the url where the visitor will be redirected to after clicking on the banner.<\/li><li>Select <strong>HTML<\/strong> banner type in the <strong>&#8220;Banner Type&#8221;<\/strong> field.<\/li><li>Paste the HTML code in the <strong>&#8220;HTML Template&#8221;<\/strong> field.<\/li><li>Paste the CSS code in the <strong>&#8220;Template Styles&#8221;<\/strong> field.<\/li><li><strong>&#8220;Display Restrictions&#8221;<\/strong> field allows to set restrictions for a banner by pages. Specify rules to select the pages to display the banner on.<\/li><li>Press on the <strong>&#8220;Save Banner&#8221;<\/strong> option to save all your settings configured for the Top Image banner.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" src=\"\/docs\/wp-content\/uploads\/2020\/05\/1_magento_banner_pro_html_banner_v1.1.0.jpg\" alt=\"1 magento banner pro html banner v1\" width=\"1206\" height=\"1100\"><\/figure>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-info\"><div class=\"wp-block-group__inner-container\">\n<p class=\"pr-notice-title\">Detailed description:<\/p>\n\n\n\n<ol><li><strong>This is how your HTML Static Banner will be displayed on Magento frontend.<\/strong><\/li><\/ol>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" src=\"\/docs\/wp-content\/uploads\/2020\/05\/2_magento_banner_pro_html_banner.jpg\" alt=\"2 magento banner pro html banner\" width=\"1206\" height=\"920\"><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento HTML Banner Configuration In this article you will learn how to create Magento HTML Banner in your Banner Pro Extension. Creating HTML Banner Follow these steps in order to create new Static Image Banner for your Magento Store. Now you may create your custom HTML banner. Please, check the step-by-step guide below.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[221],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.2 (Yoast SEO v17.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating HTML Banner - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"Magento HTML Banner Configuration In this article you will learn how to create Magento HTML Banner in your Banner Pro Extension. Important Information:\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating HTML Banner\" \/>\n<meta property=\"og:description\" content=\"Magento HTML Banner Configuration In this article you will learn how to create Magento HTML Banner in your Banner Pro Extension. Important Information:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-28T15:57:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-23T11:00:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2020\/05\/1_magento_banner_pro_creating_static_banner.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating HTML Banner - Plumrocket Documentation","description":"Magento HTML Banner Configuration In this article you will learn how to create Magento HTML Banner in your Banner Pro Extension. Important Information:","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:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner","og_locale":"en_US","og_type":"article","og_title":"Creating HTML Banner","og_description":"Magento HTML Banner Configuration In this article you will learn how to create Magento HTML Banner in your Banner Pro Extension. Important Information:","og_url":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner","og_site_name":"Plumrocket Documentation","article_published_time":"2020-02-28T15:57:37+00:00","article_modified_time":"2021-07-23T11:00:59+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2020\/05\/1_magento_banner_pro_creating_static_banner.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner#primaryimage","inLanguage":"en-US","url":"\/docs\/wp-content\/uploads\/2020\/05\/1_magento_banner_pro_creating_static_banner.jpg","contentUrl":"\/docs\/wp-content\/uploads\/2020\/05\/1_magento_banner_pro_creating_static_banner.jpg"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner","name":"Creating HTML Banner - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner#primaryimage"},"datePublished":"2020-02-28T15:57:37+00:00","dateModified":"2021-07-23T11:00:59+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20"},"description":"Magento HTML Banner Configuration In this article you will learn how to create Magento HTML Banner in your Banner Pro Extension. Important Information:","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1\/quickstart\/create-html-banner#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento Extensions","item":"https:\/\/plumrocket.com\/magento-1-extensions"},{"@type":"ListItem","position":2,"name":"Magento Banner Pro","item":"https:\/\/plumrocket.com\/magento-1-banner-pro"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro"},{"@type":"ListItem","position":4,"name":"v1","item":"https:\/\/plumrocket.com\/docs\/magento-1-banner-pro\/v1"},{"@type":"ListItem","position":5,"name":"Creating HTML Banner"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","caption":"Plumrocket"},"sameAs":["https:\/\/plumrocket.com\/docs"]}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/15"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":1,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":22563,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/15\/revisions\/22563"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}