Styles and Settings Panel
Styles and Settings Panel is on the right side of the screen. It is used to style and setup website elements.
You can find the following tabs in the Panel:
- Logic - used to assign an action to an element
You can use the properties on this tab to add styles to any website element. By selecting an element on the Layers tab or the Canvas, you can see the styles assigned to it on the Styles tab and change them accordingly.
This property allows you to select the state of an element depending on the user’s actions to assign individual styles to each state. It can be used, for example, to set different styles to a button when hovering over or clicking on it.
You can use the following element states:
- Default Default state.
- Hover The state of an element when hovering the mouse pointer on it. The element is not enabled yet, i.e. the button of the mouse is not pressed.
- Active Active element, i.e. the state of an element when clicking or pressing the mouse button on it.
- Focus An element on which you are focused. For example, this can be a text field, on which you have focused with the mouse pointer.
For more details, see: States and styles.
Display settings control the visual display and arrangement of elements on the page. They control how the elements are arranged in relation to each other - one under another, or side by side.
You can use the following display settings:
- Flex Flex is set on a parent element (flex container) and affects the child elements in it. It has settings to control the location of child elements vertically and horizontally - Auto layout.
For more details, see: Auto Layout (in Flex mode).
- Block An element starts on a new line and takes up the full width of its parent element.
- None Used to completely hide an element, as if it is no more on the canvas. All child elements will also be hidden.
- Inline-block Elements are placed side by side on one line as long as they fit on it (then they wrap to the next line). The width of elements is determined by their content.
- Inline-Flex Multiple flex containers are placed on one line (similar to inline-block).
For more details about display settings, see: Elements layout settings.
You can set the width (W) and height (H) properties to an element in the Size settings.
You can use the following properties to set up the size: auto size auto, pixels px, percentages %, em, Viewport Width vw, Viewport Height vh.
You can also set the following properties in the Size settings:
- Min or Max
Minimum and maximum element height and width
- Overflow Controls the content that overflows the borders of an element.
- Opacity Determines the opacity of an element and its child elements.
- Round all corners, Individual radius You can set a value of the rounding radius to all corners of an element, or an individual radius to each corner.
For more details, see: Sizing and spacing.
You can use two types of indents:
- Margins Margins define the space between the borders of an element and its adjacent elements. Highlighted in yellow.
- Paddings Paddings define the space between the borders of an element and its content. Highlighted in green.
You can set Margins and both on all sides of an element and selectively. Margins and paddings can be set in px, %, and em.
For more details, see: Sizing and spacing.
You can set the following Background styles to an element:
- Background color
- Gradient
- Image
- Color overlay
You can add multiple images, gradients, and color overlays to create multilayer effects. You can set opacity to each background layer and also change the order of the background layers by dragging them with the mouse, hide, or delete them.
For more details, see: Background.
The position property determines an element’s position on the page. It allows you to change the flow of elements on the page by shifting them or fixing their position. Once you set an element's position type, you can make adjustments to the top, bottom, left, and right properties.
There are the following types of position:
- Static – element's standard position, no offset.
- Relative – an element can be moved relative to its original position by specifying the coordinates.
- Absolute – an element can be moved relative to its parent element by specifying the coordinates.
- Fixed – you can fix the position of an element, which will not change when scrolling the page.
- Sticky – depending on the scroll position of the browser window, an element will have fixed or relative position.
Position settings also allows setting the Z-index, which determines the position of an element on an imaginary z-axis, passing in and out of the screen of your computer.
For more details, see: Position.
You can use the following options to format Text:
- Font
- Font weight
- Font size
- Font color
- Line-height
- Letter-spacing
- Text Align
- Text Stroke
- Text Shadows
- More Type Options: Decoration, Capitalize, Overflow Wrap, Breaking.
For more details, see: Typography.
Element’s border properties:
- Border color
- Border width
- Border style
You can set all or certain borders to an element.
For more details, see: Borders and rounded corners.
Apply filters, opacity, transforms, and other Effects to enhance an element’s interactivity.
You can add most of these effects on the hover state or any other state in the states menu by selecting it in the State Menu.
Types of effects:
- Shadows
- Transforms
- Filters
- Transitions
- Outline
- Cursor
For more details, see: Effects.
With the Settings tab you can set additional properties to an element. This tab is mainly used for widgets and helps customize their structure and display under various conditions and user actions.
The list of settings depends on the element type and the options it needs. For example, some widgets have the following settings:
Menu: managing menu type and structure, its items, and display on various devices.
Block list: managing Block list style and its elements.
Image: replacement of image, adjustment of image size and its position, SEO options.
Pop-up window: window close options.
Form: different states of the form, extra styles.
Also, on the Settings tab, you can set SEO indexing to an element.
