Hero & CTA Sections For The Kyiv Theme

Last updated: 12 October 2023

You've probably just finished the initial setup for your Ghost page, and you're looking to add a personal touch to it. So, let's start with customising the Hero & CTA (Call-To-Action) sections.

You can find the finished site on the theme's demo website: https://kyiv.magicpages.co/

Accent Colours

One of the first noticeable attributes of any website is its colour scheme. Ghost uses something called an "accent color" that repeats throughout different positions of the theme.

This colour brings emphasis and variety, breaking the monotony of the page and highlighting specific sections. From a design perspective, the right accent colour can enhance the user experience, guiding the visitor's eyes to essential parts of your site.

For instance, this colour can be used on buttons, footers, logos, etc. The standard Kyiv theme comes with a hot red-pinkish shade, which may not fit every brand's aesthetic.

Choosing the Right Accent Color

Finding the right accent colour for your Ghost page isn't always straightforward. Here are a few things to consider:

Contrast with Theme: You wouldn't want your accent colour to blend too much with the overall theme. This would defeat its purpose.
Vibe and Emotion: Colours evoke emotions. For instance, the standard hot red-pinkish might feel too aggressive for some brands, while a calming emerald green or turquoise could give off a serene vibe.
Brand Consistency: Ensure the accent colour matches or complements your brand's colours. This consistency boosts brand recognition.

Implementing Your Chosen Accent Colour

Once you've selected your preferred accent colour, it's time to integrate it into your Ghost page. Here's a quick guide:

Head to the "Design settings" on your Ghost dashboard and select "Brand" in the side bar.
Navigate to where it says "accent colour".
Input or paste your chosen colour code.

Your page should now reflect this new accent colour, giving it a fresh look that aligns with your vision.

Note: You can also customize other colors, such as the background and text colors, through this same setting.

Enhancing your hero section

As you can see on your page, it seems like there is an image missing in the hero section. Additionally, the hero title, hero subtitle, and CTA URL and its accompanying text should be adjusted to fit your brand.

While we are at it, you can already have a look at the CTA title and CTA subtitle. These are not reflected in your hero section, but in the so-called "CTA section" at the bottom of the page. This is basically a repetition of your call-to-action. The CTA URL & text are also used there, so it makes sense to just take care of the title and subtitle here as well.

To make these changes:

Close the "brand settings" and go to "homepage settings" in the same side bar.
Navigate to the section you'd like to modify and make the necessary changes in the relevant fields.

Now, head over to the next post in this series: Kyiv Theme: #3 Features Sections