Many elements, including rows, columns, and widgets offer the ability to access its HTML/CSS.
To access the HTML/CSS of a
- Right-click the element to trigger the context menu.
- Click Edit HTML/CSS
- Edit or add code as needed.
- Click Update.
The browser may need to be refreshed to see the change.
Edit Custom Code in Editor 2.0 or Flex Mode
If you are in Classic Editor using flex mode or in Editor 2.0, you can edit the CSS of flex containers (section, column, inner column, and advanced grid). If you are in Editor 2.0 you can also edit the CSS of headers and footers.
When in flex mode or Editor 2.0, you can edit the HTML of widgets the same as in Classic Editor.
To edit CSS:
Click to select the flex container, header, or footer.
In the floating menu, click the three dot icon, then select Edit CSS.
Edit or add CSS as needed.
Click Update.
Custom code is not reflected in the design panel. If there is a style change that has a controller, the controller will not work. If you delete the custom code, the controller will work again.
Limitations in Editor 2.0 and Flex Mode
The current style update mechanism does not support CSS at rules. If you want to use CSS at rules in Flex Mode or Editor 2.0, you need to add them via developer mode, which can be accessed by clicking the developer mode icon in the top navigation bar.
The following at rules are only supported in developer mode:
@import: Used to import external stylesheets.
@media: Defines style rules for different media types/devices.
@font-face: Allows custom fonts to be loaded and used.
@supports: Applies styles based on feature support.
@keyframes: Defines animations.
@page: Used in paged media, such as printing.
@namespace: Declares a namespace for XML documents.
@charset: Specifies the character encoding.
@counter-style: Defines custom counter styles.
@document: (Obsolete) Applied styles to specific URLs.
@layer: Used in CSS Cascade Layers.
@property: Defines custom properties with specific types and initial values.