Styling Properties

Sidebar Layout & State

Before getting into individual properties, here is how the sidebar itself is organized so you always know what you have changed, what is live, and how to roll any single change back.

• Modified Properties summary at the top of the sidebar lists every property you have changed on the selected component, so you never have to scan the full panel to see what is dirty.
• Per-property reset () next to each entry rolls back that one property without touching the others. Useful when you tweaked four things and only want to undo one.
• Draft / Published badge on every component header tells you whether the version you are looking at is live or still unpublished, so you can publish with confidence.
• Accordion sections group properties into Layout, Typography, Background, etc. Only one section needs to be open at a time, which keeps the panel short.
• One source for Publish / Discard. When the sidebar owns the Publish/Discard buttons, the top toolbar hides its copies so you never wonder which set does what.

Content

Edit the content of the selected element:

• Text Elements: Edit text with the rich text editor — supports bold, italic, underline, strikethrough, text color, highlight, font size, gradient text, inline links, and clear formatting
• 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)

Gradient Text

Apply a colorful gradient to a portion of any heading or paragraph — useful for highlighting a key phrase like "AI-powered products" inside a longer sentence.

• Select the words you want to style, then click the sparkles ✨ icon in the rich text toolbar
• Choose one of 8 built-in presets (Sunset, Ocean, Candy, Forest, Fire, Sky, Royal, Mono) — each preview shows the actual gradient on its label
• Or build a custom gradient: pick a start color, an end color, and a direction (0°, 45°, 90°, 135°, 180°)
• Use "Remove gradient" to revert just the gradient, or the red Clear button at the right edge of the toolbar to strip all formatting from the selection

Emoji Picker

The compact rich-text toolbar has a built-in emoji picker. Drop a 🎉 into a listing description, a 📦 into a page text block, or a ✨ into a section heading without leaving the editor.

• Click the smile icon at the right end of the toolbar to open the picker, then click any emoji to insert it at the caret.
• Available wherever the compact rich-text editor renders - page text blocks in the page builder, listing descriptions, rich-text custom fields, and seller profile bios.
• Emojis are stored as Unicode characters in the body, so they render consistently across browsers, search results, and email notifications.

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):

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.

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:

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).