The AUTOMAIT UI Designer uses three main building blocks: Sections, Columns, and Widgets.
Sections are the largest building blocks, and inside them are groups of Columns. Columns sit inside of Sections and are used to house the Widgets. Widgets are placed inside of Columns. You control the Section, Column, and Widgets with their handle.
To edit the Section, Column, or Widget, Right Click their handle.
Click the icon to create a Section, or click the icon to use a pre-designed Page or Block from our library
Set your Column structure
Right click to Edit, Duplicate, Copy, Delete etc.
Use the Section handle to: add a section, drag a section, or delete.
Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.
How To Adjust Settings For Mobile, Tablet, and Desktop
Many editable features have a Mobile, Tablet, and Desktop settings. Most common uses include: Text size, Margin and Padding of elements etc.
Look for the Viewport Icon next to the individual element you wish to control.
Click the specific device icon for which you want to edit its settings.
Controlling Responsive Background Images and Borders
Background images in UI Designer are automatically device-responsive, but you also have control over more options for each device.
Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.
Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.
You can choose to Show / Hide a Section according to the device.
Go to Section Setting > Advanced > Responsive
Set your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.
When hiding an element, and switching to the view it’s hidden on, you will see that this element is “muted”. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed.
You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.
Change Mobile & Tablet Breakpoints
You can set the mobile and tablet breakpoint values.
From any UI Designer page, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Settings >Breakpoints, and set the breakpoint value for mobile and tablet
Save your changes
Go to UI Designer > Tools > General Tab > Regenerate CSS, click Regenerate Files
This feature reverses the ordering of columns.
To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.
Switch between Desktop, Mobile or Tablet views by clicking on the corresponding icons on the bottom of the panel.
Help! I Changed Something While In Mobile Preview, And It Changed On Desktop Too! Why?
You can’t delete an element (widget, column, or section) while previewing one mode (mobile, for example), and expect it to only be deleted from that type of device. Deleting elements will delete them across all devices. You can, however, use the element’s Responsive Visibility feature by going to the element’s Advanced > Responsive tab and enabling any of its visibility options (Hide on Desktop, Hide on Tablet, or Hide on Mobile). While the element won’t be deleted on those devices, it will be hidden.
You can’t move elements around while previewing one mode, and expect them to only be moved for that type of device. Moving elements around in any preview mode will move them across all devices. One exception to this is the Section > Advanced > Responsive > Reverse Columns feature, which does move columns to their reverse position.
If an element doesn’t have a Viewport Icon next to it, changing that element in one preview mode will change it across all devices.
Columns can be manipulated and styled either via the options in the UI Designer Panel on the left or by right-clicking the Column handle and choosing from the context menu that pops up.
If you wish to add a new column or duplicate a column, right-click a column handle and choose either Add New Column or Duplicate from the context menu. You can also copy and paste a column into another section using Copy and Paste options here, or you can copy and paste only the style (without the content) from one column to another. Clicking Navigator here will open the Navigator already set to that particular column. And of course, clicking Delete here will delete the column.
If you click Edit Column, the column’s options will be displayed in the UI Designer Panel to the left with all of the following options available to you.
Column Width (%): Set your Columns Width
Vertical Align: Set your Column Content’s vertical alignment. This way, you will be able to stick the content of all the columns of a section to the bottom, the middle of the top, or “stretch to fill” to align columns with unequal heights. Choose from Top, Middle, Bottom, Space Between, Space Around, Space Evenly
Horizontal Align: This extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row. Choose from Start, Center, End, Space Between, Space Around, Space Evenly
HTML Tag: Set an HTML Tag for your column.
Space Between – Widgets start and end at the edge of the column, with equal space between them
Space Around – Widgets are spaced equally, and the edges are half the size of the space between widgets
Space Evenly – Widgets have equal space between, before and after them
Background Type: Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background), or an image Slideshow background.
Background Overlay (available if a Background Type is chosen)
Background Type: Choose between Classic or Gradient
Blend Mode: Set a Blend Mode
CSS Filters: Add Blur, Brightness, Contrast, and Saturation
Border Type: Set a Border Type
Border Radius: Set your Border Radius
Box Shadow: Add a Box Shadow
Set Typography Colors for the section
Note: The ‘Set Typography’ colors won’t work if Default Colors are enabled.
Margin: Set the section Margin
Padding: Set the section Padding
Z-index: Set the Z-Index.
EntranceAnimation: Click the dropdown to choose an animation.
CSS ID: Set a CSS ID for your column
CSS Classes: Set CSS Classes for your column
Responsive: Show or Hide column on Desktop, Tablet, or Mobile
Reverse Columns: Slide to reverse your columns order (Great for Mobile)
Visibility: Show or Hide your section on Desktop, Tablet, or Mobile