{"id":2870,"date":"2023-03-03T20:44:47","date_gmt":"2023-03-03T20:44:47","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/add-snippets\/"},"modified":"2025-12-09T17:14:17","modified_gmt":"2025-12-09T17:14:17","slug":"interactive-components","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/interactive-components\/","title":{"rendered":"Interactive Components"},"content":{"rendered":"\n

In this article, we’ll explore the concept of components and their utility in creating reusable elements across various creatives within your console. Components serve as an invaluable reusable tool for storing and deploying grids, freestyle forms, interactive features, footers, and more, ensuring consistency and efficiency throughout your interactive experiences. Whether you’re aiming to streamline your development workflow or maintain coherence across your creatives, mastering the creation and utilization of components is essential. Let’s delve into the world of components and unlock their potential in enhancing the way you create experiences.<\/span><\/p>\n\n\n\n

Creating a component<\/span><\/h2>\n\n\n\n

You will find the option to save a component to your component library within your Creative Studio whenever an element is selected. <\/span>To create a component, simply click on the save button and select “As Component”<\/b>.<\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

When you save a component, you will be able to give your component a name, description and also <\/span>apply labels<\/span> to it. It is very important to label it, as the labels are the categories within which the components are going to be presented to you later. You can apply as many labels as you want to your component, and if you don’t, the component is going to be presented under the “others” category making it harder to be found.<\/span><\/p>\n\n\n\n

Important: Note that any element saved as a component will preserve its actions, micro-themes, rules, and styling, ensuring seamless integration and consistent functionality across your console.<\/span><\/i><\/p>\n\n\n\n

Applying a component to your creative<\/span><\/h2>\n\n\n\n

Applying components to your creative projects couldn’t be simpler with Creative Studio’s intuitive interface.<\/span><\/p>\n\n\n\n

To get started, head over to the “Components” workbench situated on the left side of Creative Studio. Here, you’ll discover two main groups: “My components” and “Ion components.”<\/span><\/p>\n\n\n\n

“My components” are those you’ve personally crafted using the method detailed above. They reflect your unique style and preferences, making them perfect for tailored experiences. Just like before, you can scroll through the categories or use the search function to locate your desired component swiftly. Then, drag and drop it onto your Creative.<\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

“Ion components” are curated by our specialist team and available to all users. To access them for the first time, simply click on the desired Ion component to initiate the download process. Once downloaded, it behaves just like components from “My components.” For subsequent uses, you can skip the download step and directly drag and drop Ion components into your projects.<\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Organizing my components – The component library<\/span><\/h2>\n\n\n\n

The components library serves as a central hub for managing and organizing all your components efficiently. <\/span>To access it, simply navigate to the Libraries menu and click on “Components”.<\/b> Here, you’ll find a comprehensive overview of your components, including the labels applied to each one, when they were last edited, and a record of where they are currently being used.<\/span><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

By clicking on the pencil icon, you can modify the component’s name, add or edit labels, and update its description, ensuring clarity and consistency throughout your console. Additionally, you can streamline your component management process by clicking the “Manage All” button. This feature enables bulk editing, allowing you to tailor all your labels or add new labels with ease.<\/span><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

In this article, we’ll explore the concept of components and their utility in creating reusable elements across various creatives within your console. Components serve as an invaluable reusable tool for storing and deploying grids, […]<\/p>\n","protected":false},"author":27,"featured_media":5695,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1236,9],"tags":[2389],"class_list":["post-2870","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-snippet-en","category-the-interactive-components","tag-components"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2870","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\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2870"}],"version-history":[{"count":4,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2870\/revisions"}],"predecessor-version":[{"id":8098,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2870\/revisions\/8098"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5695"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}