The Inspector on the right lets you adjust the some or all of the following items for a selected layer or element:

• Alignment
• Layer Information
• Normal, Hover and Active States
• Animations and Transitions
• Size and Opacity
• Appearance Settings and Style
• Functions and Settings

Alignment and Resizing Constraints

• In a bar at the very top of the Inspector are buttons for aligning layers within their parent columns or containers.
• These Alignment Buttons will be selectable when you have select a layer that supports alignment properties.
• The Alignment Buttons will remain active when selected until they are specifically deselected. 
• This allows you to specify how a layer should behave when the column or container it’s in is resized
• It also allows you to specify which edge of the parent layer an element should align with if it is smaller than the content area of the parent. 

Layer Information

• The Layer Information indicates the element type of the selected layer and it’s positioning mode within the Canvas.
• A layer can either be in Grid Mode, in which it’s aligned within the Grid or Freeform Mode where it could be positioned without any restrictions around the Canvas.
• To toggle between Grid Mode and Freeform Mode simply click on the status indicator at the top of the Inspector. 
• Note that the Freeform Mode doesn’t support responsive website design and will not be consistent across different Viewport widths without manual testing. The Grid Mode is preferred to maintain design consistency.

Edit Master

• By default elements on the Element Palette belong to a Style Filter.
• To retain the consistency of the Site’s design, the style of any selected element isn’t fully editable.
• The options made available in this Limited Editing mode are those that are consistent with the activated Style Filter and permitted local changes.
• However, if you so wish to make further customizations to an element, you can do so by clicking on the Edit Master button in the Inspector.
• In Edit Master mode, the selected element will be isolated and you can make more extensive changes to its appearance.
• Setting retained within Edit Master mode include global Padding and Margin values, Typography and some Background styles. 
• Note that changes made to an element in the Edit Master mode will affect all instances of the element across the website.
• To make extensive changes that are specific to a single instance of an element, you would have to create a duplicate of the element in the Element Palette and choose Edit Master in this new element instance.

States

• Every element has multiple States that it could transition between based on cursor interactions and other triggers in Production Mode.
• The default State for an element is the Normal State.
• The Hover State is triggered upon a cursor hovering above the element on the screen and the Active State is triggered on a cursor click on the element.
• An element’s appearance settings can be changed between its different States such that animated transitions could be added between the Normal State and the Hover or Active States.
• You can select between an element’s States from the State Selector which contains the Normal, Hover and Active buttons in the Inspector.
• You can select States to preview the appearance of the element and view change its appearance settings for a selected State.

Animation and Transitions

• To animate an element you simply have to specify the starting and ending position and style of your element using two different States from the State Selector.
• Adding a Curve, Duration, and Delay to your animation can be accessed by clicking the Transition Settings icon that sits between the State buttons in the State Selector.
• A lower Speed will slow-down your animation speed. 
• A longer Delay would add more time between the trigger action and the start of your animation. 
• Motion adds different natural motion effects to the speed of your animation such as ease-in and ease-out accelerations to the animation speed.

Size and Opacity

• You can change an element’s size on the Canvas using the visual Resizer Handle (blue circle on the bottom right edge of the element) on the Canvas.
• Alternatively, you can use the height and width input fields in the Inspector.
• By default, these are set to Auto which selects settings proportional to the content of the element and the constraints of its parent.
• You can also toggle the Opacity of the element from this section. 

Appearance Settings and Style

Margin, Padding, Border, Radius

• The Inspector has a selector to adjust the values of the element’s Margin, Padding, Border and Radius.
• Access to some or most of these properties would be restricted in the Limited Editing mode to conform with the selected Style Filter.
• You can choose to change all four sides of an element at once in the linked mode, or alternatively set custom values to each side using the unlinked mode, which is toggled by the ? icon.
• Margin sets the area between the border of the element’s content and the padding of its parent. 
• Padding sets the content area within the border of an element and its content.
• Border settings let you adjust the weight, colour and style of the Border of the content area of an element. 
• Radius lets you set the curvature of the four edges of the content area of an element.

Typography

• Add custom Fonts, Font Weight, Font Size and other typesettings in this section.
• Font Families are limited to one Primary Font Family and one to four alternative Font Families which are compatible with the selected Style Filter.
• However, you can add new Fonts and swap out old ones by choosing to Add Fonts using the inbuilt Font Explorer.
• Simply click on the Font Family Field → Add Font → Select a new font from the Font Explorer.

Offset, Scale and Rotation

• Offset and Scale are primarily used to make a slight alteration to an element’s position and size for subtle animations.
• It is advised to use traditional methods of positioning such as Margin, Padding and fixed section heights to position elements more extensively on the Canvas.
• You can use the Rotation settings to tilt an element clockwise with positive values from zero to 360 degrees or counterclockwise using negative values.

Background

• The background options allow you to set Fills within an element’s content area.
• The Fill layer sets a solid colour from the Colour Picker.
• The Gradient layer sets a dynamic colour range from the Gradient Picker.
• The Image layer lets you pick a picture from the Image Explorer in the Element Palette.
• The Video layer (available for Sections, Containers, and Columns) lets you select a video URL from services such as Youtube, Vimeo, Twitter and DailyMotion to play silently on repeat as a background layer.
• Shadow and Inner Shadow layers let you pick custom shadows that sit outside the layers content border in the case of the Shadow layer and inside the content border in the case of the Inner Shadow layer. 

Functions and Settings

• The Functions and Settings tab of the Inspector contains unique options that change from element to element.
• The Button element would feature a field to specify a URL or direct link, the Image element would feature an option to swap the image file through the Image Explorer and the Maps element would feature a field to specify your target location. 
• Functions and Settings help you add interactivity to an element and also specify its content where applicable. 

Input Fields

• The Input Fields in the Inspector aren’t ordinary fields.
• Once you are editing the Input Field directly, you can use the up an down arrow keys on the keyboard to change the value in increments.
• If you’re not sure about the exact value you want but just want to see its effect on the Canvas, this is a great way for quick experimentation.
• All numerical values in an Input Field are by default pixel units unless specified otherwise.
• Other numerical units could include percentages (%) or degrees where applicable.

Have more questions? Visit our community, its open to everyone!