Styles

Design with the power of CSS.
Workspace Top Bar Navigator

Styles

First of all, there is a CSS selector. In CSS, it specifies which HTML elements should be selected for CSS property values to be applied to them.

Add Styles

How to apply Styles to your Elements

Use Styles to apply a collection of Properties to all Elements with that Style.

Styling Elements consistently helps you create a coherent design, so that you can direct your site visitors' attention to where you need it to be. 

Many Elements also Default Styles applied to them. For example, Heading 1 Elements come with the Heading 1 Style. Default Styles are by default hidden.

Styles function like classes, and are automatically fed into the clean CSS as you apply them and adjust their values.
Add Style
Breakpoints
States

To view the Default Styles of an Element → 

  1. Click on the Element, either in the Navigator or Stage.
  2. Then click on the Arrow icon in the Styles Manager.

The Custom Styles you've applied to an Element show by default in the Styles Manager whenever you highlight an Element either in the Navigator or in the Stage. They also show behind the Element in the Navigator. 

Add Style
Breakpoints
States
Style
Element
Add Style
Breakpoints
States

To add a Custom Style to an Element →

  1. Click on the Element, either in the Navigator or Stage.
  2. Enter the name of your Custom Style (this is the same name the class will show in the code), and hit the Enter key to apply the Style to the Element.
    Use 🅂 to add Styles on the fly
If you have created Custom Styles elsewhere in the Project, you will have the option to create a new Style or choose an existing Style from your Styles Library in the dropdown menu.
Add Style
Breakpoints
States

To remove a Style from an Element →

  1. Click on the Element, either in the Navigator or Stage.
  2. Next, click on Add Style. 
  3. Hit the Backspace key to remove Custom Styles. Default Styles cannot be removed.
  4. Alternatively, use the X Icon shown on active Styles 
Breakpoints

Create a responsive website by optimizing your design for various screen sizes.

Use Breakpoints to tweak your design to fit various screen sizes perfectly.

Breakpoints mark the edges of the viewport. After setting these Breakpoints in the Style Manager, you can then define how your website displays on different screen sizes without sacrificing design on any size.

Style
Element
Style
Style
Style
Add Style
Breakpoints
States

To define a Breakpoint for your Style →

  1. Click on the Element, either in the Navigator or Stage.
  2. Then click on Breakpoints in the styles Manager.
  3. You will see a dropdown menu from which you can select the pixel sizes.
Add Style
Breakpoints
States

To add a Style for an additional Breakpoint 

  1. Click on the Element, either in the Navigator or Stage.
  2. Next, in the Styles Manager, click on the pixel size of the current view. This will open the dropdown from which you can choose the next pixel size you want to work on.
Add Style
Breakpoints
States

To easily toggle between the different Breakpoint views → Click on the Breakpoint Markers at the top of the Stage.



To view your website without Breakpoint-specific design → 
  1. Click on the Element, either in the Navigator or Stage.
  2. In the Styles Manager, click on the pixel size of the current view and select None.

To remove all Breakpoint-specific Styles created for your Page → 
  1. Click on the Element, either in the Navigator or Stage.
  2. Next, click on the Breakpoint icon.

Add Style
Breakpoints
States
States

Configure specific behavior of your Elements depending on the site visitor's interaction. 

You can apply up to four States to each Element, to set how it should behave when a site visitor hovers over it (Hover), clicks into (Focus) or onto it (Active), or is not interacting with it (None, default value).

Style
Element
Style
Style
Style
Add Style
Breakpoints
States

To add State-specific Styles to an Element →

  1. Click on the Element, either in the Navigator or Stage.
  2. Then click on States and select the State you want to want to create the Style for. You can now apply Styles from the Property Manager to the Element for the chosen State.
Add Style
Breakpoints
States

Properties

Apply the following Properties and set your preferred values in just as few clicks.

Position

Select how your Element should be positioned. 

Position
Top
Right
Bottom
Left
Order

Display

Set the display property for your Element, to select how the Element flows within the context of its surroundings.

Display

Flex

Set the Flex property for your Element to define how it's content flows in a certain context.

Flex





Col Gap
Row Gap

Flex Children

Set Flex Child properties to elements to select how the Element flows within the context of its surroundings.

Flex Child



Size

Configure the dimensions of your Elements.

Size
Width
Height
Min
Mix
Max
Max

Spacing

Add a buffer to the edges of your Element to distance them from its contents or the next Element.

Spacing
Margin
Padding

Typography

Style your texts to draw in your site visitor's attention.

Typography
Font
Size
Weight
Line Height
Spacing
Indention
Color

List Style

Specify the type of marker for list items inside lists.

List Style

Opacity and Fills

Choose to what degree your Element should be transparent and set how its background should look.

Opacity

Opacity and Fills

Choose to what degree your Element should be transparent and set how its background should look.

Fills
Background Color
Background Image
Width
Height
Left
Top

Borders

Frame your Element by adding borders to any or all of its sides.

Borders
Width
Color

Radius

Add Radius to the corners of your Element.

Radius

Shadows

Give your Elements shadows to add dimension to your Page.

Shadows
Line Height
Spacing
Left
Top
Color