Interface and Tools
Understanding the Fluid Ad Creator
Last updated
Was this helpful?
Understanding the Fluid Ad Creator
Last updated
Was this helpful?
Reorganized with a new visual design for Studio 4, the Fluid Ad Creator allows you to create innovative, responsive ads, fast. This article will explain how to navigate to the different tools available in the Fluid Ad Creator.
The header is used for navigation, help, and managing your whole creative. The specific controls can be seen in the image below:
The top toolbar contains controls which allow you to import PSD files, copy layouts & styling, zoom, undo/redo, and preview your creative on different device sizes.
On the left of the top toolbar are the 'PSD Options' and 'Copy' tools. Most important for new users is the PSD Options button, where you will find all the tools for importing designs from Photoshop.
Add Photoshop PSD File as a Group of Images & Text (Beta)
Add Photoshop PSD File as a Group of Images
Replace or create elements with layers from PSD
Replace images with layers from PSD
Another important button is the Reset Zoom button in the middle section. On first click, this button will set the zoom level to 100%, so you can see exactly pixel perfect what the ad will display as. A second click will set the ad at the biggest size that fits in your canvas
Always assume that a “crosshairs” icon button will reset the object to a sensible default - we use it across the UI for often used reset actions. Only the reset button above currently has two different click actions it toggles between.
This panel shows what is included in your creative and the tools for managing them. It includes the Layouts and Formats expandable drawers, as well as the Elements Controls & list.
Above the list of elements are a set of controls:
From left to right:
Duplicate Selected Element- clicking this will duplicate the selected element
Create new group- Clicking this will group the elements you have selected into a new group
Delete Selected Element- This will delete the selected element
Search Element - This will search your element list for a specific element. Can be searched by name or ID.
Add new Element- clicking this will show a list of elements which can be added into your creative. To learn more about different Element types, read the page 'Elements'.
Most important for new designers is the elements list, where you see the design elements of your creative. Add new elements from the + button.
The eye icons on the left of the elements in the list are very important - these control what is loaded into the selected size. If the eye is greyed out (see image above) then the element is not going to be a part of that size in the final ad. It will not be visible in the editor when selected, except as a small indication on the top left corner of the ad on the canvas.
The Formats panel shows which size is selected for design. A bold blue label means that this size is currently shown on the canvas. A blue label indicates the active size, which is used to create new layouts and any in-between sizes for the format. A grey label means the size is not included or active. However, you can click on a grey size to activate it, and the app will generate a new design for it based on the closest matching existing layout.
The right sidebar has two tabs which can be used to display either the design tools or the creative setup.
The Design panel contains all the styles and settings that are applied only to the active size. Use this to define sizes, positions, colors, etc for a specific size.
For Figma users, the Design panel should be pretty self explanatory to use.
Below is the design panel in the editor. This controls shown and layout of these controls will change depending on the element type selected. This section will go through what the controls in this tab do.
Show/hide all guidelines temporarily
Toggle snapping to guidelines- this will turn on/off elements snapping to guidelines on the canvas
Add Horizontal guideline- this will add a horizontal guideline to the canvas
Add Vertical guideline- this will add a vertical guideline to the canvas
Manage guidelines- clicking this will launch the manage guidelines modal, where you can add and remove guidelines:
The controls in this section allow to to align an element to the different parts of the bounding box for that elements. From left to right the controls are: left align, center align, right align, top align, middle align, bottom align.
This will control the opacity of the selected element.
This will turn on/off the visibility of the selected element. The grey number in the box above is the element ID.
The Position controls allow you to set the exact placement of an element within your ad design.
X and Y Positioning
The X and Y fields determine the element's position relative to its group (if inside one) or to the ad/layout size (if not grouped).
By default, positions are set in percentages, ensuring elements adjust dynamically across different sizes.
You can switch to pixels (px) for precise positioning. To do this, click on the 'px' button at the end of the input box.
Anchor Points
The nine anchor points let you decide where the position is calculated from.
Default anchor: Top-left corner.
Example: If you want an element to stay 20px from the top-right corner, click the top-right anchor, set the units to pixels, and enter 20 for X and Y.
Center anchors: If an element is anchored to the center, it will always stay centered and cannot be moved elsewhere.
Why Use Anchor Points?
Anchor points help maintain consistent layout and alignment when the ad resizes:
For responsive ads: Anchor points ensure that elements stay correctly positioned, even at in-between sizes.
For locked or pixel-sized elements: The element will always maintain the set distance from the selected anchor, ensuring alignment with other content.
By correctly setting anchor points, you ensure elements stay in place, resize properly, and remain aligned across all sizes.
Depending on the element type which is selected, there are a number of different controls which will show in the size panel. The different controls you will see are explained below:
Width/Height
This can be set by either pixels or percentages by clicking on the percentage icon.
Lock/Unlock Proportions
When turned on, this will stop the image from distorting when resized.
Overflow
The Overflow setting applies to Groups and Background elements, determining how content that extends beyond their boundaries is handled.
It offers three options:
Visible – Elements inside the group/background that extend beyond its bounds remain visible.
Hidden – Any content outside the group's defined area is clipped and not displayed.
Scrollable – Adds scrollbars, allowing users to navigate and view content that exceeds the group's size.
Fill/Cover/Contain
Fill – Stretches the image/video to completely fill the container, ignoring its original aspect ratio. This may cause distortion if the container's aspect ratio differs from the media's.
Cover – Scales the image/video proportionally until it completely covers the container. Parts of the media may be cropped if the aspect ratio of the container is different.
Contain – Scales the image/video proportionally so that it fits entirely within the container. This ensures the entire media is visible, but may leave empty space if the aspect ratios don't match.
Alignment Controls
These controls allow you to align text to the textbox it is contained within
Focal Point
The Focal Point setting allows users to specify the most important part of an image or video. This affects how the media is positioned when using the Cover or Contain fit modes, ensuring that key content remains visible.
When set, the focal point remains centered as much as possible while the media resizes.
In Cover mode, this helps prevent important areas from being cropped out.
In Contain mode, it ensures the key part of the image/video stays positioned as intended within the available space.
This is useful for keeping logos, faces, or other crucial elements in focus regardless of resizing or cropping.
Padding Controls
These controls allow you to set the horizontal and vertical padding for an element. You can set it either by pixels or percentage by clicking on the px/% icon.
Textbox resizing
When a text box is set to Wrap, users can control how the box resizes when content or the container changes. There are three options:
Fixed Size – The text box maintains a set width and height. If the text exceeds the space, it may be clipped or require manual adjustments.
Auto Size – The text box expands or shrinks dynamically in both width and height to fit the text content.
Auto Height – The width remains fixed, but the height adjusts automatically to accommodate the text, ensuring all content remains visible without overflow.
These settings help maintain design flexibility while ensuring text remains readable and properly formatted.
The Text panel provides options for styling, resizing, and formatting textbox & html button elements. Below are the available controls:
Font & Style
Font Selector – Choose a font from the available options.
Style – Adjust weight (Regular, Bold, Italic) and add underline.
Max Size – Set the maximum font size for the text element.
Resizing Options
Shrink – Reduces text size if it exceeds the container, maintaining a single line if possible.
Wrap – Allows text to break onto multiple lines within the container.
Wrap + Shrink – Combines both behaviors: text wraps onto multiple lines but shrinks if needed to fit within the container.
Alignment & Spacing
Text Alignment – Align text left, center, right, or justified.
Vertical Alignment – Align text to the top, middle, or bottom of the container.
Line Height (%) – Adjust the spacing between lines of text.
Letter Spacing (px) – Control spacing between characters.
Case Formatting
Aa (Titlecase) – Converts all text to titlecase.
AA (Uppercase) – Converts all text to uppercase.
aa (Lowercase) – Converts all text to lowercase.
Truncate Text (Available only when Wrap is selected)
When enabled, truncates overflowing text with either an ellipsis instead of wrapping to a new line.
These controls allow you to configure the background element type. You can choose the background type as well as selecting the colour used.
The Border Style dropdown allows users to define the appearance of an element’s border. The available options are:
None – No border is applied.
Solid – A continuous, unbroken border.
Dotted – A border made of small dots.
Dashed – A border consisting of short dashes.
Double Border – Two solid borders with a small gap in between.
3D Grooved – Creates a carved, recessed effect.
3D Ridge – Similar to Grooved but appears raised instead of recessed.
3D Inset – Makes the element look embedded into the background.
3D Outset – Gives the element a raised appearance.
These border styles help define the visual edges of an element and enhance design customization.
The Effects panel provides interactive styling options for HTML buttons. These settings allow users to enhance button appearance and behavior.
Shadow – Adds a shadow effect to the button, creating depth and improving visibility.
Hover State – Enables styling changes when the user hovers over the button (e.g., color change, scaling, or shadow effects).
Active State – Allows styling changes when the button is clicked or pressed, providing visual feedback.
These effects help improve user interaction and make buttons more visually engaging.
The Setup panel contains the settings that will target all of the sizes. These include things like Click throughs, triggered actions, micro animations and more.
Add timeline animation and variants using the bottom bar
Turn on the toggle to activate animation for the selected size.
Click the up icon to see the animation timeline controls and start adding animations. When adding animation, you should not try to change the designs you have set up for this size, so the Design panel is disabled.
Add new animations by adding an element to the timeline from the animation “film” icon in the elements list. Click the plus next to the element to start adding an animation. You can also add predefined animations to the selected element from the + icon.
ResponsiveAds also has a number of features in the Fluid Ad Creator which are still in Beta. To access these features you can turn them on and off from the Beta Features menu which is accessed by clicking your account dropdown in the header:
When you click on the Beta Features button, you will be taken to the page shown below. From here you can use the checkboxes to turn on and off the Beta Features you wish to use.
To learn more about these Beta features, please contact your ResponsiveAds Customer Success Team member.
