Visual Drag-and-Drop Editor User Manual

1. Overview

The visual drag-and-drop editor features a building-block editing workflow. No coding is required—simply drag modules from the component library and adjust parameters to build polished QR code landing pages just like assembling Lego bricks.

1.1 Comparison with the Rich Text Editor

Dimension	Rich Text Editor	Visual Drag-and-Drop Editor
Operation Mode	Word-style text input	Drag-and-drop block assembly
Suitable Content	Illustrated explanatory documents	Marketing campaign pages, product landing pages
Page Layout Style	Linear, single-column dominant	Multi-section, free-form custom layouts
Learning Curve	Low	Moderate

1.2 Editor Access Steps

1. Log into the system and open the Landing Page Management page.
2. Click + Create New Landing Page, or select the Edit action for an existing landing page.
3. On Step 1 “Select Editor”, choose the Visual Drag-and-Drop Editor.
4. On Step 2 “Select QR Code Landing Page Template”, pick a template (Blank / Built-in Template / Custom Template / Create from Existing QR Landing Page).
5. Proceed to Step 3 “Edit Content” to open the editor interface.

2. Interface Overview

The editor interface is divided into four core zones:

Zone	Function
① Component Library (Left Sidebar)	Contains all 17 components categorized into Layout / Content / Interaction / Decoration
② Canvas (Central Area)	Real-time visual preview; supports dragging components in/out and reordering modules
③ Properties Panel (Right Sidebar)	Edit configurable parameters for the selected component
④ Bottom Toolbar	Undo / Redo / Viewport Switcher (Desktop / Tablet / Mobile)

3. Top Settings Bar

Located at the very top of the editor, this bar includes three functional sections:

3.1 Title Input

• Enter your landing page title in the input field.
• The title appears in the management list and at the top of the page users see after scanning the QR code.
• The title is a mandatory field; the Save button will be disabled if left blank.

3.2 Status Selection (Published / Draft / Pending Review)

Status	Applicable Scenarios
Published	Content finalized and visible to external visitors
Draft	Work-in-progress, hidden from public view
Pending Review	Submitted and awaiting administrator approval

3.3 Operation Buttons

• Save: Submit all current editing changes.
• Back: Discard unsaved edits and return to the previous page (Edit Mode / Create Mode).

4. Left-Side Component Library

4.1 Four Core Component Categories

Category	Purpose
Layout	Build the overall page structure (containers, spacing, columns, tabs)
Content	Display core information (headings, text, images, videos, tables, lists, etc.)
Interaction	Add clickable and guiding interactive elements (buttons, CTAs, icon-text blocks)
Decoration	Enhance visual aesthetics (hero banners, horizontal dividers)

4.2 Full List of All 17 Components

Category	Component ID	Display Name	Functionality
Layout	Columns	Two-Column Layout	Split canvas into left-right columns with customizable ratios, gaps and alignment
Layout	Section	Section Container	Padding-enabled background container for grouping multiple child components
Layout	Spacer	Vertical Spacer	Controls blank vertical white space only
Layout	Tab	Tab Switcher	Split content into 2–6 interchangeable tab panels
Content	Heading	Heading Block	H1–H4 headings with adjustable font size, color and alignment
Content	TextBlock	Plain Text Block	Paragraph text supporting basic HTML tags
Content	RichText	Rich Text Block	Tiptap rich text editor (bold, lists, hyperlinks and more)
Content	ImageBlock	Image Block	Upload/select images; configurable hyperlinks and rounded corners
Content	Video	Video Embed	Embed YouTube / Vimeo video players
Content	Card	Content Card	Illustrated clickable card modules
Content	Table	Data Table	Rapid table generation via CSV text input
Content	ListBlock	List Block	Ordered/unordered lists with customizable bullet styles
Interaction	ButtonBlock	Standalone Button	Single customizable colored button component
Interaction	CTA	Call-to-Action Banner	Full-width accent-colored action zone (heading + embedded button)
Interaction	IconText	Icon-Text Combo	Combined module of icon + heading + descriptive text
Decoration	Hero	Hero Banner	Large top header section with optional background image
Decoration	Divider	Horizontal Divider	Simple horizontal separating line

5. Central Canvas Operations

5.1 Adding Components

Method 1: Drag-and-Drop Insertion

1. Select your target component in the left component library.
2. Hold the left mouse button and drag the component to your desired position on the canvas.
3. Release the mouse to place the component.

Method 2: Click Insert (Inside Containers)

For slot-enabled containers including Sections, Two-Column Layouts and Tab Switchers:

1. Single-click the target container on the canvas to select it.
2. Locate the + Add Component to Container button at the top/middle of the right properties panel.
3. Click the button and pick a component from the dropdown menu.
4. The selected component will be appended to the bottom of the container’s slot.

💡 Special Rule for Tab Components: After selecting a Tab switcher, the properties panel provides a separate Add Component to Tab N button for each individual tab panel.

5.2 Selecting Components

• Click any component on the canvas to select it (a blue dashed border will appear around the module).
• Upon selection, the right properties panel automatically loads configuration fields for that component.

5.3 Reordering Components

1. Click and hold the drag handle (⋮⋮ icon) at the top-left corner of the target component.
2. Drag vertically to your target position.
3. A blue horizontal indicator line marks the exact insertion point.

5.4 Deleting Components

1. Select the component you wish to remove.
2. Press the Delete key, or click the delete icon in the top-right corner of the component.
3. Click Confirm in the pop-up confirmation prompt.

5.5 Duplicating Components

1. Select the target component.
2. Press Ctrl + D (macOS: Cmd + D) to duplicate.
3. The copied component will automatically appear directly below the original module.

5.6 Undo / Redo Shortcuts

Operation	Windows Shortcut	macOS Shortcut
Undo	Ctrl + Z	Cmd + Z
Redo	Ctrl + Shift + Z	Cmd + Shift + Z

You may also click the Undo / Redo buttons located in the bottom toolbar.

5.7 Viewport Switching (Multi-Device Preview)

The bottom toolbar offers three preset viewport widths for device simulation:

Viewport Mode	Width	Applicable Scenarios
Desktop	100% width	Desktop computers, landscape tablets
Tablet	768px	Portrait tablet screens
Mobile	375px	Smartphone displays

After switching viewports, the canvas width adjusts automatically for a true WYSIWYG preview of how the landing page renders on each device after QR scan.

6. Right-Side Properties Panel

After selecting any component, the right panel displays all editable configuration fields for that module.

6.1 Quick Reference for Field Input Types

Field Type	Usage	Example
text	Single-line text input	Heading text, target URLs
textarea	Multi-line text input	Body content, CSV data
number	Numeric value input	Font size, padding pixel values
select	Single-select dropdown	Alignment, heading level, preset colors
radio	Radio button group	List type, header styling toggle
array	Repeating list items	Editable list entries
slot	Container content slot	Content zone inside section containers
custom	Custom control widget	Image uploader, media library picker
richtext	Embedded rich text editor	Content input for RichText blocks

6.2 Detailed Configuration for All Standard Components

Columns (Two-Column Layout)

Field	Description
Column Ratio	Presets: 1:1 / 2:1 / 1:2 / 3:1
Column Gap (px)	Horizontal spacing between left and right columns (0–96)
Vertical Alignment	Top align / Vertically center / Bottom align / Stretch full height
Left Column / Right Column	Drag child components or use the Add Component button to populate each column slot

Section (Section Container)

Field	Description
Background Color	HEX color code (e.g., #f5f5f5)
Padding	Inner blank margin (0–96 px)
Max Width	Full width / 1200px / 800px
Layout Direction	Vertical stack (default) / Horizontal row
Horizontal Wrap	Auto wrap to new line / No wrap
Child Alignment	Left align / Center align / Right align
Child Spacing (px)	Vertical gap between nested components
Content Slot	Drop child components into this zone

Spacer (Vertical Spacer)

Field	Description
Height (px)	Adjustable range: 8–200 px

Tab (Tab Switcher)

Field	Description
Tab Count	Total tab panels (2–6 tabs)
Tab N Title	Display heading for the Nth tab panel
Tab N Content Slot	Insert nested components inside each individual tab panel

Heading (Heading Block)

Field	Description
Heading Text	Main title content
Heading Level	H1 / H2 / H3 / H4
Alignment	Left / Center / Right
Text Color	HEX color value

TextBlock (Plain Text Block)

Field	Description
Content (HTML Supported)	Accepts basic tags: <p>, <strong>, <a>, etc.
Font Size	Numeric pixel value
Text Color	HEX color code
Alignment	Left / Center / Right

RichText (Rich Text Block)

Field	Description
Content Editor	Built-in Tiptap toolbar supporting: bold, italic, underline, strikethrough, 6 heading levels, ordered/unordered lists, hyperlinks, blockquotes, code blocks, alignment controls, horizontal dividers

ImageBlock (Image Block)

Field	Description
Image URL	Three upload methods listed below
Alt Text	Descriptive alt label for accessibility and SEO (recommended)
Link URL (Optional)	Target page to open when users click the image
Width	Fixed pixel value or percentage (e.g., 100%, 400px)
Border Radius	Pixel value for rounded corners (e.g., 8 = 8px rounded edges)

Three Image Upload Methods (Identical to Rich Text Editor)

Upload Mode	Operation Steps
Local Upload	Click upload zone to select local files (≤5MB; supported formats: JPG / PNG / GIF / WebP)
URL Input	Paste a public hosted image URL into the text field
Media Library Selection	Click “Select from Media Library” to pick pre-uploaded assets

Video (Video Embed Block)

Field	Description
Video URL	YouTube or Vimeo video link
Aspect Ratio	Presets: 16:9 / 4:3 / 1:1
Max Width (px)	Adjustable range: 320–1920

Card (Content Card)

Field	Description
Display Mode	Card with shadow / Flat minimalist style
Title	Card header text
Description	Subtext body content
Image URL (Optional)	Cover thumbnail image
Link URL (Optional)	Destination page for full-card click interaction
Styling Options	Shadow toggle / Border toggle
Padding	Inner margin size (0–64 px)

Table (Data Table)

Field	Description
Rows / Columns	Adjustable range: 1–20
Header Row Style	Enable / Disable styled header row
Border Width & Color	Customize table outline appearance
Cell Padding	Inner margin inside each table cell (0–32 px)
Text Alignment	Left / Center / Right for cell content
Table Content (CSV Input)	Paste CSV plain text (comma-separated values; newlines separate rows)

💡 CSV Example Template:

Ingredient,Content,Unit
Protein,12.5,g
Fat,8.2,g
Carbohydrate,65.0,g

ListBlock (List Block)

Field	Description
List Type	Unordered bullet list (●) / Ordered numbered list (1.)
Marker Style	Dynamic options based on selected list type
List Items	Add, delete and edit individual list entries
Font Size / Color / Item Spacing	Visual formatting adjustments
Alignment	Left / Center / Right

💡 Dynamic Marker Style Options:

• Unordered List: Solid dot / Hollow circle / Square / No marker
• Ordered List: Arabic numerals / Lowercase letters / Uppercase letters / Lowercase Roman numerals / Uppercase Roman numerals / No marker

ButtonBlock (Standalone Button)

Field	Description
Button Label	Text displayed on the button
Link URL	Destination page for button clicks
Style Theme	Primary accent / Secondary outline
Primary Color (HEX)	Custom fill color for primary buttons
Alignment	Left / Center / Right positioning of the button block

CTA (Call-to-Action Banner)

Field	Description
Main Heading	Primary banner title
Subheading	Secondary descriptive text
Button Label / Button Link	Embedded interactive button configuration
Background Color	Solid fill color for the full CTA block
Text Alignment	Left / Center

IconText (Icon-Text Combo)

Field	Description
Icon Selection	14 universal icons: Checkmark, Star, Arrow, Info, Shield, Package, Heart, Cart, Lightning, Gift, Lightbulb, Warning, Location, Clock
Block Alignment	Left / Center / Right
Heading	Primary title text next to the icon
Description	Supplementary explanatory text
Icon Color	Custom fill color for the icon graphic

Hero (Hero Banner)

Field	Description
Heading / Subheading	Banner title and secondary text
Background Image URL	Full-width background graphic link
Background Color	Solid fallback background color
Text Alignment	Left / Center

Divider (Horizontal Divider)

Field	Description
Line Color	HEX color code for the separating line

7. Container & Slot Logic

All container-type components in the editor (Section / Columns / Tab) use Slots as dedicated zones to hold nested child components.

7.1 Section (Section Container)

Best used as a full-page section wrapper with customizable background and padding. Common Use Cases:

• Top hero header zone
• Product feature introduction blocks
• Bottom call-to-action zone

7.2 Columns (Two-Column Layout)

Designed for side-by-side parallel content display. Common Use Cases:

• Left image + Right text
• Left text + Right image
• Side-by-side product comparison

7.3 Tab (Tab Switcher)

Ideal for categorizing large volumes of content without long vertical scrolling. Common Use Cases:

• Product Specifications / Nutrition Facts / Customer Reviews
• Usage Instructions / Warnings / After-Sales Service
• Multi-version specification documentation

⚠️ Nesting Restriction: Tabs cannot be nested inside other Tabs. Deep nesting will cause page rendering lag and performance issues.