{"id":4116,"date":"2021-09-02T03:12:32","date_gmt":"2021-09-02T03:12:32","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4116"},"modified":"2023-12-10T19:15:33","modified_gmt":"2023-12-10T19:15:33","slug":"how-to-use-the-interactive-newsletter-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-interactive-newsletter-template\/","title":{"rendered":"How to use the Interactive Newsletter Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/ca11e3a2fcd3469796e627cbe59056d3?sid=b6e2decc-63b1-4785-bbcc-8ae50d28e7a4\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n\n\n\n<p>The <a href=\"https:\/\/iontemplates.rockcontent.com\/preview\/standard\/contenthub\/interactive-newsletter\">Interactive Newsletter<\/a> is a low-complexity template that focuses on brand awareness. This template is perfect for editorials and newsletters. This experience is designed with a focus on imagery. Viewers can easily jump between the different sections using the top navigation and can use the interactive arrows within the first section to flip through the different topics. At the end of the experience, the viewer can choose to sign up for the next newsletter, and additional information can be included in the small tooltip containers within some sections.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Content Hub<\/li>\n\n\n\n<li>Complexity: Low<\/li>\n\n\n\n<li>Use case: Brand Awareness<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Features available<\/h2>\n\n\n\n<p>Here are the major features, abilities, and interactive elements used in this template.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Animation<\/li>\n\n\n\n<li>Navigation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How-to use<\/h2>\n\n\n\n<p>Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.<\/p>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/drive\/folders\/1-xMd_JQFNtvTuCE1Y6IdAuDFN1Mo8I7D?usp=sharing\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Animation<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the <strong>Animation<\/strong>, begin by selecting the element you wish to animate on the canvas.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"563\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-102.png\" alt=\"\" class=\"wp-image-4117\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-102.png 1000w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-102-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-102-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-102-585x329.png 585w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Animations <\/strong>tab, select a new trigger from the dropdown menu.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"563\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-103.png\" alt=\"\" class=\"wp-image-4118\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-103.png 1000w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-103-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-103-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-103-585x329.png 585w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Step 3: After selecting a trigger, choose an<strong> Animation<\/strong> type from the dropdown menu.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"563\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-104.png\" alt=\"\" class=\"wp-image-4119\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-104.png 1000w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-104-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-104-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-104-585x329.png 585w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Step 4: You can remove animations by clicking on the X on the blue animation tag.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"563\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/image-105.png\" alt=\"\" class=\"wp-image-4120\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-105.png 1000w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-105-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-105-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-105-585x329.png 585w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Navigation<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the <strong>Navigation, <\/strong>select the <strong>Navigation Item <\/strong>on the canvas.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-1-min-1024x576.png\" alt=\"\" class=\"wp-image-4121\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-1-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-1-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-1-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-1-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-1-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-1-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-1-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Behaviors<\/strong> panel, click into the Scroll to tab to open the behavior settings.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-2-min-1024x576.png\" alt=\"\" class=\"wp-image-4122\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-2-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-2-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-2-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-2-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-2-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-2-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-2-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Select an <strong>Anchor <\/strong>from the list of anchors and click<strong> OK.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-3-min-1024x576.png\" alt=\"\" class=\"wp-image-4123\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-3-min-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-3-min-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-3-min-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-3-min-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-3-min-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-3-min-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Interactive-Newsletter-Nav-3-min.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Content Writing Template<\/h2>\n\n\n\n<p><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1Dd7Sjccdawk-NBTiIB-MzzvqQSwqOpDtoUZDzdVozWg\/edit?usp=sharing\">Here is the content structure\u2019s template<\/a> to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related templates<\/h2>\n\n\n\n<p>If you like this template, you might want to check out these other similar models.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/standard\/contenthub\/interactive-catalog\">Interactive Catalog<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/standard\/content-hub\/resource-library-with-filters\">Resource Library with Filters<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/standard\/contenthub\/interactive-brandbook\">Interactive Brandbook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/premium\/content-hub\/digital-magazine\">Digital Magazine<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have a question?<\/h2>\n\n\n\n<p>Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to <a href=\"mailto:help@ioninteractive.com\">help@ioninteractive.com<\/a>, so we can make sure to have this article constantly up to date.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Interactive Newsletter is a low-complexity template that focuses on brand awareness. This template is perfect for editorials and newsletters. This experience is designed with a focus on imagery. Viewers can easily jump between [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5825,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-templates-gallery"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=4116"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4116\/revisions"}],"predecessor-version":[{"id":5827,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4116\/revisions\/5827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5825"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}