(Note: I'm not affiliated with any of the mentioned products or companies.)
Kadence Theme is a lightweight yet full-featured WordPress theme that combines functionality with aesthetics, designed to create fast-loading, and accessible websites.
In this post (which is a sort of cheat sheet) I'll go over the main settings within the Appearance -> Customize section of a WordPress site that uses Kadence theme. The settings explained here affect the whole site. Some of them can be overwritten in individual pages or posts.
Colors and fonts
This section has three parts:
- Colors
- Buttons
- Typography
1. Colors
In Kadence theme color are controlled from the site theme's Customize editor meaning that they will be changed wherever they appear by changing them here.
There are 9 colors in the pallet and there are 8 prebuilt selections all of which can be modified.
The 9 colors determine the following:
-Colors 1 and 2: Accent 1 and Accent 2 (hover)
-Colors 3-6 (text): strongest - strong - medium - subtle text (and borders)
-Colors 7-9 (background): subtle - lighter - white background
Of course the second and the third group can be inverted for dark themed sites.
There are 3 global pallets for the site available.
The colors are applied to:
- site background
- content background
- title above content background
- title above content overlay color
- links (active and hover)
and they can be set to differ according to screen sizes.
2. Buttons
The following parameters can be specified globally for buttons:
- text color
- background color
- border color
- radius
- font
- padding
- shadow (active and hover)
3. Typography
Base typography will be set for the whole site. Out of the box Kadence offers 12 pairings to choose from in case the designer prefers to do so. Naturally, these can also be set independently.
After that all the elements will have the "inherit" option active by default. In case the element's font differs from this, it can be set to another font in the corresponding field. All font selectors have 3 fields that correspond to: font, font-style and font-size.
After that we can specify:
- Headings
- Title Above Content which refers to the H1 title and breadcrumbs
Header
Header can be adjusted separately for desktop and tablet/mobile screens.
On the right side under the preview pane there is a section where header is organized using widgets that can be inserted in three available rows. Widgets are selected from the left pane and include:
- Primary Navigation
- Secondary Navigation
- Search
- Button
- Social
- HTML
Headers can be set to transparent and/or sticky and have their own set of settings.
Design tab permits to change the background color and set the breakpoints for mobile devices.
Footer
Footer is organized in a similar way with the exception that it permits creation of new widgets where Gutenberg blocks can be inserted.
General
This is where many of the settings are chosen.
Layout
- Content width and top/bottom padding
- Narrow layout width
- Single post boxed
- Archive grid boxed
Sidebar
Width, widget spacing and design parameters.
Images
Border radius of images can be set here.
Scroll to top
With its corresponding setup.
404 page layout
With the layout design and background color design.
Comments
Where the placement of comments can be controlled.
Breadcrumbs
Where Yeost, Rank Math or SEOPress breadcrumb engine can be activated (requires corresponding plugins).
Social Links
These can be later added to the header or footer through a widget.
Performance
Which permits the following:
- Enable Scroll To ID
- Enable Lightbox
- Load Google Fonts Locally
- Enable CSS Preload
Posts/Pages Layout
This section the generic design of Posts and Pages. It has three subsections:
- Page Layout
- Single Post Layout
- Archive Layout
Page Layout
General
Page title can be hidden here.
Overall design of the page can be set to:
- Normal
- Narrow
- Fullwidth
- Left Sidebar
- Right Sidebar
...as well as boxed or unboxed styling.
Showing featured image and comments can be turned on/off.
Design
This part controls breadcrumb settings and background settings
Single Post Layout
Single Post Layout controls whether the post title appears or not, how post title is shown and aligned, which element are shown in the title (breadcrumbs, categories, title, meta, excerpt)
The default post layout, same as for pages:
- Normal
- Narrow
- Fullwidth
- Left Sidebar
- Right Sidebar
Also it controls which sidebar is the default one and the content vertical padding, as well as if the featured image is shown and where it is positioned, if alt text is shown, the featured image ration and if tags, footer area in boxed mode, post author box, post navigation and related posts (and in how many columns) are shown. One can also control if related post carousel is endlessly looped, if comments and their dates are shown.
The corresponding design section controls fonts, backgrounds, etc. in case these are not inherited.
Archive Layout
This section provides similar controls as the previous two.
Search Results
Search results title can be shown or hidden, and if shown it can appear in or above content.
Archive can be set to:
- Normal
- Narrow
- Fullwidth
- Left Sidebar
- Right Sidebar
...as well as boxed or unboxed styling.
The number of column can be chosen (1-4).
Search idem elements can be chosen for the following:
- Feature
- Categories
- Title
- Meta
- Excerpt
- Read more
In the Design tab, colors, text and background can be specified.
The rest of the features is the same as in any WordPress standard theme so I won't go through theme here.