{"id":5402,"date":"2023-11-28T12:51:30","date_gmt":"2023-11-28T12:51:30","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5402"},"modified":"2025-02-17T11:53:20","modified_gmt":"2025-02-17T11:53:20","slug":"ion-hacks-ion","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/ion-hacks-ion\/","title":{"rendered":"Videos: Ion Hacks"},"content":{"rendered":"\n<p>This learning path is intended for ion users with experience working in the ion platform, or have previously completed the Designer and\/or Expert courses in ion U. Upon completion of this course, users can expect to learn tips and tricks for working in the platform, based on frequently asked questions and common practices adopted by ion&#8217;s creative services team.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creative Studio Quick Tips<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 1. Creative Studio Quick Tips\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/VxpgLDi5GhA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Background Tips<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 2. Background Tips\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/ZgBXSY6IfDo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Color Overlays For Background Images<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 3. Color Overlays For Background Images\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/ERRX5lJ_J3g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Shapes and Borders With Containers<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 4. Creating Shapes and Borders With Containers\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/tFrg-vaKnXc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Animated Bar Charts<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 5. Creating Animated Bar Charts\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/vd_jmV3m78I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Publishing Across Screen Sizes<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 6. Publishing Across Screen Sizes\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/SRoz7dYuc0s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Overlapping Content with Negative Margins<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 7. Overlapping Content with Negative Margins\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/O3muxpJou6Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Layered Positioning<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 8. Layered Positioning\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/-vhzdbCKnig?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Vertical Centering<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 9. Vertical Centering\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/8PewAMo3iE8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">When To Use Reveal, Flow, and Full-Page Slider<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 10. When To Use Reveal, Flow, and Full Page Slider\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/LCLZX0rl_D0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Using Reveals for Dropdown Menus<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 11. Using Reveals for Dropdown Menus\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/w_J99db6W3Y?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Lightbox Navigation Menus<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 12. Lightbox Navigation Menus\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/XzUYAs7JfKk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating A One-Page Decision Tree<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 13. Creating A One Page Decision Tree\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/HaB_ECZTBHU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Custom CSS and Animations<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 14. Adding Custom CSS and Animations\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/neL7ElOHLNs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Scalable Vector Graphics<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 15. Adding Scalable Vector Graphics\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/ENAHgZlUy1I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Font Icons<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 16. Adding Font Icons\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/7nQRwKC_CLc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Dynamic CSS Parameters<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"[EN] 17. Setting Dynamic CSS Parameters\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/g4WR-L7Mp-I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\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 learning path is intended for ion users with experience working in the ion platform, or have previously completed the Designer and\/or Expert courses in ion U. Upon completion of this course, users can [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":3560,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2064,2078,32,4],"tags":[2374,2167],"class_list":["post-5402","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ion-platform-en","category-the-advanced-capabilites","category-the-creative-studio","category-the-platform","tag-hacks","tag-ion-platform"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5402","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=5402"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5402\/revisions"}],"predecessor-version":[{"id":6819,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5402\/revisions\/6819"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/3560"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}