Despite the navbar, a cover section could be the very first thing that will appear in your web page. Full-width images or blurry background videos are captivating tools that could help you delivering your message or gaining the visitor’s attention. Here you will see how to create and customize a Cover section with a background image.
First of all click on the “+” icon on the left panel
Drag and drop the Cover section in the position you prefer. You will notice that the right inspector has switched to the ELEMENT tab. There you have all the settings to fully customize this section. Play with the settings until you reach a nice layout.
Inserting a background image is just one step away: there’s a field called IMAGE. Paste there the URL of the picture that you want to set as your cover and the trick is done. It could be an absolute URL or a link to a local directory, depending on where the image is stored. In this case we are using a free picture from Unsplash.
It seems that the white text isn’t suiting this image. On the right inspector there’s the COLOR selector that would change the element color. In this case dark seems a much better option than white.
Clicking on the HTML source panel at the bottom let you see the new section, that corresponds to the HTML code below here:
<div class="pt-5 text-white bg-primary" style="background-image: url("https://unsplash.it/1500?image=735");"> <div class="container"> <div class="row"> <div class="col-md-6 text-md-left text-center align-self-center my-5"> <h1 class="display-1 text-dark">Color intro</h1> <p class="lead">A background with color. One is enough.</p> <div class="row mt-5"> <div class="col-md-5 col-6"> <a href="#"> <img class="center-block img-fluid d-block" src="https://pingendo.github.io/templates/sections/assets/download_android.png"> </a> </div> <div class="col-md-5 col-6"> <a href="#"> <img class="center-block img-fluid d-block" src="https://pingendo.github.io/templates/sections/assets/download_ios.png"> </a> </div> </div> </div> <div class="col-md-6"> <img class="img-fluid d-block mx-auto" src="https://pingendo.github.io/templates/sections/assets/iphone_cover.png"> </div> </div> </div>