Element Properties
Click an element on the canvas or in Structure to edit its properties. An element's properties are organized into three tabs: Content , Design , and Settings .
Use Search at the bottom of the properties panel to find controls, and Modified to show properties with values set. Click the cog icon beside Search to also search the Settings tab.
Content
Content properties define what an element displays: the text in a Text element, images in a Gallery, or the icon in an Icon element. Available controls depend on the element; layout-only elements may have no Content tab.
Design
Design properties control how an element looks, including its layout, colors, typography, and spacing. Use Design Presets to share its appearance with other elements of the same type.
Settings
The Settings tab lets you add animations and interactions, control when an element appears, and override variables for the element and its children. It also includes advanced controls for custom CSS, classes, wrapper styles, and HTML attributes.
Advanced
- Custom CSS — Add custom CSS to this element.
- Classes — Assign classes for shared styling. See Selectors.
- Wrapper / Wrapper Hover — Style the element's outer wrapper. See Wrapper Styles.
- ID — Set the HTML ID attribute.
- Attributes — Add HTML attributes; values support dynamic data.
- Tag — Change the HTML tag on supported elements.
- Draft — Hide a Section from the front end while keeping it in the editor. See Draft Sections.
Hide On Breakpoint
Choose screen-width ranges under Hide to hide the element and its children.
In-Builder Preview can show hidden elements as Greyed Out or Hidden on the canvas. This does not change front-end behavior; use the Structure panel to select hidden elements.
Conditions
Conditions control when an element and its children appear, based on rules such as whether a visitor is logged in. If the conditions are not met, the element is excluded from the page.
See Conditions.
Animations
Use Entrance Animations when an element enters view, Scrolling Animations to change properties during scrolling, or Sticky to pin an element as the page scrolls.
Override Variables
Override a variable for this element and its children without changing its global value. See Variables.
Interactions
Run actions when a visitor clicks, scrolls, presses a key, or triggers another event. See Interactions to configure triggers, actions, and targets.
Editing Properties
Responsive
Hover over a control. If it supports responsive values, a breakpoint selector icon appears. Click it and choose the screen size you want to edit. Smaller breakpoints inherit values from larger ones until you set an override. See Responsive Design.
Hover
Mouse over a control. If it supports hover styles, the hover icon appears. Click it and set the value to use when a visitor hovers over the element. Click it again to return to normal editing.
Dynamic Data
Mouse over a control. If it supports dynamic data, the dynamic data icon appears. Click it, choose a source, and apply it to display content from WordPress, such as a post title or featured image. Only compatible sources appear. See Dynamic Data for more.
Clearing Properties
Mouse over the modified indicator—the dot to the left of the control label—to reveal the clear icon . Click it to remove the property’s values at all breakpoints. Hold Shift while clicking to clear only the current breakpoint.