GeneratePress enables you to customize your site in many ways. The three most important customization options you need to know about are…
- Page Headers: Dashboard > Page Headers
- Page Sections: the Use Sections toggle switch is at the top of the right hand sidebar in your WordPress post editor
- The Customizer: Appearance > Customize
This page briefly lists the type of options available in the WordPress customizer and tells you which tab to find those settings under
The tabs listed below are added by GeneratePress in the customizer. To find them go to: Dashboard > Appearance > Customize
Because GeneratePress has so many options available, I’ve tried to give you a general idea of where to go to find the type of setting you need.
The important point: you must start with the VALUE you want to change, not the ELEMENT you want to change. For instance to change the color of the header section you start with the color tab, then drill down to the header tab in the color section.
- Customizer > Color tab > Header sub tab > Background color
- If you want to change the Color of something, start with the Color tab.
- If you want to change the Typography of something, start with the Typography tab.
- If you want to change the Layout of something, start with the Layout tab. (Layouts include widths, heights, margins, paddings, alignment and much, much more.)
Remember, I’m trying to give you a general idea here. I highly recommend that you click through all of the tabs in the customizer and get used to where everything is. Gaining a good working knowledge of how the customizer is organised is very important if you want to use GeneratePress effectively and efficiently.
Site Identity tab
- Site title & tagline
- Main & retina logo
- Site icon
Colour sub-tabs (change the colour of backgrounds, text & links etc)
- Header tab: title & tagline
- Navigation tab: navbar colours
- Buttons tab: class=“button”
- Content tab: you can change the colour of most text elements in the content area. Such as paragraph text, the page/post titles, entry meta text/links and headings h1 to h5. You can change the background colour of the footer widget area as well as the footer widget titles and text/links in the footer widget areas. You can also set the background/text/link/widget title colours for sidebar widgets if you wish.
- Forms: you can make minor changes to the colour of forms. However, these changes are minor and limited.
- WooCommerce: there are many elements in WooCommerce that you can set the colour for. Have a look through the options and see what yo think.
- Set the font family/line height & paragraph margin you want to use in Typography > Body
- All other typography settings will inherit this settings.
- After you’ve set the body settings, work your way through the other typography tabs.
- If for instance, you don’t want one of the headings h1 to h5 to inherit the font family you’ve chosen, you can choose a font family, weight, size and line height for any of the h1 to h5 settings.
- Widget titles: the font settings you choose for widget titles will affect both the sidebar widget titles and the footer widget titles. You can not target these independently without custom code.
- Footer: the footer is independent of the footer widget area. The footer is the footer credits area at the very bottom of the site.
- WooCommerce typography settings: you can change the font weight and size of product titles and related/upsell title font size.
The Layout sub-tabs
- Widths & Heights
- Margins & paddings
- Positioning of elements (location, above/below header etc)
- Separate or single container/s (gaps between content and sidebar)
- Full width or contained header, navbars and footer
- Sticky and slide out navigation options
- Sidebar-content-sidebar settings for single posts, blog and “Sidebar Layout”
- Sidebar width 25% or 30% of layout etc
- Footer settings: number of footer widgets, back to top button and copyright text
- Blog and WooCommerce settings: all settings apart from colour, typography and bg images
- Load essential icons only. (Load essential Font Awesome icons instead of the full library.)
- Cache dynamic CSS. (Cache CSS generated by your options to boost performance.)