Get all themes with lifetime updates for 95 USD. View all promotions

Create a banner image with a caption box

Visually pleasing to see at the top of your page, a banner image with a beatifully styled caption box that floats on top is a nice touch to any website. 

banner caption screenshot

Luckily, all that you have to do is upload an image and copy & paste some code which I will give you further below.

Step 1 – Prepare your Photo

First thing is to prepare your photo which includes finding the right photo (preferably a good quality one), cropping it, sizing it, and optimizing it so that the file size is not too large. The size of photo can be almost any height that you want, but I recommend a width of 1140 pixels — which is the width of the page content area. For reference, the banner used on the demo site is 1140×510 pixels.

Step 2 – Upload your Photo

Now you can upload your banner image to the Media Library. Once you do this, get the file URL of the image by clicking on the “Edit” for the image. Copy that URL and save it for the next step.

Step 3 – Create Your Caption Banner

Now you need to go to the Widgets area of your admin (I don’t recommend using the widgets tab of the customizer for this) and drag a “Text Widget” into the “Banner” sidebar position. On the widget, switch to the “Text” tab and copy the following code into it:

<p><img src="https://yourwebsite.com/yourimage.jpg" alt="My Banner"></p>
<div class="banner-caption-outside"><div class="banner-caption">
<h1 class="banner-caption-title" style="color: #5ea1af;">Blogging in Style</h1>
<p>Built Especially for You!</p>
</div></div>

Now replace the image URL in the code with the one for the image you uploaded to your media library. Don’t forget to type in an ALT description for the image (where it says alt=”My Banner”). Now you can also change the “banner-caption-title” to be your own, as well, the sub intro text “Built Especially for You!“.

You might notice I have some embeded CSS styling for the title which is the bluish colour you see in the screenshot above. You can change the colour to your preference, or just simply use the default colour of black by removing this:

style="color: #5ea1af;"

If you want to link anything such as the caption, or perhaps add a link directly into the caption box, you are free to do that. To make a text link a button, add a class to the link like this:

<p><a class="btn btn-default btn-sm" href="#">Button</a></p>

You could place that just below this:

<p>Built Especially for You!</p>

After you’ve copied and pasted the banner caption code into the text widget (Text view), it should look similar to this:

banner caption text widget