This theme comes with three (3) types of image banners; actually 2 plus a WP Header Image feature which is like a banner image but is part of the header styling. Let’s start with the WP Header Image that the demo front page current shows and has an overlay with header text on top. This will be similar to a banner image we will talk about shortly:
WP Header Image
This is our header image.
Banner Without Overlay
This is a banner image without an overlay and is published to the “Banner no Overlay” sidebar position.
Banner With Overlay
This is a banner with an overlay - you can see it’s slightly darker and is published to the “Banner” sidebar position. The overlay can be adjusted from the customizer to make it lighter or darker.
These show no caption boxes, except the WP Header Image at the top. To add caption boxes like the header image method, I will take you through a tutorial further below.
Disable The Header Image Demo Banner
- Go to Appearance >> Customize >> Header Area >> Header Image
-
Look for the “Hide Image” button on the “Current Header” setting. This will remove it and will be available if you choose to use this feature and upload a “new” image replacement.
- Click “Save & Publish“
Create Your First Banner with Caption
- Prepare your banner image before uploading it by cropping, sizing, and if possible, optimizing your photo. See the “Image Size Guidelines” further below.
- Upload your photo to the Media Library and make sure you copy the File URL by clicking on the edit link to find it.
- Go to Appearance >> Widgets
- Drag a “Text Widget” into the “Banner” sidebar position
- Title your widget with an exclamation mark ! before the name (more on this later)
- Copy and paste the Banner code snippet you see below into the text widget and then begin to edit the content, including the path (File URL) of your own banner
- Click “Save” on the widget.
Image Size Guidelines
If you plan on using the full width setting for your website, you should have a large image to accommodate large screen resolutions, such as 2560px in width. However, if you plan to use a boxed style for your website, then you can make your banner image smaller. We will use the live demo site (which is using the Full Width boxed setting for Emotions as a guideline for your banner image size, but the important dimension is actually the width; height can be whatever you want.
Demo Site Banner Image = 2560×1000 pixels
If you plan on using the “Boxed” styles for your website, then you can use the boxed style widths as a guideline:
Using the boxed style dimensions for your banner image widths, you can decide what your height of your image will be. Everyone will have their own preference, but the key dimension is the “width“.
Banner Code with Caption
<img src="IMAGE LINK HERE" width="2560" height="1000" /> <div id="banner-caption"> <h3 class="header-text">Something New</h3> <h4 class="header-subtext">Exploring new theme advances</h4><a class="button header-button" href="#">Details</a></div>
After copying and pasting the above code into your text widget, now we need to update the content and the path to the image. Here is a breakdown of the code:
- The img src is the path to the banner image
- The header-text is your caption title
- The header-subtext is the second caption line of text content
- The link (currently uses a # as a blank link) is for the button to whatever you want it to link to
Caption Colours
Although the Header Image option includes colour settings in the “Header Area >> Header Text” section of the customizer, for banner images, you will need to add inline styling to customize the colours. The example below shows inline styles added to the header-text and to the header-subtext:
<img src="IMAGE LINK HERE" width="2560" height="1000" /> <div id="banner-caption"> <h3 class="header-text" style="color: #ffffff;">Something New</h3> <h4 class="header-subtext" style="color: #ead8aa;">Exploring new theme advances</h4><a class="button header-button" href="#">Details</a> </div>