# 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:

### Help & Info When opened in the Fluid Ad Creator, there are different option available in this menu:

Fluid Ad Creator specific help & info menu options

#### New Features Guide * Guidance on recently added new features and how to find them * This is updated whenever larger changes are added in a release #### Onboarding Tutorial * Activates hotspots on the Fluid Ad Creator interface. * Click on the hotspots to see an explanation of the main areas of the tool and how to use them #### Keyboard Shortcuts * Access a list of the supported keyboard shortcuts in the Fluid Ad Creator. * You can also modify the shortcut keys if they don’t match your personal preference. The change is only applied to your account. ## 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:

The Copy Layout (left) and Copy Style (right) buttons

#### 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) {% hint style="info" %} Unlike **Copy Styles**, **Copy Layout** focuses on structure and positioning, not visual styling. {% endhint %} **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**. {% hint style="info" %} This will overwrite the layout in the selected sizes, so ensure you’re not replacing any layouts you wish to keep. {% endhint %} 5. 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**

Left sidebar shown in the red circled area

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'.](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/elements.md) {% hint style="info" %} **Note:** Groups are primarily for organizing layers. Clicks and hovers are tracked on the **elements (layers)** inside, not the group itself. For a detailed explanation of how analytics events work with groups and layers, see [Groups, Layers, and Analytics Tracking.](/analytics/understanding-and-setting-up-engagement-analytics.md) {% endhint %} ### 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.

Elements List Expanded in the Left Sidebar with the selected element in the creative highlighted in the list

### 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.

Hidden elements show this control on the canvas when slected in the element list

### 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.

Formats list with Bold Blue (Shown on Canvas), Blue (Active) and Grey (not active) Labels shown

## 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.

Width/Height, Lock Proportions and Overflow controls

**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.

Fill, Cover, Contain Controls in size section

**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.

Animation timeline shown in expanded bottom bar

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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.responsiveads.com/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.