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:
Video
Video elements in ResponsiveAds let you embed rich motion content in your creatives, supporting features like autoplay, loop, mute, and responsive behavior. You can use different video configurations for each size or breakpoint in your ad to ensure optimal playback across devices.
Adding and Configuring a Video
Add a Video Element
Click “+ Add Element” and choose Video from the list.
The video will appear on the canvas and in the element list.
Upload or Select a Video
Open the Setup tab for the video element.
Upload a new MP4 file or select one from your existing library.
You can also enter a direct video URL.
Set Playback Behavior
Options include:
Autoplay
Mute (required for autoplay on most browsers)
Loop
Show Controls
Click to Play
Responsive Behavior
Videos can be turned on or off for different breakpoints.
Layout, size, and visibility are managed like any other element and can be customized per size.
Video Renditions
When a video is uploaded, ResponsiveAds automatically generates several renditions — alternate versions of the video at different resolutions and file sizes. You can choose which renditions to use for better performance and broader compatibility.
What Are Renditions?
A rendition is a compressed version of the original video file, optimized for different screen sizes, connection speeds, or browser requirements.
Why Use Renditions?
Autoplay Compatibility: Browsers like Chrome may block autoplay for videos larger than ~3.3MB.
Performance: Smaller renditions load faster, improving the user experience.
Fallback Support: Multiple renditions increase the likelihood that at least one video can autoplay successfully.
How to Manage Renditions
Select a video element and open the Setup tab.
Click into the Video Renditions panel.
You will see a list of automatically generated renditions, including:
Resolution (e.g., 1200×700)
File size
A status indicator (e.g., red if autoplay is not supported)
Enable or disable renditions based on your requirements:
Enable lighter versions (under 3MB) for autoplay support.
Disable heavier ones unless needed for specific use cases (like high-resolution desktop).
Best Practices for Video Elements
Ensure autoplay
Enable at least one rendition under 3.3MB.
Support all sizes
Add different videos or enable/disable visibility for breakpoints.
Improve load times
Use the smallest effective rendition.
Mobile optimization
Favor vertical formats (e.g., 9:16) and low file sizes.
Desktop optimization
Use landscape formats (e.g., 16:9) and allow slightly larger renditions.
Avoid video blocking
Always set videos to muted when using autoplay.
Notes on Export Formats
Stripped/Lightweight HTML5 exports may not support video playback. Read more
Always preview your creative using the Preview tab to ensure your selected renditions behave as expected across breakpoints.
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?