This guide covers the global visual settings that apply to your entire campaign. These options allow you to control the appearance of the main page background and the layout of the central content area where your elements appear.
Campaign Background Settings
This is the main background for your entire campaign. You can use a solid color, upload an image, and add dynamic animations.
Uploading a Background Image
- Desktop Image: Upload an image that will be shown on desktop screens. The recommended size is 1920x1080px.
- Mobile Image: Upload a separate, vertically-oriented image for a better experience on mobile devices.
- Background Color: This color will be shown if no image is uploaded, or it will appear behind any transparent areas of your image.
Image Layout Style
This determines how your background image fits on different screen sizes.
- Cover: Stretches or crops the image to fill the entire screen without leaving any empty space. Parts of the image may be cut off on certain screen sizes. Use the 'Anchor Point' to select the most important part of the image to keep visible.
- Contain: Fits the entire image onto the screen without cropping. This may leave empty space on the sides or top/bottom, which will be filled by your chosen 'Background Color'.
Animated Background Effects
Add dynamic animations like floating bubbles, shapes, or seasonal effects like falling snow to make your campaign more engaging. You can customize the speed, size, and icons used in the effects.
Text and Images Block
The 'Text and Images Block' is the Content Area that holds all your elements (text, images, forms). These settings control the appearance and position of this container.
Visuals
- Background: Set a color or image specifically for the content box itself.
- Opacity: Make the content box semi-transparent to allow the main campaign background to show through.
- Borders & Corner Radius: Add borders around the container and round the corners.
- Width: Increase the width of your start screen elements
Placement & Spacing
- Placement: Align the content area horizontally (left, center, right) and vertically (top, center, bottom).
- Padding: Controls the space inside the content area, between its border and the elements within it.
- Margins: Controls the space outside the content area, between its edge and the edge of the screen. Note: Margins can only be adjusted when placement is not set to 'Center'.
Animation
- Animation: Animate how the content area appears on screen (e.g., fade in, slide up).
Examples of Different Layouts
Content area moved to the left:
Content area with a blue background and wider width: