Kanorio

Website Content Editor

Last updated 49 days ago

What are you looking for?

The editor uses a What You See Is What You Get (WYSIWYG) design, allowing your changes to be reflected in the preview in real-time without needing to switch modes. The interface is divided into three main sections: the top toolbar (Topbar), the central preview area, and the right-side editing panel. RWD (Responsive Web Design) preview lets you switch between computer, tablet, and mobile devices to ensure correct layout across different screen sizes.

Three Main Interface Sections

| Section | |------|------| | Top Toolbar (Topbar) | Add module, publish, settings, device preview toggle, light/dark preview, unsaved changes indicator | | Central Preview | Displays the website in real-time, reflecting changes immediately | | Right Editing Panel | Displays the corresponding form when a module is clicked, offering different fields and layout options based on module type |

Preview Modes

During editing, you can switch between three preview modes to instantly view how your website appears on different devices:

Device Preview: Desktop / Tablet / Mobile

  • Desktop: Full-width desktop preview
  • Tablet: Simulates a 768px width
  • Mobile: Simulates a 375px width

This helps you confirm the layout effects across various screen sizes, preventing issues after publishing.

The preview presentation varies depending on the device you are currently using for editing:

  • Mobile Editing: All previews fill the screen.
  • Tablet or Desktop Editing: Mobile and tablet previews display a draggable frame, allowing for minor adjustments to preview size; desktop previews are full-width on wide screens and simulate a 1440px desktop width on narrower screens.

Light/Dark Preview

The Topbar allows you to toggle between light and dark previews, letting you instantly see how your website looks with different themes. The preview effect is consistent with what visitors actually see, making it easy to adjust brand colors and contrast.

Unsaved Changes Indicator

When you have made changes that are not yet published, the Topbar will display an "Unsynced" indicator, reminding you to click "Publish" to update your live website.

Adding and Editing Modules

  1. Add Module: Click "Add Module," select the type (e.g., Header, Hero Image, Image & Text), and it will be added to the page.
  2. Edit Module: Click the module you wish to edit. The right panel will display the corresponding form. The preview updates instantly after modification.
  3. Adjust Order: Drag and drop modules to change their display order; release to save.
  4. Layout Options: Some modules offer multiple layouts (e.g., image and text swapped, title centered or left-aligned). Select them in the editing panel to switch.

Text Formatting

All text fields support basic formatting. Select the text and apply the following:

  • Bold: Emphasize important information.
  • Italic: Use for supplementary notes or foreign words.
  • Strikethrough: Indicate changed or inapplicable content.
  • Link: Make text a clickable hyperlink.
  • Bulleted List: List information using bullet points.
  • Numbered List: Present steps or ordered content sequentially.

Common Module Types

  • Header: Logo, navigation menu, contact information, typically placed at the top of the page.
  • Hero Image: Large background image, tagline, CTA button, suitable for the first screen.
  • Image & Text: Brand story, product descriptions, supports image-left/text-right or image-right/text-left.
  • Carousel / Gallery: Displays multiple images; carousel auto-rotates, gallery is a grid layout.
  • Footer: Contact information, social links, copyright notice, typically placed at the bottom of the page.

Click "Add Module" to view the complete list, including advanced modules like Forms, Embeds, and Contact.

Frequently Asked Questions

Yes. The editor automatically saves every 2 seconds; no manual saving is required. Please ensure changes are reflected in the preview before leaving the page.

You can use keyboard shortcuts (Ctrl+Z / Cmd+Z) to undo some actions.

The editor preview is consistent with the published website. Some tracking codes or external embeds may only function on the live site.

Some fields are required (usually marked with *). Leaving them blank may prevent saving or publishing. Optional fields can be left empty.

This might be due to insufficient AI credits or reaching the usage frequency limit. Please check your credit balance and try again later. Standard editing functions (non-AI) are unaffected.

Related Links