Making a Killer Website Hero!

Date: May 27th, 2020 | Category: Website & WP Theme Tips


What is a hero?

Glad you asked! When I talk about a hero it's usually the section ‘above the fold', at the top, of the home page. Depending on the site, this could include similar sections at the top of other web pages.

It can include a large background… an image or video that spans the browser window and a CTA (call to action). Or it could be a CTA with an image next to it (in columns); in some configuration.

It's the first thing people see when they land on a web page.

The Problem: it's not that simple to make it look good.

If you look at any of our WordPress themes, you'll see there is a wide range of designed heros; emphasis on ‘designed'.

When we created these themes we had a designer design them. Yes, they chose the colors and layouts. But also chose the backgrounds or images. And those are an integral part of each design! Take away the stock images from any of our themes and you are just left with a shell of a design.

So you can't just throw anything in there and expect it to look good!

With Hexater Themes you have two options.

1. Adapt to the Theme

If I were designing a custom WordPress theme, you might give me images up front and I could design around those images; I could make design decisions based on what you've given me.

But if you start with a pre-built theme with a pre-built hero?.. then it's reverses that situation. Now it's on YOU to choose (based on the design in front of you) the images to work with the theme design.

2. Customize It Yourself.. or Get Help Doing That

Make changes to the hero to adapt to your images. That is possible if you utilize various customization techniques.

  • Use the Color Schemes or Workshop to change colors.
  • Use the ‘Additional CSS' section to add your own custom CSS.
  • OR… use a child theme and change it in any way imaginable.

At the end of the day you can make it work. The easiest route is to ‘adapt to the theme'. Otherwise, you employ skills (yours or others) to make changes that adapt to your images etc..

What Are Your Design Options?

The trickiest scenario is when you have text on top of an image. So let's say a full background image and then a CTA on top of that.

In that case, if you choose the wrong image, that text can disappear into the background or the image could be too busy. And the whole idea here is to bring the visitors attention to the Call to Action. That's the whole point!

So here are your options:

  1. Choose a background that is simple or offers space where the text and button are that is simple.. you don't want something too distracting that makes it difficult to read or distracts from your call to action.
  2. Add a transparent overlay on the image to darken it (photoshop)*.
  3. Choose an image that is opposite the text color. If you have dark text, choose a light background.
  4. Change the text and button color (using the customizer and/or CSS)*.
  5. Change the layout (child theme)*.
  6. Add a background color (you can add transparency) behind the text*.
  7. Add a shadow behind the text and button.

*some development or design skills will be needed.

Those are some standard things you can do. So you definitely have options! It's just how much work and time you want to put in.

Hexater themes are simple by nature and you won't have full control over heros… it's not a drag and drop page builder. The demo is what you are getting and the layouts you should expect out of the box. But that doesn't mean they can't be modified with some tools we give you (like the color workshops), a child theme and/or some CSS.

Hope this helps!! Happy theme'ing!

Matthew
Latest posts by Matthew (see all)

LEAVE A COMMENT

Your email address will not be published. Required fields are marked *