Appearance
CSS Properties
WP-Nexus supports 23 CSS properties organized into logical groups. Each property can be set per breakpoint and per element state.
Layout
display
Controls the element's display mode.
Values: block, flex, grid, inline, inline-block, inline-flex, none
flexDirection
The direction of the flex container's main axis.
Values: row, column, row-reverse, column-reverse
justifyContent
Alignment along the main axis (horizontal for row, vertical for column).
Values: flex-start, flex-end, center, space-between, space-around, space-evenly
alignItems
Alignment along the cross axis.
Values: flex-start, flex-end, center, stretch, baseline
gap
The space between flex or grid items.
Values: Any CSS length (e.g., 8px, 1rem, 2%).
flexWrap
Whether flex items wrap to the next line.
Values: nowrap, wrap, wrap-reverse
Spacing
padding
Inner spacing between the element's border and its content.
Values: Any CSS length or shorthand (e.g., 16px, 1rem 2rem, 8px 16px 8px 16px).
margin
Outer spacing between the element and its siblings.
Values: Any CSS length, shorthand, or auto for centering.
Size
width
The element's width.
Values: Any CSS length, percentage, or auto. Examples: 100%, 300px, 50vw.
height
The element's height.
Values: Any CSS length, percentage, or auto.
minWidth
Minimum width constraint.
Values: Any CSS length or percentage.
maxWidth
Maximum width constraint. Commonly used for responsive containers.
Values: Any CSS length or percentage. Example: 1200px, 100%.
minHeight
Minimum height constraint.
Values: Any CSS length or percentage.
maxHeight
Maximum height constraint.
Values: Any CSS length or percentage.
Typography
color
Text color.
Values: Any CSS color (e.g., #333, rgb(51, 51, 51), var(--wp--preset--color--primary)).
fontSize
Text size.
Values: Any CSS length (e.g., 16px, 1rem, 1.2em, clamp(14px, 2vw, 18px)).
fontWeight
Text weight (boldness).
Values: 100 to 900, or named values: normal (400), bold (700).
textAlign
Horizontal text alignment.
Values: left, center, right, justify.
Background
backgroundColor
The element's background color.
Values: Any CSS color.
Border
borderWidth
Border thickness.
Values: Any CSS length (e.g., 1px, 2px). Use shorthand for different sides: 1px 0 1px 0.
borderColor
Border color.
Values: Any CSS color.
borderRadius
Corner rounding.
Values: Any CSS length (e.g., 4px, 8px, 50% for circles). Use shorthand for individual corners: 8px 8px 0 0.
Effects
opacity
Element transparency.
Values: 0 (fully transparent) to 1 (fully opaque). Example: 0.5 for 50% transparency.
Using Properties
In the visual editor
Click any widget, then open the Styles panel in the right sidebar. Properties are organized into expandable sections. Click a property to set its value.
Per-breakpoint values
Click the breakpoint indicator (desktop/tablet/mobile) at the top of the Styles panel to switch contexts. Properties set for a smaller breakpoint override the desktop value at that screen size.
Per-state values
Click the state dropdown (default/hover/focus/active) to set properties for specific interaction states. State-specific styles override the default state.
Example: Responsive Card
| Property | Desktop | Tablet | Mobile |
|---|---|---|---|
display | flex | flex | block |
flexDirection | row | row | column |
gap | 24px | 16px | 12px |
padding | 24px | 16px | 12px |
borderRadius | 8px | 8px | 4px |
backgroundColor | #ffffff | #ffffff | #ffffff |
borderWidth | 1px | 1px | 1px |
borderColor | #e0e0e0 | #e0e0e0 | #e0e0e0 |
Example: Button with Hover State
| Property | Default | Hover |
|---|---|---|
backgroundColor | #0066cc | #004999 |
color | #ffffff | #ffffff |
padding | 12px 24px | 12px 24px |
borderRadius | 6px | 6px |
opacity | 1 | 0.9 |