Preview and Visual Editing
Visual editing is a modification method that does not consume Credits. Mastering it can significantly reduce usage costs. This article explains the preview function and the complete usage of the editor.
Difference Between Preview and Edit
There are three entries at the top of the site. First clarify the differences:
| Entry | Function | Can Modify? |
|---|---|---|
| Preview | View website effect | No, view only |
| Edit | Enter visual editor to directly change content | Yes, change text, images, and styles |
| Manage | Enter backend to configure domain, content, SEO | Yes, change configuration and data |
1. Preview
Enter Preview
Site top navigation bar → Preview.
Available Operations
| Operation | Description |
|---|---|
| Open in new window | Open in a separate tab for a larger view |
| Open website | Visit the published live website |
| Sandbox | View the sandbox runtime environment |
| Share address | Get a shareable preview link; shows "Copied" after clicking |
| Settings | Site-related settings |
| Refresh | Reload preview content |
Share with Others
Get the link through "Share address" and send it to colleagues or clients for feedback — no need to wait for formal release. This is very practical for projects requiring multi-party confirmation.
Preview Checklist
Before publishing, we recommend checking with this list:
Content Check
- All placeholder copy (Lorem ipsum, sample text) has been replaced
- Sample images have been replaced with real images
- Contact information, address, and phone number are accurate
- No typos
Function Check
- All navbar links can jump normally
- Forms can be submitted normally
- Buttons click with correct response
- Images load normally
Mobile Check
- Text size on mobile is appropriate, no need to zoom in to read
- Images are not distorted or overflowing
- Buttons are large enough and easy to click
- Navigation menu can expand normally on mobile
- No content is blocked
Suggestion: Mobile checks are a must. Most visitors access via phone, and mobile issues are often not obvious in desktop preview.
2. Visual Editor
Enter Edit
Site top navigation bar → Edit. After entering, the top shows "Editing" status.
Exit: click "Exit Edit."
What the Editor Can Do
The editor is a fully functional rich text editor that can directly modify text and images on the page.
Core value: These operations consume no Credits at all and take effect immediately (after saving).
3. Editor Features in Detail
Basic Operations
| Feature | Description |
|---|---|
| Undo | Revert the last operation |
| Redo | Restore the undone operation |
| Save | Save modifications. Success prompt: "Saved successfully" |
Tip: When there are many changes, we recommend saving in batches to avoid losing everything at once.
Text Formatting
| Feature | Description |
|---|---|
| Bold / Remove bold | Emphasize key points |
| Italic / Remove italic | Quotes, terms |
| Underline / Remove underline | Emphasis |
| Strikethrough | Indicates obsolete content, such as original price |
| Text color | Supports color palette + "More colors…" custom; can "Clear" to restore default |
| Font size | Adjustable; default is "Default" |
Paragraphs and Headings
| Block Type | Purpose |
|---|---|
| Body | Regular paragraph |
| Heading 1 ~ Heading 6 | Six levels of heading hierarchy |
| Quote | Quoted content, usually with special styling |
Switch through "Select block type."
SEO suggestion: Use heading hierarchy reasonably — each page should have exactly one Heading 1 (page main title), with subordinate content using Heading 2, Heading 3 in turn. Do not skip levels for visual effect (e.g., jumping from Heading 1 to Heading 4), as this affects search engines' understanding of page structure.
Alignment
- Left alignment (default for body text, best readability)
- Center alignment (suitable for titles, short phrases)
- Right alignment (special layout needs)
Lists
| Type | Purpose |
|---|---|
| Unordered list | Parallel points |
| Ordered list | Steps with sequential order |
| Checklist | To-do items, feature comparison tables |
Insert Elements
| Element | Description |
|---|---|
| Insert image | Select from media library or upload a new image |
| Insert table | Supports add/delete rows and columns, merge cells |
| Create link | Need to enter URL |
| Insert divider | Separate content blocks |
| Insert code block | Can select code block language; supports inline code; can delete code block |
Table Operations
After inserting a table, you can:
- Add row / Delete row
- Add column / Delete column
- Merge cells
Content Length Limit
A single content block has a maximum length of 50,000 characters. If exceeded, it prompts:
Content too long (N characters), please keep it within 50,000 characters.
Normal use will not reach this limit. If you really need extra-long content, we recommend splitting it into multiple paragraphs or pages.
4. Replacing Images
Operation Method
- Click the image position to replace
- Use the "Insert image" function
- Select image source:
- Select existing image from the media library
- Upload locally a new image
- Use AI-generated image (this consumes Credits)
Image Usage Suggestions
| Suggestion | Reason |
|---|---|
| Compress images before uploading | Reduce size, speed up loading, save storage space |
| Size matches display position | Avoid uploading a 4000px large image for a 300px position |
| Keep the same ratio for grouped images | Inconsistent image ratios in product lists will cause layout disorder |
| Prefer existing images in the media library | Avoid repeated uploads occupying space |
For media management, see the backend "Media Management."
5. Notes
Unsaved Changes Reminder
When leaving the editor with unsaved changes, it will prompt:
Changes not saved yet. Confirm to close?
Or when navigating away:
You have unsaved changes. Navigating away will lose these modifications. Continue?
Please save before leaving, otherwise changes will be lost.
Must Publish After Editing
⚠️ This is the most easily overlooked point:
Saving in the editor only saves to the design draft. Visitors see the online version, and the two are different.
Editor modification → Save → (visitors still cannot see) → Click "Publish" → Visitors see new content
After saving edits, the top of the site will prompt:
The app has changes. Click update to publish the latest content.
Seeing this prompt means you need to click "Publish Website" for visitors to see the modifications.
Save Failure
If it prompts "Save failed, please retry later":
- Check network connection
- Wait a few seconds and retry
- If it keeps failing, copy the modified text content elsewhere for backup first, then refresh the page and re-operate