This is a core concept
When creating and editing pages in your ion console, you will see the creative studio editing area on the right side of the page. This is where you add or edit the content on your page.
At the top of your creative studio, 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.
The status bar, which sits just above the tabs in the creative studio, provides a status of the current page and quick access to common operations.
From left to right, the first icon allows you to toggle between showing and hiding your containers.
The next four icons allow you to view and publish your page within the 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.
Your status bar also allows you to open a live preview of the page in another tab or open the creative proof.
A Live indicator, located directly to the right of the creative studio logo, will be shown if the current creative is engaged and assigned to at least one open traffic source.
The Traffic button can be used to show what traffic sources are currently pointed toward your creative. Simply hover over the Traffic button to see what traffic sources are pointed toward your creatives. You can also click the links within the Traffic button to go directly to the corresponding Traffic Source Management screen.
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 hovering over a given category. You will also find an arrow in the lower right hand corner of each category icon when you’re hovering that can be used to pin the icons to your Palette tab for quicker access. Simply find the icon you want to work with and drag it onto your page to start editing!
The Layout category includes icons for updating the structure of your page. This is where you will find your standard and responsive grids 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.
The Basic Palette category contains icons to add text, images, links, forms, an HTML code block and an iFrame. You can drag and drop these icons into any page target and to publish virtually any type of content on your page.
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).
The Social Category is where you will find common social marketing components like a Facebook Like button, Twitter Tweet and much more.
The Edit tab is where you edit your elements. When you click an element on your page, the Edit 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 Edit tab.
Text - just click and edit
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 Edit tab, you can optionally add inline CSS as well.
Images - upload directly from your page
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.
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.
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.
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 Edit tab to apply the link action, advanced rules and inline CSS.
After double clicking a form, a fly-out will show the available forms within your form library. By default, the form editor will show all forms within the library and specific categories listed on the left side of the fly-out.
Once you’ve selected your form, you can then click into the “Button and Hint Text” section in the Edit tab to edit the button text and define if you would like to display hint text in its own column. Form actions are also displayed and editable from the Edit tab, along with advanced rules and inline CSS.
The List tab will show you all of the elements being used on your page. The elements listed in the List tab are grouped together by the containers into which they have been published. When moving your mouse through the List of elements, you will see a blue highlight around the elements within a given container. You may also double click a given element in the List to edit the element accordingly in your Edit tab.
You will also notice icons to the right of each of your elements in the List tab. 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.
The Page 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). The Page tab also shows all the page level rules and scripts. To add or edit a rule, click the ‘+ RULES’ button to open the page rules editor. You can also add page-level scripts by clicking the ‘+SCRIPTS’ button.
Meta tags are also added in the Page tab, which can be configured by clicking the ‘+ META TAGS’ section. You will also find layout and theme information at the bottom of the Page tab.
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.