Change color scheme of your branded site

This video goes over how to change colors within your site. 

How to change color scheme on branded site from Ylopo on Vimeo.

Accessing The Color Scheme Settings

To access and edit the color scheme of your branded site you need to be on edit mode then go to:
Design > Site Styles

Section Index

• CLIENT MAIN COLOR

• SITE HEADER

• SITE NAVIGATION

• BANNER SECTION

• MAIN CONTENT

• FOOTER

• ALTERNATE INSPIRATION

• BUTTONS

• SETTINGS FOR HOME PAGES USING TEMPLATE C

• SETTINGS FOR HOME PAGES USING TEMPLATE B

CLIENT MAIN COLOR 

Changes the colors of the following:

1. Read More buttons on the Alt Inspiration section

2. Call to action buttons on agent pages

SITE HEADER

Changes the color of the navbar, you can choose any color but remember to use contrasting colors to make the links visible. Below are examples of white and black site headers:

SITE NAVIGATION

Changes the colors of the texts/links on the navbar/site header, you can choose any color but remember to use contrasting colors to make its visible. You can set the color and style of the button, you can also set the color of the text when hovered and clicked. 

Below is an example of a site navigation with white colored texts/links, green colored text when hovered, and green button:

BANNER SECTION

Changes the overlay color on banners, you can choose any color and set its alpha(transparency).

NOTE: This affects all the banners on the site

MAIN CONTENT

You can change the colors of the section headings on the home page.
You can also change the colors of the hyperlinks on the site here.

Below is an example green colored link on the team page:

FOOTER

The background color and the text color of the of the footer can be set here, you can choose any color but remember to select contrasting colors to make the texts visible.

Below is an example of a footer with dark background with white text:

ALTERNATE INSPIRATION

The colors of the icons in the Alt Inspiration section can be set here independently, as well as the Background overlay.

Below is an example of icons set to magenta, yellow, cyan with a dark overlay:

BUTTONS
The colors of the button on the contact forms can be changed here.

Below is an example of a contact form with an orange button:

SETTINGS FOR HOME PAGES USING TEMPLATE C

HOMEPAGE-C

1. Homepage-C Top Text Bg Color - this is the text box under the banner, the example below uses light blue color:

2. Get In Touch With Us section - the settings below will only work if Contact Us Background Opacity is enabled

• Homepage-C Contact Foreground Color - the color of the title  on the above contact form
• Homepage-C Contact Background Color - this is the background overlay for the contact form
  The below example uses light orange Homepage-C Contact Foreground Color and violet Homepage-C Contact Background Color:

HOME LISTINGS SEE MORE BUTTON

3. This is the button under the home listings feed, this button uses the main client color.

SETTINGS FOR HOME PAGES USING TEMPLATE B

TESTIMONIALS GALLERY

The background color and the text color can be set here. The below example uses maroon background and white text.

COMMUNITY GRID

This is also called "Community Spotlight", in this section you can use 3 combinations of colors for the background and foreground/text, you can also adjust the transparency of the background to complement the community image.

The below example uses:

1. violet BG + white FG
2. white BG + violet FG
3. black BG + violet FG

 

 💡 TIPS when setting the color scheme for your branded site, remember these 3 things:

1. Contrast your colors.
2. Integrate your branding and be consistent.
3. Think about your visitors' experience when they're on your site.

LAST UPDATE: 10/25/21 Crizon Parcia Jr.