Build a Wordpress Website with Divi the Easy way

Name: Build a Wordpress Website with Divi the Easy way
Rating: 4.9 (9 reviews)

A complete, step-by-step guide to set up your Wordpress website and design web pages with the Divi builder

Created byMarc Rodan

Last updated 4/2024

English

What you'll learn

Understand the difference between web builders (Wordpress) and theme builders (Divi)
Choose a good domain name and fitting web host for your website
Install Wordpress and Divi, including recommended plugins and settings
Create your own email and set up your mailbox correctly
Design a sample web page from scratch, from concept to completion
Make your web page responsive, so that it works well on any device
Increase the visibility of your website on Google and other search engines

Course content

3 sections • 32 lectures • 3h 3m total length

Welcome1:45
Welcome! This course is brought to you by Marc Rodan, his friend Pim and KREW Community.
Marc Rodan is an e-learning specialist who creates engaging e-learning modules for major corporates around the world, such as Philips, Schneider Electric, Amadeus, Vanderlande, ASML and more. Marc originally created this course as a side project for his entrepreneurship community KREW. He decided that more people could benefit from the course by making it available to the public through Udemy.
Why a (new) website?3:00
Who are you going to build your website for?1:14
Project and resources
Comparing website builders: Why Wordpress?9:42
Comparing Wordpress theme builders: Why Divi?6:57

Part 2: Setting up your Wordpress website0:28
Decide on your domain name10:06
Choose your web hosting company5:07
Install Wordpress in one click (kind of)2:27
Set up your emails4:31
Set up your Wordpress settings11:16
Install the Divi theme4:38
Action at 2:07 - To copy Pim, you can buy the Divi theme here at the Elegant Themes website. If you plan on building more than one Divi website, we highly recommend buying the lifetime version. If you are still unsure about Divi and simply want to try it out, you can opt for the cheaper annual version instead.
Set up your Divi theme options7:23
Action at 0:30 - To copy Pim, you can use the logo from the 'Project and resources' .ZIP-file in 'Assignment 1'. The file is called '2. Logo - Socialrocketeers.com'. Of course, you may also use your own logo.
Customize your theme16:09
Action at 2:00 - To copy Pim, you can use the favicon from the 'Project and resources' .ZIP-file in 'Assignment 1'. The file is called '3. Favicon - Socialrocketeers.com'. Of course, you may also use your own favicon.
Install your Wordpress plugins25:39
Ready to design?0:25

Time to design!0:33
For the purposes of this course, we created a website for a fictional company: Social Rocketeers.
You can either choose to design the same website as we did, or you can use your own media to design a totally different website from the start. We recommend designing the sample website as we did first, so that you are better equipped to design your own website after. Good luck!
Create your wireframes3:22
Action at 2:53 - You can find the high-fidelity (hi-fi) wireframe Pim uses in the 'Project and resources' .ZIP-file in 'Assignment 1'. The file is called '1. Wireframe high fidelity - Socialrocketeers.com'.
If you want to start building your own website already, we suggest creating a simple wireframe on a piece of paper, much like our example shown at 2:32. Once you learn more about Divi and its capabilities, you can design hi-fi wireframes as well. However, you may not find designing hi-fi wireframes necessary (unless you need to convince a client) and that's perfectly fine. Wireframes are simply a tool to help you determine the general outline of your web pages before you start building them.
Build your page in sections2:28
Now that we start designing, it's possible that you run into technical issues with Divi. This could have all sorts of causes, like not properly updating Wordpress or Divi, plugins that interfere with each other, or even something that you need to configure in your web hosting dashboard.
In case you run into issues, we recommend first visiting the Divi Theme Documentation at Elegant Themes. It's a great and extensive library with lots of useful tips. If you can't find the answer you're looking for (or if you don't have the time to look for it), please ask your question right here on Udemy. We'll do our best to answer it as quickly as possible... plus, it's a great way to help other students with similar issues as well.
Add images to your web page4:52
Action at 2:50 - To copy Pim, you can use the background image from the 'Project and resources' .ZIP-file in 'Assignment 1'. The file is called '4. Hero header background - Socialrocketeers.com'. Of course, you may also use your own background.
Add text and dividers to your web page12:06
Add a down arrow and anchor links4:13
Action at 0:28 - To copy Pim, you can use the arrow image from the 'Project and resources' .ZIP-file in 'Assignment 1'. The file is called '5. Down arrow - Socialrocketeers.com'. Of course, you may also use your own arrow or no arrow at all.
Add a button5:54
Add a color overlay3:24
Action at 0:15 - To copy Pim, you can use the background image from the 'Project and resources' .ZIP-file in 'Assignment 1'. The file is called '6. Opt-in Form Background - Socialrocketeers.com'. Of course, you may also use your own background or simply a Divi gradient/color.
Add an opt in form6:21
Add your USPs & an interruption text2:56
Action at 0:22 - To copy Pim, you can use the three USP images from the 'Project and resources' .ZIP-file in 'Assignment 1'. The files are called:
'7. USP 1 - Socialrocketeers.com'
'8. USP 2 - Socialrocketeers.com'
'9. USP 3 - Socialrocketeers.com'
As always, you may also use your own images. Just make sure that their dimensions match, so that they will align nicely on the web page.
Action at 2:10 - To copy Pim, you can use the .GIF-image from the 'Project and resources' .ZIP-file in 'Assignment 1'. The file is called '10. Background GIF - Socialrocketeers.com'. Of course, you may also use your own GIF, PNG or JPG... or no image at all.
Add a contact form5:50
Make your web page responsive2:15
Create your website footer4:46
Add your website menu5:13
Help people find your website on Google6:32
A final request
Congratulations!2:10
Once again, congratulations and good luck with building your own website(s)!

Requirements

No prior web design experience needed, you will learn everything you need to know in this course
There is no need to purchase anything before starting this course, although we recommend buying a domain name, web hosting and the Divi theme after enrolling to experiment with web building yourself (about 100 UD)

Description

If you want to know how to build a Wordpress website, this is the course for you!

After this course, you'll know how to design your own Wordpress website using the Divi theme, which is easy to use for beginners but offers a lot of freedom if you want to create more unique designs. No prior experience with web building is required. We will clearly explain every step along the way.

Note: this is a practical, step-by-step course with a website project (and materials) included. We will be building a website for a fictional company, called Social Rocketeers, from scratch.

Since we'll be building a website for a small business, this course is especially useful for entrepreneurs, freelancers and small business owners. However, the skills that you'll learn will allow you to build any website. This course will give you a great foundation to start building and experimenting yourself!

Part 1: Introduction

Which different types of websites you can build
What web builders are and why Wordpress is so popular
What theme builders are and why we love using Divi

Part 2: Setting up your website

How to choose a good domain name
How to decide on your web hosting provider
How to install Wordpress and Divi
Which settings we recommend and why
Which plugins we recommend and why
How to install your emails

Part 3: Designing your web pages

How to design your web pages
How to make sure your website doesn't slow down
How to increase your website's visibility on Google
How to make your website work on mobile devices
And everything in between!

About your instructors

Pim built a successful website and web hosting company from scratch in the Netherlands. He has over 20 years of experience with creating Wordpress websites and... fun fact: he used to be a professional snowboarder!

Marc Rodan is an e-learning specialist, professional web developer and creative entrepreneur who runs multiple businesses. He created and edited this course from behind the scenes. If you have any questions or suggestions about this course, he is the one to reach out to.

Who this course is for:

Beginner web designers who want to learn how to work with Wordpress and/or Divi
Freelancers, small business owners and entrepreneurs who want to design a website for their business

Build a Wordpress Website with Divi the Easy way

What you'll learn

Explore related topics

Course content

Part 1: Introduction5 lectures • 23min

Part 2: Setting up your Wordpress website11 lectures • 1hr 28min

Part 3: Designing your web pages16 lectures • 1hr 13min

Requirements

Description

Who this course is for: