Shortcodes – Banner Caption

If you are setting up a banner image with caption like the demo site has displayed, this shortcode tutorial will help you through the process…which is fairly easy. We will be doing this:

 

Step 1 – Prepare your Image

Before we do anything, you need to prepare your photo by cropping it and sizing it to suite your banner needs. Maximum (recommended) width is 1150 pixels, but your height can be almost anything. This theme is responsive, so as your website is viewed in mobile devices, the image banner will self-adjust in size and it will do it by maintaining its aspect ratio.

Upload your photo to your Media Library and capture the image file URL (the path to the image) by clicking on the edit link after uploading, or click on the image from your media library.

Step 2 – Setup Your Widget

Now we need to go to your widgets area of the admin and drag a “Text Widget” into the “Banner” sidebar position. Title your widget anything you want, but place an exclamation mark in front of your title to hide the widget title from the front-end of your website. To do this though, you need to have the “Remove Widget Titles” plugin installed and active. More on this plugin HERE.

In the widget, type in this HTML code:

<img src="http://www.yourimagepath.com/image.jpg" alt="short description"/>

The URL you see there is the path you will replace with the one for your image. The alt tag is for adding a short description of your banner image here (keep it short).

Just below this HTML image code, we will now add in our Banner Caption shortcode which is this:

[incept_bannner_caption title="Welcome to Incept" subtitle="Experience modern design for e-commerce"]

Replace the content to be your own:

  • Welcome to Incept
  • Experience modern design for e-commerce

Now you can “Save” your widget.

If you are using an Editor based text widget, such as the “Black Studio TinyMCE” plugin, you can insert your image from that, as well, use it to insert the shortcode from the editor.

Using this method is as follows…

Insert your image, but for your shortcode, we will use the shortcode Banner Caption editor button and then fill out the attributes:

bannercaption editor button

bannercaption2

  • Banner Caption Title – This is the caption title
  • Banner Caption Subtitle – This is the second line for your caption