Step-by-step guideUser guide

Edit pages with the drag-and-drop editor

Learn the editor layout, add sections and elements, adjust text, colors and layout with the floating toolbar and Inspector, let the AI Agent edit the page, manage versions and use keyboard shortcuts.

LDPage Team·9 min read

What is the editor for?#

The editor is where you edit every LDPage page: add or reorder sections, edit text directly on the canvas, change colors, font sizes and layout per Desktop/Tablet/Mobile screen, add lead forms and popups, and ask the AI Agent for help. Open it by clicking a page in the Pages list, or automatically after creating a page from a template.

Who can use it: the workspace owner and members with the editor role (edit and publish); the viewer role can only view. All changes are saved automatically. AI features require an administrator to have configured the AI Provider and consume your plan's AI credits.

1. Editor layout#

1
Left side of the top bar: the LDPage logo (back to the overview), the ← Back to page list arrow, the page name and the save status: Saved (Đã lưu), Saving… (Đang lưu…), Not saved (Chưa lưu), Save error — will retry, or Conflict — reload the latest version. The two curved arrows are Undo (Ctrl+Z) and Redo (Ctrl+Shift+Z).
2
Center: Desktop, Tablet and Mobile buttons to pick the breakpoint you are editing, and the zoom box (Fit, 50%–200%).
3
Right: toggle the left panel (⌘/Ctrl+B), toggle the Inspector (⌘/Ctrl+.), the keyboard button for the Shortcuts list, the light/dark theme button, Preview (Xem trước — saves, then opens a preview in a new tab) and Publish (Xuất bản).
4
The vertical rail on the far left has 5 tabs: Add (Thêm), Structure (Cấu trúc), AI, History (Lịch sử) and Settings (Cài đặt). Click the open tab again to close the panel.
5
The bottom of the canvas has a zoom bar: − / + (⌘/Ctrl − and ⌘/Ctrl +), click the percentage to return to Fit (⌘/Ctrl 0), and the ruler button (Shift+R).

Editor screen with top bar, left tab rail and canvas — Figure 1. Editor for the page "Trà Thảo Mộc An Nhiên — Landing": the top bar has ←, the page name, the Saved status, Undo/Redo, the Desktop/Tablet/Mobile group (Desktop selected), the Fit (100%) box, the panel/shortcut/theme buttons, Preview and Publish; the left rail has Add, Structure, AI, History, Settings; the zoom bar at 100% sits at the bottom of the canvas. Sample data. Vietnamese UI.

2. Add sections and elements#

Click the Add tab to open the "Thêm section & phần tử" (Add sections & elements) panel. It has a search box ("Tìm mẫu: nút bo tròn, form, hero, cta…") and categories in the left column.

1
Discover (Khám phá): quick topic chips (Hero, Buttons, Sale, Countdown, Pricing, Form…) and featured rows such as Text combos, Labels & badges, 3D icons; click See all (Xem tất cả) to open a whole group.
2
Frequently used (Hay dùng): Recent items you added and Pinned items (click the star on an item to pin it).
3
Elements (Phần tử): Text, Button, Image, Gallery, Box, Icon, Video, Map & Fanpage, Tabs, Accordion, Table, Menu, Rating, Countdown, HTML code…
4
Photos (Ảnh): sample photos by industry, free to use on your page; replace them in the Inspector.
5
Section: pick a section type in the middle column (Hero, Features / Benefits, About, Process, Pricing, Testimonials, FAQ, Footer…), then choose from the All / Designed / Basic tabs (Tất cả / Mẫu thiết kế / Mẫu cơ bản).
6
Layout (Bố cục — Section · Row · Block and prebuilt sections), Form (form templates and form sections) and Utilities (Tiện ích — popup, sticky CTA bar, floating contact…).
7
How to add: for a section, click to add it right below the section in view, or drag it onto the canvas to insert at an exact spot. For an element, click to add it in the middle of the screen (on top of the page), or drag it to place it freely where you drop.

Figure 2. The Add sections & elements panel on the Discover category: search box at the top, left column with Discover, Frequently used, Elements, Photos, Section, Layout, Form, Utilities; a row of topic chips Hero, Buttons, Sale, 3D, Image frame, Countdown… and the Text combos, Labels & badges and 3D icons groups with See all links. Vietnamese UI.

Section category with Hero designs — Figure 3. The Section category: the middle column lists section types (Hero selected, Features / Benefits, Partners / Logos, About, Process, Stats, Pricing…); on the right are the All / Designed / Basic tabs and a grid of Hero designs such as "SaaS chữ trái ảnh phải" and "App di động nền gradient tím". Click or drag a design onto the canvas to add it. Vietnamese UI.

3. Select and edit elements#

1
Click an element on the canvas to select it. A green frame with resize handles appears, with a path label (for example Hero › Heading …) above it; drag the ⠿ handle next to the label to move freely, or hold Shift while dragging to rearrange within the layout.
2
The floating toolbar above the element contains: Edit text (Sửa chữ, or double-click; Enter to finish, Esc to cancel), decrease/increase font size, Bold, Italic, Underline, Text color, Alignment, Edit with AI Agent, Open Inspector, Duplicate (⌘/Ctrl+D), Delete (Delete) and ⋯ More actions.
3
The Inspector opens on the right with two tabs, Design (Thiết kế) and Content (Nội dung). Its header shows the element name (click to rename) plus Duplicate, Lock, Hide on the current device and Delete buttons.
4
The Design tab has a Frequently used group (Font size, Weight, Text color, Background, Radius, Uniform padding, Alignment) and collapsible groups such as Position and Text; type in "Tìm thuộc tính" (search properties: color, font size, radius…) to jump to a property. The Content tab holds the text, links, images, form fields… depending on the element type.
5
Per-screen edits: choose Tablet or Mobile in the top bar, then adjust styles — values apply only to that breakpoint. The Rewrite with AI (Viết lại bằng AI) button at the bottom of the Inspector rewrites the element's text.
6
Right-click an element (or a row in the Structure tree) for the menu: Edit in Inspector, Edit with AI Agent, Duplicate, Move up, Move down, Lock (cannot be selected/edited on the canvas), Hide on this breakpoint, Delete.

Selected Hero heading with the floating toolbar and Inspector — Figure 4. The Hero heading is selected: the floating toolbar above has Edit text, the font size box 39 with −/+, B/I/U, text color, alignment, AI, Inspector, duplicate, delete and ⋯; the Inspector on the right is on the Design tab with the property search box, the FREQUENTLY USED group (Font size, Weight Default, Text color, Background, Radius, Uniform padding, Alignment), the Position and Text groups, and Rewrite with AI at the bottom. Sample data. Vietnamese UI.

4. Manage the page structure#

1
Click the Structure tab. The Tree view (Cây phân cấp) lists each section and its child elements (Paragraph, Heading, Action button, Image, Icon…) with a content excerpt.
2
Click a row to select the element and scroll the canvas to it; click the arrow next to a section name to collapse/expand it.
3
Hover a section row to show the ↑ Up / ↓ Down buttons for reordering sections. Locked elements show a 🔒 icon.
4
The Section view shows a thumbnail of each section for a quick overview. The Chat with AI Agent button at the bottom switches to the AI tab.

Figure 5. The Structure panel in Tree view (the Section view is next to it): the expanded Hero section contains a Paragraph, a Heading, two Action buttons "Đặt hộp quà ngay" and "Xem bảng giá", and an Image; the Features / Benefits section follows. The Chat with AI Agent button is at the bottom. Sample data. Vietnamese UI.

5. Edit the page with the AI Agent#

The AI tab opens the AI Agent chat. The Agent reads the whole page and does the work itself: fixing a single button/heading/image, changing colors/fonts/style, rewriting content, adding/removing/reordering sections, mobile optimization, SEO — then checks its own result. You can watch the canvas update while it works.

1
Click a suggestion under "Gợi ý cho trang này" (Suggestions for this page), or type a request in "Bạn muốn chỉnh gì trên trang?" and press Enter (Shift+Enter for a new line).
2
Type @ to mention a specific section (up to 5 per message); type / to open Quick commands: Review page, Optimize for mobile, Optimize SEO, Change color palette, Change fonts, Change style, Rewrite content, Add section, Follow a sample website, Switch to code mode.
3
Attach images with the image icon or paste them directly (Ctrl/⌘+V), up to 3 per message — for example a screenshot of a problem or a reference design. You can also paste a website link for the Agent to reference.
4
While the Agent is running, click Stop (Dừng) to cancel the turn (the page stays unchanged), or keep typing to queue the next message.
5
After each turn, use the buttons under the answer: Undo the AI turn, View the page BEFORE this turn, Restore the page to after this turn, or Retry for another answer.
6
The chat header has a clock (conversation history), + (new conversation) and ⋯ (Agent instructions — fixed rules the Agent always follows; quick tools such as Rewrite, Shorten, Expand, Fix spelling, Regenerate section, SEO suggestions; delete conversation).

AI Agent chat with suggestions for the page — Figure 6. The AI tab: the AI Agent header ("tell it what you want to change on the page") with history / new / ⋯ buttons on the right; an intro to what the Agent can do; the SUGGESTIONS FOR THIS PAGE list with five ideas such as reviewing the page and proposing 3 conversion improvements; the input "Bạn muốn chỉnh gì trên trang?" with an image attach button and the hint "Enter to send · @ mention section · / quick commands · paste image or link". Vietnamese UI.

Every AI change can be undone (Ctrl/⌘+Z). If the chat says AI API is not configured (Chưa cấu hình API AI), ask an administrator to configure the AI Provider.

6. Edit history and versions#

1
Click the History tab. "This session" (Phiên làm việc này) lists the steps since you opened the editor; click a step to return to exactly that state (⌘Z / ⌘⇧Z undo / redo step by step).
2
Saved versions (Phiên bản đã lưu): enter an optional label, for example "Before changing colors", then click Save version (Lưu phiên bản). Versions are also created automatically on each publish (label "Bản xuất bản") and before every AI Studio edit (label "Trước khi AI Studio sửa").
3
For each version: View shows it on the canvas (read-only; click Viewing to return to the current version), Restore loads it into the draft (still undoable with ⌘Z), and Delete version removes it permanently (cannot be undone).

Edit history panel with no saved versions yet — Figure 7. The Edit history panel: THIS SESSION says there are no changes in this session yet; SAVED VERSIONS has the optional Label box and the Save version button, followed by the message that there are no versions yet — versions are created automatically on each publish or saved manually above. Captured on a test environment. Vietnamese UI.

Restoring only replaces the draft in the editor; the public page changes only when you click Publish again.

7. Forms, popups and page utilities#

1
Add a form from the Form category of the Add panel. Select the form and open the Inspector's Content tab to edit the submit button label (Nhãn nút gửi), the success message (Thông báo thành công) and the field list (Các trường).
2
Each field has a Label, a Field type (Full name, Phone, Email, Text, Paragraph, Quantity, Dropdown, Single choice, Color choice, Checkbox, Terms consent), a width (Full row, 1/2 row, 1/3 row) and a Required option. Click + Add field, or ✕ to remove a field.
3
Submissions from visitors are stored in the workspace's Data Leads section.
4
The Utilities category offers Popup (edit its content directly on the canvas; on the live page it floats in the center and closes with ×, the overlay or Esc), Sticky CTA bar, Floating contact (Call/Zalo), Back to top, Cookie / notice bar, Reading progress bar and Reveal on scroll. Active utilities show an "Active" (Đang bật) label; click again to turn off.

8. Shortcuts and notes#

1
⌘/Ctrl + Z: Undo · ⌘/Ctrl + Shift + Z: Redo.
2
⌘/Ctrl + D: Duplicate the selected element · ↑ / ↓: Move the selected element · Delete / Backspace: Delete it · Esc: Deselect.
3
⌘/Ctrl + B: Collapse / open the left panel · ⌘/Ctrl + .: Hide / show the Inspector.
4
In the AI chat: Enter sends, Shift+Enter adds a new line, ⌘/Ctrl + V pastes a screenshot.

The status "Conflict — reload the latest version" means the page was just edited elsewhere (another tab or person); reload to get the latest version before continuing. Pages created by HTML import or in code mode only have the AI, Source code and Settings tabs and no drag and drop.

Edit pages with the drag-and-drop editorBack to top

PREVIOUS ARTICLECreate pages from the template library

NEXT ARTICLEPage settings: SEO, appearance and tracking codes