{"id":5046,"date":"2023-09-21T13:01:10","date_gmt":"2023-09-21T13:01:10","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5046"},"modified":"2025-02-17T11:53:28","modified_gmt":"2025-02-17T11:53:28","slug":"how-to-use-the-statistical-infographic-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-statistical-infographic-template\/","title":{"rendered":"How to use the Statistical Infographic Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/bade040c5566423b899035a63b09865a?sid=9b3675a0-13e9-414f-90cf-1e10b8e2e220\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n\n\n\n<p>This <a href=\"https:\/\/iontemplates.rockcontent.com\/preview\/standard\/infographic\/statistical-infographic\">Statistical Infographic<\/a> is an engaging display of information using many interactive features to break down content into simple visual displays that make key points easy to understand. Visitors are welcomed with moving text animation, full page hero background, and an anchor CTA leading to additional content below. Navigating through the experience, visitors will notice animated content and figures, as well as reveals when hovering or clicking through key figures that display additional facts. This infographic uses bold colors, imagery, icons, and stats to encourage visitors to learn more about the experience.&nbsp;&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: Education<\/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>Anchor<\/li>\n\n\n\n<li>Animation<\/li>\n\n\n\n<li>Flows<\/li>\n\n\n\n<li>Text and icon inline block display<\/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\/1gN1VHDG5_hbN0RuSvfs--xFYU1LvN6Kz?usp=sharing\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Anchor<\/strong><\/h3>\n\n\n\n<p>Step 1: Select a section where you want the CTA to scroll to and add an anchor.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/NzHMz0vqDXUnmhrUyaf6GCLo4BkMtpTkhZbWZDvOfmGwX_AX5jeKU2dY-lq_cgzFoGgd86nefhlPpYtvN2uzjn5PtJj7GAo1Lt-5mGEFov-LRnSq8-4B7_242tjS2jkuslTca_E7E7K_ZVklxwAUmHQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Assign the anchor with a unique name (Ei. Section 1).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/X8teVph-GlZSKAfChu8cq3W9Z00KF7gCi68SzkjxgNQ_ey0qCs7tGqm65Qex5JM70_WvkLA-nKwjMeFjqJ8NuQ-XYvlkFAYamJPloRO7-lut3XKMZ4wBWoNEMlT5k0_3kaodIHTzNb8XLQ-m72zpCKw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: Select the button and in the behavior panel, select the anchor and assign a unique tag.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/wAO5B57R8hk_U890ezIxeCU-IUe4A_K7mTzPgEVMFEGEVb13iraP5QIOVS9UVEgHf4C_Akpe5I_PK62uAY-Hlm8G1gbcD9Lk1x89QExjDY6W0fVL71ccHMD7Mn44oGXSt_XEi5z2Ee-zDHiIA-H2tjY\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Animation<\/strong><\/h3>\n\n\n\n<p>Step 1: To add or adjust the animation on an element, first select the element the animation is applied to or you would like to apply too. Navigate to the Animations panel, select a trigger state, then select the type of animation to apply.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/PpazKsTVCRRWKOCVmsrXlScb4hTdOdEQdQ9wRagPbDWKZbLQuV2skg3RwRf5aG1stc_poGKFzXz3iL-bNUYyARtIn5Az-1gfWtTbsi-9n2-kEmLWboGXZlwGK4fmYBcUWBVpaTnHTH2fAGVN2tVia8s\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Flows<\/strong><\/h3>\n\n\n\n<p>Step 1: Place an interactive Flow Step element in the existing flow.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/ylKrf7ukNUCHMAhzPOUtbE8WrUGU6kmprbxK4tJWPCA2om2FIZ86eQfu_swwlloPZZQ59E60mkK9UUvpQ93yIeC13LQVpQfCUTc-Z948IANJVWxHTp1ESkEyE2_pZnpAC5oK-6m_cCdSMXitraeRkO4\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Navigate to the previous flow step, use the arrow keys on your keyboard to go one level down to the element that is nested within the flow step. Select the element, copy it, and paste it in the new flow step that has been added from Step 1.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/9C99VzoVCf1bgevmlEnI2MSXAa_IfnzABgHT52a5zepiq6yWDvvxnz_jmLGcdA_kQoS8XFSSuPGH7o8KQ5Tf8bugMVd5EXYfAsIC7uPevv4wPS3MHASol4__kQjX6-8YwERTW7hcFTw9OHEZDFADn8k\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: Copy an unselected reveal state, and place it within the column level. To do this select the reveal, hold the option key down on your keyboard, with your mouse click and drag the reveal until the column level is highlighted in green and says \u201cCopy reveal into column\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/cZZt9j1MtazEIkMTPP92ccdRnr6darKeU_4KiVqVHebkBoJFzwwplKhjd6-xfAq8P5OZbQSilqUiy2XTN7SGevxVThFM4pVcAwcsZ3BANEKsyDVOEgW7WhE19IcuDnZASRMJBNChpNlrCaU5AurmKhw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 4: Drag the reveal to match the order of the navigation and adjust the content within the reveal. The stand alone container is the selected state when the user is on the current flowstep they do not see the reveal to indicate that is the current step they are on. Update the stand alone container to show the copy for the new flowstep.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/GCC8o0Ljj15K1P5slZHZTGj32K-4l_UqToIJfBw_qVxf8isu5f9PBmVgJm9wkYlxeASRmt5wn2q45gZHvkZdwt32AsN38dUFhmywuZhlIv6ViuloNOpgV1Bm3LrhJeqeHf4htkywcUqF_YvNjaKr_kc\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 5: Navigate to the new flowstep, add an anchor and assign the flow step a tag.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/EKAVnlsrokh9-98SSa_t3JsdgpwO518z25JVtYsWPGASVXnUMr2AlS-PBpAZj0cPtv6iiCk3E_pzp7oD989MHm0wzcG0E5zVoMge-GlgMUntHzkD8Pq3MbLC3GIOUKTSoVn7iVUyYXP-9LUiiOgQl20\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 6: Duplicate a reveal in all other flow steps and adjust the icon, and copy to match the last flow step. Don\u2019t forget to update both the reveal trigger and the reveal.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/hmRl7FeqvaPtikaDgY8lmDHK8fF7A_wjsR50_p5zs9vupAFs8KTdIJcjjeaCxbvf2EVhOHsuDy-ODOlp_KuCToaZ-Y_IL6TY0drThNCG0agvVnkAUX0UGiNvL3xUrB2qu2r1yWY5FGDrqaNwH0aLBng\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 7: Select the new reveal added, navigate to the Behaviors panel, select Scroll To, choose the anchor name of the new flow step from the drop down and assign a tag. Repeat this on the new reveal added in each flow step.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/S4vsvP6SIwUpMVKkT2ONHDrDOvbuYpjJhS4UZ7JyujQkmHUarAg6LODMhC9vPCURbKmVL4RXV9cGP0zaIdtBgsqyqw2c1BxhvvfFvubqmWARG9ol_UcxiYrcLhnZc3SJCyQf9ow8c-RfKtWvtSCmFdo\" 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\/10dAII7Ck3Y7NpmWyoO4KfA0cSwHWjLxkwIVJoy1QPH0\/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\/branded-infographic\/\">Branded Infographic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/app-tour\/\">App Tour<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/grid-series-infographic\/\">Grid Series Infographic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/timeline-infographic\/\">Timeline Infographic<\/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>This Statistical Infographic is an engaging display of information using many interactive features to break down content into simple visual displays that make key points easy to understand. Visitors are welcomed with moving text [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5148,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-5046","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\/5046","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=5046"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5046\/revisions"}],"predecessor-version":[{"id":7503,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5046\/revisions\/7503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5148"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}