Design Elements, Text & Animations
Design elements are the individual components you use to build content within your website blocks. From text and images to buttons and animations, mastering these elements gives you complete control over your site appearance and user experience.
Quick Access: Click any element while in Edit mode to see its customization options in the right panel.
Text Elements
Text is the foundation of web content. The Website Builder provides comprehensive text formatting tools:
Headings (H1-H6)
| Level | Usage | Best Practice |
|---|---|---|
| H1 | Main page title | Use only once per page for SEO |
| H2 | Section headings | Primary content divisions |
| H3 | Subsection headings | Topics within sections |
| H4-H6 | Minor headings | Detailed hierarchies |
Text Formatting Options
- Font Family: Choose from theme fonts or Google Fonts library
- Font Size: Predefined sizes (Small, Normal, Large, X-Large) or custom pixel values
- Font Weight: Light, Regular, Medium, Semi-Bold, Bold
- Font Style: Normal, Italic, Underline, Strikethrough
- Text Color: Theme colors, custom colors, or gradients
- Text Alignment: Left, Center, Right, Justify
- Line Height: Control spacing between lines
- Letter Spacing: Adjust character spacing
Text Highlights & Effects
- Background Highlight: Add colored background to text
- Text Shadow: Add depth with shadow effects
- Gradient Text: Apply color gradients to text
- Badges: Small labels for emphasis
Images
Images make your content visually engaging. Here is everything you can do with them:
Adding Images
- Upload: From your device (JPG, PNG, GIF, WebP, SVG)
- Unsplash: Search millions of free, high-quality photos
- URL: Link to external images
- Icons: Choose from the icon library
Image Customization
| Option | Description |
|---|---|
| Size | Width and height controls, maintain aspect ratio option |
| Shape | Square, Rounded, Circle, Custom border radius |
| Border | Color, width, style (solid, dashed, dotted) |
| Shadow | Drop shadow with blur, spread, and offset controls |
| Filters | Brightness, Contrast, Saturation, Grayscale, Sepia, Blur |
| Overlay | Color overlay with opacity |
| Alt Text | Description for accessibility and SEO |
| Link | Make image clickable to URL or page |
Image Optimization
Images are automatically optimized when uploaded:
- Resized based on display location
- Compressed for faster loading
- Converted to modern formats (WebP) when supported
- Lazy-loaded for performance
Videos
Embed videos to engage visitors with dynamic content:
Video Sources
- YouTube: Paste video URL for automatic embed
- Vimeo: Professional video hosting
- Upload: Host videos directly (MP4, WebM)
- Background Video: Looping videos as section backgrounds
Video Options
- Autoplay: Start playing automatically (muted for browsers)
- Loop: Repeat video continuously
- Controls: Show/hide player controls
- Thumbnail: Custom preview image
- Responsive: Adjust to container width
Buttons
Call-to-action buttons guide visitors to take action:
Button Styles
| Style | Appearance | Best For |
|---|---|---|
| Primary | Solid background, main theme color | Main calls to action |
| Secondary | Lighter color or outline | Alternative actions |
| Outline | Border only, transparent background | Subtle actions |
| Link | Text only, no background | Navigation, less emphasis |
Button Customization
- Size: Small, Medium, Large, Block (full width)
- Shape: Square, Rounded, Pill
- Icon: Add icon before or after text
- Link: URL, page, anchor, email, phone
- Hover Effects: Color change, scale, shadow
Icons
Icons communicate meaning quickly and add visual interest:
Icon Library
- Font Awesome icons (thousands available)
- Custom SVG icons
- Emoji support
Icon Options
- Size: Scale from 12px to 120px+
- Color: Theme colors or custom
- Background: Solid, gradient, or transparent
- Shape: None, Circle, Square, Rounded
- Rotation: Flip or rotate icons
Links
Connect your content with clickable links:
Link Types
- Internal Page: Link to other pages on your site
- External URL: Link to other websites
- Anchor: Jump to section on same page
- Email: Opens email client (mailto:)
- Phone: Click-to-call on mobile (tel:)
- File: Download documents
Link Options
- Open in new tab: Keep visitors on your site
- No-follow: For external/sponsored links
- Style: Color, underline, hover effects
Lists
Organize information clearly with lists:
List Types
- Bullet Lists: Unordered items with various bullet styles
- Numbered Lists: Ordered sequences
- Icon Lists: Custom icons instead of bullets
- Checklist: Tasks with checkboxes
Animations
Add movement to make your site dynamic and engaging:
Animation Categories
| Type | Trigger | Examples |
|---|---|---|
| On Scroll | When element enters viewport while scrolling | Fade in, Slide up, Zoom in, Bounce |
| On Appearance | When page loads or element first appears | Fade, Slide, Scale, Rotate |
| On Hover | When mouse hovers over element (images) | Zoom, Rotate, Brightness, Overlay |
Animation Options
- Effect: Choose from 20+ animation effects
- Duration: How long the animation takes
- Delay: Wait before animation starts
- Direction: From which direction element enters
- Repeat: One time or every time visible
Popular Animation Effects
| Effect | Description |
|---|---|
| Fade In | Gradually appears from transparent |
| Slide Up | Enters from below |
| Slide Left/Right | Enters from sides |
| Zoom In | Grows from smaller size |
| Bounce | Bounces into position |
| Flip | 3D flip rotation |
| Rotate | Spins into view |
Best Practices
Design Tips
- Use consistent fonts throughout - limit to 2-3 font families
- Ensure sufficient color contrast for readability (WCAG guidelines)
- Add alt text to all images for accessibility
- Use animations sparingly - too many can be distracting
- Make buttons large enough to tap on mobile (min 44x44 pixels)
Performance Considerations
- Compress images before uploading large files
- Use SVG for icons instead of images when possible
- Limit the number of custom fonts loaded
- Avoid autoplaying videos on mobile
- Test animation performance on slower devices