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 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.
Also include:
Contain/fill/ fit controls in size section for image & video element types
Alignment controls in size section for image & video
padding in size section for html button elements
Overflow is a control just for grouped elements
box resizing for text box
This is just for textbox & html button elements
textbox has case & truncate which html button doesn't have
This is for html button: shadow, hover, active state
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 this 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.
