When you see the live demo site for Aberration 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.
NOTE You can also put sliders in the “banner” sidebar as well.
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 900pixels. This will accommodate very 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.
- Go to Media >> Add New
- Upload your front page banner image and then click on the text link “Edit“.
- 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
- Now to to Appearance >> Widgets, and drag a text widget into the “Banner” sidebar box.
- 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 banner image will show. Make sure you use your full path to your image and then add a short description for the image in the ALT tag.
<img src="https://yourwebsite.com/link-to-image.jpg" alt="short description"/>
OPTION You can use an image plugin instead of a text widget method shown above if you want something a bit easier. Check out the “Image Widget” plugin:
Show Your Banner on Select Pages Only
This part applies, not only for a banner image, but for displaying any kind of widget on select pages only. By default, WordPress will show your widget on every page that the sidebar you are using exists. To have control over where we want our banner image to show (or other widgets), we want to use a plugin for this. I’ve got another tutorial about this….