Theme Documentation

Hello Coach

Your go-to resource for everything about your theme. Find setup guides, customization tips, and answers to common questions.

View Live demo Get Started
Theme overview
Install Guide
Custom Styling
Tutorials
faqs
troubleshooting

Theme Overview

Here you will find the basics to run your theme like the demo. We have also included additional details like the fonts, and demo colors.

Plugins
  • Kadence Blocks *
  • Starter Templates by Kadence Wp *
  • Clear Cache for me
  • Smashballoon Instagram
  • Woocommerce
* are required for theme function
Versions

Release Date – November 2021
Current – 2_0_0
Latest Update – 10/2025

View Changelog
Requirements

WordPress 6.3+
PHP 8.2+
Required Plugins x2

Colors
#C3723F
Palette 1
#D6D3CE
Palette 2
#655656
Palette 10
#000000
Palette 3
#393939
Palette 4
#999999
Palette 5
#E8BB5C
Palette 6
#E6EAEB
Palette 7
#F5EDE8
Palette 8
#ffffff
Palette 9
Fonts
Playfair Display

Headings

Amalfi

Accent

Open Sans

Body

Montserrat

H5 · H6 · Buttons · Nav

Recommended

Image Guidelines

Upload images that match the aspect ratio of your layout for the best quality, performance, and responsive display.

Common Image Sizes

These are the image ratios you’ll see used throughout the demo.

1:1

Square

Perfect for categories, profile photos, & products

Recommended width:
Up to 1200px

16:9

Landscape

Ideal for hero sections, banners, and full-width images.

Recommended width:
Up to 1900px

3:4

Portrait

Perfect for featured images, blog posts, and post cards.

Recommended width:
Up to 1200px
  • Match the image to the ratio: Kadence lets you crop images to different aspect ratios, but starting with an image that’s already close to the final shape will produce the sharpest results.
  • Desktop, tablet & mobile: Images are automatically cropped on desktop, tablet, and mobile. Leave extra space around your subject for the best results.
  • Image size: Resize images before uploading. Oversized images can slow down your website.
  • Mobile hero images: If a hero image doesn’t display well on mobile, upload a separate mobile image using the responsive editor settings.
View Image Guide →
Custom Code

Built-In Styling Options

Use these optional CSS Classes to add theme specific design details to your layouts. These classes are completely optional and can be used in the Additional CSS Class(es) field for any compatible element in the editor.

What it does

Adds the decorative background color blocks used throughout the Hello Coach demo block pages. The colors automatically use Palette 7 and Palette 8, so they’ll update whenever you change your theme colors.

Example
How to use it
01

Open the Design Library.

02

Browse the Color Blocks section and choose the layout you’d like to use.

03

Insert the block into your page and replace the demo content with your own.

04

Save your page.

Quick Tip

While it’s possible to build these color blocks from scratch, we recommend using the pre-built library blocks instead. They already include the correct spacing, layering, and responsive settings, making them much faster and easier to customize.

What it does

Adds a subtle pulsing animation to any Image or Button block to help draw attention to an important element or call to action.

Example
How to use it
01

Select the Image or Button block you’d like to animate.

02

Open the Advanced tab in the editor.

03

In the Additional CSS Class(es) field, add: pulse

04

Save your page and preview the effect.

Quick Tip

The pulse effect works best when used sparingly. Apply it to a single call-to-action or featured image so it naturally draws your visitors’ attention without becoming distracting.

CSS Classes

Simply click to copy.

pulse
What it does

Let’s you mix in your accent font with a header style.

Example
How to use it
01

Create your heading. Then select the words you would like to be script and apply the Italic styling to those words only.

02

Your words will automatically change to script.

03

To change the color, select the script text and from the menu bar above the text, select the arrow ( ⌵ ), and then highlight. There you can choose an accent color.

Advanced Header Settings

Flexible Header Styles

Hello Coach includes transparent, solid, and sticky header styles. Use the guides on the right to customize each header to match your website.

Sometimes after importing the demo, the Transparent Header settings may not match the demo exactly. If this happens, simply update the settings below.

Enabling Disable on Pages and Disable on Posts allows you to choose which individual pages or posts use the transparent header from the page or post settings.

If you prefer the transparent header to be enabled across your entire site by default, you can leave these options disabled and adjust the page spacing settings as needed for your layout.

01

Go to Appearance → Customize → Header → Transparent Header

02

Enable Transparent Header.

02

Enable the following options:

  • Disable on Pages
  • Disable on Posts
  • Use a Different Logo for the Transparent Header

One of the great features of the Kadence framework is the ability to use a separate logo for your Transparent Header. This allows you to display one logo when your navigation has a solid background and a different logo when it appears over a hero image or banner.

For example, you might use a dark logo for your standard header and a white logo for your transparent header.

Because these are two separate logo settings, updating your primary logo will not automatically update the Transparent Header logo (and vice versa). This gives you complete control over how your branding appears in different areas of your site.

Note: The screenshot is for Lily, but it works the same for Coach
01

Go to Appearance → Customize → Header → Transparent Header

02

From this screen, you can upload the logo you would like to display when the Transparent Header is active. If you prefer to use the same logo throughout your site, simply disable the Use Different Logo for Transparent Header option.

To update your primary site logo, return to Appearance → Customize → Header and edit the logo in the main Header settings.

Go to Appearance → Customize → Header → Sticky Header.

Step 1 – Open the Design tab. This is where you can customize the navigation colors and background.

Step 2 – Adjust the navigation colors. The three color options control the Default, Hover, and Active states of your navigation links.

Step 3 – Set the navigation background color. In the demo, we used Palette 1

Note: If you change your Global Palette colors later, the navigation background will not automatically update if you’ve applied transparency. Because the background color has been customized with an opacity value, you’ll need to manually select the new palette color and reapply the desired transparency.

The Transparent Header can be enabled on individual pages and posts, giving you full control over where it appears throughout your website.

Step 1 – Open the page or post you would like to edit.

Step 2 – In the top-right corner of the editor, click the Page Settings icon (the notepad with a pencil).

Step 3 – Under Transparent Header, select Enable.

Important: When using a Transparent Header, the first block on the page should include enough top padding so your content doesn’t sit behind the navigation.

We recommend using 10–12em of top padding for hero sections. If you’re using a section from the Design Library, the recommended top padding has already been applied for you.

VIDEO TUTORIAL

Learn to Use Your Block Library

Learn how to use your Block Library with confidence. This video covers browsing your library, adding blocks to your pages, editing content, moving sections, and customizing layouts to fit your website.

QUICK START

Quick Answers & Tutorials

Find quick answers to the questions we hear most often, or browse step-by-step tutorials for more detailed guidance.

Everything you need to customize
your theme from start to finish.

Visit Tutorial Library →

Popular Tutorials

Step-by-step guides

The most common tutorials our users find helpful.

To customize your theme colors, go to Appearance → Customizer → Colors & Fonts → Colors.

Here you’ll find your Global Color Palette, where you can replace the default colors with your own brand colors. Any changes you make to the Global Palette will automatically update throughout the theme.

If you don’t like how a particular color appears on a specific page or section, you can customize that block individually. Simply edit the page and choose a different color from your Global Palette or select a custom color for that element only.

To customize your fonts, go to Appearance → Customizer → Colors & Fonts → Typography.

Here you can change your site’s global font settings, including the font family, size, weight, and style. Any changes you make here will automatically update throughout the theme.

If you’d like to use a premium or custom font that isn’t included by default, follow our Premium Font Installation Tutorial for step-by-step instructions.

To edit a page, go to Pages in your WordPress dashboard and select the page you’d like to edit. You can also click Edit Page from the WordPress admin bar while viewing that page.

Once you’re in the editor, simply click on any text, image, or block to customize the content.

For a complete walkthrough of editing pages and using the block editor, visit the Page Editing Tutorial.

While editing a page, click Design Library at the top of the editor.

Browse the available layouts and sections, then click the block you’d like to use. It will automatically be added to your page, where you can customize it just like any other block.

For a complete walkthrough of using the Design Library, visit the Design Library Tutorial.

Popular Questions

Quick Answers

Browse answers to the questions users ask most often.

To change the page that appears as your homepage, go to Settings → Reading.

Under Your homepage displays, select A static page, then choose the page you’d like to use as your homepage from the Homepage dropdown.

Click Save Changes to apply your new homepage.

The Kadence framework includes several featured image ratios, allowing you to choose the style that best fits your website.

To change the featured image ratio, go to:

Appearance → Customizer → Posts/Pages Layouts → Archive Layouts

Scroll down to the Post Item Layout section, open the Featured tab, and choose the image ratio you’d like to use for your blog archive.

Your changes will automatically update the featured images displayed throughout your blog.

Yes! You can easily use premium or custom fonts with your Hello You Designs theme.

Follow our Premium Font Tutorial for step-by-step instructions on installing and using your own fonts throughout your website.

View Tutorial →

Your theme includes two different blog pages, and each one has a different purpose.

Custom Blog
This is a fully editable page designed with the block editor. You can customize the layout, add sections, and create a unique experience for your readers. This page is typically named Journal, The Blog, or something similar.

Blog
This is WordPress’s default blog archive. It isn’t editable and automatically displays all of your blog posts.

Important: Don’t assign your Custom Blog as your WordPress Blog page. If you do, WordPress will replace your custom layout with the default blog archive.

Instead, go to Settings → Reading, assign your standard Blog page as your Posts page.

Still need help?

We’re happy to help! If you couldn’t find the answer you’re looking for, send us a support ticket and we’ll get back to you as soon as possible.

submit a support ticket

Changelog

Follow the evolution of your theme. Every new feature, improvement, and bug fix will be documented here, so you can quickly see what’s changed.

Found an issue or have an idea for a future release? We’d love to hear from you.

Submit a ticket

Importance: Low
Date: 10/2025
Added support for editing WooCommerce product pages with the WordPress Block Editor.

Updated the demo content to include Sales pages and new blocks in the library.

Importance: Low
Date: 3/2024
Added a portfolio and portfolio pages

November 2021

🎉 Initial public release of Hello Coach