What is the Customizer?
The customizer is where you will set site-wide styles. Including colors, menu styles, link styles, fonts, etc.
How do I get to the Customizer?
To start, make sure you’re logged in to your WordPress site and go to your site’s home page. Once the page has loaded, locate and click the Customize button in the top bar. The Customizer menu will open on the left.
Editing fields
Site Identity – This is where you will upload and change your site’s logo, title, tagline, and icon.
- Logo – The logo will show in the header across the site.
- Site Title and Tagline – The site title, tagline, and icon are all for adjusting what appears on browser tabs. The tagline is optional.
- Site Icon – This is also commonly referred to as a favicon.
Options – This is where button, gutter, and link styles are set.
- Theme Style – This should be set to ‘Default’.
- Button Style – There are two button style options: default and underline. The default option adds a border all the way around each button, while the underline option only adds a bottom border.
- Gutter Size – This refers to the spacing between columns. You have the options of large, medium, small, or none.
- Link Styles – This field changes link styles for inline links or links within the text. Such as this link here. These two options are standard or underline. The standard option adds a background highlight, while the underline option simply underlines the link.
Navigation – This is where you’ll adjust the site’s menu styles. It’s important to note that there are three different menus. The main menu, secondary menu, and sidebar menu. The main menu is in the header on the bottom and the secondary menu (or eyebrow navigation) is above the main menu. An example of a sidebar menu can be found in the sidebar on our about page.
- Nav Display – This has two options: bar and overlap. The bar option will show the nav as a separate bar in the header, while the overlap option will show the nav overlapping the hero.
- Nav Position – The block option will only show the header when the user is scrolled to the top, while the sticky option will show a smaller header when the user has scrolled down.
- Menu Item – For adjusting the font size of the menu items in the main nav.
- Menu Button – option is referring to this button. By default it only shows on smaller screen sizes, however you have the option to show it on all screen sizes if desired.
- Main menu font transform – gives you the option to make the menu items all Uppercase or keep them normal.
- Main Menu Font Weight – adjust the font weight of the main menu items. Note that not all fonts come with every font weight. If you’re not seeing the font or weight appear correctly, try selecting a different weight.
- The secondary menu fields are all identical to the main menu fields.
- The last two fields are for Sidebar navigation. You have control over this menu’s font weight and color in the navigation tab.
Typography – This is where you will set the sitewide fonts. You get to choose from over 40 fonts for both the headers and the paragraphs. Note that not all fonts come with every font weight. If you’re not seeing the font or weight appear correctly, try selecting a different weight.
Colors – This is where site wide colors are set.
- Theme background changes the background color of the entire site. This is the white option, and this is what the gray option would look like.
- Primary Color – This color is the main color that you will see throughout the site. The primary dark color will also frequently be used throughout the site. The accent color will only appear in a few places, such as inline links. The light background color will be pulled into different elements with text, such as sidebar menus, content block headers, accordions, and more.
- he last couple fields set the default colors for the alert bar. This is an example of an alert bar. There is a separate video on how to create alert bars and override these default colors.
Hero – When we say hero, we are referring to the block on the top of each page that contains the page title and often a background image.
- Hero Padding – This adjusts the amount of padding (or the height) of page and post heroes. This is currently set at x-large but it goes all the way down to small
- Hero Align – You can either align the text left or center as it is here.
- Hero Subnav Size – is referring to the in-page nav, which consists of links in the hero. An example of this can be found on our kitchen sink page. We will go over how to add this feature in a different video.
- Hero Overlay – This is for the color overlay on the hero image. The standard option shows a color overlay of 75%; light is 50% and none shows no color overlay.
Bio – This tab is for the bio content block. You have the choice of making the bio photos circle, with rounded corners, or square. There will be another video on how to add a bio block.
Icons – The top icon color is for the icons on a production page. These detail icons in the sidebar can either be light or dark.
The social icons field updates the social icons in the footer. For these you have the option of standard, dark circle, dark square, outline square or outline circle.
Additional CSS and Export/Import – You won’t need to touch the last two tabs. These are for internal purposes only.
Once you are done making all those changes, make sure to click “Publish” on top to save all your changes. And that’s it for the customizer! You’ve got all your site-wide styles set!