{"id":3108,"date":"2023-05-15T20:16:31","date_gmt":"2023-05-15T20:16:31","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/dynamic-content-substitution\/"},"modified":"2026-07-17T13:39:08","modified_gmt":"2026-07-17T13:39:08","slug":"dynamic-content-substitution-show-hide-for-responsive-design","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/dynamic-content-substitution-show-hide-for-responsive-design\/","title":{"rendered":"Dynamic Content Substitution"},"content":{"rendered":"<p>The <strong>Show &amp; Hide<\/strong> controls let you control whether an element is available at a responsive breakpoint, when the experience is embedded, or when a condition is true. This makes it possible to adapt one creative to different devices and respondent states without duplicating the page.<\/p>\n<h2>Open Show &amp; Hide<\/h2>\n<ol>\n<li>Open the creative in Creative Studio.<\/li>\n<li>Select the element you want to control.<\/li>\n<li>On the <strong>Design<\/strong> tab, expand <strong>Show &amp; Hide<\/strong>.<\/li>\n<\/ol>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/dynamic-show-hide-current.png\" alt=\"Current Show and Hide controls in Ion Creative Studio\" \/><\/figure>\n<h2>Responsive and embed visibility<\/h2>\n<p>Use the responsive checkboxes to hide the selected element in XS, SM, MD, LG, XL, or XXL. Use <strong>Hide when embedded<\/strong> when the element should appear on a standalone Ion URL but not inside an embedded experience.<\/p>\n<p>Switch the preview size at the top of Creative Studio to confirm the design at each breakpoint. A hidden element does not occupy its normal page space at that breakpoint, so also check the surrounding layout.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/dynamic-show-hide-xs-current.png\" alt=\"Current XS breakpoint preview with Show and Hide controls visible\" \/><\/figure>\n<h2>Conditional visibility<\/h2>\n<p>Select <strong>Show Conditionally<\/strong> or <strong>Hide Conditionally<\/strong> to add a condition based on available respondent data or experience state. Keep conditions mutually understandable, and test both the matching and non-matching paths in Preview before publishing.<\/p>\n<p>For rules that perform actions beyond element visibility, use the <strong>Page rules<\/strong> tab instead.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Show &amp; Hide controls let you control whether an element is available at a responsive breakpoint, when the experience is embedded, or when a condition is true. This makes it possible to adapt [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":6022,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2272,2078],"tags":[2173,2194],"class_list":["post-3108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rules-overview-the-advanced-capabilites","category-the-advanced-capabilites","tag-advanced","tag-rules"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108","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=3108"}],"version-history":[{"count":6,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108\/revisions"}],"predecessor-version":[{"id":7742,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108\/revisions\/7742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/6022"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=3108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=3108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=3108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}