It’s my mission to help you build an awesome website for what ever it is that you need a website for. The techniques you will learn in this tutorial can be applied to just about any kind of website.
Building a great website is all about clearly communicating what you website is about. We do that with the text that we put on our website and the web design style that we use. Combining great text with beautiful images wrapped up in elegant web design will help make you website and your mission successful.
So let’s do this!
This tutorial assumes that you already have website hosting, WordPress and the Divi theme installed. If you don’t I have a free tutorial that well help you get all of this setup correctly. Check out my guide on how to make a website.
This tutorial uses the Divi theme for WordPress. Divi has become one of my favorite tools for building websites. It’s easy to use and has a great number of design features plus tons of pre made website templates to help you get a quick start building your own website.
If you don’t have the Divi theme you can use the links in this article to learn more about it. These links are affiliate links they cost you nothing extra and may provide me with a commission that helps me to create free tutorials like this one. Thanks for your support.
Find out more about the Divi theme for yourself or check out my review of the Divi theme.
What’s covered in this web design tutorial?
- How to create a hero header area for your website homepage.
- How to create the effect of a solid background fading into an image.
- Creating side by side sections with an angled transition between them.
- Making sure that your website is mobile friendly.
- Separating a background image from your content using solid backgrounds
- Setting up the map modules
Creating a hero area
The first section of your website is often called a hero area. It’s the first thing that visitors will see when they land on your website. You want to use this area to communicate the most important aspect about what your website is about. The core of what you want visitors to know about you.
In this tutorial the example is a Bar and Restaurant. The most important things that a viewer needs to know are what’s the name of the place, what kind of a vibe or atmosphere does the the bar offer, or if you have a different type of business in one short sentence what is the main thing your business is about.
If your location is important you may want to include an address, if you sell on line you may want to link to your store or if you take orders or inquires by phone you should have your phone number right upfront.
In this example I’m using the background image to show the vibe of the bar and then the text is communicating the most important things for new visitors to know about this bar.
Check out the video at 2:00 and learn how I made the hero area in this example.
In this tutorial I used images from Unsplash. Unsplash is a great resources for free to use images on your website. I also have a post on other sources of free to use image for websites and other projects.
Create a fade from a solid background to an image.
In the next section of this website we have a solid background with some text that appears to fade into an image. A lot of web design is finding ways of combining images with the design tools that websites permit.
To create the fade effect I set the background of the section to a dark blue. Then in photoshop I used the exact same color and created a fade from the edge into the image.
On the website this makes it look like the background of the section has faded away to reveal the image.
Watch the video at 10:00 minutes to see how this is put together.
Creating side by side sections with an angled slash between.
If you want to add a little something different between sections on your website you can use angled edges between columns or sections. There are two ways of doing this one is by using an image something similar to what I did with in the previous section with the fade.
The other way of doing it is with code. I’m not a code expert by any stretch so I rely on helpful web tools and code snippets to add the code I need. The Divi theme makes it really easy to add code styling to your website. You can add code styling to just about any aspect of your site.
In this case we are going to add it between the columns in the row.
To get the code and to design your angles use this clippy tool https://bennettfeely.com/clippy/
To watch how this is used skip ahead in the video to: 14:20
Modifying complex designs to work on mobile.
Website design needs to work on more then just desktop computers. People will be viewing your website on all sorts of devices including phones and tablets. Making sure that your webpages look as good as possible on all devices is an important step in all web design projects.
Divi allows you to modify just about all aspects of your website so that you can make sure that it will look good on all sorts of different devices.
Almost all design elements in the Divi theme allow you to customize them for desktop, tablets and phones. You can also disable Sections, rows or modules for any of these types of devices. This allows you to disable aspects of your site for certain devices and substitute it with something that better suits specific devices.
In this particular example with the slash between two columns this won’t work well on tablets and phones because of the size of those devices. To fix this I suggest creating a separate section with all of the same content, but with a design that works better for mobile devices.
Learn how to customize your website for different devices check out the video at 22:33
Separate our text and other content from a background image using a colored background.
Sometimes in web design you want to use a busy background image in a section to add some texture to your website. The problem with this is that it can make it hard to read or see your content. One way to get around this is by using solid or semi transparent background around the content that is important.
One of the web design features that Divi offers is the ability to add a background color to any section, row, column, or module. They also recently added the ability to add drop shadows to give you another option and level of separation between elements on your website. Pretty cool!
Adding a background color is fairly easy. The one extra step that you need is to add some padding around your content so that your content has some space around it.
Skip ahead in the video to 27:27 and add some colored background around your content.
Setting up the Map Module.
If you own a local business and you want people to find you having a map on your website is a great idea. Divi includes a map models with a few different styling options.
To get the map module setup you will need to set up a google account and create a google API key. You can find a full tutorial on how to do that here.
Hope you learned some awesome new techniques for your website you that you got some ideas for your website.
Download this page as a template that you can use on your own website here:
If you have questions about this tutorial or suggestions for future tutorials let me know in the comments blow!