Promo 1 - Get our lifetime membership, all themes, and updates forever for only 95 USD.
Promo 2 - Get a free pro theme when you host with us.

Create a banner image with a caption box

Normally we’ve created a banner image with captions differently in the past, but decided to do something a bit different.

As you may or may not realize, WordPress now has an “Image” widget. We added some custom CSS code to the theme so that when you add a caption to the widget, you get a special style applied which gives you an overlay caption. You can see this in action on the live demo for this theme, but here is a screenshot of what it looks like:

bw banner caption

Nice done, but this is how you can do this by using the default WP Image widget:

  1. Go to Appearance >> Widgets
  2. Drag an Image widget into the “Banner” sidebar position (this is only for this sidebar position)
  3. Upload your image, and then with your widget still open, click the “Edit” button:
    wp image widget2
  4. Add this code to the caption field:
    wp image widget3
     <span>An amazing trip to Iceland</span><span style="color: #debfb4">a real experience for photographers</span>
  5. If you want this image to link somewhere, you can fill in the “Link to:” field.
  6. Then click “Save

You can change the colours using HEX colour code to customize the caption to the colours in the photo, much like I did for the banner in the demo and screenshot. The HEX colour for the second line is the #debfb4 that you see in the code.

You can see how I added the custom style for colour by using:

style="color: #debfb4" 

REMINDER – Just to remind you that this custom caption styling is only available when used in the Banner sidebar position.