Sierra Theme - Appearance

Modified on Mon, 20 Jul at 9:05 AM

WordPress Customizer

We are going to make a start with the top-level WordPress website styles. Go to Appearance Menu > Customize. This will open the settings screen below, the following tabs need to be visited.


Screenshot of WordPress Appearance Customize settings page showing the customization panel and available tabs for configuring website styles.

General Settings

Site Identify

  1. Site Title (business name) 

  2.  Tagline (business description) for your website.

  3. Uploading your favicon under Site Icon – the icon that sits inside browser tabs. Favicons should be square and at least 512 × 512 pixels. 

Click ‘Select Site Icon’ and as you did for the logo, drag your favicon into your media library and select. Crop if needed.
Screenshot of WordPress Customizer Site Identity settings showing fields for site title, tagline, and Site Icon upload option for adding a favicon.

Layout Settings

Click on the Sierra green swatch in Theme Accent Color and it will bring up your default colour palette you have selected earlier. Choose the main highlighting colour from your brand which the theme will use as the default colour for various modules on your pages.


Screenshot of WordPress Customizer Layout Settings showing the Theme Accent Color swatch and color palette selector for choosing the website's default brand color.



Typography

There are extensive settings here for your typography but we have done most of the work with Sierra. Select your Header Font and Body Font from the long Google Fonts dropdown list. For a better view or search of these fonts visit Google Fonts.

You may want to change your Header Text Color or Body Text Color if you feel it is more suitable for your brand. The Body Link Color is for text you have added hyperlinks to.


Screenshot of WordPress Customizer Typography settings showing options to select header font, body font, text colors, and link color using Google Fonts.







Buttons

Go back to the start of the menu and visit Buttons > Button Style. Enter your main highlight color for the Background Color and Border Color (if preferred). Select the font that will appear in your buttons.

Screenshot of WordPress Customizer Buttons settings showing Button Style options for background color, border color, and button font selection.



Then to the second part of button settings, Buttons Hover Style. If you wish for there to be a different hover state, change where applicable. Sierra

default button is coloured to transparent on hover with arrow icon active.


Tips: To keep brand consistency, use either the heading or paragraph font you selected in Typography settings above.



Additional CSS

This area contains CCS code for the styling of custom elements used throughout Sierra. This will rarely need to be edited but in the small number of cases you will, you will find the relevant code under its labelling.

Screenshot of WordPress Customizer Additional CSS section showing custom styling code used for website elements. 


Updating Menu Structures

There are 4 locations for menus in Sierra. The Primary Main Header, Header CTA (Telephone Call to Action), Footer Column Menus and Property Page Menu.

Screenshot of WordPress Menu settings showing the four Sierra menu locations: Primary Main Header, Header CTA, Footer Column Menus, and Property Page Menu.


The Primary Main Header

There is little to do here unless you wish to add new or remove pages. 


Add New Pages

  1. Go to the View All tab to see the full page list.

  2. Check the boxes for the pages you want to add.

  3. Click Add to Menu. The new pages will appear at the bottom of the menu structure.

  4. Edit the Navigation Label in the text field

  5. Drag and drop your pages into the desired position. To create a sub-page, drag the page slightly to the right under another page (indented).


Screenshot of WordPress Primary Main Header menu settings showing the page list, Add to Menu option, navigation label field, and drag-and-drop menu structure controls.



Note: This does not change the page URL (permalink). To change the URL, edit the page settings directly.


Remove Pages from Menu

  • Click the page in the menu.

  • Select Remove to delete it from the menu.

Screenshot of WordPress Menu editor showing the Remove option for deleting a page from the navigation menu and note about permalink settings.


Header CTA (call button)

1. Select Header CTA

2. In the URL field, replace the default number with your own telephone number. Keep tel: before the number (e.g., tel:123456789) so browsers recognize it as a phone link.

3. Save Menu

Screenshot of WordPress Header CTA menu settings showing the URL field for updating the telephone call button link and saving menu changes.


Footer Menu 1 & 2

The footer menu is essentially split into 2 different menus, one for each footer column 3-4. Select each from the top dropdown and if you wish to add, swap, remove or re-arrange them, use the same method as above for the Main Menu.


Property Menu (Property Focus Page)

This menu works as an anchor menu for the information sections on individual property pages. We have inserted anchor links to help the user scroll to desired sections. No changes needed here unless you wish to remove any.

Screenshot of WordPress Property Menu settings showing anchor links used for navigating between information sections on individual property pages.



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article