{"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":"2023-12-08T20:53:40","modified_gmt":"2023-12-08T20:53:40","slug":"interactive-components-reveal","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/interactive-components-reveal\/","title":{"rendered":"Interactive Components: Reveal"},"content":{"rendered":"<p>For example, if you would like to display a caption when visitors hover over an image, you can use the reveal component.&nbsp;<\/p>\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;\"><iframe loading=\"lazy\" class=\"hs-responsive-embed-iframe\" height=\"360\" src=\" https:\/\/player.vimeo.com\/video\/138097546 \" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;\" width=\"640\" allowfullscreen=\"allowfullscreen\" data-service=\"vimeo\"><\/iframe><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>When you drag the Reveal component into your page, you will be given two containers.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"private-image image-plugin-component hs-image-align-none\" height=\"256\" style=\"width: 688px; height: auto;\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/support.ioninteractive.comattachmentstokenSXvg9hXQn9yYPQtwzGegoyKlU.jpeg\" width=\"688\"><\/p>\n<p>&nbsp;<\/p>\n<p>The <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.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"private-image image-plugin-component hs-image-align-none\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/support.ioninteractive.comattachmentstokensl8UJ6Aj5HoiihKh4gnrC19U1.jpeg\"><\/p>\n<p>&nbsp;<\/p>\n<p>The <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.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"private-image image-plugin-component hs-image-align-none\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/support.ioninteractive.comattachmentstokenw8ueqQ7nsATWz4FC6R1QqzjLt.jpeg\"><\/p>\n<h4>Reveal Settings<\/h4>\n<p>When editing your Reveal component, you will see the below options:<\/p>\n<h4>Reveal type<\/h4>\n<ul>\n<li>Overlay &#8211; displays Reveal Container content over the top of Reveal Trigger<\/li>\n<li>Toggle &#8211; displays Reveal Container content instead of Reveal Trigger<\/li>\n<\/ul>\n<h4>Reveals when<\/h4>\n<ul>\n<li>Hovered &#8211; display Reveal Container when respondent hovers over Reveal Trigger<\/li>\n<li>Clicked &#8211; display Reveal Container when respondent clicks Reveal Trigger<\/li>\n<\/ul>\n<h4>Position<\/h4>\n<ul>\n<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<p><img decoding=\"async\" loading=\"lazy\" class=\"private-image image-plugin-component hs-image-align-none\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/08\/support.ioninteractive.comattachmentstokenz3MXZjc6gBS4HvKmUyx1htac9.jpeg\"><\/p>\n<h4>Tips &amp; Tricks<\/h4>\n<p>If 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.<\/p>\n<p><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;<\/p>\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<ul><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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, you will [&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":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2744\/revisions"}],"predecessor-version":[{"id":5648,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2744\/revisions\/5648"}],"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}]}}