{"id":6807,"date":"2024-08-07T13:38:59","date_gmt":"2024-08-07T13:38:59","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=6807"},"modified":"2025-02-17T11:53:05","modified_gmt":"2025-02-17T11:53:05","slug":"before-after-slider","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/before-after-slider\/","title":{"rendered":"<strong>Before\/After Slider<\/strong>"},"content":{"rendered":"\n<p>The Before\/After Slider is a powerful visual tool in Ion Interactive, perfect for showcasing transformations or comparisons. Follow these steps to add and customize it easily:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the Elements palette &gt; Interactive section, and find the Before\/After Slider.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeFF5xTvWPxZCY0zlWql0Ykk22FvhdC3iAh4JUmFNcHT4qO--NlmE8l2W9oXlzXZCiA7b3StvkzSndBXu58cfTSbOxu0DHyxkJ2V-6UT5nR1j0F5-OaA7gj6WuB4ZJQWyuLeKgWHNjaxG4lg-90b1XOBPP5?key=Gu8Q9y96y5lXclcEZiKo0g\" alt=\"\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Drag the slider element onto your creative page. It will appear with placeholder images.<\/li>\n\n\n\n<li>With the element active, go to the Settings menu &gt; Variables. Under &#8220;Before&#8221; and &#8220;After&#8221;, select your images. Make sure they have the same dimensions for the best results.<\/li>\n\n\n\n<li>It is possible to include images (.png, .jpg, .jpeg, .svg, .webp) or even animated .gif files to make your slider more dynamic.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcJay3kEZ8drutuSaz4i0KAyc-bmOr9ZxdIAwO_TiQX4RJlLbqVILFkaLEtUJkt4Z-KhNjwgzP6TXXT0q1jQJP2TOwcnKHgQBlyLpjcjfpwLE-TlyGiUCXa0Nfhl_sjxzCiFsbIApPt2W1GRRYnIun5i2Md?key=Gu8Q9y96y5lXclcEZiKo0g\" alt=\"\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>Additional Customization:\n<ol class=\"wp-block-list\">\n<li><strong>Tagging:<\/strong> Add a tag to track engagement.<\/li>\n\n\n\n<li><strong>Slider Direction:<\/strong> Choose horizontal or vertical movement.<\/li>\n\n\n\n<li><strong>Slider Color:<\/strong> Select a color for the lever that provides an ideal contrast for your design.<\/li>\n\n\n\n<li><strong>Labels:<\/strong> Display &#8220;Before&#8221; and &#8220;After&#8221; labels if required.<\/li>\n\n\n\n<li><strong>Responsive Design:<\/strong> Enable this option to ensure the slider adapts to different screen sizes.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p>Pro tip:<\/p>\n\n\n\n<p>If you wish for the lever of the slider element to sit in a different position than centrally on the image upon page load, you can customize its position with a bit of custom CSS.<\/p>\n\n\n\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfbDC13gSN2kjd-DvA4RyRtEOOc8B43Me-Ds50mMOc61GbEuNZyiUxlFmBzadXjtyWIIOntb9oHC9bgLAoBQgE5zOKovXk42PnuURtyRYL_qeIeGumCTBUSeZtGsyZqfyiQ5YAWc340mAGhw06Z09B0pX9j?key=Gu8Q9y96y5lXclcEZiKo0g\" width=\"624\" height=\"128\"><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Before\/After Slider is a powerful visual tool in Ion Interactive, perfect for showcasing transformations or comparisons. Follow these steps to add and customize it easily: Pro tip: If you wish for the lever [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5942,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[9,1],"tags":[],"class_list":["post-6807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-interactive-components","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6807","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=6807"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6807\/revisions"}],"predecessor-version":[{"id":6810,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6807\/revisions\/6810"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5942"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=6807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=6807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=6807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}