Interface and Tools

Fluid Ad Creator Interface

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.

Header

The header is used for navigation, help, and managing your whole creative. The specific controls can be seen in the image below:

Top Toolbar

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.

PSD Options:

1. Add Photoshop PSD File as a Group of Images & Text (Beta)

2. Add Photoshop PSD File as a Group of Images

3. Replace or create elements with layers from PSD

4. Replace images with layers from PSD

Copy Tools

The Copy Tools in the Fluid Ad Creator help streamline your workflow by allowing you to reuse designs, layouts, and styling across multiple sizes and formats. These Copy Layout and Copy Styles tools are now located in the top toolbar in the Fluid Designer canvas. The Copy Element Settings button is visible on the edge of the marquee when an element is selected.

Use these tools to quickly propagate design consistency throughout your creatives while saving time:

Copy Styles

Use Copy Styles to instantly apply style properties from the current size to all other sizes in all formats. This tool is perfect when you’ve finalized your visual design in one size and want that style to be reflected across the board.

When to Use It

• You've styled a CTA button or text element and want to use the same colors, fonts, or effects in every layout.

• You’ve defined your brand color palette, shadow, or border style and want consistency across all sizes in the creative.

What Gets Copied

Copy Styles transfers specific visual styling properties of each element, depending on the type of element:

For Text Box and Button (HTML) elements:

• Font

• Font style (e.g., bold, italic)

• Font color

For All visual elements:

• Background color

• Border styles

• Shadow styles

How to Use It:

1. Ensure the current size has the visual styles you want to reuse.

2. Click the “Copy all styles to other sizes” icon in the right-hand toolbar.

3. The styles will automatically be applied to matching elements across all other sizes and formats in the creative.

Copy Layout

Use Copy Layout to apply the full layout structure of your current size to one or more other sizes in your creative. This includes all element positions, groupings, anchoring, and overall arrangement—effectively allowing you to design once and reuse that design across different aspect ratios.

When to Use It

• You’ve finished designing one size and want to use it as a base for other sizes.

• You want to ensure consistent placement of elements (e.g., headline, logo, button) across multiple breakpoints.

• You’re creating variations based on a master layout.

What Gets Copied

When using Copy Layout, the following layout-related properties are applied to your selected destination sizes:

• Element positions

• Anchoring and alignment

• Element group structure

• Size and constraints

• Element order (Element List hierarchy)

How to Use It:

1. Open the size/layout you want to copy from.

2. Click the “Copy Layout” icon in the right-hand toolbar.

3. A popup will appear where you can select the destination sizes you want to apply the layout to. These can be:

   • Other sizes within the same format

   • Sizes in other formats

4. Confirm your selection by clicking Copy Layout.

1. After using Copy Layout, you can further customize each layout by adjusting elements or applying specific styles per size as needed.

Copy Element Settings

Coming soon

Reset Zoom Button

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.

Left Sidebar

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.

Elements Controls

Above the list of elements are a set of controls:

From left to right:

1. Duplicate Selected Element- clicking this will duplicate the selected element

2. Create new group- Clicking this will group the elements you have selected into a new group

3. Delete Selected Element- This will delete the selected element

4. Search Element - This will search your element list for a specific element. Can be searched by name or ID.

5. 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'.

Elements List

Most important for new designers is the elements list, where you see the design elements of your creative. Add new elements from the + button.

Eye Icons

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.

Formats Panel

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.

Right Sidebar

The right sidebar has two tabs which can be used to display either the design tools or the creative setup.

Design Tab

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.

Design Tab Controls:

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.

Guidelines section

1. Show/hide all guidelines temporarily

2. Toggle snapping to guidelines- this will turn on/off elements snapping to guidelines on the canvas

3. Add Horizontal guideline- this will add a horizontal guideline to the canvas

4. Add Vertical guideline- this will add a vertical guideline to the canvas

5. Manage guidelines- clicking this will launch the manage guidelines modal, where you can add and remove guidelines:

Alignment Section

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.

Visibility Section

1. This will control the opacity of the selected element.

2. This will turn on/off the visibility of the selected element. The grey number in the box above is the element ID.

Position Section

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.

Size Section

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.

Text

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.

Background Controls

These controls allow you to configure the background element type. You can choose the background type as well as selecting the colour used.

Border Controls

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.

Effects

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.

Setup Tab

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.

Bottom Bar

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.

Beta Features

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.