Using panel element options

When you select an element, the Options Panel for that element appears to the left of your working area.

The "Element Options Panel" consists of:

1. A title that turns into a small tree view on hover.

2. The 3 styling tabs

   • General Tab

   • Styling Tab

   • Advanced Tab

3. Search filter

4. Hide/Show "Element Options Panel" toggle

5. Close Panel button

Title of Element Options Panel

If you hover over the title, you will see the tree view from the Parent to the selected child element, highlighting only the child elements' parents.

If Your selected element is the "Section element" then you will be able to see the tree view for all the elements inside the section.

The 3 Styling tabs - General / Styling / Advanced

1. General Tab

2. Styling Tab

3. Advanced Tab

General Tab

Here you will find the element's general settings as well as frequently used options for changing the element's styles.

Each element has its own general options, which can vary from element to element.

Here are some common options that you will find in the general tab:

• Choose the "Inner content width" of your section

• Select the gap size between columns

• Edit Text

• Add links

• Add dynamic data

• Change the tags

• Alignment options

• Changing column width

• Content Orientation

• Shape Dividers

• Change Sizing and Spacing

• Add media content

• Add icons

• Customize various options specific to the selected element.

Styling Tab

Here you will find all the styling options for the element. Some elements are more complex and are composed also of child elements, the styles for the child elements can be found also here.

Here are some common actions that you can do in the styling tab:

• Change the wrapper styles

• Change the Child elements styles

• Copy/paste styles from one child element to another child element

• Adding Child Selectors and animating them when hovering over a parent element

• Style and add pseudo selectors

• Add and style global classes

Access to these styles:

• Background

• Typography

• Border

• Size & Spacing

• Display

• Transitions

• Transform

• Filters

• Custom Attributes

Advanced Tab

• Change the element display name

• Add a Unique ID

• Access Advanced Conditions

• Animations Options

• Custom CSS

• Repeater Options

Search filter

The search can return all of the styles for the element you searched for. This allows you to reduce the number of clicks required to achieve the desired style.

Hide/Show "Element Options Panel" toggle

You may ask yourself why there is a Toggle button and also a close button what is the difference?

There are situations where you want to click an element without the panel appearing each time you click an element, for example, you may want to check your full page design while adjusting the spacing of different elements.

By using the toggle the panel is still on just that it is hidden.

Close Panel button

The close icon will close the panel and deselects the active element.