Changing Colors (Design)

The colors (design if using bold skin) section in the customize part of the website allows you to change the colors of multiple items around your website so that you can match your company's branding. Because we now have two skin options for the Landleads theme, we've highlight in the article which features are applicable to each skin. 

Go to Appearance > Customize on your WordPress Dashboard 

Select Colors (or Design if using the bold skin)

You'll be presented with several options

Classic skin:

Bold Skin:

To change any of the colors, simply click on them and type in the hexadecimal color code or use your mouse to select the color you want. 

Background Color (Both Skins)

This is the background for the site. We recommend keeping this selected on white.

Header Design 

Header Layout (Bold Skin)

Top Bar (Bold Skin)

This changes the color scheme for all the items in the top bar if you've selected to have that header option. 

Background - This is the background of the top bar we recommend keeping the color neutral

CTA Text - The color of the text on the Call to Action (Call us Today)

CTA Link - The color of the linked text on the Call to Action (the number/email you display)

CTA Link Hover -  The color the Call to Action turns to when hovered over

Default Header (Both Skins)

This changes the color scheme of the menu header for Default Menu Header. Remember, you'll either be using the Default Header or Transparent Header for your menu bar on the Home Page of your website. On the Get Cash Offer Page, it'll always be the default header displayed. To change your menu header on your homepage, check this section of the documentation

Background - This is the background of the default header, we recommend keeping the color neutral

CTA Text - The color of the text on the Call to Action (Call us Today)

CTA Link - The color of the linked text on the Call to Action (the number/email you display)

CTA Link Hover - The color the Call to Action turns to when hovered over

Menu Link - The color of the text for the Menu links 

Menu Link Hover - The color the Menu link turns to when hovered over 

Default Header - Mobile Toggle (Both Skins)

The mobile toggle refers to the hamburger icon that appears when viewers are visiting your site on mobile. So you can see live changes, we recommend clicking on the mobile display icon at the bottom of your control panel on the left

Background - Changes the background color of the hamburger 

Icon - Changes the color of the hamburger Icon

Background Hover -  Changes the color of the background of the hamburger when hovered over 

Icon Hover - Changes the color of the hamburger icon when hovered over

Transparent Header (Both Skins)

This changes the color scheme of the menu header for Transparent Menu Headers. Remember, you'll either be using the Default Header or Transparent Header for your menu bar on the Home Page of your website. On the Get Cash Offer Page, it'll always be the default header displayed. To change your menu header on your homepage, check this section of the documentation

CTA Text - The color of the text on the Call to Action (Call us Today)

CTA Link - The color of the linked text on the Call to Action (the number/email you display)

CTA Link Hover - The color the Call to Action turns to when hovered over

Menu Link - The color of the text for the Menu links 

Menu Link Hover - The color the Menu link turns to when hovered over 

Transparent Header - Mobile Toggle (Both Skins)

The mobile toggle refers to the hamburger icon that appears when viewers are visiting your site on mobile. So you can see live changes, we recommend clicking on the mobile display icon at the bottom of your control panel on the left

Background - Changes the background color of the hamburger 

Icon - Changes the color of the hamburger Icon

Background Hover -  Changes the color of the background of the hamburger when hovered over 

Icon Hover - Changes the color of the hamburger icon when hovered over

Content Design

Buttons (Both Skins)

Background - The background color of the button 

Text - The text color on the buttons 

Background Hover - The color the button background changes to when hovered over 

Text Hover - The color the button text changes to when hovered over 

Form (Both Skins)

Form refers to the small boxes you see on the offer form

Icon - The color of the icon

Icon Background -  The background color for the icons

Input Text - The color of the text in the fields 

Input Background -  The background of the fields 

Borders (Classic Skin)

You'll see borders as you scroll through the page separating sections 

Primary - Primary border color 

Secondary - Secondary border color 

Footer Design 

Footer Layout (Bold Skin)

Like with the top bar, you can change the layout of the footer too to just show basic information in the footer or a more detailed footer featuring widgets and more information. 

Classic Layout:

Detailed Layout:

Enable Footer Pattern (Bold Skin)

This is a small tree pattern that you can toggle on or off in the footer of your site

Footer Pattern (Bold Skin)

Color Fill - The color of the trees

Background - The background color of the footer. You can have this the same color as your regular background so the sections blend seamlessly. 

Top Footer (Bold Skin)

Background - The background color of the footer

Border - the border that appears just above the footer

Text - The color of the footer text 

Link - The color of the links in the footer 

Link Hover - The color of the links when hovered over

Top Footer Border Width (Bold Skin)

These options let you edit the size of the border in the top footer

Edit Top Footer Widgets (Bold Skin)

Here you can edit the widgets that will feature in the footer, just click on the button, then you'll be redirected 

Edit Bottom Footer Details (Bold Skin)

This will redirect you to the details section of the customizer where you can edit the logo and text as you wish. More details of that can be found in this section of the documentation. 

Footer (Classic Skin)

Background - The background color of the footer

Border - the border that appears just above the footer

Text - The color of the footer text 

Link - The color of the links in the footer 

Link Hover -  The color of the links when hovered over 

You're all set. Click Publish to save changes