Styling Properties
A complete guide to the styling controls available in the Visual Editor sidebar.
Content
Edit the content of the selected element:
- Text Elements: Edit text directly in a textarea
- Images: Upload a new image to replace the current one
- Videos: Change the video source URL
- Links: Edit the URL and target (new tab/same tab)
Spacing
Control the space around and inside elements:
Padding
Inner spacing between the element's content and its border.
Use All sides for uniform padding or Individual to set top, right, bottom, and left values separately.
Margin
Outer spacing between the element and surrounding elements. Works the same as padding with All sides or Individual modes.
Dimensions
Set the size of elements:
- Width: Element width (leave empty for auto)
- Height: Element height (leave empty for auto)
Available units: px, %, em, rem,vw, vh
Typography
Control text appearance (only shown for text elements):
Font Size
Text size in px, em, rem, or other units.
Font Weight
Text thickness: Light (300), Normal (400), Medium (500), Semibold (600), Bold (700)
Text Align
Alignment: Left, Center, Right, Justify
Drag-to-Resize Font Size
Text elements (H1-H6, P, SPAN) have purple corner handles that let you drag to resize the font size directly on the canvas — just like in Figma. The sidebar font size control syncs in real-time as you drag.
How it works
- • Select any text element to see purple corner handles
- • Drag any corner to resize the font size
- • The sidebar shows the current size (e.g., "73px (custom)")
- • Works on headings, paragraphs, and span elements
Advanced Typography
Click "Advanced" to reveal additional typography options:
- Line Height: Spacing between lines of text
- Letter Spacing: Space between characters
- Text Transform: Uppercase, lowercase, capitalize
- Text Decoration: Underline, strikethrough, none
Colors
Change the colors of your elements:
Text Color
The color of text content
Background Color
Element background. Supports transparent option for no background.
Use the color picker or enter hex values directly (e.g., #3B82F6).
Border
Add and customize borders:
- Border Width: Thickness in pixels
- Border Color: Color of the border
- Border Radius: Corner roundness in pixels
Opacity
Control element transparency from 0% (invisible) to 100% (fully visible).
💡 Live Preview
All changes are applied immediately to the preview. Use "Discard" if you want to undo all changes, or "Publish" when you're happy with the results.