Step-by-Step Guide to Using the Template<\/h2>\n\n\n\nUpdate the icons<\/h3>\n\n\n\n\n- To replace the icons to images that better fit your brand, double click on the element or click on the element highlighted in the image below:
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdFU7ZTYU91LJq8A_WsaEvJSnPo27XVa6AxnohrhGtMtbpCUkETpmcJBtZKdjGOjcfXk3MQhxSAIzDYP0b0mMcNfhgWdAeWgggqjSSGI3U5vhCCPKeZPU6KosNEjFphGQkWkAKvgA?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n\n\n\n - On the popup window, click on \u201cReselect image\u201d on the top right corner and create a library or upload to a preexistent image library.
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXekoKwV_xm0wx8DwkC1tOskOG5YI_DShK3f47yFVtISeqpZQ0hdfYQZ9YhLHwVf-Q9TEwCM1Tf3jbat1QWZBRbIwM1f0PYkakrTJbW3jLx_iVGoA2UKE1CdcjHqYdV5J7JbPPcIXg?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n<\/ul>\n\n\n\nAdding anchors<\/h3>\n\n\n\n\n- You can guide the user with the use of anchors, with the ROI the \u201cStart now\u201d button has an action to scroll to an anchored section. To make one, select the element that\u2019s going to be used as an anchor.
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcGmO0QFjxdczEtBn4aAUUg72EKuIZYkgZJdML4XRj1iBehC29UWUIt0Phghl4QW9jQAjQdsZeqCZtMGBLmau6P3SM0qR5tnB1PnTrCBnJJ29oiFW4NjcRIIx9CmgE3ff12TeyoJw?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n\n\n\n - With the element selected on the top right click on the anchor icon, the anchor must have an unique name. Don\u2019t forget to hit the \u201cok\u201d button to save it.
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe10Gb-JXj2J66Q6T_c-oT7BTzACmpt06LULCg7g2h3MlTt2d6beFKsD5my66lPOFaFdvq5R2MHBqIz1F7DQXc4fslkZKR3ZesrLeCTEI5MJ0WVZcmMCO6Stc0iZrm-ptMezLnm6w?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n\n\n\n - Now, add a button or a link and give them a behavior, it is located on the Settings tab.
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf33ETjI0lxyWxuTkWbRmfF2EAgVLiyJG_pqSB84snQdFejaPtnSaVSm1EJ4XveeIXmTs9ypiUUGmtqK2qMglLn8s5yhghMKcftpRz2U0hW8lb_nIcrhmU8CwCv-gvn1kNJs9XWsA?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n\n\n\n - On the popup window select the anchor and give it an unique tag. Save it by clicking on the \u201cApply\u201d button.
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeRv_-2puAfZqQizqlhGtYS8VEfbCwVQ5e5KU7TUalUWLqEyLcBy0jSVsVwRGJCVGQGB1zHCGwmbRd1lAYjG3cbCL2CoJycqXPUvTqrBVCskQoNgod4bOhZiqD9aiUpVJl8v9N5?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n<\/ul>\n\n\n\nAdding animations<\/h3>\n\n\n\n\n- Animations are a way to win and retain the attention of the user, but it can also come to their aid, guiding them on where to click next. Select the element you want to animate and click on the highlighted button shown below:
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcaRaMYk5UJlmDszQ1eFYo8J87iza0f8XVP91Ongz5BLCwKIyEaXKPJyfXVfv6NPluhT3kRyzrthhWP-_ygeHI0FqPJ1NYNIXkGAQw2ZESzp0uImZYA6T1xz4dpE1taRbTMxn4S7g?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n\n\n\n - Upon clicking on it, you\u2019ll be presented with different trigger actions, you can learn about them in this article<\/a>. Select the animation that better suits your needs.
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeK-2swLCHqd2RWQdvDCANli7KjoPaCfcCPi9NQWmO1gXkwOwQfED2qw_SDq2CzC0I4MaJzbXpKxXi37u56XYat-zOlzD5zemZNSSgouTeh4QEgN7Lnwqr2FeQ2P7yy8BoqAQsC_A?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n\n\n\n- Whilst the first options are regarding the type of animations you can apply and the actions to trigger them, the last three options: Delays, Duration and Looping are more customisable settings, where you can adjust how long it\u2019ll take for an animation to start, how long it\u2019s going to last and how many times it\u2019s going to repeat.
![](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcsFpggn0sPSLXQTWqhUopA3s64xcY-5DUNKZCvoYSrJKt1t-8SPG5D7zJ3tTss1nOoPYWKSH4wJ061PbyhU_GqaRZ2KSVNgFHbRdyw20Efyzq8vOAGcSvqSZHrX8KIiIyaD2bW8w?key=lQz2fz1ba1saDFSugtOqUQ\")
<\/li>\n<\/ul>\n\n\n\nTest and Publish<\/h3>\n\n\n\n
Before going live, preview your ROI Calculator on all devices to ensure the experience works as expected. Enter sample data to confirm that calculations display correctly, labels are accurate, and any optional lead capture fields function properly. Once everything is verified, publish your calculator as a standalone page or embed it on your website – ready to engage visitors and demonstrate the value of your solution.<\/p>\n","protected":false},"excerpt":{"rendered":"
The ROI Calculator template is a streamlined, interactive experience that guides visitors through entering their core performance metrics and instantly generates clear, detailed results. It simplifies complex calculations into an intuitive format, making it […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-7632","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7632","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=7632"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7632\/revisions"}],"predecessor-version":[{"id":7633,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7632\/revisions\/7633"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=7632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=7632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=7632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- To replace the icons to images that better fit your brand, double click on the element or click on the element highlighted in the image below:
<\/li>\n\n\n\n - On the popup window, click on \u201cReselect image\u201d on the top right corner and create a library or upload to a preexistent image library.
<\/li>\n<\/ul>\n\n\n\nAdding anchors<\/h3>\n\n\n\n
- \n
- You can guide the user with the use of anchors, with the ROI the \u201cStart now\u201d button has an action to scroll to an anchored section. To make one, select the element that\u2019s going to be used as an anchor.
- With the element selected on the top right click on the anchor icon, the anchor must have an unique name. Don\u2019t forget to hit the \u201cok\u201d button to save it.
- Now, add a button or a link and give them a behavior, it is located on the Settings tab.
- On the popup window select the anchor and give it an unique tag. Save it by clicking on the \u201cApply\u201d button.
<\/li>\n<\/ul>\n\n\n\nAdding animations<\/h3>\n\n\n\n
- \n
- Animations are a way to win and retain the attention of the user, but it can also come to their aid, guiding them on where to click next. Select the element you want to animate and click on the highlighted button shown below:
- Upon clicking on it, you\u2019ll be presented with different trigger actions, you can learn about them in this article<\/a>. Select the animation that better suits your needs.
<\/li>\n\n\n\n- Whilst the first options are regarding the type of animations you can apply and the actions to trigger them, the last three options: Delays, Duration and Looping are more customisable settings, where you can adjust how long it\u2019ll take for an animation to start, how long it\u2019s going to last and how many times it\u2019s going to repeat.
<\/li>\n<\/ul>\n\n\n\nTest and Publish<\/h3>\n\n\n\n
Before going live, preview your ROI Calculator on all devices to ensure the experience works as expected. Enter sample data to confirm that calculations display correctly, labels are accurate, and any optional lead capture fields function properly. Once everything is verified, publish your calculator as a standalone page or embed it on your website – ready to engage visitors and demonstrate the value of your solution.<\/p>\n","protected":false},"excerpt":{"rendered":"
The ROI Calculator template is a streamlined, interactive experience that guides visitors through entering their core performance metrics and instantly generates clear, detailed results. It simplifies complex calculations into an intuitive format, making it […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-7632","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7632","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=7632"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7632\/revisions"}],"predecessor-version":[{"id":7633,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7632\/revisions\/7633"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=7632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=7632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=7632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Whilst the first options are regarding the type of animations you can apply and the actions to trigger them, the last three options: Delays, Duration and Looping are more customisable settings, where you can adjust how long it\u2019ll take for an animation to start, how long it\u2019s going to last and how many times it\u2019s going to repeat.
- Animations are a way to win and retain the attention of the user, but it can also come to their aid, guiding them on where to click next. Select the element you want to animate and click on the highlighted button shown below:
- You can guide the user with the use of anchors, with the ROI the \u201cStart now\u201d button has an action to scroll to an anchored section. To make one, select the element that\u2019s going to be used as an anchor.