Appearance Customization
Comprehensively customize your website appearance: theme color, font, layout, hero section, avatar, animations, color palettes, section images, color tones, and booking page design.
Overview
Appearance Customization is the step where you design the visual identity of your website. As the second step in the My Website panel, this page includes over 75 appearance settings: theme color, font, layout, hero section, navigation bar, section images, color tones, and booking page.
Layout Preset
Determines the overall structure of your website. Two options:
Classic
Photo left, text right. Recommended layout.
Centered
Photo and text center-aligned.
Theme Color
Primary accent color used for buttons, links, hero, navbar, and UI elements. 11 options:
Site Style (Font)
Affects heading and body fonts plus button corner radius. 3 options:
Modern — Default
Inter font. Clean lines, sharp corners.
Classic
Georgia (serif) font. Elegant and formal.
Friendly
Nunito font. Soft and rounded.
Color Tone
Global background color scheme applied to service, blog, certificate, and expertise cards. Can be overridden per section. 7 options:
Section Management
Control which sections are visible on your website with toggle switches. Each section has an icon, description, and a link to edit its content.
About Me
Cannot be disabled (required section).
Expertise Areas
Certificates & Education
Services
Personal Note
Off by default.
Blog Posts
Contact Information
Hero Text Fields
The hero section is the topmost area of your website and the first thing visitors see.
Welcome Message
Short greeting text displayed in the hero area. Maximum 200 characters.
Subtitle
Text shown below the welcome message. If left empty, your expertise areas are shown automatically.
Typing Effect
Animation effect that types the welcome message letter by letter. Toggle switch.
Hero Background
Determines the hero section background visual.
Mode Selection
First, choose between gradient or solid color mode.
Gradient — Smooth transition from selected color to white
Solid — Single color background
Base Colors
6 base color options:
Matte Palette
17 pastel tones:
Vivid Palette
17 saturated tones:
Image Backgrounds
32 themed background images (wellness, therapy, modern and nature). When an image is selected, an opacity slider (10-100%) appears.
Hero Animation
Adds subtle animated visual elements to the hero background. 6 options:
None
Animation off.
Floating Circles
Animated floating circles
Gradient Blobs
Morphing gradient blob shapes
Soft Pulse
Gentle pulsing circles
Gentle Shimmer
Shimmering light effect
Soft Waves
Wave animation patterns
Avatar Settings
Configure the photo/image that appears in the hero section.
Avatar Type
Profile Photo — Your actual photo
Illustration — 21 decorative preset images
No Avatar — Hide completely.
Photo Frame
When avatar is visible, choose the frame style:
Framed — White border ring with shadow
Frameless — Clean circle
Avatar Size
5 size options:
To upload your profile photo and edit personal info, see the Profile Editing guide.
Text Colors and Backdrop
You can separately adjust the color of texts in the hero area.
Name Color
Color of your therapist name. 6 preset colors + color picker + hex input:
Text Color
Color of welcome message and subtitle. Same options.
Text Backdrop
Adds a semi-transparent layer behind text to improve readability on image backgrounds.
Backdrop Colors
7 backdrop colors:
About Me Image
Add a decorative image to the About Me section.
20 dedicated About Me preset images (books, shelf, desk plant, lavender, notebook, etc.)
53 images from the booking collection can also be selected — 73 presets total.
Image Size
4 size options:
Backdrop Effect
Adds an effect behind the image. 4 options:
None — No effect (default).
Soft Glow — Adds a radial light effect.
Blob — Adds an organic shape.
Color — Adds a solid or gradient background.
Services Appearance
Determines the background color and illustration style of service cards.
4 color tone options:
Automatic — Uses site color tone.
Pastel — Each card uses a pastel tone of its own service color.
Vivid — Each card uses a vivid tone of its own service color.
Custom Color — All cards use the same background color.
Illustration Style
When Neutral or Warm tone is selected as the custom color, an additional option appears:
Colorful — Full-color illustrations
Silhouette — Monochrome silhouette drawings
To change service colors and details, see the Service Catalog guide.
Blog Appearance
Determines the background color of blog cards.
4 color tone options:
Automatic — Uses site color tone.
Pastel — Each card uses a pastel tone of its own post color.
Vivid — Each card uses a vivid tone of its own post color.
Custom Color — All cards use the same background color.
To create blog posts and configure post colors, see the Blog Management guide.
Certificates Appearance
Determines the background color of certificate cards.
4 options: Automatic, Pastel, Vivid, Custom Color.
Expertise Areas Appearance
Determines the background style of expertise chips (tags).
3 options:
Automatic — Uses site color tone.
Theme Color / Vivid — Uses the CTA button color as the chip background.
Custom Color — Pick your own color.
When Custom Color is selected, an additional style option appears:
Solid — Solid color background
Outlined — Transparent background, colored border
Booking Page Appearance
Customize the appearance of the online booking page left panel.
Booking Image
Decorative image shown in the left panel. 53 preset images available (armchairs, therapy rooms, plant-themed).
Background
Left panel background color. Gradient/Solid mode + base colors + matte/vivid palettes.
To configure booking page settings, see the Online Booking Page guide.
Personal Note Image
Add a decorative image to the Personal Note section. These settings are only visible when the section is enabled.
53 preset images (booking image collection).
Size
3 size options (unlike About Me, Small size is not available):
Position
Determines the image position:
Left — Image on left, text on right.
Right — Image on right, text on left.
Backdrop Effect
3 options (unlike About Me, Blob option is not available):
None — No effect.
Soft Glow — Adds a radial light effect.
Color — Adds a solid or gradient background (default).
Contact Section Appearance
Customize the background color of the illustration panel on the contact page.
2 modes: Automatic (uses site color tone) or Custom Color (Gradient/Solid + color palette).
Saving Changes
There is no auto-save on the Appearance Customization page. After making all your changes, you need to click the "Save" button at the bottom right of the page.
Save Button States
If no changes have been made, the button is disabled (not clickable).
When any field is changed, the button becomes active.
During the save operation, the button is disabled and a loading indicator is shown.
After a successful save, a green notification message is displayed.
Version Conflict
If you edited the appearance simultaneously in another browser tab or device, you may receive a version conflict error when saving. In this case, you need to refresh the page and redo your changes.
Tips and Best Practices
Use a Consistent Color Palette
Theme color, hero background, and section tones should complement each other.
Enable Text Backdrop Over Images
If you use an image for the hero background, enable the Text Backdrop feature to improve readability.
Match the Font to Your Tone
For a professional look, prefer Modern or Classic font; Friendly font gives a more casual tone.
Turn Off Sections That Are Not Ready
Empty sections do not leave a professional impression.
Check the Live Preview
Review the editor preview after each change; visit your published site to see the final result.
Match the Booking Background
Matching the booking page background with the hero background ensures visual consistency.
Make Use of the Personal Note
Ideal for highlighting your therapy approach; write a short, warm message.
Choose Avatar Size by Layout
In classic layout, Medium or Large is the most balanced; try larger sizes in centered layout.