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.
To view the Default Styles of an Element →
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.
To add a Custom Style to an 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.
To remove a Style from an Element →
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.
To define a Breakpoint for your Style →
To add a Style for an additional Breakpoint →
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).
To add State-specific Styles to an Element →
Apply the following Properties and set your preferred values in just as few clicks.
Select how your Element should be positioned.
Set the display property for your Element, to select how the Element flows within the context of its surroundings.
Set the Flex property for your Element to define how it's content flows in a certain context.
Set Flex Child properties to elements to select how the Element flows within the context of its surroundings.
Configure the dimensions of your Elements.
Add a buffer to the edges of your Element to distance them from its contents or the next Element.
Opacity and Fills
Opacity and Fills
Frame your Element by adding borders to any or all of its sides.
Add Radius to the corners of your Element.