The first step is uploading your image and finding its URL. You can do this by adding an image (or replacing an image) with the one that you'd like to use for your background. Once you've done that, open the code panel to find the URL of the image and copy/paste it somewhere convenient to use in the next step.
Next you need to click on the CSS tab and create a custom class by copy/pasting the code below:
background:linear-gradient(rgba(45, 52, 54,0.75), rgba(45, 52, 54,0.75)),url('#');background-repeat:no-repeat;background-size:cover;background-position:center;
You can customize the RGBA values to whatever color and opacity that you want to use for the background. I personally love using flatuicolors.com to find colors and you can even have it copy/paste them for you in RGBA format.
I also recommend customizing your images positioning. For example, if part of the image is cut off on mobile and you'd prefer it to cut off the bottom (instead of the top and bottom) or vice versa, you can have the
background position set to the
top center (to have the cutoff happen to the bottom of the image) or to
bottom center (to have the cutoff happen to the top of the image). You can also replace
right for even more control.
The next step is adding the CSS class that you just created to your section's HTML. Click on the HTML tab in Versoly and scroll to your header
section to find the code you need to edit. If you only see a few lines of code then you need to click on the section because you probably only have one element selected (which limits the amount of code you're shown in the editor).
In the example image below, you'll see that I had to replace
bg-transparent with our new class,
bg-hero. You may not have any class for your background so you might not have to delete anything. If that's the case, just type in the
Now that the code is done, you can change the color of your text and delete any unnecessary elements that are left in your header.
Now the final step is to center your elements. Look for the class highlighted in the screencap below. That div controls the widths of the columns.
Versoly is built using Bootstrap which is a CSS framework that uses a 12 column gridsystem. The element in the example is only taking up about 42% of the screen because the class
col-xl-5 tells the div that our content is in to only occupy 5 of the 12 columns (5 divided by 12 is about 42%). We can change every number in each
col- class to 12 to have our content use the full width.
In this example, we change
<div class="col-md-12 col-lg-6 col-xl-5"> to
<div class="col-md-12 col-lg-12 col-xl-12"> With that change made, you're all set! You might just need to set the text to be centered for each text element and button in your header.
If you have any questions or want to see other Versoly guides, please contact me and let me know! I also offer free 30 minute digital marketing consultations if you have projects that you would like help with.