When you visit the demo site for this theme, you will notice a nice banner image on the front page; including a call-to-action.

screenshot demo of the Clarified front page banner

This is optional, of course, but this gives your site some extra visual impact when someone visits. In addition to displaying an amazing photo, you can use it as a Call-to-Action (title, intro, and even a button).

For this feature, we used the WordPress Custom Header Image. All we did then was add some customizer options to create the call-to-action group, which I will take you through below…

  1. Go to Appearance > Header
  2. From here, you can upload a photo at which point you can crop it to 1920×645  pixels
  3. If you want to take advantage of the Randomize feature, you can upload additional banner photos and then click on the Randomize uploaded headers button. This will rotate your images when refreshing the front page or each time someone visits.
  4. Click the Publish button.
screenshot showing the default header image in Clarified for the banner.
screenshot for more than one header image and randomize option

Header Overlay

To help contrast the Call To Action text and button, we added an overlay to the image where you can change the opacity level from being completely transparent to being a solid colour. You can also change the overlay colour too!

  1. You have the option to hide the overlay with the toggle button
  2. Change the header overlay colour with the colour selector—you can revert back to the default
  3. Change the opacity (transparency) level of the overlay. Clicking on the arrow circle will change it back to the default setting of 0.25.
  4. Click the Publish button.

Front Page Banner Position

Sometimes you might be using a photo with unusual positioning of subject matter. By default, images uploaded are positioned from the center/middle. We’ve given you a setting to position your front-page banner.

  • Go to Appearance > Customize > Header Image
  • Under the Header Image Position section, select the position of your image
  • If you want to reset the height, click on the round arrow icon at the end of the slider.
  • Click the Publish button.
screenshot for the Clarified front page image position setting

Adding a Call-To-Action

This is optional, but you can add a call-to-action to your WP custom header hero image. We’ve categorized the option settings under the Header Image tab of the Customizer.

  1. Go to Appearance > Customize > Header Image
  2. Look for the section heading “Default Header Hero Text”
  3. Edit the default settings (text) to your own. Leaving any blank will remove that element from the front-end of your website. For example, leave the Hero Link and Hero Text empty and the button won’t show.
  4. Click Publish at the top.