Guide to 'Components' in the Left Panel of the Editing Interface
1. Recommended Design
Use pre-designed layouts to quickly build your site.
Key Features
β’
Fast creation β Save time by adding pre-designed sections.
β’
Consistent style β Maintain a uniform design even with multiple sections.
β’
Easy editing β Simply change text and images to customize your page.
β’
Responsive design β Optimized layouts for mobile, tablet, and PC.
Category Examples
β’
Website β Provides a basic website structure.
β’
Gallery β Displays images or portfolios.
β’
Review β Showcases feedback, ratings, or testimonials.
β’
Introduction β Briefly introduces a person, object, or brand.
2. Background
Elements for setting the website background.
Key Features
β’
Allows components or layouts to be placed on top of the background.
β’
Used for setting images or videos as the background.
β’
Supports both file uploads and embedded content for backgrounds.
Tip: Backgrounds are positioned at the highest level and can be difficult to remove or change later, so itβs recommended to set them first.
3. Layout
The structural element that organizes content placement.
Key Features
β’
Improves content readability β Helps users quickly grasp information.
β’
Enhances usability and clarity β Ensures a well-organized design.
β’
Supports responsive design β Optimized for various screen sizes.
β’
Effectively manages page flow β Highlights key content and maintains visual balance.
Components
β’
Flexbox β A flexible layout system for organizing multiple components.
β’
Grid β Structures elements into rows and columns.
β’
Divider β Visually separates content sections.
β’
Spacing β Adjusts gaps between elements.
Usage Examples
β’
Flexbox β Arrange content horizontally or vertically.
β’
Grid β Ideal for card-based content or image galleries with multiple elements.
β’
Divider β Creates visual separation between content sections.
β’
Spacing β Adjusts gaps between elements to enhance readability
4. Elements
Individual functional components that make up a website.
Key Features
β’
The fundamental building blocks of website content.
β’
Enables user interaction (e.g., button clicks, video playback).
β’
Uses text, images, and videos to convey information.
β’
Enhances readability and visual appeal.
Components
β’
Text β Displays titles, paragraphs, or descriptions.
β’
Button β Clickable elements for actions.
β’
Image β Inserts photos or icons.
β’
Video β Embeds video content.
β’
Embed β Inserts external content.