Announcing the Magic Pages Open House. Quarterly calls with our team!

Skip to the documentation

Hero & CTA Sections For The Kyiv Theme

Design a striking first impression with Kyiv Theme: Tips on optimising Hero & CTA sections for maximum impact and user engagement on your site.

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:

  1. Contrast with Theme: You wouldn't want your accent colour to blend too much with the overall theme. This would defeat its purpose.
  2. 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.
  3. 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:

  1. Head to the "Design & branding" in the Ghost's settings, click "Customize" and select "Brand" in the side bar.
  2. Navigate to where it says "accent colour".
  3. 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.

Enhancing your hero section

Next to the "Brand" settings, there is a "Theme" tab. This is where you can control the theme.

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:

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

Back to the Kyiv theme

Jannis, founder of Magic Pages

Didn't find your answer?

Ask us anything — a real person reads every message, usually the same day.

Email support