Elements
Explore the core building blocks of your responsive ads with detailed instructions, tips, and tutorials for each element type, from design basics to rich media components.
The Fluid Ad Creator offers a variety of elements that you can add to your responsive ads, enabling you to craft engaging and dynamic creatives. These elements are organized into categories such as Design Elements, Icon/Fonts/Social, Components, and Video/Rich Media, each serving a unique purpose in enhancing your ad's functionality and appearance. This page will guide you through each element type, their uses, and how to configure them. Each element also includes best practices, tips, and relevant instructional videos.
1. Design Elements
Design Elements form the foundation of your creative. They include basic visual and structural components that allow for extensive customization:
Background (HTML)
How to Add and Configure:
Drag the "Background" element from the Design Elements section onto the canvas.
Use the configuration panel to select colors, gradients, patterns, or images as your background.
Adjust the layer settings to ensure the background doesn’t overlap other elements.
Best Practices & Tips:
Keep the background simple to avoid distracting from the main content.
Use high-resolution images to maintain visual quality.
Video Tutorial: [Background Configuration Video]
Group Element (HTML)
How to Add and Configure:
Select multiple elements on the canvas and choose "Group" from the toolbar.
Configure the group’s properties, such as alignment and padding, in the configuration panel.
Best Practices & Tips:
Group elements that you want to move or resize together.
Use grouping to maintain consistent spacing between elements.
Video Tutorial: [Group Element Video]
Hot Spot Element
How to Add and Configure:
Drag the "Hot Spot" element onto the canvas.
Configure the trigger action (e.g., navigation, pop-up) and link destination in the properties panel.
Best Practices & Tips:
Place hotspots strategically to guide user interaction.
Test the functionality of each hotspot to ensure accuracy.
Video Tutorial:
Setting up Clickthroughs for Videos using Video Hotspots
Scroll Element
How to Add and Configure:
Drag the "Scroll" element onto the canvas.
Use the properties panel to define the scrollable area’s dimensions and content.
Best Practices & Tips:
Avoid making scrollable areas too small to ensure usability.
Use scrolling to present secondary content, like terms and conditions.
Video Tutorial: [Scroll Element Video]
Image (PNG, JPEG, GIF, SVG)
How to Add and Configure:
Drag the "Image" element onto the canvas.
Upload an image file and adjust its size, position, and alignment in the configuration panel.
Best Practices & Tips:
Optimize image file sizes to reduce load times.
Use descriptive alt text for better accessibility.
Video Tutorial: How to Create Smaller size images using Image Renditioning
In this video, Matt explains how to use Image Renditioning to reduce the file sizes of images in your ad.
SVG Element (Inline, HTML)
How to Add and Configure:
Drag the "SVG Element" onto the canvas.
Paste your SVG code into the configuration panel or upload an SVG file.
Best Practices & Tips:
Use SVGs for logos or icons to ensure crisp visuals on any screen size.
Avoid overly complex SVGs that may slow down rendering.
Video Tutorial: [SVG Element Video]
2. Icon/Fonts/Social
These elements are designed to help you add buttons, text, and social media functionality to your ads:
Button (HTML)
How to Add and Configure:
Drag the "HTML Button" element onto the canvas.
Customize the button’s text, style, and action link in the configuration panel.
Best Practices & Tips:
Use clear, actionable text on buttons.
Test button links to ensure proper functionality.
Video Tutorial: [Button Configuration Video]
Button (Image)
How to Add and Configure:
Drag the "Image Button" element onto the canvas.
Upload a button image and configure its action link.
Best Practices & Tips:
Use visually distinct button designs to draw attention.
Ensure the image button contrasts well with the background.
Video Tutorial: [Image Button Video]
Text Box (Web Fonts)
How to Add and Configure:
Drag the "Text Box" element onto the canvas.
Use the text editor to type and format text, selecting from various web fonts.
Best Practices & Tips:
Keep text concise and readable.
Use a font size and color that stands out against the background.
Video Tutorial: [Text Box Video]
3. Components
Components provide advanced interactive features to make your ads stand out. These elements are ideal for adding functionality and engagement:
App Canvas (iFrame)
How to Add and Configure:
Drag the "App Canvas" element onto the canvas.
Paste the iFrame URL into the properties panel and adjust the dimensions.
Best Practices & Tips:
Use App Canvas sparingly to avoid overwhelming users.
Ensure the iFrame content is mobile-friendly.
Video Tutorial: [App Canvas Video]
Carousel Widget
How to Add and Configure:
Drag the "Carousel Widget" onto the canvas.
Add images or slides and configure transition effects in the properties panel.
Best Practices & Tips:
Limit the number of slides to maintain user attention.
Use clear navigation controls for the carousel.
Video Tutorial: [Carousel Widget Video]
(Repeat similar sections for other components, each with specific instructions, tips, and videos.)
4. Video/Rich Media
Video and rich media elements help you integrate dynamic and engaging content into your ads. These elements support a variety of playback options and settings:
Custom Video (HTML)
How to Add and Configure:
Drag the "Custom Video" element onto the canvas.
Upload your video file or paste the video source URL. Configure playback settings like autoplay and looping.
Best Practices & Tips:
Keep video lengths short to maintain engagement.
Enable subtitles for accessibility.
Video Tutorial: [Custom Video Video]
Vimeo
How to Add and Configure:
Drag the "Custom Video" element onto the canvas.
Upload your video file or paste the video source URL. Configure playback settings like autoplay and looping.
Best Practices & Tips:
Keep video lengths short to maintain engagement.
Enable subtitles for accessibility.
Video Tutorial: [Custom Video Video]
Youtube
How to Add and Configure:
Drag the "Custom Video" element onto the canvas.
Upload your video file or paste the video source URL. Configure playback settings like autoplay and looping.
Best Practices & Tips:
Keep video lengths short to maintain engagement.
Enable subtitles for accessibility.
Video Tutorial: [Custom Video Video]
Last updated
Was this helpful?