Understanding the Editor

After your AI generates a website, you'll enter the Kanorio editor. This is your primary workspace for modifying website content: changing text, swapping images, checking how it looks on different devices, and preparing for launch can all be done here.

Don't worry if there seem to be many buttons at first. Remember this principle: If you see content you want to change, click on it first. The editor will display corresponding settings based on the content you've selected.

Three Main Areas of the Editor

Top Toolbar: Your Gateway to All Tools

The toolbar at the very top of your screen is called the Top Toolbar. Here you'll find common functions:

• Sections - Add content, store, or integration sections.
• Layout - Adjust the order of sections, header, and footer.
• Pages - Manage general pages, legal pages, and blog pages.
• Settings - Adjust overall website appearance and shared content.
• Device Preview - Switch between computer, tablet, and mobile widths.
• Publish - Make your approved drafts appear on the live website.

You don't need to memorize every button upfront. When you want to accomplish a task, just find the corresponding function in the toolbar.

Central Preview Area: See Your Website in Real-Time

The center is your website preview. This shows a representation close to what visitors will actually see, not lines of code or complex settings.

As you edit text, images, or layouts, the preview updates instantly. This "edit and see the effect" workflow is called What You See Is What You Get (WYSIWYG); in simple terms, what you see is what you'll get after publishing.

Editing Panel: Click to Edit

Once you click on a section in the preview, the editor will open its corresponding editing panel. Different sections have different fields, for example:

• Text Section: Headings, paragraphs, button text, and links
• Image Section: Upload images, replace images, image captions
• Header Section: Logo, navigation, and custom buttons
• Footer Section: Contact information, social links, and copyright text

You don't need to leave the current page. After making changes, check the central preview first; if the panel shows "Save" or "Add to Site," complete the save before exiting.

The Most Basic Operation: Editing Content

1. Locate the content you want to change in the central preview.
2. Click on the section.
3. In the editing panel that appears, find fields for headings, body text, or buttons.
4. Follow the panel's prompts to click "Save" or "Add to Site," then return to the preview to confirm the layout looks natural.

If you're unsure which category a section belongs to, just click on it; the editor will show you what can be adjusted.

What's Next?

This guide only introduces the workspace. To actually accomplish a task, please read the corresponding guide directly:

• To add, edit, reorder, hide, or duplicate content - Understanding and Operating Sections.
• To compare the purposes of different sections - Complete Guide to Section Types.
• To create service, event, or portfolio pages - Managing Website Pages.
• To adjust fonts, brand colors, spacing, or border-radius - Brand Visuals and Style Settings.
• To handle drafts, saving, and publishing updates - Drafts, Saving, and Publishing.

Checking Mobile, Tablet, and Desktop Views

Visitors don't always use computers to view your website. The editor provides three device previews:

• Desktop: View the wider desktop screen.
• Tablet: View a medium-width layout.
• Mobile: View narrow-screen reading and button interactions.

This relates to Responsive Web Design (RWD). Simply put, the website adjusts its layout based on different screens, but you should still check if text is too long, images are cropped, or buttons are difficult to tap.

Before publishing, switch to the mobile preview at least once. Many visitors click social links from their phones, and the mobile reading experience is often more critical than the desktop version.

Previewing Light and Dark Modes

The toolbar allows switching between light and dark mode previews. This helps you check if text contrast, images, and brand colors remain clear across different themes.

For example, gray text that looks faint on a light background might be harder to read in dark mode. If you find text difficult to discern after switching previews, go to the "Design" tab in "Settings" to adjust brand colors, fonts, or appearance modes.

Saving a Draft Doesn't Mean It's Live

Changes in the editor are initially saved as drafts, but the saving process differs for various actions. Dragging to reorder, hiding, or deleting sections usually saves to the draft immediately. When editing content in forms within sections, headers, or footers, click "Save" or "Add to Site" as prompted before leaving.

However, be aware of two different concepts:

• Draft: The version you are currently editing, visible only to you and authorized team members.
• Publish: Synchronizing your draft to the live website, so visitors can see the latest content.

Therefore, "saved" does not equal "visible to visitors." After completing a batch of changes, you still need to click "Publish."

For detailed steps, please read: Drafts, Saving, and Publishing and Publishing Your First Website.

What Else Can the Editor Do?

Once you're comfortable with the basic operations, you can explore other features in the toolbar:

• Pages: Add, manage, or adjust website pages.
• Settings: Configure overall website design and content settings, such as fonts, brand colors, or shared buttons.
• AI Assistance: Use AI to generate pages, sections, or optimize content based on functionality.
• Publish: Set up your public URL for the first time, then sync new drafts to the live version.

You don't need to configure all these advanced features on day one. Start by completing your homepage and basic contact information, then gradually expand.

Next Steps

If your content is nearing completion, preview it on mobile first to confirm the display, then read Publishing Your First Website to set a URL and go live.