{"id":9441,"date":"2017-12-04T19:00:39","date_gmt":"2017-12-04T13:30:39","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=9441"},"modified":"2020-04-07T13:19:36","modified_gmt":"2020-04-07T07:49:36","slug":"diy-menu-slider-email-interactivity","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/","title":{"rendered":"Adding Interactivity in Email is Now Easy! Introducing Uplers&#8217; DIY Menu and Slider Tool"},"content":{"rendered":"<p>Mankind has always been on a lookout for tools making their work easier. A set of materials combine to become simple machines, a set of simple machines blend to create the complex machine. Similarly, Uplers too have created two complex tools that are a combination of smaller codes that make integrating email interactivity much easier.<\/p>\n<h2>Why we created the email interactivity tool?<\/h2>\n<p>From an analysis of the number of downloads for different email elements, we observed that the number of samples downloaded for Navigation menu and Slider Carousel has increased by 12.45% and 57.43% respectively in 2017 as compared to 2016.<\/p>\n<p>Since the downloads have been increasing, this means people want to see this in their emails. But only a handful of brands have been implementing email interactivity, as highlighted in our Mailable Microsites series &#8211; <a href=\"https:\/\/email.uplers.com\/blog\/mailable-microsites-rei-menu-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">REI uses hamburger menu<\/a> and <a href=\"https:\/\/email.uplers.com\/blog\/mailable-microsites-how-burberry-slid-sliders-in-emails\/\" target=\"_blank\" rel=\"noopener noreferrer\">Burberry uses Sliders<\/a>.<\/p>\n<p>The reasons for most brands not adopting email interactivity are:<\/p>\n<ol>\n<li>Too complex code and CSS dependencies<\/li>\n<li>Too difficult to make it ESP compliant<\/li>\n<li>Every time the code needs to be written from scratch<\/li>\n<li>Selected email client compatibility and extra care that needs to be taken for fallback (in case of Slider)<\/li>\n<li>Ensuring the design follows your branding guidelines<\/li>\n<\/ol>\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-17420 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/portfolio\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"200\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/07\/sample-email-template-NL-LP.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/07\/sample-email-template-NL-LP.jpg 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/07\/sample-email-template-NL-LP-300x75.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/07\/sample-email-template-NL-LP-768x192.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/07\/sample-email-template-NL-LP-624x156.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n<h2>How can this tool help?<\/h2>\n<p>Our code builder addresses all the above-stated problems and some more:<\/p>\n<ul>\n<li>You can specify the width of the menu or slider as per your email width.<\/li>\n<li>You can personalize your interactive elements as per your branding guidelines.\n<div id=\"attachment_9442\" style=\"width: 1299px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9442\" class=\"wp-image-9442 size-full\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Menu-Details.png\" alt=\"Introducing-DIY-Email-Interactivity-Menu Details\" width=\"1289\" height=\"978\"><p id=\"caption-attachment-9442\" class=\"wp-caption-text\">A glimpse of how you can create a navigation menu based on your brand guidelines<\/p><\/div>\n<p style=\"text-align: center;\"><span style=\"text-align: center; color: #f26522; font-size: 18px;\">Drop down navigation menu is quite helpful to hide your links when the email is viewed in mobile. Try our <a href=\"https:\/\/email.uplers.com\/menus-in-email\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>DIY navigation tool <\/strong><\/a>for adding one in your emails.<\/span><\/p>\n<hr>\n<div id=\"attachment_9444\" style=\"width: 1302px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9444\" class=\"wp-image-9444 size-full\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Slider-Details.png\" alt=\"Introducing-DIY-Email-Interactivity-Slider Details\" width=\"1292\" height=\"679\"><p id=\"caption-attachment-9444\" class=\"wp-caption-text\">A glimpse of how you can create a carousel based on your brand guidelines<\/p><\/div>\n<p style=\"text-align: center;\"><span style=\"text-align: center; color: #f26522; font-size: 18px;\">Image Carousel can stack multiple images without occupying much space. Try our <a href=\"https:\/\/email.uplers.com\/collapsible-carousel-in-email\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>DIY Image Carousel tool <\/strong><\/a>for adding one in your emails.<\/span><\/p>\n<hr>\n<\/li>\n<li>The end code is pre-tested to be compatible with ESPs such as <strong>Campaign Monitor, Exact Target, Marketo, Hubspot &amp; Adestra.<\/strong><\/li>\n<li>In case of slider, you can also select the type of fallback you want in email clients i.e.<br \/>\n1)<strong>Either show one image (Choose Primary)<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9445 size-full\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Slider-Preview-Fallback-Primary.png\" alt=\"Introducing-DIY-Email-Interactivity-Slider Preview Fallback Primary\" width=\"1368\" height=\"480\"><br \/>\n2)<strong>Stack all the images (Choose All)<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9446 size-full\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Slider-Preview-Fallback.png\" alt=\"Introducing-DIY-Email-Interactivity-Slider Preview Fallback\" width=\"1339\" height=\"576\"><\/li>\n<li>You can preview the functionality in desktop and mobile along with the fallback.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9447 size-full\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Slider-Preview.png\" alt=\"Introducing-DIY-Email-Interactivity-Slider Preview\" width=\"1277\" height=\"475\"><\/li>\n<\/ul>\n<p>Once you are satisfied with the result, press \u201cGet the Code\u201d. You shall receive the HTML and CSS code separately. Copy the CSS before closing the &lt;head&gt; tag and HTML code at desired place in the &lt;body&gt;.<\/p>\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-17419 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/interactive-email-templates\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"200\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media.jpg 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media-300x75.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media-768x192.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media-624x156.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n<h2><\/h2>\n<h2>How can the Uplers help?<\/h2>\n<p>Unfortunately, the code is not supported by MailChimp, owing to lack of support to input functionality. Drop us your requirement for options with MailChimp.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mankind has always been on a lookout for tools making their work easier. A set of materials combine to become simple machines, a set of simple machines blend to create the complex machine. Similarly, Uplers too have created two complex tools that are a combination of smaller codes that make integrating email interactivity much easier. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9449,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[381],"tags":[],"class_list":["post-9441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Email Interactivity with Uplers DIY Menu and Slider Tool<\/title>\n<meta name=\"description\" content=\"This blog explains how to add the email interactivity by using our DIY tools for navigation menu and carousel since interactive emails convert more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Email Interactivity with Uplers DIY Menu and Slider Tool\" \/>\n<meta property=\"og:description\" content=\"This blog explains how to add the email interactivity by using our DIY tools for navigation menu and carousel since interactive emails convert more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-04T13:30:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-07T07:49:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Tools.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"198\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/\",\"name\":\"Email Interactivity with Uplers DIY Menu and Slider Tool\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Tools.gif\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"This blog explains how to add the email interactivity by using our DIY tools for navigation menu and carousel since interactive emails convert more.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Tools.gif\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Tools.gif\",\"width\":\"1170\",\"height\":\"428\",\"caption\":\"Introducing-DIY-Email-Interactivity-Tools\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Interactivity in Email is Now Easy! Introducing Uplers&#8217; DIY Menu and Slider Tool\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Email Interactivity with Uplers DIY Menu and Slider Tool","description":"This blog explains how to add the email interactivity by using our DIY tools for navigation menu and carousel since interactive emails convert more.","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:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/","og_locale":"en_US","og_type":"article","og_title":"Email Interactivity with Uplers DIY Menu and Slider Tool","og_description":"This blog explains how to add the email interactivity by using our DIY tools for navigation menu and carousel since interactive emails convert more.","og_url":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2017-12-04T13:30:39+00:00","article_modified_time":"2020-04-07T07:49:36+00:00","og_image":[{"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Tools.gif","width":540,"height":198,"type":"image\/gif"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/","url":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/","name":"Email Interactivity with Uplers DIY Menu and Slider Tool","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Tools.gif","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"This blog explains how to add the email interactivity by using our DIY tools for navigation menu and carousel since interactive emails convert more.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Tools.gif","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Introducing-DIY-Email-Interactivity-Tools.gif","width":"1170","height":"428","caption":"Introducing-DIY-Email-Interactivity-Tools"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/diy-menu-slider-email-interactivity\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Interactivity in Email is Now Easy! Introducing Uplers&#8217; DIY Menu and Slider Tool"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/9441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=9441"}],"version-history":[{"count":18,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/9441\/revisions"}],"predecessor-version":[{"id":19106,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/9441\/revisions\/19106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/9449"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=9441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=9441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=9441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}