The Background Module serves as the cornerstone for defining click areas and crafting captivating visuals within your ad designs. Whether you're leveraging assets with distinct background colors or opting for the simplicity of solid or gradient backgrounds, this module empowers you to shape the aesthetic foundation of your advertisements effortlessly. With intuitive controls and versatile options, customize backgrounds to precisely fit your creative vision, ensuring every element resonates with your audience seamlessly.
Use cases
Define a click area that redirects the user or triggers events (Using a transparent background color)
Create a colored background area using a solid RGBA color or a gradient without the use of an asset (Saves ad space / Design work)
Use an asset + background color of your choice
Example
In this simple example, we use the background module for different things.
1 Background module creates the background, using the gradient feature and having a fallback clickout when the user doesn't hit one of the other background modules which make up the 3 seperate click areas for the 3 different products. These are background modules with a transparent background color and a clickout link, which makes it easy to add clickout areas to specific parts of the ad without creating assets that fit the clickout area perfectly.
As with all examples, you can request us to copy them over to your company so you can look at how they are built in detail.
Background Color
Clicking the first field here will open a color picker, that allows you to select a color from the RGBA spectrum for your Background module:
Here, you can use hex values directly or set the color by dragging the sliders or picker.
You can also use one of the presets at the bottom.
Gradients
Double-Clicking the gradient line adds another key. Clicking it will open a color-picker so you can set up the individual color points of the gradient. Delete a key with the Backspace key.
Background image
This is a drop zone, which allows you to drag an asset from the "Assets" tab. The asset will be rendered on top of the selected background color and will be responsive inside the resulting ad.
Responsive options
These options allow you to change the responsive behavior of your asset inside the ad, meaning how it will position itself and scale on devices of different aspect ratios.
Image sizing
Contain - This will always contain the whole asset inside the module's dimensions. Using the positioning options below, you can set the direction in which the image will orient itself when the aspect ratio changes (E.x. if you want it to stick to the top, you'll select the top option or the bottom right if it's a footer for the right bottom)
Cover (fit) - This will always try to fit the whole asset over the whole module while keeping the image's original aspect ratio. This is often used for backgrounds where it's unlikely that a crucial part can get lost due to big differences in aspect ratio.
Size in width - This will always keep the aspect ratio but fill the whole width of the module
Size in height - This will always keep the aspect ratio but fill the whole height of the module
Stretch - This will stretch the asset over the whole module without caring for aspect ratio. This is only a good option when the background won't look off when it is being stretched in a dimension.
Clickout
Inside the Clickout tab, you can set up either a blank page for testing or put a link to redirect a user to on click.
Properties
The properties tab allows you to set all kinds of aspects of a module. There is the following settings:
Flip & Rotation - You can set the ° angle in which the module will be flipped. Using the icons on the right, you can mirror on the x- or y-axis
Position - You can set the position x/y of your module
Dimensions - You can set the width/height of your module and using the icon in the middle - you can lock the values so they keep their ratio to each other when manipulating one of them
Keep ratio - Youc an change responsive behavior so it doesn't always resize the module to the % based value set in dimensions. Instead, the module will always keep its' ratio when scaling up/down
Opacity - You can change the module opacity from 0 - 100%
Border radius - You can change the border radius of the module from 0-100% (Note that this changes the radius of the module's borders, not of the asset. So if the asset gets resized due to responsive behavior, the corners may not show up the way you expect if you're not using the "Keep ratio" feature in conjunction + an asset that actually fills the whole module boundaries
Interactions
Triggers
The Background module offers the default interaction triggers seen here:
"On click": This triggers when a user clicks/taps on the element
"On swipe left": This triggers when a user swipes left on the element
"On swipe right": This triggers when a user swipes right on the element
"On swipe up": This triggers when a user swipes up on the element
"On swipe down": This triggers when a user swipes down on the element
"On longpress": This triggers when a user holds a tap for some time
"On module load": This triggers when the module is loaded - so when the scene in which it is shows
Actions
The Background module offers the default interaction actions:
"Play animation": Play an animation with specific length
"Play custom animation": Play an animation (Can be customized in the timeline with as many animations & custom animations as you like)
"Stop animation": Stop a running looped animation
"Shake screen": Shake the screen for a specific duration
"Random scene change": Change to a random scene