{"id":2744,"date":"2023-05-27T23:56:08","date_gmt":"2023-05-27T23:56:08","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/interactive-components-reveal\/"},"modified":"2026-07-17T22:46:11","modified_gmt":"2026-07-17T22:46:11","slug":"interactive-components-reveal","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/interactive-components-reveal\/","title":{"rendered":"Interactive Components: Reveal"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Current interface<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3471-current-reveal-tool.png\" alt=\"Current Creative Studio Reveal interactive tool\"\/><figcaption class=\"wp-element-caption\">Drag Reveal from the Interactive elements palette.<\/figcaption><\/figure>\n\n\nFor example, if you would like to display a caption when visitors hover over an image, you can use the reveal component.&nbsp;\n<div class=\"hs-responsive-embed-wrapper hs-responsive-embed\" style=\"width: 100%;height: auto;position: relative;overflow: hidden;padding: 0;max-width: 640px;max-height: 360px;min-width: 256px;margin: 10px auto;display: block;clear: both\">\n<div class=\"hs-responsive-embed-inner-wrapper\" style=\"position: relative;overflow: hidden;max-width: 100%;padding-bottom: 56.25%;margin: 0\"><\/div>\n<\/div>\n&nbsp;\n\nWhen you drag the Reveal component into your page, you will be given two containers.\n\n&nbsp;\n\nThe <strong>\u201cReveal Trigger\u201d<\/strong> will be the first container. Simply drag any content you would like into this container and it will be what respondents see when they land on the page.\n\n&nbsp;\n\nThe <strong>\u201cReveal Container\u201d<\/strong> will be the second container. This is where you will pull in content that you would like to show when respondents hover over or click the Reveal Trigger element.\n\n<h4>Reveal Settings<\/h4>\nWhen editing your Reveal component, you will see the below options:\n<h4>Reveal type<\/h4>\n<ul>\n \t<li>Overlay &#8211; displays Reveal Container content over the top of Reveal Trigger<\/li>\n \t<li>Toggle &#8211; displays Reveal Container content instead of Reveal Trigger<\/li>\n<\/ul>\n<h4>Reveals when<\/h4>\n<ul>\n \t<li>Hovered &#8211; display Reveal Container when respondent hovers over Reveal Trigger<\/li>\n \t<li>Clicked &#8211; display Reveal Container when respondent clicks Reveal Trigger<\/li>\n<\/ul>\n<h4>Position<\/h4>\n<ul>\n \t<li>Provides options for where Reveal Container should be displayed. If manual is selected, it will be displayed where it is published on your page.<\/li>\n<\/ul>\n\n<h4>Tips &amp; Tricks<\/h4>\nIf you seem to be having an issue with the Reveal component in your Safari browser when using flip transitions&nbsp;on more than one object on a page, simply add the micro-theme for Utilities &gt; Animation Wrapper to the container holding the&nbsp;reveals to resolve.\n\n<strong>Remember that<\/strong> the Reveal component doesn&#8217;t add extra space to a page, it just replaces the content inside the Reveal trigger. This is why it&#8217;s not possible to vary the height while showing a reveal component.&nbsp;\n\n<hr>\n<p data-pm-slice=\"1 1 [&quot;bullet_list&quot;,{},&quot;list_item&quot;,{}]\">If you have any questions, please contact us on <a href=\"mailto:help@ioninteractive.com\" rel=\"noopener noreferrer nofollow\">help@ioninteractive.com<\/a>.<\/p>\n\n<ul><\/ul>","protected":false},"excerpt":{"rendered":"<p>Current interface For example, if you would like to display a caption when visitors hover over an image, you can use the reveal component.&nbsp; &nbsp; When you drag the Reveal component into your page, [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":5646,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2074,9],"tags":[2086],"class_list":["post-2744","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reveal-component","category-the-interactive-components","tag-interactive-components"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2744","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2744"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2744\/revisions"}],"predecessor-version":[{"id":9068,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2744\/revisions\/9068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5646"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}