Add a banner image with animated captions

Adding a front page banner is generally the first thing you would do. Although you do not have to have a banner, you can also put in a slider as well (I recommend Smart Slider 3). To help you with this setup, you can refer to another tutorial called “Add a Banner to your Page” which gives you additional information, but we will make this tutorial a quick one. We will make a banner like this:

Prepare Your Image

The first thing you need to do is prepare your image before uploading it. We do this by cropping and sizing it to your preferences. As a guideline, the demo site uses an image that has a size of 2560×750 pixels. The reason for this is to accommodate large screens that have that kind of resolution. This will allow the image to fill the widest viewable window without degradation of quality when viewed at that size.

Upload Your Image

You have a few ways of getting an image into your site for the purpose of creating a banner:

  1. Use the WordPress Media Library method to upload
  2. Use a plugin like Black Studio TinyMCE Widget which is a text widget that adds a fully functional editor to it.

For this tutorial, we will use the Media Library method to upload our image.

  1. Go to Media >> Add New
  2. Select your file and upload it
  3. Once it’s uploaded, click on the “Edit” text link off to the far right of the image upload area
  4. Look for the “Save” box and find the “File URL” and select then copy the URL that you see.
  5. Go to Appearance >> Widgets
  6. Drag a “Text Widget” into the “Banner” sidebar position.
  7. In the text widget, we need to do some HTML coding to add an image with the File URL we just copied and to paste it into our HTML code and include an ALT tag as well to provide a short description for the image:
    <img src="https://yourdomain.com/yourimage.jpg" alt="short description" />
  8. To show this widget only on the front page, you need to make sure you have the Display Widgets plugin installed or if you use Jetpack, enable the Widget Visibility module. You will want to show this on the Front Page.
  9. Click “Save” on your widget.

Adding the Caption

As you see in the demo and screenshot, we have a caption on top of the image. This part of the tutorial will help you get that added using some basic HTML that we will add to our text widget we inserted our image into. To make this easier for you, here is the code from the demo site:

<div class="banner-caption-content"> <h1 class="banner-caption-content-title animated bounceInRight">
<span style="background-color: #75AADA; padding: 0 12px">Creative</span> Business</h1>  <h2 class="banner-caption-content-subtitle animated bounceInLeft">Introducing an influential WordPress Theme</h2> <a href="#" class="banner-button">Download</a> </div>

Let’s Examine the Code

  1. First, we need to wrap our caption in a container that has a class of “banner-caption-content” applied to the div. This will allow the caption to float on top of the image.
  2. Next is the Creative Business title which is an H1 (heading) tag. You will notice is has another class added “animated bounceInRight” which I will talk about shortly, but this makes the caption title animated with the help of a plugin. This title also has a background colour to the first word of the title “Creative” which is wrapped in a span tag so that only this word has a background colour. If you want to change the background colour, you can change the #75aada HEX colour to one of your own.
  3. The next part is our second caption title level which is in an H2 heading tag — also containing animation.
  4. The last part is a text link that is styled to look like a button. The # symbol is only a placeholder link, so for you, an actual link (URL) would be added instead. The class “banner-button” is what styles the link to be a button.

Complete Widget Code

This is the complete code snippet, including the image, that gives you the front page banner like the demo site:

<img src="IMAGE LINK HERE" /> <div class="banner-caption-content"> <h1 class="banner-caption-content-title animated bounceInRight">
<span style="background-color: #75AADA; padding: 0 12px">Creative</span> Business</h1> <h2 class="banner-caption-content-subtitle animated bounceInLeft">Introducing an influential WordPress Theme</h2> <a href="#" class="banner-button">Download</a> </div>

Adding Animation

Adding animation to your caption requires just one plugin to achieve that kind of result you see on the demo site. This is not required, but it does add a nice effect to your web page. The plugin used is called Animate it! by eleopard and is free to download.

In our caption code, you will see the the first line of the caption title with this class “animated bounceInRight” and the other part of the caption uses a class of “animated bounceInLeft“. The key part here is that this is actually two classes:

  • animated
  • bounceInLeft (or bounceInRight)

To change the effect to a different one, you can refer to this online demo that gives you the effect class name: