Theme Documentation

Hello Blogger

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
  • WP Recipe Maker
* are required for theme function
Versions

Release Date – October 2023
Current – 2_0_0
Latest Update – 10/2025

View Changelog
Requirements

WordPress 6.3+
PHP 8.2+
Required Plugins x2

Colors
#DDDFB7
Palette 1
#F6B092
Palette 2
#D79A86
Palette 10
#000000
Palette 3
#5F5F5F
Palette 4
#ADADAD
Palette 5
#B7C06F
Palette 6
#FEE5E0
Palette 7
#FEF9F7
Palette 8
#ffffff
Palette 9
Fonts
Ganache

Headings

Dahlia

Accent

Mulish

Body

Overpass

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

These custom styles are included with your theme. Browse the tutorials below to learn how each one works.

What it does

Creates the half underline highlight used throughout the Hello Blogger demo. Unlike the default Kadence highlight, this custom style creates a shorter underline with a cleaner editorial look.

Example
How to use it
01

Add an Advanced Heading block.

02

Type your heading, then highlight the word or phrase you want to underline.

03

From the formatting dropdown, choose ADV Highlight.

04

Open the Advanced tab in the block settings and add the CSS class: hyd-highlight

05

Click save and preview on the live page. You will not see changes in the editor.

Styling Help

The underline color is controlled by Palette #1.
Want a different text color? Simply change the heading color in Style → Advanced Highlight Settings.

Click to copy.

hyd-highlight
Remove Effect

To disable this styling across your entire website, add the following to Appearance → Customize → Additional CSS.

.hyd-highlight .kt-highlight, .hyd-highlight a .kt-highlight { background: none!important; }

Note: This disables the effect globally. Remove this CSS at any time to restore the custom underline styling.

What it does

Applies one of the custom image masks used throughout the Hello Blogger demo.

Example
How to use it
01

Click the image you want to edit.

02

Open the Style tab in the editor.

03

Scroll to Mask Settings.

04

Choose the mask shape you’d like from the dropdown.

05

Save your page.

Quick Tip

Different image sizes may display masks slightly differently. Crop or resize your image if needed for the best result.

1. Select the image.
2. Open the Style tab.
3. Under Border, enter a border width.
4. Choose your border color.
5. Save your page.

QUICK TIP

Borders are easiest to see when the image is placed on a background color with some contrast.

Makes an image clickable by linking it to another page or website.

Option 1 (Recommended)

1. Select the image.
2. Click the Link icon in the toolbar.
3. Enter your URL.
4. Click the ✓ / Apply Arrow to save the link.

Option 2

1. Select the image.
2. Open the General tab.
3. Scroll to Link Settings.
4. Enter your URL.

TEXT LINKS

To link the text below an image:

1. Highlight the text.
2. Click the Link icon.
3. Add your URL.
4. Click Apply.

What it does

Adds a decorative left or right arrow between sections using a Spacer/Divider block. The arrow color automatically matches the divider color you choose.

Example
How to use it
01

Add a Spacer/Divider block.

02

Set the divider color to the color you’d like your arrow to be.

03

Open the Advanced tab in the block settings and add a CSS Class to the Additional CSS Class(es) spot

hyd-larrow — Left arrow
hyd-rarrow — Right arrow (130% width)
hyd-rarrows — Short right arrow (100% width)
04

Click save and view your page.

Note: You will not see the arrows in the editor, only on the live page.

CSS Classes

Add this class to apply the accent. Simply click to copy.

hyd-larrow
hyd-rarrow
hyd-rarrows
MOBILE TIP

If the arrow doesn’t make sense on mobile layouts, you can hide it.

  1. Select the Spacer/Divider block.
  2. Open the Advanced tab.
  3. Enable Hide on Mobile.

This keeps your desktop layout intact while preventing awkward arrow placement on smaller screens.

What it does

Allows you to style the top menu bar

Button
Secondary Menu
Optional Optin
WHAT IT DOES

Updates the call-to-action button displayed in the top announcement bar.

HOW TO USE IT

1. Go to Appearance → Customize → Header.
2. Click the Button element in the header builder.

3. Update the button text and destination link.


4. Open the Design tab to customize the button colors.


5. Publish your changes.

QUICK TIP

The demo styling is already included. Simply update the wording, link, and colors to match your brand.

WHAT IT DOES

Adds a second navigation menu to your header for links like Recipes, Categories, or Quick Links.

HOW TO USE IT

1. Go to Appearance → Menus.
2. Create a new menu with the links you’d like to display.
3. Assign the menu to the Secondary Navigation location.
4. Go to Appearance → Customize → Header.
5. Drag the Secondary Navigation element to your preferred location in the Header Builder.
6. Publish your changes.

WHAT IT DOES

Adds a custom opt-in or announcement to the top header using text, links, and an optional icon.

HOW TO USE IT

1. Go to Appearance → Customize → Header.
2. Select the HTML element in the Header Builder.


3. Add your wording.
4. Highlight the text you want to link, click the Link icon, and add your URL.
5. Insert your icon or image if desired.
6. Publish your changes.

STYLING HELP
  • Italic text automatically uses your Header Font, allowing you to mix two font styles just like the demo.
  • The demo icon is approximately:
    • Width: 20px
    • Height: 25px

If your uploaded image is too large:

  1. Click the Text tab.
  2. Find the width="" attribute.
  3. Change the value to approximately 20px (or whatever size looks best).
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: 8/2024
Adjusted styling of loop entry blocks.

October 2023

🎉 Initial public release of Hello Blogger