Table of contents
- Getting Started
- Main Toolbar Overview
- AI Inline Input
- Text Content Editor
- Style Editor
- Text Highlighting
- Layout Editor
- Effects Editor
- Link Editor
- Creating New Links
- Image Editor
- Advanced Features
- Saving Your Changes
Getting started
How to activate the inline editor
- Navigate to any page in edit mode.
- Click on any element you want to edit (text, button, image, etc.).
- A floating toolbar will appear above or below the selected element.
- The element will be outlined to show it’s selected.
Understanding the toolbar
The toolbar appears as a set of icon buttons. Hover over an icon to see its name and what it does.Main toolbar overview
When you select an element, the toolbar includes three areas.Quick actions (left)
- AI Input: Ask AI to modify the element.
- Edit Text: Change the element’s text content.
- Edit Style: Modify fonts, colors, and text styling.
- Highlight: Highlight selected text (only appears when text is selected).
- Layout: Adjust spacing and borders.
- Effects: Add shadows and transforms.
- Code Editor: Edit raw HTML/CSS.
- Price: Edit pricing (for price elements).
- Link: Edit or create links.
- Image: Edit images.
Element actions (middle)
- Bold / Italic / Underline: Format selected text.
- Duplicate: Copy the element.
- Copy Style: Copy the element’s styling.
- Paste Style: Apply copied styling to another element.
Element management (right)
- Delete: Remove the element.
- Close: Deselect the element.
AI inline input
What it does
The AI inline input lets you describe changes, and AI will modify the selected element automatically.How to use
- Select an element.
- Find the AI input box on the left side of the toolbar.
- Type what you want to change (for example: “Make this text larger and blue”, “Make this button green”).
- Press Enter (or click the AI action).
- AI applies the requested changes.
Tips
- Be specific and use simple, clear language.
- You can describe colors, sizes, spacing, and content changes.
- If you don’t like the result, undo and try again.
Text content editor
Accessing the text editor
Click the pencil icon (Edit Text) in the toolbar.Editing text
- A popup opens with a text area.
- The current text is shown.
- Type or paste your new content.
- Changes apply as you type.
What you can do
- Change text content
- Add or remove text
- Write multiple lines
- Paste text from other sources
Tips
- The text area shows only the text (no HTML tags).
- Formatting (bold, colors, etc.) is preserved.
- Click outside the popup to close and keep changes.
Style editor
Accessing the style editor
Click the Aa icon (Edit Style) in the toolbar.Font size
Common options include:- Body (16px)
- Small (14px)
- Large (18px)
- Heading 1 (32px)
- Heading 2 (24px)
- Heading 3 (20px)
- Find Font size.
- Open the dropdown.
- Select a size to apply instantly.
Font weight
Common options include:- Light (300)
- Normal (400)
- Medium (500)
- Bold (700)
- Find Font weight.
- Select a weight to apply instantly.
Font family
- Find Font family.
- Browse fonts (each shows a preview).
- Click a font to apply it immediately.
Text case (transform)
Options typically include:- UPPERCASE
- lowercase
- Capitalize Each Word
- Normal
Text decoration
Options include:- Underline
- Strikethrough
Text color
- Find Text color.
- Choose a theme color circle, or open the color picker for a custom color.
- Theme colors keep your design consistent.
- Custom colors provide more flexibility.
Background color
- Find Background.
- Choose a theme color or use the custom picker.
- Emphasize important text
- Create button-like emphasis
- Improve readability with contrast
Text alignment
Use the alignment buttons for:- Left
- Center
- Right
Text highlighting
When it appears
Highlighting appears when you select text inside a text element.How to use
- Click a text element.
- Drag to select specific words or phrases.
- Open Highlight from the toolbar.
Features
Text color highlighting
- Select text.
- Under Text color, choose a color.
- The selected text updates instantly.
Background highlighting
- Select text.
- Under Background, choose a color.
- The selected text gets a colored background.
Tips
- Use highlights sparingly for emphasis.
- Prefer theme colors for consistency.
Layout editor
Accessing the layout editor
Click the layout icon in the toolbar.What it controls
- Margin (space outside the element)
- Padding (space inside the element)
- Border radius (rounded corners)
Margin controls
Simple mode (default)
- Vertical (Top & Bottom)
- Horizontal (Left & Right)
Individual mode
Switch to Individual mode to set:- Top
- Right
- Bottom
- Left
- Values update in real time.
- Negative values can create overlaps.
Padding controls
Padding uses the same Simple and Individual controls as margin. Common uses:- Add breathing room inside buttons
- Create space around text in boxes
- Increase clickable area for links/buttons
Border radius
- Find Border radius.
- Enter a value (pixels).
- 0: square corners
- 5–10: lightly rounded
- 15–20: very rounded
- 50+: circular for square elements
Effects editor
Accessing effects
Click the sparkles icon (Effects) in the toolbar.Transform effects
Rotate
- Range: -180° to +180°
- Use for subtle tilts or dynamic emphasis
Scale
- Range: 0.1× to 3×
- 1.0× is the original size
Skew X
- Range: -45° to +45°
- Use for modern slanted/perspective effects
Shadow effects
Shadow presets
Choose from presets such as:- None
- Small
- Medium
- Large
- Extra Large
- Inner
Custom shadow controls
Adjust:- Offset X (left/right)
- Offset Y (up/down)
- Blur (softness)
- Spread (expansion)
Reset all effects
Use Reset All Effects to clear transforms and shadows.Tips
- Subtle shadows and transforms look more professional.
- Test effects on mobile and smaller screens.
Link editor
When to use
The link editor is used when you select an existing link (anchor tag) or a button element.Accessing the link editor
- Click a link or button.
- Click the link icon in the toolbar.
Link types
External URL
- Choose External URL.
- Enter the full URL including
https://(for example:https://www.example.com).
Page links
- Choose Select page from your website.
- Pick a page from the list (it updates automatically if page URLs change).
Section links (scroll to section)
- Choose Select section from this page.
- Pick a section number to scroll to.
Email address
- Choose Email address.
- Enter the email (for example:
hello@example.com).mailto:is added automatically.
Phone number
- Choose Phone number.
- Enter the number (include country code for international numbers).
Link settings: open in
Choose whether the link opens in:- Same window (recommended for internal navigation)
- New window (recommended for external links)
Payment integration
For pricing buttons, you may see an Integrate payment option to configure payment processing.Removing links
- Select the linked element.
- Open the link editor.
- Click Remove link.
Creating new links
Use this to turn normal text or elements into clickable links.Access
- Select a non-link element.
- Click the link icon (or link icon with plus, depending on context).
Method 1: Convert entire element
- Select the element.
- Choose the link type (URL, page, section, email, phone).
- Enter the destination.
- Click Save.
Method 2: Link selected text only
- Select a text element.
- Highlight the words you want linked.
- Create a link and click Save.
Tips
- Use descriptive link text (avoid “click here”).
- Test links after creating them.
Image editor
When it appears
The image editor appears when you select:- An image element, or
- An element with a background image
Accessing the image editor
- Click an image.
- Click the image icon in the toolbar.
Common options
- Replace image
- Adjust size
- Edit alt text (accessibility)
- Change image URL
- Upload a new image
Background images
Depending on the element, you may be able to:- Change/remove the background image
- Adjust positioning
- Modify size/cover settings
Replace an image
- Open the image editor.
- Click Upload (or Choose file).
- Select an image file.
- The new image uploads and replaces the old one.
Tips
- Use high-quality images with reasonable file sizes.
- Add descriptive alt text.
- Keep styles consistent across images.
Advanced features
Copy and paste styles
Copy Style- Select an element with styling you want.
- Click Copy Style.
- Select a different element.
- Click Paste Style.
- Colors (text/background)
- Font settings (family/size/weight)
- Spacing (margin/padding)
- Borders and border radius
- Shadows and effects
- Alignment and decoration
Text formatting (selected text only)
When you highlight text inside an element, you can apply:- Bold
- Italic
- Underline
Duplicate element
- Select an element.
- Click Duplicate.
- A copy appears right after the original.
Delete element
- Select an element.
- Click Delete.
- Confirm the deletion.
Code editor
Use the code editor for advanced HTML/CSS changes. Caution:- Incorrect code can break your page.
- Only use it if you’re comfortable with HTML/CSS and test changes carefully.
Saving your changes
Understanding the save system
Inline edits are not always saved automatically. After making changes, a save bar may appear at the bottom of the screen.Save actions
Discard
- Discards your unsaved edits and reverts the page back.
Save
- Saves changes to a draft (not live yet).
Save & Publish / Publish Page
- Saves and publishes changes so they go live immediately.
Recommended workflow
- Make edits across multiple elements.
- Click Save to keep work as a draft.
- When everything looks right, click Publish Page.
Before you publish
- Preview on desktop and mobile
- Test links
- Review text for typos
- Confirm images loaded correctly
Troubleshooting
Toolbar not appearing
- The element may not be editable.
- Another element may already be selected — click outside and try again.
- Refresh the page and retry.
Changes not showing
- Make sure you clicked Save or Publish.
- Hard refresh the page (Cmd+Shift+R).
- Confirm you’re viewing the correct mode (preview vs live).
Styling looks wrong
- Remove custom styles and reapply gradually.
- Use Reset All Effects.
- Discard changes and try again.
Link not working
- Confirm external URLs include
https://. - Verify page links point to existing pages.
- Double-check email/phone formatting.
Best practices summary
Do
- Save frequently while you work.
- Use copy/paste style to keep design consistent.
- Stick to theme colors where possible.
- Preview and test before publishing.
- Use descriptive alt text and link text.
Don’t
- Overuse effects and heavy shadows.
- Mix too many fonts/colors on one page.
- Publish without previewing and testing.
Quick reference
Most common tasks
Change text- Click element → Edit Text → type new text
- Click element → Edit Style → Text color → pick a color
- Click element → Layout → adjust margin/padding
- Click element → Link → choose type → set destination → Save
- Click element → Effects → choose a shadow preset
- Click source element → Copy Style
- Click target element → Paste Style
- Click element → Delete → confirm
Need more help?
- Use Help in the sidebar for support.
- Use ChatAI for quick editing questions.
- Check Tutorial for guided walkthroughs.
Version: 2.0