# 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 .…

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

Basic

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

Design

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

CMS

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

Site Setting

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

AI

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

Tool

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

> Full page index: [/llms.txt](/llms.txt)