{"id":4144,"date":"2021-09-30T03:23:40","date_gmt":"2021-09-30T03:23:40","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4144"},"modified":"2023-12-10T19:17:09","modified_gmt":"2023-12-10T19:17:09","slug":"how-to-use-the-battle-cards-infographic-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-battle-cards-infographic-template\/","title":{"rendered":"How to use the Battle Cards Infographic Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/d4327a9dcdef44d3b348a68e8ceca7c1?sid=7b4bb180-9ce8-4456-92ec-0459f6e3800e\" 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\/infographic\/battle-cards-infographic\">Battle Cards Infographic<\/a> is a standard infographic with 6 sections that compares 3 different themes or topics. This full page experience is excellent for comparing different content side by side which will help your viewers understand how each topic can benefit their needs. The side navigation allows the viewer to switch and explore between different categories. Interactive reveals and animations will keep the viewer engaged as they navigate through the experience. At the end of the experience, the viewer has the option to contact your company.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Infographic<\/li>\n\n\n\n<li>Complexity: Medium<\/li>\n\n\n\n<li>Use case: Engagement<\/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>Animations<\/li>\n\n\n\n<li>Sticky 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\/14IJi_Oet9fNAEpLszb30sjVMP1I6u9jN?usp=sharing\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Animations<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit or apply an animation, first select the element you want to animate on the canvas.<\/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\/image-120-1024x576.png\" alt=\"\" class=\"wp-image-4145\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-120-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-120-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-120-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-120-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-120-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-120-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-120.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Under the <strong>Animations <\/strong>panel, expand the <strong>(trigger) <\/strong>dropdown to select the animation trigger.&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\/image-121-1024x576.png\" alt=\"\" class=\"wp-image-4146\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-121-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-121-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-121-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-121-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-121-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-121-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-121.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: After selecting the animation trigger, expand the <strong>(choose) <\/strong>dropdown and choose the type of animation you want to apply to the element.&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\/image-122-1024x576.png\" alt=\"\" class=\"wp-image-4147\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-122-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-122-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-122-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-122-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-122-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-122-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-122.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Sticky Navigation<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the navigation, first select the <strong>Sticky Container <\/strong>on the canvas.<\/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\/image-123-1024x576.png\" alt=\"\" class=\"wp-image-4148\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-123-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-123-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-123-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-123-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-123-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-123-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-123.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: Within the sticky container, there are <strong>Containers <\/strong>with <strong>Text <\/strong>elements and <strong>Link <\/strong>elements. Each Link element will lead the user to another page in the creative. To edit the link location, select one of the <strong>Link <\/strong>elements.&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\/image-124-1024x576.png\" alt=\"\" class=\"wp-image-4149\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-124-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-124-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-124-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-124-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-124-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-124-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-124.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: Click under the <strong>Actions <\/strong>panel, to open up the action 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\/image-125-1024x576.png\" alt=\"\" class=\"wp-image-4150\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-125-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-125-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-125-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-125-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-125-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-125-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-125.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 4: Under the <strong>Go to Page <\/strong>tab, you can select, from the dropdown, which page the link will go to next. Once you select the page, press <strong>OK <\/strong>to save.&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\/image-126-1024x576.png\" alt=\"\" class=\"wp-image-4151\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-126-1024x576.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-126-300x169.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-126-768x432.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-126-1536x864.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-126-1200x675.png 1200w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-126-585x329.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/image-126.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\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\/1xq1YYWl3G8n36-pTHeTRJZqaq9cwUNK_TVG5UwIDSDU\/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:\/\/rockcontent.com\/gallery\/image-focused-ebook\/\">Image-focused eBook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/interactive-case-study\/\">Interactive Case Study<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/easy-infographic\/\">Easy Infographic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/interactive-timeline\/\">Interactive Timeline<\/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 Battle Cards Infographic is a standard infographic with 6 sections that compares 3 different themes or topics. This full page experience is excellent for comparing different content side by side which will help [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5831,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4144","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\/4144","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=4144"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4144\/revisions"}],"predecessor-version":[{"id":5833,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4144\/revisions\/5833"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5831"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}