{"id":5026,"date":"2023-05-25T11:36:02","date_gmt":"2023-05-25T11:36:02","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5026"},"modified":"2023-10-23T17:18:49","modified_gmt":"2023-10-23T17:18:49","slug":"how-to-use-the-microsite-with-3-calculators-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-microsite-with-3-calculators-template\/","title":{"rendered":"How to use the Microsite with 3 Calculators Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 62.5%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/fff35b1863bb46fc8dabb782044671e0?sid=c25de0ad-fbaa-4a4a-96cb-8d27f1e98621\" 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\/microsite\/microsite-with-3-calculators\">Microsite with 3 Calculators<\/a> is an interactive experience that has 3 individual calculators that vary in input field such as text input, sliders, and dropdowns. Aside from having 3 calculators, the experience also has a series of mini quizzes on the landing page and result pages using choices. Not to forget, this experience also features micro-animations and reveals that change color on hover. This highly interactive experience allows clients to create multiple experiences, using the individual calculators while capturing the users on a single starting point. The Microsite with 3 Calculators is both an logic oriented and informative experience.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Microsite<\/li>\n\n\n\n<li>Complexity: Expert<\/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>Flow<\/li>\n\n\n\n<li>Navigation reveal<\/li>\n\n\n\n<li>Reveal<\/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\/1QCXYcIy2taG7lpBNsZ2x_sOkLPngvDKW?usp=share_link\">&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: Select the element you would like to apply to. Navigate to the +Animations panel, in the first dropdown select the trigger (immediate, scroll into view, etc.), then use the second dropdown to select the type of animation.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/awqpE5burFVegpG52EcMafTi8OGfCGZxf5Ea2OxnQRwKs04Q43ZHOC7nZdQWTCCriVqxCLL3c6BRobenIM3bOsfgINnvXtv_H024Rq3-9HPKGLu4TlN5xUQOimuZmdGuJES39SVBii5Mcj3nnwwvA5E\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: To change or remove the animation, select the element that current has an animation applied to it. Navigate to the +Animations panel, and click the \u201cx\u201d icon next to the animation type.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/DzyTnnBQny9MxCPDHgxj_tFrBweYyI84b0oti-jLxSAPrkLP3Iz9JGgh4kghQRkYzp-0QgPOH9W-rVYedRifiSbT4m_2JzIWKhARZIcuDhu--sFgQy4L59PeXsa8LmDda6H_R3P61POJ9tvCbSRwkTA\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Flow<\/strong><\/h3>\n\n\n\n<p>Step 1: Flow anchoring is used to send a user from one point to another when an element is selected. In this experience anchoring is used on the result page quizzes. If you want to add an additional choice to the quiz with a new result as well, add an additional Flow Step to the Quiz Flow.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/eHH5Q-OVAOson4zcAm2JwMXFQjJnimFs9_NYvNzHjugcEXmgWyj0RATutLL-0Fh7vY2Kz7MxmwzecDjNVu1RQ4JWhj6hCUIqQU2J11oPgbpO9Jdwkmy2gj7op1MVFfBNF403q8Qpn8kYEtGtDahnEic\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Duplicate the result container from the previous result Flow Step. Adjust the copy for the new choice. Also add top and bottom padding to the Flow Step to reflect the previous ones.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/89iP57l5YyPdmDVPjoMsUTILs6ZZnsoFVm_YIDr6nkPLPXSlwPn0T2kssU4nAtqOe9EGMJOvHg0MaXzSEAfbuLbZfRvVwpsIzVE2zEz4JZiDUEtAO-J5wAfaCHtXAQ9cyxul-RUahdKKuISz0VGimcc\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: Select the new Flow Step and navigate to the anchor on the Flow Step panel. Add a unique anchor name. Don\u2019t forget to also add a tag for behavioral tracking.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/oi9WAtLL67cI1T21eBn1IaUYmQqsp_bb1CV9deMr9kFb_-Po0s72xbEkdeJ7qun_4qQgdZSH52mjnwFI54A-B5HNIsE1AXbqS0YD3pI3Tk87dsnQz3GsOZItQSyVA7KTPOxTIJI0maIIicOOXEWZ3Cg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 4: There are a few options on how the choice can be added.<\/p>\n\n\n\n<p>1. If there isn\u2019t enough space to have all the choices in a single row, consider selecting the row within the Choice Group, and duplicate it into the Responsive grid within the Choice Group. Adjust the new row accordingly by removing the additional choices or updating duplicated choices to new ones.&nbsp;<\/p>\n\n\n\n<p>2. You can also add an additional column to the existing row and duplicate just the choice to the new column. Don\u2019t forget to adjust the row settings and column widths accordingly after.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/57isGA0K8R91PKVCtZ2XFKJv0HLheBEA3DEUpJPp6JmhM8lP1R8m83l_TKTazT6BdQAH-YqXOXSLikQGieQHHU9_4XpRCV_QvWQbxWufoeVOYsz2vALZg4gKU5eUi8MqzX0St2Gey9uq-KwMNveie1k\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 5: Select the new choice. Update the Data Value to reflect the new choice, then navigate to the Behaviors panel. With the Behaviors panel open, expand the Scroll to, in the dropdown set the anchor as the new result Flow Step added Step 1. Set the Behaviors in Form to Validate and Submit. Don\u2019t forget to also add a tag.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/8IX6gVqtqGz9F0ZdwT4aJUlhrfnPB1nz1LOk9wS2hudJyGqGUdgrPJM2MfWrqiRzXe5nMLYX1ymEkJYUHOq7veMmSPcVwyquVjueKq3NPrx7IBFXdyuNS3qsn1WuXFPmoodf0pc-dCzkL1Ma_Zldr3E\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Navigation reveal (add additional links)<\/strong><\/h3>\n\n\n\n<p>Step 1: To add an additional link to the navigation, navigate to the Basics components and select a link element. Drag the element into the column that contains the other links.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/4ctSD0YhDUamrqreJhUYNEm2FfId7rExgAlLwIcnbwIJ2yAf1PMknCTQbaTmoUOSxeDGbl813MoQNIoBeMfdKSJHgP0KQpzU2LJJ8Kjrc83ZJ4rPfpaYNeXm7Y6mknXrjxAPYNwT-UEGsPDvBUmrEx4\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reveal<\/strong><\/h3>\n\n\n\n<p>Step 1: Up replace the icon in the reveals, select the image within the centering table and double click, use the image editor to upload or re-select a different image.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/6FSPTu3cbypXQ9chEtGm-bF4KQEGNf9gMfT5cGhxjsOJGXlZMf5liIong3f82rhkt5SPtMzJeAIxjGIycdwkbujKeSt2pwgZM_ZbfKDgSmBKZHumzcEg5Qw68_yyYb96ayGlnIMDQ6rWEX4PLxJt8es\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: To adjust the size of the image icon, select the image then navigate to the Layout panel. Increase the size under the Width and Height. The greater the pixel value the larger the image will become.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/NNh9h0kkrYra04iMkYH-Iu1bfVSnKjlf8d6D6o6SBOMMJPuNBcurtmjLrrLY_ZfNvVQ7y7hgNHIypma9lr2wyeOyNoX1-8krxCNDeruugVSi7Y5bqPRmlTO7x8DD0fp1rmsVJJVGCSo2glc4G9c9eXI\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: To make the reveal container bigger or smaller select the Reveal Trigger container and navigate to the Layout panel. Under Width and Height adjust the height value. The greater the value, the longer the reveal will be. *If the height or padding is adjusted for the Reveal Trigger, don\u2019t forget to make the same change on the Reveal container.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/ekT6oEBNZOB-whFK4GleSomqlD7mp5c_mtT83ZjDa30Z4wSq66C1UXxVjqUZ8cJPfA7X3rmSEpWwXYwULGDbSmvhAvu-WIr7cViHkLcCouNlv9NuBa0XnbNIFb_z5f0NOnRWGCStqN_IBGTqiW-RRi0\" alt=\"\"\/><\/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\/1XXiB2X1K3FaTlSko7FhmHPxfvST7l5ZEixZ9j5aXmb4\/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\/content-marketing-calculator\/\">Content Marketing Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/crm-calculator\/\">CRM Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/event-microsite\/\">Event Microsite<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/sales-presentation\/\">Sales Presentation<\/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 Microsite with 3 Calculators is an interactive experience that has 3 individual calculators that vary in input field such as text input, sliders, and dropdowns. Aside from having 3 calculators, the experience also [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5243,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-5026","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\/5026","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=5026"}],"version-history":[{"count":0,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5026\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5243"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}