1. In the left side menu of the AUTOMAIT dashboard, click Design UI > Pages > Add New
  2. Enter a title for the new page and select the Template style (select ‘canvas’ layout for a blank template without the Theme navigation menu. Otherwise, choose one of the other template types)
  3. Click Edit with UI Designer to enter the UI Designer

The Main Elements

The AUTOMAIT UI Designer uses three main building blocks: SectionsColumns, and Widgets.

Sections are the largest building blocks, and inside them are groups of ColumnsColumns sit inside of Sections and are used to house the WidgetsWidgets are placed inside of Columns.
You control the SectionColumn, and Widgets with their handle.

section handle

 

Editing

To edit the SectionColumn, or WidgetRight Click their handle. 

Editing

 

Section

  1. Click the  icon to create a Section, or click the  icon to use a pre-designed Page or Block from our library
  2. Set your Column structure 
  3. Right click to Edit, Duplicate, Copy, Delete etc. 
  4. Use the Section handle to: add a section, drag a section, or delete.

 

Column

  1. Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.
  2. To add more Columns Right Click > Add New Column
  3. Insert Widgets to your Columns

 

Widget

  1. Insert Widgets inside your Columns
  2. A Widget width is set by the Column width

Preview & Publish your page

Go to the bottom panel:

  1. To preview click the  icon. 
  2. If you are satisfied with the result, go ahead and click the  button. 
  3. Click ‘Have a Look‘ to view the published page

Note: The Preview link is different than the actual page link


Save Draft

In UI Designer you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

  1. Click the arrow next to Update / Publish
  2. Choose Save Draft

How To Adjust Settings For Mobile, Tablet, and Desktop

Many editable features have a MobileTablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

  1. Look for the Viewport Icon viewport icon next to the individual element you wish to control. 
  2. Click the specific device icon for which you want to edit its settings.
device

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.

  1. 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.
  2. 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.

Visibility 

You can choose to Show Hide a Section according to the device.

  1. Go to Section Setting > Advanced > Responsive
  2. Set your visibility preferences, choosing from Hide on DesktopHide on Tablet, or Hide on Mobile.
visibility preferences

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.

  1. 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
  2. Save your changes
  3. Go to UI Designer > Tools > General Tab > Regenerate CSS, click Regenerate Files

Columns Ordering

This feature reverses the ordering of columns.

To use Columns Ordering go to Section Setting > Advanced Responsive Reverse Columns and set it to Yes.

Device Preview

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.

How to Create, Edit, & Style Columns

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.

Right-Click Options

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.

Layout

  1. Column Width (%): Set your Columns Width
  2. 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
  3. 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
  4. HTML Tag: Set an HTML Tag for your column.

 

Space Definitions

  • 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

 

Style

Background

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)

  1. Background Type: Choose between Classic or Gradient
  2. Blend Mode: Set a Blend Mode
  3. CSS Filters: Add Blur, Brightness, Contrast, and Saturation

 

Border

  1. Border Type: Set a Border Type
  2. Border Radius: Set your Border Radius
  3. Box Shadow: Add a Box Shadow

 

Typography

Set Typography Colors for the section

Note: The ‘Set Typography’ colors won’t work if Default Colors are enabled.


 

Advanced

Advanced

  1. Margin: Set the section Margin
  2. Padding: Set the section Padding
  3. Z-index: Set the Z-Index.
  4. Entrance Animation: Click the dropdown to choose an animation.
  5. CSS ID: Set a CSS ID for your column
  6. CSS Classes: Set CSS Classes for your column
  7. Responsive: Show or Hide column on Desktop, Tablet, or Mobile

 

Responsive

  1. Reverse Columns: Slide to reverse your columns order (Great for Mobile)
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile