Just like the demo site shows, I will show you a little extra bonus thrown into the theme here for you. We are basically going to take advantage of the default WordPress Custom HTML widget and create a banner image with a caption box.
We are going to play with a little code, so don’t get too scared about this as I will give you the extact code you need to make this amazing banner jump off your page! The code we will use as a template is what I am using on the live demo site:
<div id="custom-banner-wrapper" style="background-image: url(https://demos.bloggingthemestyles.com/marjoram/wp-content/uploads/sites/20/2018/05/marjoram-banner.jpg)"> <div class="valign-container image-overlay"> <div class="valign-outer"> <div class="valign-inner"> <div id="custom-banner-caption"> <h2 id="custom-banner-title"><a href="#">Welcome to Marjoram</a></h2> <div id="custom-banner-content"><p>Lorem ipsum metus curae felis nulla urna ornare fringilla, condimentum leo vestibulum felis platea tristique eu convallis, quis a etiam…</p></div> <div id="custom-banner-readmore"> <a href="#">read more</a></div> </div> </div> </div> </div> </div>
The only thing you will need to do (very carefully not to delete any HTML source code), is to update the caption text parts only and the full link URL to the image.
Step 1 – Get Your Image Ready
This banner caption is putting your image in as a background image and not an actual image in your page as though you insert one into a page or post. Even if your image is small, it will stretch it to fill the area, so I recommend using an image that is large enough that it still looks sharp and amazing. The image size I used in the demo site is 1920×620 pixels, so you can use that as a reference point. I wouldn’t go below 1200 pixels though unless your photo is absolutely sharp and top quality.
You will need to upload your image to the Media Library and what is really important is to copy the image URL. You can see how I did it in the first part of the code above that I used:
https://demos.bloggingthemestyles.com/marjoram/wp-content/uploads/sites/20/2018/05/marjoram-banner.jpg
Step 2 – Copy the Code Above
Now you can copy the batch of code I have above as a template and then head over into the Widgets area of your dashboard. Drag a Custom HTMl widget into the banner sidebar position and paste the code into it. Now you can update/change the information:
- The URL to your image
- The Caption Title which is the Welcome to Marjoram
- The Caption Intro which is the Lorem ipsum….
- The Caption Button with the Read More and also replace the # symbol with the full URL/link to whatever you are linking to.
Now you can save your widget and view the front of your site.