Clarified Front Page Banner

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.

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 to add some customizer options to create the call-to-action group, which I will take you through that below…

1. Go to Appearance > Header
2. From here, you can upload a photo at which point you can crop it to 1600×650 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.

Front Page Banner Height

We will take you through a separate tutorial that introduces you to the image banners used in various ways. However, for this one, we will show how to manage the height of your front page banner. You can manage the height of your banner and even control the positioning of the image.

• Go to Appearance > Customize > Featured Image Options
• Under the Featured Banner Images section, use the slider to change the front page banner height.
• If you want to reset the height, click on the round arrow icon at the end of the slider.
• 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 > Featured Image Options
• Under the Featured Banner Images section, use the Front Page Banner Image Position drop-down to choose the reposition 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.

Adding a Call-To-Action

This is optional, but you can add a call-to-action to your WP custom header image. We’ve categorized the option settings under the label options tab as “Hero Text Settings“.

1. Go to Appearance > Customize > Label Options
2. Add your title, intro, and if you want a button, add a full URL and then your button label
3. Click Publish at the top.