Make a Banner with a caption like the demo site

Prelude comes with a pre-styled banner caption option that you can use to make photo banners like the demo website displays on the front page:

banner demo

To help you get started, I will give you a code snippet (see below) so that it’s easier to get a banner published without much effort. However, before we get started, you may discover a banner with caption is already showing when you first install and activate Prelude. This is only a demo banner that can be disabled…

Disable The Demo Banner

  1. Go to Appearance >> Customize >> Site Options
  2. Look for the “Show the Demo Banner Image” setting and uncheck the box
    demo banner setting
  3. Click “Save & Publish

Create Your First Banner with Caption

  1. Prepare your banner image before uploading it by cropping, sizing, and if possible, optimizing your photo. See the “Image Size Guidelines” further below.
  2. Upload your photo to the Media Library and make sure you copy the File URL by clicking on the edit link to find it.
  3. Go to Appearance >> Widgets
  4. Drag a “Text Widget” into the “Banner” sidebar position
  5. Title your widget with an exclamation mark ! before the name (more on this later)
  6. Copy and paste the Banner code snippet you see below into the text widget and then begin to edit the content, including the path (File URL) of your own banner
  7. Click “Save” on the widget.

Image Size Guidelines

If you plan on using the full width setting for your website, you should have a large image to accommodate large screen resolutions, such as 2560px in width. However, if you plan to use a boxed style for your website, then you can make your banner image smaller. We will use the live demo site (which is using the Full Width boxed setting for Emotions as a guideline for your banner image size, but the important dimension is actually the width; height can be whatever you want.

Demo Site Banner Image = 2560×850 pixels

If you plan on using the “Boxed” styles for your website, then you can use the boxed style widths as a guideline:

boxed settings

Using the boxed style dimensions for your banner image widths, you can decide what your height of your image will be. Everyone will have their own preference, but the key dimension is the “width“.¬†

Banner Code with Caption

<img src="http://demos.shapedpixels.com/prelude/wp-content/uploads/sites/19/2016/06/banner.jpg" /> <div class="banner-caption animated fadeIn"><p class="banner-caption-1" style="color: #000">Personal Blogs Begin Here</p><p class="banner-caption-2" style="color: #a05252">...and to focus on what counts!</p> </div>

After copying and pasting the above code into your text widget, now we need to update the content and the path to the image. Here is a breakdown of the code:

  • The img src is the path to the banner image
  • The banner-caption-1 is your caption title
  • The banner-caption-2 is the second caption line of text content
  • The link is the button to whatever you want it to link to

Animation

You may notice that there is some fancy animation happening with the banner when it loads up in the browser window. The code above has some animation classes added to make that happen. To add animation to an element, start by using a class of animated followed by the animation effect you want. For example, the caption title is using fadeInDown as the effect.  Here is a reference of various animation effects you can use:

Animate It!

When you try out the different kinds of animation effects, remember the name of the effect and then use that in your banner caption code. You can use different ones for each element to get the different animation effects you see on the live demo.

Caption Colours

You will notice in the caption code there are inline styles with the colour black (#000) in the first caption, and burgandy (#a05252) for the other caption. This allows you to colour your caption and button that best works with the type of photo you are using. Try to create enough contrast between the caption text and that of the photo.

Note The #a05252 type code is HEX colour values.