A component is a building block of a site, categorized into Background, Layout, and Elements.
1. Background
The background component is fixed across the entire editing area. Other components such as layouts and elements can be layered on top of it.
1-1. Image Background
Settings
•
Importing Images: There are two ways to upload an image:
◦
File Upload
▪
Upload an image file stored on your PC.
▪
Maximum 30MB per upload.
◦
Embed
▪
Enter a URL of an already hosted image.
•
Adjusting Transparency
◦
Use the slider to adjust the transparency of the uploaded image.
1-2. Video Background
Settings
•
Importing Videos: Two ways to upload a video:
◦
File Upload
▪
Upload an MP4 file as a background video.
◦
Embed
▪
Use an external video URL from YouTube, Vimeo, etc.
•
Loop Playback Settings
◦
On → The background video will automatically loop after it finishes.
◦
Off → The background video will play only once.
2. Layout
Layout components help organize content placement and maintain design balance.
2-1. Flexbox
Key Concept•
Arranges elements horizontally or vertically.
•
Automatically adjusts to different screen sizes.
Settings
•
Size
◦
Width & Height
▪
Input as %, px, etc.
▪
auto → Adjusts size based on content dimensions.
•
Color
◦
Background Color
▪
Input color code.
▪
Choose from the color palette.
▪
Use the color picker.
◦
Transparency
▪
Adjust transparency of the background color.
•
Editing Items in a Flexbox
◦
Alignment
▪
Arrange items in a row or column.
◦
Vertical Alignment
▪
Align items to top, center, or bottom.
◦
Horizontal Alignment
▪
Align items to left, center, or right.
◦
Spacing
▪
Adjust the spacing between items.
2-2. Grid
Key Concept•
A structured grid layout to systematically arrange multiple elements.
Settings
•
Number of Grids
◦
Set the number of grid columns/rows.
◦
Minimum of 1 grid is required.
•
Size (Width & Height)
◦
Input as %, px, etc.
◦
auto → Adjusts size based on content dimensions.
•
Background Color & Transparency
◦
Input color code, choose from the palette, or use the picker.
◦
Adjust transparency.
•
Grid Spacing
◦
Defines spacing between multiple grids.
2-3. Divider
Key Concept•
A simple component that separates content sections, improving readability.
Settings
•
Color
◦
Input color code, choose from the palette, or use the picker.
•
Thickness
◦
Set thickness to small, medium, or large.
2-4. Spacing
Key Concept•
Adjusts gaps between content to maintain visual balance.
•
Helps improve readability when elements are too close together.
Settings
•
Size (Width & Height)
◦
Input as %, px, etc.
◦
auto → Adjusts size based on content dimensions.
•
Color & Transparency
◦
Input color code, choose from the palette, or use the picker.
◦
Adjust transparency.
3. Elements
Elements are basic UI components that users can manually add.
3-1. Text
Key Concept•
Displays titles, body text, and descriptions.
Settings
•
Content
◦
Enter text inside the text area.
◦
Supports line breaks.
*Note: A single text component can only have one style. To apply different styles, use multiple text components.
•
Font Style
◦
Font Family → Choose a font.
◦
Font Size → Set the text size.
◦
Color → Set text color.
◦
Bold → Make text bold.
◦
Alignment → Left, center, or right.
◦
Text Spacing
▪
Letter Spacing → Adjust spacing between letters.
▪
Line Spacing → Adjust spacing between lines.
3-2. Button
Key Concept•
A clickable element that encourages user actions.
Settings
•
Content
◦
Enter button text.
◦
Keep text simple and intuitive.
•
Font & Size
◦
Set font, text size, and color.
•
Button Style
◦
Set button background color, width, and height.
◦
Adjust corner radius for rounded edges.
◦
Customize border thickness and color.
•
Link Settings
◦
URL → Enter a webpage URL for redirection.
◦
Open Mode → Choose to open in same tab or new tab.
3-3. Image
Key Concept•
Inserts images into the website.
Settings
•
Import Image
◦
File Upload → Upload an image (max 30MB per file).
◦
Embed → Enter an image URL.
•
Size (Width & Height)
◦
Input as %, px, etc.
◦
auto → Adjusts size based on content dimensions.
•
Fit Mode
◦
Determines how the image fits inside its container.
•
Border Radius
◦
Adjusts the roundness of image corners.
3-4. Video
Key Concept•
Embeds video content directly into the site.
Settings
•
Import Video
◦
File Upload → Upload an MP4 file as background video.
◦
Embed → Use an external YouTube or Vimeo link.
•
Size (Width & Height)
◦
Input as %, px, etc.
◦
auto → Adjusts size based on content dimensions.
•
Playback Settings
◦
Autoplay → Video starts playing when the page loads.
◦
Loop → Enable infinite looping of the video.
3-5. Embed
Key Concept•
Inserts external content into the site.
Settings
•
URL
◦
Enter a link to external content (YouTube, Google Maps, social media, etc.).
•
Size (Width & Height)
◦
Input as %, px, etc.
◦
auto → Adjusts size based on content dimensions.