{"id":72019,"date":"2016-06-13T09:03:28","date_gmt":"2016-06-13T13:03:28","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=72019"},"modified":"2017-08-24T05:24:15","modified_gmt":"2017-08-24T09:24:15","slug":"magento-how-to-edit-banners","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/magento-how-to-edit-banners.html","title":{"rendered":"Magento. How to edit banners"},"content":{"rendered":"<div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/YncvvXlqBwI\"><\/iframe>\r\n<\/div>\r\n\r\n<ol>\r\n\t\r\n<li><p>Log into the admin panel of your store. Navigate to <strong>CMS -> Pages -> Home:<\/strong><\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_1-300x228.jpg\" alt=\"Magento_How_to_edit_banners_1\" width=\"300\" height=\"228\" class=\"alignnone size-medium wp-image-72020\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_1-300x228.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_1-150x114.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n\r\n<li><p>Select the <strong>Design<\/strong> tab. You will find banner reference there:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_2-300x228.jpg\" alt=\"Magento_How_to_edit_banners_2\" width=\"300\" height=\"228\" class=\"alignnone size-medium wp-image-72021\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_2-300x228.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_2-150x114.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n\r\n<li><p>This means banners are controlled by a static block.<\/p><\/li>\r\n\r\n<li><p>Go to <strong>CMS -> Static blocks -> Banner-container:<\/strong><\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banners.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banners-300x228.jpg\" alt=\"Magento_how_to_edit_banners\" width=\"300\" height=\"228\" class=\"alignnone size-medium wp-image-72022\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banners-300x228.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banners-150x114.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banners.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n\r\n<li><p> Search for the following piece of code:<\/p>\r\n\r\n<pre class=\"brush:html\">\r\n&lt;div class=\"bage\"&gt;&lt;img src=\"{{skin url='images\/banner-1.jpg'}}\" alt=\"\" \/&gt;&lt;\/div&gt;\r\n&lt;div class=\"banner-txt\"&gt;\r\n\t&lt;h3&gt;Cruisers&lt;\/h3&gt;\r\n\t&lt;p&gt;Duis ultr icies pharetra magnonec accuanl esuada orcinec sitmet eros.&lt;\/p&gt;\r\n\t&lt;a href=\"{{store url=''}}cruiser.html\" class=\"banner-btn\"&gt;Shop now!&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\r\n<\/li>\r\n<li><p>Here you can modify the image, link and text for the banner:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banner3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banner3-300x169.jpg\" alt=\"Magento_how_to_edit_banner3\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72023\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banner3-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banner3-150x85.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banner3-1024x577.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_how_to_edit_banner3.jpg 1349w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n\r\n<li><p>In order to change the link for the banner, you have to open the required page and copy its URL. Place it instead of page_url here in <code>&lt;a href={{store url=''}}&gt;&lt;\/a&gt;<\/code> line.<\/p>\r\n<\/li>\r\n<li><p>The default reference used for the banner image is <code>&lt;img src=\"{{skin url='images\/banner-1.jpg'}}\" alt=\"\"&gt;<\/code>. Replace the default name of the file with the required one. Make sure new banner image is uploaded, usually it is located under \/skin\/frontend\/default\/theme###\/images\/media\/ folder on server.<\/p><\/li>\r\n<li><p><code>&lt;h3&gt;Cruisers&lt;\/h3&gt;<\/code> is where you can change banner text. Update it with your own one. Make sure text is placed within the <code>&lt;h3&gt; &lt;\/h3&gt;<\/code> tags.<\/p><\/li>\r\n<\/ol>\r\n<p>Use &#8216;Save Block&#8217; button to apply the changes and open Magento front-end to view modifications.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_5-300x228.jpg\" alt=\"Magento_How_to_edit_banners_5\" width=\"300\" height=\"228\" class=\"alignnone size-medium wp-image-72024\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_5-300x228.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_5-150x114.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/06\/Magento_How_to_edit_banners_5.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-2-(835-x100).jpg\"\/>\r\n<\/a>\r\n<\/div>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=YncvvXlqBwI?width=1280&amp;height=720\" rel=\"prettyPhoto\">Magento. How to edit banners<\/a>\r\n<p>Browse the collection of premium <a href=\"https:\/\/www.templatemonster.com\/magento-themes.php\" target=\"_blank\">Magento themes<\/a> to select the best for your online store.<\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial is going to guide you on editing banners in Magento templates.<\/p>\n","protected":false},"author":109,"featured_media":72025,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[729],"tags":[1277,2407],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72019"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/109"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=72019"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72019\/revisions"}],"predecessor-version":[{"id":82917,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72019\/revisions\/82917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/72025"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=72019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=72019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=72019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}