My web design tutorials are all about helping you to find easy ways of making cool looking websites. Many of my web design tutorials feature the Divi theme, because I have found the Divi theme to be one of the easiest ways to build great looking websites.

This tutorial assumes that you have already setup your website. If you haven’t I have a full tutorial that will help you get started building your website.
Creating a full height background website section

For the first section of this website I want the section and the background to be full height. To accomplish this we just need to add in a little bit of code.

The code we need is:

 height: 100vh 

We need to place this code in the section setting under Advanced, Custom CSS and then Main Element.

When ever I need code like this I look it up. Since I use the Divi theme I don’t really need to use code all that often. When I need a little extra help figuring out what code to use I often go to a source like w3schools.com.

To see how this section was created check out the video at 7:14

 

Creating A Custom Background Gradient

 

The Divi theme offers a lot of different styling tools. Including the ability to ad a gradient background to sections, rows or modules with in your site.

For this particular site I wanted to add a custom gradient background. So instead of going from one color to another color, like from black to dark purple. I want the gradient for this background to go from black to dark purple then back to black.

Here’s what it looked like on the page.

To create this custom gradient I found a great tool online. It allows you to select from multiple different gradient templates. You can modify the colors used and then copy the css code used to create the gradient.

Using a css generated gradient can be a great way to easily add an interesting looking background to your website.

Watch how I created this section step by step in the video by skipping ahead to 9:20

Creating A Video Background On Your Website

A video background can be a great way to draw attention to a section of your website. It can also be a great way to visually communicate some information to your audience.

There are a few keys to success with a video background.

First you want to make sure that your video is compressed as much as possible. I would recommend having your video file size be less the 1 MB. This means that you video should be short. The example I have is about 15 seconds and that you can expect the quality to be a little bit blocky. The most important thing is that your website loads quickly. To load quickly the file size must be small.

The next important thing to consider when using a video background is that if there is any single part of the content that is the most important it should be in the center of the video. Since Divi and most websites today are responsive the size of the window that your audience will be using will vary. This means that the edges of your video background may get cut off. So anything that is really important in your video should be in the center.

Lastly video backgrounds should not be used for mobile websites. Create a separate section for your mobile viewers that does not have a video background. Most mobile browsers don’t support video so just skip it for those viewers.

The Divi theme has setting that allows you to control what sections, rows, modules and setting are for different sized devices so use that tool to create a separate section with out the video background for your mobile viewers.

To watch how I used and created the video background in this section skip ahead in the video to: 23:17

Creating a biography section: Overlap sections and modules on your website.

This is a bit of an advanced technique. I have also found that sometimes it just doesn’t work right. If you find that it’s not working for you I’d recommend just going with a different design idea rather then making yourself crazy trying to get this to work.

The first thing that you should look at is the basics of how this function works. Here is a great article that talks about how to use the z-index property.

The key to it is that lower numbers will appear behind higher numbers.

In order to get elements to overlap you will need to do two things. The first is to use negative margin on the element that you would like to be on top. You want to use negative margin in the direction that you would like it to over lap. If you the element that you want to over lap is to the left you should add negative margin to the left.

The second thing that you need to do is to add in the z-index property in to the Custom CSS. The item that you would like to appear on top should have a higher z-index from the item that you would like to be below. Negative numbers can be used.

Below are the setting that are applied to the “Sasha” text box.

Watch how I create the over lap effect step by step by watching the video starting at: 29:17

 

Get more real website hints in your email!

Sign up for our email list and get more hints and tips right in your email!

You have Successfully Subscribed!