Branding & Design

The Branding editor lets you control your website's visual identity - colors, fonts, logo, hero image, social links, and header style. Every change is applied across your entire website automatically.

Accessing the Branding Editor

Navigate to Website → Branding in your dashboard sidebar.

Colors

Set three colors that define your website's palette:

Color	Used For
Primary	Buttons, links, active states, and key accents
Secondary	Secondary elements, backgrounds, and borders
Accent	Highlight elements and call-to-action emphasis

Use the color picker to choose exact hex values. Your chosen colors are applied as CSS custom properties (--website-primary, --website-secondary, --website-accent) across every page.

Fonts

Choose separate typefaces for headings and body text from a curated list of Google Fonts:

• Heading font - Applied to all headings (h1–h6) across your site
• Body font - Applied to paragraph text, lists, and general content

Popular combinations include:

• Playfair Display + Inter (elegant and modern)
• DM Sans + DM Sans (clean and consistent)
• Georgia + Inter (classic and readable)

Fonts are loaded dynamically from Google Fonts when visitors access your site.

Logo and Images

Element	Description	Limit
Logo	Displayed in the header and footer	10MB, image files only
Favicon	Browser tab icon	10MB, image files only
Hero image	Background image for the hero section on your home page	10MB, image files only

Upload images directly from the Branding editor. Files are stored securely in your website's asset storage.

Hero Content

Customize the text that appears on your hero section:

• Hero headline - The main heading text (e.g., "Find Your Dream Home")
• Hero subline - Supporting text below the headline (e.g., "Auckland's most trusted real estate agency")

Header Style

Choose between two header styles:

Style	Behavior
Default	Solid header background with your branding colors
Transparent	Header overlays the hero image with a transparent background, transitioning to solid on scroll

The transparent style works best with a high-quality hero image.

Header Call-to-Action Buttons

Add custom buttons to your website header:

• Text - Button label (e.g., "Get in Touch", "View Listings")
• Link - URL the button navigates to
• Variant - primary (filled) or outline (bordered)

Social Links

Add links to your social media profiles. When configured, social icons appear in your website footer and optionally as floating icons on the side of the page.

Supported platforms:

• Facebook
• Instagram
• LinkedIn
• Twitter / X
• YouTube
• Pinterest

Toggle Floating Social Icons to show or hide the floating social icon bar on your website.

Footer Text

Add custom text to your website footer, such as a tagline, license number, or disclaimer.

Tip

Keep your branding consistent across your ListHouze profile, website, and social media channels. Use the same logo, colors, and fonts everywhere to build brand recognition.