Skip to main contentBranding your pages consistently with the right colors and fonts strengthens your online presence.
Colors (Theme Styles)
Basic Setup
- In the page builder, click the “Theme Styles” button (palette icon) on the left toolbar
- Adjust settings like Primary, Secondary, Accent, Background, etc.
- Choose from theme styles or enter a hex code directly
- Save changes to apply
Color Categories
- Primary: Main brand color, used for buttons and highlights
- Secondary: Supporting color for variety and emphasis
- Accent: Call-to-action elements and important highlights
- Background: Page and section backgrounds
- Text: Default text colors for readability
Best Practices
- Contrast: Ensure sufficient contrast for accessibility
- Brand Consistency: Use your brand’s official color palette
- Psychology: Consider color psychology for your target audience
- Testing: Test colors across different devices and screens
Fonts
Font Setup
- Click the “Fonts” button on the toolbar (marked with “T”)
- Install new fonts if needed
- Set the font on specific elements through the style tab
Font Categories
- Headings: Bold, attention-grabbing fonts for titles
- Body Text: Readable fonts for content and descriptions
- Accent: Special fonts for quotes, highlights, or branding
Font Selection Tips
- Readability: Choose fonts that are easy to read at all sizes
- Web Safe: Use web-safe fonts or Google Fonts for reliability
- Brand Alignment: Select fonts that match your brand personality
- Loading Speed: Limit font variations to maintain page speed
Advanced Customization
CSS Customization
- Custom CSS for precise control over styling
- Media queries for responsive design adjustments
- Animation and transition effects
- Custom component styling
Brand Elements
- Logo Placement: Consistent logo positioning across pages
- Color Schemes: Seasonal or campaign-specific color variations
- Typography Hierarchy: Clear heading and text size relationships
- White Space: Proper spacing for clean, professional appearance
Responsive Design
Mobile Optimization
- Test appearance on different screen sizes
- Adjust font sizes for mobile readability
- Ensure buttons are touch-friendly
- Optimize images for mobile loading
Desktop Considerations
- Utilize larger screen real estate effectively
- Maintain visual hierarchy across screen sizes
- Test on different browsers and operating systems
- Consider high-resolution displays
Style Templates
Creating Style Templates
- Save commonly used color/font combinations
- Apply consistent styling across multiple pages
- Share templates across team members
- Version control for style updates
Template Categories
- Industry-Specific: Healthcare, finance, e-commerce styles
- Seasonal: Holiday and seasonal styling themes
- Campaign: Specific promotion or product launch styles
- A/B Testing: Variations for conversion optimization
Loading Considerations
- Minimize number of font files loaded
- Use font-display: swap for better perceived performance
- Compress and optimize custom images and graphics
- Cache static styling assets
- Page speed testing with custom styling applied
- Cross-browser compatibility testing
- Mobile performance validation
- User experience impact assessment
Troubleshooting
Common Issues
- Fonts not loading: Check font file paths and CDN connections
- Colors not updating: Clear cache and hard refresh browser
- Mobile display problems: Test responsive breakpoints
- Slow loading: Optimize and compress styling assets
Browser Compatibility
- Test across major browsers (Chrome, Firefox, Safari, Edge)
- Validate CSS for compliance with web standards
- Provide fallback fonts for unsupported custom fonts
- Test on different operating systems and devices
