Tutorial: Build Your First Page
- 1. Go to Dashboard and create a page using the Landing template.
- 2. Open the editor and drag Hero, Features, and CTA blocks onto the canvas.
- 3. Edit text in the properties panel and connect action buttons to your target URL.
- 4. Open Styles tab to tune spacing, colors, and typography for visual consistency.
- 5. Save, check responsive previews, then publish or export.
Tutorial: Adding Custom CSS
WebBuilder supports page-level custom CSS in the Global CSS editor. Use this when visual controls are not enough or when you want reusable style patterns.
- 1. Open the editor and go to the right panel tab for global CSS.
- 2. Add a class to your component in the properties panel, for example: hero-accent.
- 3. Write CSS targeting the class and save the page.
- 4. Validate in desktop and mobile preview widths.
- 5. If needed, restore from version history to compare iterations.
Example: Attach custom class and style
CSS/* Global CSS editor */
.hero-accent {
background: linear-gradient(120deg, #0f172a 0%, #1d4ed8 100%);
color: #f8fafc;
border-radius: 1rem;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
}
.hero-accent h1 {
letter-spacing: -0.02em;
}Custom CSS Recipes
Recipe 1: Scroll reveal utility
CSS.reveal {
opacity: 0;
transform: translateY(18px);
animation: reveal-in 480ms ease forwards;
}
@keyframes reveal-in {
to {
opacity: 1;
transform: translateY(0);
}
}Recipe 2: Soft glass card
CSS.glass-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}Recipe 3: Responsive type scale
CSS.headline-fluid {
font-size: clamp(2rem, 4vw + 1rem, 4rem);
line-height: 1.06;
letter-spacing: -0.03em;
}Recipe 4: Interactive button hover
CSS.cta-pop {
transition: transform 180ms ease, box-shadow 180ms ease;
}
.cta-pop:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
}