Colors & Fonts

You can configure Colors & Fonts in Kadence by navigating to: Website >>> Appearance >>> Customise >>> Colors & Fonts.


Kadence uses a 9-color system divided into: 2 accent colors, 4 contrast text colors, and 3 background colors, each serving a specific design function.

The 9 roles are:

  1. Accent
  2. Accent (Alt)
  3. Strongest Text
  4. Strong Text
  5. Medium Text
  6. Subtle Text/Borders
  7. Subtle Background
  8. Lighter Background
  9. White

You can configure text colors, background colors, border colors, border settings, border radius, font type and size, padding per device, and button shadows including hover states.

In the Typography panel, you can set the base font and heading fonts, as well as font color, size, weight, and style for global and individual use.

Yes. Although headings inherit the global font by default, each one can be individually customized with a different font.

To apply any changes made in the Colors or Fonts settings, you must click the “Publish” button located at the top left of the Customizer screen.

You can access the header settings by navigating to: Website >>> Appearance >>> Customise >>> Header.

There are two main tabs: General and Design.

In the General tab, you can drag and drop various elements into the desktop and mobile layouts of the header. You can also edit any existing element by clicking on it.

The Design tab allows you to set the header’s background color and define the screen width at which the mobile version of the header is activated.

You can enable:

  • Transparent Header: Makes the header blend with your content.
  • Sticky Header: Keeps the header fixed at the top of the screen during scroll.
  • Conditional Header: Allows different headers for specific site sections.
  • Enable Block Header: Lets you use a prebuilt Header Block (advanced feature).

More in-depth information is available in the official Kadence documentation.

You can access the footer settings by navigating to: Website >>> Appearance >>> Customise >>> Footer.

There are two main tabs: General and Design.

In the General tab, you can drag and drop various elements into the desktop and mobile layouts of the footer. You can also click on any placed element to edit and customize it.

The Design tab allows you to set the footer’s background color and toggle the “Keep footer on bottom of screen” option.

Yes, by clicking on a configured element in the footer, you can fine-tune its settings and content.

More in-depth information is available in the official Kadence documentation.

General

Go to your dashboard and follow this path: Website >>> Appearance >>> Customise >>> General.

You can set the site’s maximum content width, general spacing, and box shadows applied to visual elements.

You can set the sidebar width, spacing between its widgets, and enable the Sticky Sidebar option.

You can define a default border radius for images inserted throughout your website.

It allows users to quickly return to the top of the page by displaying a button once they scroll down.

You can define the default layout for the 404 error page and enable a specific sidebar for it if needed.

You can move the comment input above the comment list and remove the “Website” field to reduce spam.

It allows you to choose the breadcrumb engine for your site. RankMath is recommended due to full integration.

You can add your social media links, which will be available for use in various blocks or compatible plugins.

Posts/Pages Layout

Navigate to Appearance >>> Customise >>> Posts/Pages Layout from your dashboard.

You can choose to show or hide the title, display it “In Content” or “Above Content,” align it, and show additional elements such as breadcrumbs, date, author, and other metadata.

You can select from: Normal, Narrow, Fullwidth, Left Sidebar, and Right Sidebar.

Choose between “Boxed” (adds padding and background styling) or “Unboxed” (content spans full width of the page).

It controls the top and bottom padding of your content. Options are: Enable (top and bottom), Disable, Top Only, and Bottom Only.

Displays the featured image inside the content if one is set for the page or post. You can configure its position and ratio.

It enables or disables the display of the comments section on pages or posts.

You can include Breadcrumb, Categories, Title, Meta (author, date, etc.), and Excerpt.

Posts offer additional options such as Tags, Author Box, Post Navigation, Related Posts (with layout options), Carousel behavior, and Comment Dates.

You can configure the Archive Title as “In content” or “Above Content” and choose to display Breadcrumb, Category/Section Title, and Description.

You can show or hide the Featured Image (and customize it), Categories, Title, Meta, Excerpt, and “Read More” link with a custom label.

Yes. Use the “Page Settings” button at the top right of the post/page editor to apply custom layout settings.

Search Results

You can configure it by navigating to: Website >>> Appearance >>> Customize >>> Search Results.

Users will be redirected to a default Search Results page when they use the search feature.

You can adjust its layout and design, including:

  • Search Results Title
  • Archive Layout
  • Search Item Layout

Yes, it uses the same format as the Archive Layout, with the same available options and elements.

Site Identity

Navigate to: Website >>> Appearance >>> Customize >>> Site Identity.

It’s the image that appears on the user’s browser tab and also on mobile device shortcuts to your website.

Use a square image with a minimum size of 512 x 512 pixels.

You can upload or replace it using the media manager in the Site Identity section.

Click on the “Site Title and Logo Control” button at the top left of the screen to be redirected to the corresponding header settings section.

You can set up and adjust the global logo, logo layout, site title, and tagline.

Click on the “Site Icon” button at the bottom left of the screen to go back to the previous settings.

WooCommerce

Navigate to Website >>> Customise >>> WooCommerce from your dashboard.

Enable the “Store Notice” option and configure its placement to display a banner site-wide.

You can choose between Normal, Narrow, Fullwidth, Left Sidebar, or Right Sidebar layouts.

You can toggle visibility for: category, title, rating, excerpt, add to cart button, extras, payments, product meta, and social sharing icons.

Yes, by enabling “Use Custom Quantity Plus and Minus”, available only for simple products.

Yes, enable “Show Related Products” and set the number of columns.

Under the Product Catalog section, you can adjust content styles, button actions, and grid/list layouts.

Yes, by enabling “Custom Content for Shop Page”, which replaces the default archive layout with your custom content.

Yes, enable “Add Off Canvas Widget Area” to include a toggleable widget panel.

Yes, you can set the main image and thumbnail sizes and cropping methods.

You can set fields as optional/required, highlight required fields, and link to your privacy and terms pages.

Yes, enable “Show the cart popout on add to cart” to display an instant confirmation.

Yes, enable “Single Product Ajax Add to Cart” for a smoother shopping experience.

Additional CSS

From Website >>> Appearance >>> Customise >>> Additional CSS.

You can insert any valid CSS 3.0 code.

Click the “Publish” button to save and apply your changes.

Yes, use the Tab key to insert tabs, and Esc + Tab to move out of the editing area.

Yes, you can disable it from your user profile to switch to plain text mode.

Custom Scripts

From Website >>> Appearance >>> Customiser >>> Custom Scripts.

You can insert scripts into the Header, immediately after the <body> tag, or in the Footer.

To add analytics codes, additional visual effect libraries, or custom functionalities.

In the Footer, to optimize site loading performance and speed.

Yes, use the Conversions section in the Shop module to easily insert these scripts.

Leave a Reply