Create a Banner Caption Box like the Demo

When you see the live demo site for Senses Lite, you will notice I have a banner image showing on the front page. This tutorial will help you to add one to your page like I did. Although there are a few ways you can do this, I will help you based on my method. There are plugins that lets you install an image or banner widget, allowing you to upload and set an image, but we are adding a caption box so this will require a text widget because we need to add some HTML code.

Prepare your Image

When you prepare an image for your banner, you can use this as a guideline:

  • Front Page banner images are normally bigger for a showcase effect. The size I am using on the demo is 2560 x 625pixels. This will accommodate large screens, but will adjust in size as the screen becomes smaller.
  • Inner Page images are smaller, so I would recommend something like 2560 pixels in width, but your site can also be any height you want.

Maximum size for a Banner Image = 2560 pixels in width, but your height can be anything you want. If you use the boxed layout for the site, then you can make your width the width of the boxed setting you choose. For example, if you select the boxed size of 1920px, then your image only need to be the maximum of 1920px and not 2560px.

Upload Your Banner Image

Now it’s time to begin adding our content by using a text widget, which is how I did the live demo site.

  1. Go to Media >> Add New
  2. Upload your front page banner image and then click on the text link “Edit“.
  3. At the top right section of your image edit screen is a File URL field. Click inside that and copy that URL and save it somewhere because we will need it soon.

Prepare Your Text Widget

  1. Now to to Appearance >> Widgets, and drag a text widget into the “Banner” sidebar box.
  2. Title it !Front Page Banner (with an exclamation mark right in front so that our title is hidden on the front-end). This is from the “Remove Widget Titles” plugin that lets you hide the widget title.

Add This Code…

Now we need to copy & paste some HTML code so that our Caption Box will float above the image and give us our captions.

<img src="IMAGE LINK HERE" alt="autumn leaves"/><div class="banner-caption">Explore Nature's Beauty<span style="color:#E3C575;">Photographic Blogging</span></div>

Now we need to replace some content in our HTML code you see above.

image source - Replace this with the copied File URL you saved when you uploaded your image
autumn leaves - Change this to be your own short description for the image
Explore Nature’s Beauty - Change this caption title to your own.
Photographic Blogging - Change this to your own caption content

The caption content part shows embedded styles for the text colour to be green with #E3C575. You can change this or add colour to the caption title as well. Embedded styling for this is just as you see above:

style="color: #e3c575;"