Theme Documentation

Hello Beaches

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 – May 2022
Current – 1_0_1
Latest Update – 8/2024

View Changelog
Requirements

WordPress 6.3+
PHP 8.2+
Required Plugins x2

Colors
#C6EEE7
Palette 1
#FEE5E0
Palette 2
#ECD6F8
Palette 10
#222222
Palette 3
#757575
Palette 4
#F9A79B
Palette 5
#EEEEEE
Palette 6
#FEE5E0
Palette 7
#FEF9F7
Palette 8
#ffffff
Palette 9
Fonts
Pathway Gothic

Headings

Little Jane

Accent

Poppins

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

Angles a heading or text slightly left or right for a casual, handwritten look. This effect works best with short titles and accent text.

Example
How to use it
01

Add a Heading or Text block where you’d like the angled text to appear.

02

Set the text alignment (left or right), depending on where you’d like the title to sit.

03

In the block settings, open the Advanced tab, and in the Additional CSS Class(es) field, add one of classes below

04

Save your page and preview it. If the title feels too large on mobile, adjust the mobile font size using the responsive controls in the editor.

You will not see the angled text in the editor, only on the live page.

QUICK TIP

This styling is designed for short headings only. Longer sentences/words can become difficult to read when angled.

CSS Classes

Choose one of the following classes to apply different tape styles. Click to copy.

ltitle
rtitle

ltitle — Angles the text to the left.
rtitle — Angles the text to the right.

Quick Tip

The heading with the colored block underneath uses an additional CSS class for the underline effect. If you’d like to recreate that style, follow the Underline Text tutorial included with this theme.

What it does

Adds one of the custom image borders used throughout the Hello Beaches demo. You can also use the standard Border settings in the editor if you don’t need these custom styles.

Example
How to use it
01

Add an Image or Advanced Gallery block and insert your image.

02

Select the image, then open the Advanced tab in the editor.

03

In the Additional CSS Class(es) field, add one of the following:

whtborder — Thin 2px offset white border
wborder — 15px white border
tborder — 10px white border

04

Save your page and preview it.

You will not see the borders in the editor, only on the live page.

QUICK TIP

These custom borders work best on images with a background color or enough surrounding space so the border is visible. If you’re simply looking for a basic border, you can add one directly from the block’s Style settings without using any CSS.

CSS Classes

Choose one of the following classes to apply different tape styles. Click to copy.

whtborder
wborder
tborder
Quick Tip

The border effects can be combined with Image Hover styles. Simply add both CSS classes to the Additional CSS Class(es) field, separated by a space.

What it does

Adds one of the decorative underlined title styles used throughout the Hello Beaches demo. The underline color is automatically pulled from your theme color palette.

prettytitle — Palette #2 (Light Pink) bprettytitle — Palette #1 (Teal)
dpprettytitle — Palette #5 (Dark Pink)

Example
How to use it
01

Add a Heading or Text block.

02

Highlight the word(s) you want underlined, then click I (Italic) in the editor.

Important: The underline effect only appears on text that has the Italic style applied.

03

In the Additional CSS Class(es) field, add one of the classes from the list.

04

Save and preview your page.

CSS Classes

Choose one of the following classes to apply different angle styles. Simply click to copy.

prettytitle
bprettytitle
dpprettytitle

These underline colors are tied directly to your theme’s color palette. To change the colors sitewide, simply update Palette #1, #2, or #5 in your theme colors.

What it does

Adds a smooth zoom effect when visitors hover over an image. This effect can be applied to any Image or Advanced Gallery block.

Example
How to use it
01

Add an Image or Advanced Gallery block and insert your image.

02

Select the image, then open the Advanced tab.

03

In the Additional CSS Class(es) field, add the class prettyhover

04

Save and preview your page.

CSS Classes

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

prettyhover
Quicktip

The prettyhover effect can be combined with any of the custom image border styles. Simply add both CSS classes to the Additional CSS Class(es) field, separated by a space.

What it does

Displays a caption over an image when visitors hover over it. You can also make the caption clickable by adding a link.

Example
How to use it
01

Add an Advanced Image or Gallery block and insert your image.

02

Select the image, then open the Captions tab in the editor.

03

Configure the caption settings:

(Optional) Enable Force Hover Effect Always for Mobile if you’d like captions to display on mobile devices.
Enable Show Captions
Set Caption Placement to Bottom Image – Show on Hover

04

Adjust the caption font, size, and colors to match your design. For mobile, we recommend reducing the font size to 12–14px, depending on the length of your caption.

05

Add your caption text in the Caption field for the image. You can also enable a link if you’d like the caption to direct visitors to another page.

Quick Tip

Hover captions work best with short, action-oriented text, such as Read More, View the Gallery, or To the Blog. Short captions are easier to read and create a cleaner hover effect.

Disable for mobile

To remove the captions on mobile so they do not show, go to the image and click on it to open the settings for that image on the right. Then open the Captions Tab and turn off “Force Hover Effect Always for Mobile”

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: 8/2024
Added portfolio pages and templates. Updated some of the block styling.

May 2022

🎉 Initial public release of Hello Beaches