# Using the Editor | Creght Visual Documentation

> The editor is where you design every page of your website. To access the editor, go to Workspace → Project → Website → Design Page .…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)Help Center](/en/help.md)

[Changelog](/en/blogs.md)

[AI](/en/docs/ai/quick-create-first-website.md) [Visual](/en/docs/get-start.md)

Basic

- [Get to Know Creght in 2 Minutes](/en/docs/get-start.md)
- [How to Register for Creght](/en/docs/signup.md)
- [Creating a Project in Creght](/en/docs/create-site.md)
- [Templates](/en/docs/tpls.md)

Design

- [Using the Editor](/en/docs/editor.md)
- [Basic Operations](/en/docs/operating.md)
- [Layouts in Creght](/en/docs/layout.md)
- [Position in Creght](/en/docs/position.md)
- [Size in Creght](/en/docs/size.md)
- [Breakpoints in Creght](/en/docs/breakpoint.md)
- [Overlays](/en/docs/popover.md)
- [Components in Creght](/en/docs/components.md)
- [Adding Third-Party Fonts](/en/docs/tp-font.md)
- [Duplicate and Deep Copy](/en/docs/deep-copy.md)

CMS

- [CMS (Content Management System)](/en/docs/cms.md)
- [Importing WeChat Official Account Articles into CMS](/en/docs/wxmp.md)

Site Setting

- [Page Settings](/en/docs/page-setting.md)
- [How to Upgrade a Plan](/en/docs/manage-plan.md)
- [SEO Settings](/en/docs/seo-setting.md)
- [Small Files (Site Verification)](/en/docs/verification-file.md)
- [Adding a Custom Domain in Creght](/en/docs/custom-domain.md)
- [How to Complete ICP Filing](/en/docs/beian.md)
- [Server Nodes](/en/docs/website-node.md)
- [How to Switch Sites](/en/docs/pxrp79jqtnyq.md)
- [Localization](/en/docs/localization.md)

AI

- [About Creght AI](/en/docs/creght-ai.md)

Tool

- [Convert Figma Designs into Live Websites](/en/docs/figma-to-creght.md)
- [3 Guidelines for Responsive Figma Layouts](/en/docs/figma-autolayout.md)
- [Covert Figma to live website](/en/docs/response-site.md)
- [Figma to Responsive Website: Interactions](/en/docs/figma03.md)
- [Compressing Video with FFmpeg](/en/docs/ffmpeg.md)
- [How to Add Clarity to Your Website](/en/docs/clarity.md)
- [Creating a Button Hover Effect](/en/docs/button.md)
- [How to Build a Reusable Collapsible FAQ Panel](/en/docs/collapse.md)
- [Responsive Navigation Tutorial](/en/docs/nav.md)

Design/

# Using the Editor

The editor is where you design every page of your website.

To access the editor, go to **Workspace → Project → Website → Design Page**.

## Website Details Page

_![image.png](https://fsb.huglight.cn/1d2571b8f692ee890e709b1a163321af/image.png)_

## Editor Layout

The editor interface is divided into four main areas:

- **Top Toolbar** – Add and manage elements.
- **Left Panel (Page & Layer Tree)** – Organize page structure and element hierarchy.
- **Right Panel (Element Settings)** – Configure properties of selected elements.
- **Canvas** – The main working area where you design and arrange elements.

_![image.png](https://fsb.huglight.cn/08741cff265e4f0c00db63fdb3c24798/image.png)_

**Quick Guide:**

- To **add elements**, use the **Top Toolbar**.
- To **organize or reorder elements**, use the **Left Layer Tree**.
- To **customize element properties**, select an element and use the **Right Settings Panel**.

## Top Toolbar

The toolbar allows you to add basic elements such as containers, text, or prebuilt components.

From left to right: **Menu, Add from Library, Add Container, Add Text, Cursor Mode, Zoom Canvas**.

### Menu

Provides shortcuts to project navigation, plan upgrades, and other global actions.

_![image.png](https://fsb.huglight.cn/c2efed4928767a5a8d87bb0a3cddd9c2/image.png)_

### Add from Library

Creght includes a library of prebuilt components to accelerate page building. Simply drag and drop a component onto the canvas.

_![image.png](https://fsb.huglight.cn/6a3871eefcd4dc4459af348820825982/image.png)_

### Add Container

Containers are layout elements such as **Columns, Rows, and Grids**.

- Shortcut: **F**
- Draw a rectangle on the canvas to create a container.

_![image.png](https://fsb.huglight.cn/6ab17f4723195c68dfc7c1a5c427c9dc/image.png)_

### Add Text

Insert text blocks for headings, body copy, or labels.

- Shortcut: **T**
- Draw or click on the canvas to create a text element, then double-click to edit.

_![image.png](https://fsb.huglight.cn/8ed1b3c9d750d52ba80f0bdde7122cc0/image.png)_

### Cursor Modes

- **Default Mode** – Select and move elements.
- **Hand Mode** – Pan the canvas by clicking and dragging.

### Zoom Canvas

Adjust the zoom level (e.g., 100% or “Fit to Screen”) for better visibility.

_![image.png](https://fsb.huglight.cn/449525f7ba218f5ffdaa98449ccc6a2f/image.png)_

## Layer Tree

On the left, the **Layer Tree** shows the structure and hierarchy of all elements on the page.

- **Rename elements** by double-clicking a node. Meaningful names help keep designs organized. _![image.png](https://fsb.huglight.cn/a1d178359619d861f64a532d44bd516e/image.png)_
- **Reorder elements** by dragging nodes up, down, or into different parent containers.

![image.png](https://fsb.huglight.cn/39c8454203308989a3d5ff309deb75eb/image.png)

## Element Settings Panel

On the right, the **Settings Panel** displays different options depending on the selected element.

![image.png](https://fsb.huglight.cn/b3bf2bc79d561dc6d6d7e7bad499ac56/image.png)

### Common Sections

- **Position** – Control how the element is placed relative to its parent (absolute, relative, fixed, sticky).
- **Size** – Define fixed dimensions, fit to content, or fill parent.
- **Effects** – Apply entry animations.
- **Cursor** – Set mouse cursor style on hover.
- **Style** – Adjust visibility, opacity, or background.
- **Accessibility** – Assign semantic HTML tags for SEO and screen readers.

### Container-Specific Section

- **Layout** – Define how child elements are arranged (row, column, grid).

### Text-Specific Section

- **Typography** – Set font family, size, color, and text styles.

💡 **Tip:** The best way to learn settings is to experiment. If needed, undo any changes with **Ctrl + Z (⌘ + Z)**.

## Canvas

The canvas is the main design area. If you’ve used tools like **Figma** or **Blue Lake**, you’ll feel at home.

![image.png](https://fsb.huglight.cn/87c01e1c3322aab65ea33ff84a95ada9/image.png)

### Basic Operations

- **Left-click** – Select elements; drag to move them.
- **Middle-click + drag** – Pan the canvas.
- **Scroll wheel** – Scroll vertically.
- **Ctrl (⌘) + Scroll** – Zoom in/out.
- **Right-click** – Open context menu (copy, paste, etc.).
- **Shift + Click** – Multi-select elements.
- **Ctrl (⌘) + Click** – Quickly select parent elements.
- **Double-click** – Edit text or enter component edit mode.
- **Shortcuts** –
  - **Ctrl (⌘) + Z** – Undo
  - **Ctrl (⌘) + Shift + Z** – Redo
  - **Ctrl (⌘) + C / V / D** – Copy, paste, duplicate elements

## Preview and Publish

After editing, you can **preview** your changes before publishing.

- Click **Preview** (top-right) to open a live preview of the current page. _![](https://fsb.huglight.cn/project/mtdDqMgsnYi/mfsVozLwtQN__image.png)_
- Adjust the preview window size to test responsiveness across devices.

![image.png](https://fsb.huglight.cn/3fdf8d989f4fc50a6fa46964afe9bed8/image.png)

Once satisfied, click **Publish**. Your site will go live on both:

- The free Creght domain, and
- Any connected custom domains.

✅ You’re now ready to start designing with the Creght Editor.

On this page

- [Website Details Page](#website-details-page)
- [Editor Layout](#editor-layout)
- [Top Toolbar](#top-toolbar)
- [Menu](#menu)
- [Add from Library](#add-from-library)
- [Add Container](#add-container)
- [Add Text](#add-text)
- [Cursor Modes](#cursor-modes)
- [Zoom Canvas](#zoom-canvas)
- [Layer Tree](#layer-tree)
- [Element Settings Panel](#element-settings-panel)
- [Common Sections](#common-sections)
- [Container-Specific Section](#container-specific-section)
- [Text-Specific Section](#text-specific-section)
- [Canvas](#canvas)
- [Basic Operations](#basic-operations)
- [Preview and Publish](#preview-and-publish)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

This website is built with [Creght](/en.md)

![User Community](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

User Community

## Links

- [Pricing](/en/price.md)
- [Solutions](/en/solution.md)
- [Customers](/en/customers.md)
- [Help Center](/en/help.md)
- [Contact Us](/en/contact.md)
- [Blog](/en/blogs.md)
- [Refund Policy](/en/tuikuan.md)

## Resources

- [All Resources](/en/resources.md)
- [Templates](/en/templates.md)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/en/effects.md)
- [Figma to Creght](/en/figma2creght.md)
- [API for AI](/en/api.md)

## Comparisons

- [vs Shianxianle](/en/creght-vs-sxl.md)
- [vs Fanke](/en/creght-vs-fkw.md)
- [自己写代码 vs Creght](/en/compare/self-coding.md)
- [外包 vs 自己做](/en/compare/outsourcing.md)

## Terms

- [Terms of Service](/en/legal/terms.md)
- [Privacy Policy](/en/legal/privacy.md)
- [Acceptable Use Policy](/en/legal/acceptable-use.md)

## Social Media

- [Xiaohongshu](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [Bilibili](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)