Customising Styles and Themes

Title: Customizing Styles and Themes
Category: Website Editor

Where to Find This

Services → Website Editor tab

Every element on your website can be styled to match your brand. This guide covers both global theme settings and individual element styling.

Global Theme Settings

Your theme defines colors, fonts, and styles that apply across your entire website. Access it from the Theme tab in the right panel of the Website Editor.

Colors

Set your brand colors once, and they'll be available throughout your site:

Color Setting	What It Affects
Primary	Buttons, links, accents
Primary Light/Dark	Hover states, variations
Secondary	Secondary buttons, highlights
Background	Page background color
Background Subtle	Section backgrounds, cards
Title Color	Heading text
Font Primary	Body text
Font Muted	Secondary text, captions
Border Light	Subtle borders
Border Dark	Prominent borders

Typography

Configure your website's fonts under the Type tab:

• Font Family – Choose from available web fonts
• Base Size – The standard text size
• Scale – How heading sizes relate to body text

Advanced Settings

Fine-tune your site's visual style under the More tab:

• Gradients – Create gradient backgrounds for navbars or page sections
• Border Radius – Adjust how rounded corners appear (sharp, slightly rounded, or pill-shaped)
• Shadows – Configure drop shadows for depth and emphasis
• Spacing – Adjust default padding and margins

Styling Individual Elements

When you select any element, the Properties panel shows styling options specific to that component.

Common Style Controls

Most elements share these styling options:

Spacing (Padding & Margin)

• Padding – Space inside the element (between content and border)
• Margin – Space outside the element (between the element and its neighbors)

You can set spacing for all sides at once, or individually (top, right, bottom, left).

Dimensions

• Width – Fixed width, percentage, or auto
• Height – Fixed height, percentage, or auto
• Min/Max – Minimum and maximum dimensions

Background

• Color – Solid background color
• Image – Background image with positioning options
• Gradient – Linear or radial gradients

Borders

• Width – Border thickness in pixels
• Style – Solid, dashed, dotted, or none
• Color – Border color
• Radius – Corner rounding (all corners or individual)

Shadow

Add depth with box shadows:

• Offset – Horizontal and vertical position
• Blur – How soft the shadow appears
• Spread – How far the shadow extends
• Color – Shadow color and opacity

Typography Controls

For text elements:

• Font Family – Override the theme font for this element
• Font Size – Specific size in pixels or relative units
• Font Weight – Light, normal, medium, semibold, bold
• Line Height – Space between lines
• Letter Spacing – Space between characters
• Text Color – Override the theme color
• Alignment – Left, center, right, justified

Animations

Add entrance animations to make your pages more engaging.

Available Animations

Animation	Description
fadeIn	Simple fade in
fadeInUp	Fade in while sliding up
fadeInDown	Fade in while sliding down
fadeInLeft	Fade in while sliding from left
fadeInRight	Fade in while sliding from right
zoomIn	Fade in while growing
slideInUp	Slide up into view
slideInDown	Slide down into view

Animation Settings

• Animation Type – Choose the animation style
• Delay – Wait before starting (useful for staggering multiple elements)
• Threshold – How much of the element must be visible to trigger

Responsive Design

Your styles may need to adapt to different screen sizes.

Preview Different Devices

Use the device icons in the header to preview:

• Desktop – Full-width view
• Tablet – Medium screen size
• Mobile – Narrow phone view

Responsive Adjustments

Some settings allow different values per screen size:

• Column widths can change (e.g., 2 columns on desktop, 1 on mobile)
• Font sizes can scale down on smaller screens
• Padding and margins can reduce on mobile

Style Presets

Save time with consistent styling:

Using Theme Colors

When selecting colors for any element, you'll see:

• Theme colors – Your defined palette
• Custom – Any color you choose

Using theme colors ensures consistency and makes future updates easier. If you change your primary color in the theme, all elements using it will update automatically.

Component Variants

Many components come with pre-built style options:

Buttons:

• Primary (solid, brand color)
• Secondary (outline style)
• Ghost (minimal, text only)

Alerts:

• Info, Success, Warning, Error variants

Cards:

• Standard, Elevated, Outlined

Best Practices

1. Start with your theme – Define your colors and fonts globally before styling individual elements

2. Use theme colors – Select from your palette rather than custom colors for consistency

3. Maintain hierarchy – Use size, weight, and color to create clear visual importance

4. White space matters – Don't crowd elements; use padding and margin generously

5. Test on mobile – Many visitors use phones; ensure your styles work on small screens

6. Keep it simple – Limit yourself to 2-3 fonts and 3-5 colors for a professional look

7. Use shadows subtly – Light shadows add depth; heavy shadows can look dated

8. Animate purposefully – Use animations to draw attention to important elements, not everything