{"id":2385,"date":"2023-05-27T22:52:44","date_gmt":"2023-05-27T22:52:44","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/creative-studio-2\/"},"modified":"2024-10-14T19:37:53","modified_gmt":"2024-10-14T19:37:53","slug":"creative-studio-2","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/creative-studio-2\/","title":{"rendered":"Creative Studio"},"content":{"rendered":"\n

Top Bar<\/strong><\/h3>\n\n\n\n

At the top of your creative studio, you will see a bar of buttons with key functionality to navigate, edit and proof your creative.<\/p>\n\n\n\n

On the left side of your top bar you will find navigation links that can be used to quickly jump back to the creative, campaign or portfolio in which this creative was made.<\/p>\n\n\n\n

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

From left to right, the second icon is the Live indicator. If you added a URL to your creative, you will see the Live indicator here. If no URL has been added, you will not see the Live indicator.\u00a0<\/p>\n\n\n\n

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

This icon allows you to toggle between showing and hiding your containers.<\/p>\n\n\n\n

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

The icon next to Live or Draft will allow you to view and publish your page within the AW, XXL, XL, LG, MD, SM and XS viewports. This is especially helpful when publishing pages that will receive traffic from many different types of devices. These viewports are represented by monitor, tablet, landscape phone and portrait phone icons, respectively.<\/p>\n\n\n\n

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

Next, you will see the undo and redo buttons, which you can use to undo and redo changes made to the page, and the versions button which can restore the creative to a previous version.<\/p>\n\n\n\n

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

Your status bar also allows you to open the creative tag map, a live preview of the page in another tab, and proof.<\/p>\n\n\n\n

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

Traffic<\/strong><\/h3>\n\n\n\n

The Traffic button can be used to show what URLs were added to your creative. Simply click the Traffic button to see your creative’s URLs. You can also click the links within the Traffic button to go directly to the corresponding URL Management screen.<\/p>\n\n\n\n

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

Palette Tab<\/strong><\/h3>\n\n\n\n

Your Palette tab is where you will find icons for adding content to your page. These icons are organized into easily identifiable categories for editing. You will find the editing icons by opening the elements palette on your left-hand side. Simply find the icon you want to work with and drag it onto your page to start editing!\u00a0<\/p>\n\n\n\n

Layout<\/strong><\/h4>\n\n\n\n

The Layout category includes icons for updating the structure of your page. This is where you will find the responsive grid that can be added to any container. Grids are used to add a column structure to your page into which you can publish content. The Layout category also includes icons that can be used to add additional rows or columns to your grids. You will also find a container icon at the bottom of the Layout category in case you need to add a container to your page to get started with grids.<\/p>\n\n\n\n

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

Basics<\/strong><\/h4>\n\n\n\n

The Basics Palette category contains icons to add text, images, links, an HTML code block and an iFrame. <\/p>\n\n\n\n

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

Interactive<\/strong><\/h4>\n\n\n\n

The Interactive category includes components that were built based on common functionality requests for the ion platform including tabbed content, accordions, rotating images\/content, layered content, lightboxes, video, custom widgets (from your Widget Library) and Flash (from your Flash Library).<\/p>\n\n\n\n

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

Social<\/strong><\/h4>\n\n\n\n

The Social Category is where you will find common social marketing components like a Facebook Like button, Twitter Tweet and much more.<\/p>\n\n\n\n

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

Design Tab<\/strong><\/h3>\n\n\n\n

The Design tab is where you edit your elements. When you click an element on your page, the Design tab will present options to edit that element. Double clicking a given element will open a fly-out editor to directly edit that element. You can also remove an element or save creative-wide directly from within the Design tab.<\/p>\n\n\n\n

Text – just click and edit<\/strong><\/h4>\n\n\n\n

To edit text, double click the text to open the fly-out editor, make the update and the change will be immediately reflected on the page. By clicking on the CSS button on the Design tab, you can optionally add inline CSS as well.<\/p>\n\n\n\n

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

Images – upload directly from your page<\/strong><\/h4>\n\n\n\n

After double-clicking an image, you will see the image library. From here, you can search for a given image or browse categories to choose an image from a specific image category. 
 <\/p>\n\n\n\n

To add a new image, you can upload it directly within the image editor! Simply drag and drop your images from your desktop into the fly-out image editor to use that image on your page.
 <\/p>\n\n\n\n

Once your image is placed on the page, you can also use the available actions, advanced rules and inline CSS editors that are available within the Edit tab to make your image clickable, apply conditional logic and\/or override the default style attributes using inline CSS.<\/p>\n\n\n\n

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

Links<\/strong><\/h4>\n\n\n\n

When you double-click a link to open the editor, the link label editor will fly out. From here, enter the text you would like to use for your link and click OK. You will then be able to use the additional editors in the Design tab to apply the link action, advanced rules and inline CSS.<\/p>\n\n\n\n

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

Elements Layers<\/strong><\/h3>\n\n\n\n

The Elements Layers tab will show you all the elements being used on your page. The elements listed in the Elements Layers tab are grouped together by the containers into which they have been published. When moving your mouse through the Elements Layers, you will see a blue highlight around the elements within a given container.<\/p>\n\n\n\n

You can double-click a given element in the Elements Layers to edit the element accordingly in your Design tab. You can also click and drag elements within your Elements Layers to move them on your page.
\u00a0<\/p>\n\n\n\n

You will also notice icons to the right of each of your elements in the Elements Layers. These icons are used to identify what has been applied to a given element as well as the element type. For instance, a piece of text with a micro-theme applied to it will have a purple circle and an A icon next to it. You can see a color key for the circles by hovering over one of them.<\/p>\n\n\n\n

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

Pages Tab<\/strong><\/h3>\n\n\n\n

The Page Rules shows all the page level rules. Simply click the RULES button to open the page rules editor where you can add or edit rules that execute on page load.
\u00a0<\/p>\n\n\n\n

The Pages tab shows key information like the title of the page you are currently viewing as well as the status of the page (whether approved or unapproved). You can also add page-level scripts by clicking the Scripts tab. Meta tags are also added in the Pages tab, which can be configured by clicking the + META TAGS section.<\/p>\n\n\n\n

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

Creative Tab<\/strong><\/h3>\n\n\n\n

Your Creative tab shows you a thumbnail of every page within the creative. To edit a different page within the creative, simply click the thumbnail of another page to start editing that page! You can also add another page to the creative by clicking the plus sign at the base of the thumbnails.<\/p>\n\n\n\n

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

If you have any questions, please contact us on help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Top Bar At the top of your creative studio, you will see a bar of buttons with key functionality to navigate, edit and proof your creative. On the left side of your top bar […]<\/p>\n","protected":false},"author":5,"featured_media":5432,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[488,32],"tags":[2131],"class_list":["post-2385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creatives-en","category-the-creative-studio","tag-creative-studio"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2385","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=2385"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2385\/revisions"}],"predecessor-version":[{"id":6966,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2385\/revisions\/6966"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5432"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}