> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # Designer Overview > Walk through the layout and functional modules of the YiDA custom page designer, including the component panel, canvas, and property configuration area, to quickly get started with visual page building. This document helps you understand the overall framework and specific functional modules of the YiDA custom page designer so you can quickly use it for business development. ## Overall Framework The YiDA custom designer consists of five functional areas, as shown below: The custom page designer is very similar to the form designer and mainly includes five areas: * **Top navigation bar** — Provides YiDA's general navigation capabilities and enables quick page name editing, page saving, preview, and more. * **Left toolbar** — Used for global page configuration. It provides the outline tree, component library panels, and other global configuration panels such as Data Source management and the action panel. * **Top toolbar** — Used for configuring the visual editing area, such as switching the internationalization language, toggling between PC and mobile display, viewing History, and more. * **Visual editing area** — The main operation area of the designer. It presents the page being built in a WYSIWYG manner and supports interactions such as drag-and-drop and clicking to assist with page building. * **Right toolbar** — Used to configure the properties of the selected component. It is divided into three panels — Attribute, Style, and Premium — each corresponding to a different dimension of component property configuration. ## Feature Details The image above marks all functional modules of the custom designer. Each is introduced one by one below. ### 1. Platform Navigation Quick Entry Hover over the icon to expand the platform's shortcut menu. From there, you can quickly jump to the start page, My Apps, App Center, and more. ### 2. App Name Displays the App name of the page being built. Click the App name to jump to the page management page of the App. ### 3. Page Name Displays the name of the page being built. Click the pencil icon to quickly edit the page name. ### 4. Page Settings Navigation Click the navigation links to quickly open the page settings page and the page publishing configuration page. ### 5. Internationalization Language Switching Switch between languages from the dropdown. Simplified Chinese and English are currently supported. ### 6. Display Viewport Switching Switch between PC and mobile view modes. The visual designer adapts its display accordingly after switching. ### 7. Undo & Redo The YiDA designer records your operations and supports undo and redo actions. ### 8. History Click the History icon, and the designer displays your recently saved History on the right. Select a specific version to roll back to it. ### 9. Global Search The YiDA designer provides a fast global search feature. Search by keyword to locate specific settings. ### 10. Shortcuts Click the Shortcuts icon to open the shortcuts dialog, where you can view the list of Shortcuts supported by the YiDA designer. ### 11. Page Settings Click the Page Settings button, and the right toolbar switches to the page settings panel, where you can configure the properties and styles of the page's outermost container. ### 12. Preview Click the Preview button. The page information is saved automatically, and a preview overlay opens in the page designer for a true page preview. ### 13. Save Save the edited page information to the Server-side. ### 14. Outline Tree The outline tree panel lets you clearly view the component hierarchy of the current page. In the outline tree panel, you can perform the following operations: * Click to select a component: When you click a node in the component tree, the corresponding component is highlighted on the canvas. * Drag to move a component: Drag a component to change its position. Drag-and-drop is supported between the component tree and the canvas. * Quickly hide a component: When you hover over a node in the component tree, a shortcut action icon appears, allowing you to quickly hide the component. ### 15. Component Library View the list of all official components available for the current page. Use name search or component library filtering to quickly find the component you need. You can also drag a component from the library and drop it into a specific location in the visual editing area. ### 16. Block Templates A block is a combination of components organized by business rules. Blocks can therefore be regarded as larger-grained materials than individual components. The block library works similarly to the component library, allowing you to drag block materials onto the canvas or into the component tree. ### 17. Data Source Page Data Source configuration. YiDA custom pages support two types of Data Sources: * Variables — Used for global page state management. * Remote API — Used for managing asynchronous data requests on the page. ### 18. Action Panel Used for writing business logic in JS code. It supports full ES6 syntax and covers the following configuration scenarios: * Page lifecycle configuration * Action handler function configuration * Page shared function configuration ### 19. Multilingual Text Management Used to configure the multilingual text library for internationalization. The `i18n` API is also provided for retrieving language libraries. ### 20. Premium Attribute Configuration Used to configure the Premium attributes of the Selected component, including: * Render or not: Enables dynamic conditional rendering of the component. * Loop: Enables loop rendering configuration of the component. * Unique identifier: The unique identifier of the component, similar to the concept of `key` in React. ### 21. Style Attribute Configuration Select a Component on the canvas, then edit its style in the Style panel on the right (corresponding to the `style` property of a React Component). The Style panel configuration is consistent across all Components and maps to standard CSS style attributes. ### 22. Component Property Configuration Select a Component in the visual editing area, then edit its properties in the Attribute panel on the right (corresponding to the `props` of a React Component). The designer displays different Attribute configuration panels based on the property settings defined when the Component was integrated. ### 23. Feedback Center Provides quick access to support and consultation, including the following shortcuts: * Pre-sales consulting * Custom development * Follow the official account * User experience Feedback * Live support ### 24. Visual Editing Area The main area for visual editing. On the canvas, you can: * Click to select a component: Select the component whose properties you want to configure in the right panel. * Drag to move a component: Drag materials between the component tree and the canvas to reposition them. * Drag to add a component: Drag a material instance from the component library or block library into the editing area.