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:
Nice done, but this is how you can do this by using the default WP Image widget:
- Go to Appearance >> Widgets
- Drag an Image widget into the “Banner” sidebar position (this is only for this sidebar position)
- Upload your image, and then with your widget still open, click the “Edit” button:
- Add this code to the caption field:
<span style="color:#fff;margin-bottom:10px">Working From the Coffee House</span><span style="color:#dfd8be">What could be better that enjoying your surroundings</span> - If you want this image to link somewhere, you can fill in the “Link to:” field.
- 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 #dfd8be that you see in the code.
You can see how I added the custom style for colour by using:
style="color: #dfd8be"
REMINDER – Just to remind you that this custom caption styling is only available when used in the Banner sidebar position.