{"id":4299,"date":"2021-12-23T04:49:11","date_gmt":"2021-12-23T04:49:11","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4299"},"modified":"2023-12-10T19:31:57","modified_gmt":"2023-12-10T19:31:57","slug":"how-to-use-the-content-marketing-calculator-results-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-content-marketing-calculator-results-template\/","title":{"rendered":"How to use the Content Marketing Calculator Results Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/51ccc1e8d001485fa9f364cad6d7728e?sid=52169d2b-7881-46ff-8088-d1b475a6ab46\" 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\/premium\/calculator\/content-marketing-calculator\">Content Marketing Calculator<\/a> is an interactive live and gated calculator that includes values that correspond to movement along the slider. This ROI calculator is a single page experience where calculations happen at the blink of an eye as soon as changes to individual sliders are adjusted the final results change as well. The calculator includes tooltips to help users better understand their inputs as well as additional information displayed in an accordion below.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Calculator<\/li>\n\n\n\n<li>Complexity: Expert<\/li>\n\n\n\n<li>Use case: Sales Enablement<\/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>Accordion<\/li>\n\n\n\n<li>Animation<\/li>\n\n\n\n<li>Blur results (Custom Code)<\/li>\n\n\n\n<li>Reveal<\/li>\n\n\n\n<li>Slider value (Custom Code)<\/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\/1QGUqdm9LyXP92QIYyvcaKMXXh6jdwEC4?usp=share_link\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Accordion<\/strong><\/h3>\n\n\n\n<p>Step 1: To add or remove sections of the accordion, select the Accordion element. Navigate to the Variables panel and expand the section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-1-1024x561.png\" alt=\"\" class=\"wp-image-4300\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-1-1024x561.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-1-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-1-768x421.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-1-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-1-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-1-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: To add a section, select the next empty section. Add a section title by selecting +Label. Don\u2019t forget to add a tag for behavioral tracking. Place text into the section by dragging in a text element into the accordion section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-1-1024x561.png\" alt=\"\" class=\"wp-image-4301\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-1-1024x561.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-1-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-1-768x421.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-1-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-1-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-1-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Animation<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the element that you would like to apply, remove, or change the animation of. Navigate to the Animations panel, and set the trigger. The trigger is when the animation will take place either on hover, scroll into view, etc. Then select the animation type which is the type of animation the element will perform.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-3-1024x561.png\" alt=\"\" class=\"wp-image-4303\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-3-1024x561.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-3-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-3-768x421.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-3-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-3-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-3-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Blur results (Custom Code):<\/strong><\/h3>\n\n\n\n<p>Step 1: To make the result calculations more or less blurry when the form is incomplete, navigate to the page rules.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-5-1024x561.png\" alt=\"\" class=\"wp-image-4305\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-5-1024x561.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-5-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-5-768x421.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-5-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-5-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-5-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: To make the gated result calculations more blurry, navigate to the Form Incomplete rule and set the ResultClass value to a higher pixel value. The higher the value the more blurry the result will be.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-3-1024x561.png\" alt=\"\" class=\"wp-image-4307\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-3-1024x561.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-3-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-3-768x421.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-3-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-3-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-3-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Slider value (Custom Code)<\/strong><\/h3>\n\n\n\n<p>Step 1: To edit the numerical symbol from a $, %, or etc., select the text, double click to open the text editor, and then select source. The source will display the html format for the text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-1-7-1024x561.png\" alt=\"\" class=\"wp-image-4313\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-7-1024x561.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-7-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-7-768x421.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-7-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-7-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-1-7-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 2: To add a numerical symbol before the value, add it before the &lt;span&gt; tag.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-2-6-1024x561.png\" alt=\"\" class=\"wp-image-4312\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-6-1024x561.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-6-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-6-768x421.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-6-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-6-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-2-6-585x320.png 585w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Step 3: To add a numerical symbol after the value, add it after the &lt;\/span&gt; tag.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"561\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/09\/Step-3-1024x561.png\" alt=\"\" class=\"wp-image-4310\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-1024x561.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-300x164.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-768x421.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-1536x841.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-2048x1121.png 2048w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/09\/Step-3-585x320.png 585w\" 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\/1p3G9496QJKxJ_z4aiXi2TJeDY33w8NdF61dl4uBdgXQ\/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\/premium\/calculator\/marketing-automation\">Marketing Automation Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/paid-media-calculator\/\">Paid Media Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/savings-calculator\/\">Savings Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/premium\/calculator\/social-media\">Social Media Calculator<\/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 Content Marketing Calculator is an interactive live and gated calculator that includes values that correspond to movement along the slider. This ROI calculator is a single page experience where calculations happen at the [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5850,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4299","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\/4299","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=4299"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4299\/revisions"}],"predecessor-version":[{"id":5852,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4299\/revisions\/5852"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5850"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}