Advanced Background Techniques
One of the best ways to add design flair to your website is taking advantage of the different background techniques Divi offers. Today, we’ll go over two different advanced techniques for backgrounds.
- Adding Video Backgrounds
One of the easiest ways to spice up your backgrounds is to use a video. To start out, add a Fullwidth Section and add the Fullwidth Header module.
Next, in the Content tab, add your text or logo in the corresponding section. Then, scroll down to the Background section and add your video.
Now that you have your header and background taken care of, move over to the Design tab to take care of formatting. First, set the header to be fullwidth. Then, if needed, add a color overlay to your background in the overlay section. In this example I used the color rgba(1,89,147,0.49) . This helps maintain consistent color through your site and can also help keep logos or text clearly visible.
There you have it! Once you’ve completed these steps, hit Save & Exit and update your site. Your new header should be up and running!
2. Gradient Covered Backgrounds
One of the coolest updates featured in the latest version of Divi is the ability to layer Gradients over Background Images. This helps maintain color scheme consistency throughout the site and helps maintain text visibility, while still adding design flair. To start out, add a new Fullwidth Section to you page and add a Fullwidth Header.
Next, under the Content tab, enter your desired text and scroll down to background. From there, add your gradient. In my example, I used the colors rgba(157,34,53,0.6) and rgba(255,255,255,0) . Set Gradient Direction to 145deg , Start Position at 60% , and End Position at 60% (any percentage under 60 will work.) Finally, enable the setting labeled Place Gradient Above Background Image.
Next, select the Image tab in the background and place your selected image. The preview window will show the image with the gradient over it.
Now let’s move over to the Design tab to take care of formatting. First, change your Text Color from Dark to Light. Then, under the Title Text settings, change the Font Weight to Bold, alter the Font Style, and change the Font Size to 64 px.
Finally, to help with spacing, navigate to the Advanced tab and under Custom CSS, enter padding 150px; in the Main Element area. This will add space around the text and show more of the image.
Once you’ve completed these steps, hit Save & Exit and your new header is ready to go!
Now that you have these techniques in your tool kit, you’re ready to take your site to the next level! Happy blogging!