Spicing Up your Creatives with Micro-themes, Animations and Parallax Scrolling

This is a core/designer concept

Micro-themes

Within your brand theme, micro-themes can be selected to apply styling to specific page elements without requiring additional unique themes or code.

Think about it this way… You may need to use a specific blue for a box or button that is defined to your brand. However, typing in that hex color every single time you want to add that blue to an element can be time consuming (or too technical!). With micro-themes, you can simply select the element, head over to micro-themes in your creative studio palette, and choose the blue to use by name. No code needed. You can even add more than one micro-theme to a single element at a time—for example, add center alignment micro-theme on that blue branded button!

By using micro-themes, you can create hundreds of on-brand page style combinations. Micro-themes are contextual. So, if you’re editing a link, you’ll see micro-themes that are specific to styling links. And, if you’re editing text, you’ll see micro-themes that are specific to styling text.

Some micro-themes are built into the ion platform. These are standard and can be used by everyone. However, we can also add brand-specific micro-themes that are custom for your company's theme(s). With micro-themes, you have a canvas to add styling simply and easily without code, while keeping brand standards centralized.

Animations

You’ve done just about everything you can to make your call-to-action stand out on your page, right? Everything except…

Animations!

Adding animations to page elements allows you to differentiate between elements, directing your visitor's attention on what’s most important.

Within the Animations pod, the categories include Immediate (as soon as the page loads), Hover (when mouse or cursor hovers over that element), Delays (set the specific timing interval you want for your animation), Scroll into View (always), and Scroll into View (once). For the Scroll into View categories, animations with the “always” category will be triggered whenever respondents scroll to a given element and animations with the “once” category will only be triggered the first time a respondent scrolls to that element.

Within each category, you’ll find animations such as bounce, pop, slide, swing, shake, brighten, dim and many more. While these animations will bring attention to the elements that you would like to stand out to visitors, there are also options for fade in and face out animations. If you’re looking for more of an app-like feel for the pages within your creatives, the fade animations are perfect for breathing new life into each page.

To add an animation, just click on the content element and then select the animation from the creative studio palette. 

Below, take a look at some of the animation options you have for different types of elements within your pages.

Parallax Scrolling

Have you ever seen a website that looks like the content moves independently of the background? Now you can make this happen within the pages of your creatives, with parallax scrolling. Parallax scrolling allows you to set a different scroll speed than the rest of the content on your page and the end result is a much more unique and modern experience.

To set up parallax scrolling in your pages, you will first publish a background image behind your content. Next, adjust the new parallax scrolling speed slider available within your Creative Studio. You can find the parallax scrolling speed slider under Styles within Background.