Divi Theme Course to Become a WordPress Pro!

So now in this tutorial, we will purchase a hosting and create a domain.

Domain: When referring to an Internet address or name, a domain or domain name is the location of a website. For example, the domain name "google.com".

Hosting, in its most generic sense, is a service through which storage and computing resources are provided to an individual or organization for the accommodation and maintenance of one or more websites and related services. While hosting doesn't need to be IP-based, the vast majority of instances are web-based services that allow a website or web service to be globally accessible from the Internet.

Hosting is also known as Web hosting or website hosting.

So now take a look at some general settings. I will show you how to log in and log out.

Before start designing a website we should have to make some general settings so WordPress will work fine.

In the user's section click on profile, here you can make changes to the user profile > admin color screen you can change it, and the dashboard color was changed. Scroll down next to the username you cannot change the username button you can change the appearing name. If you add a blog and you show your name as an author, you can add your custom name here.

Remember one thing add an active email so if you forget your password WordPress will send a link to your active email after that just click on update profile now your profile was updated.

In this tutorial, we will purchase and install the Divi theme.

Purchase Theme:

For this go to elegantthemes.com. You can see our pricing button click on it. It will take you to their pricing tables. Here you have two options lifetime access and yearly access but this is not a one-time fee. But you can find lifetime access. You can buy it for lifetime access. It's a one-time fee and also it gives you a money-back guarantee, So click sign up today, and next, you have to add your account your name, email password, card number, etc. Now it will take you to your account page where you can download your theme.

Install Theme:

I simply go to my website and then dashboard now I will click on appearance and themes. To install the Divi theme I will click on add new

now go to the upload theme and choose the file now I will choose the Divi theme file from my computer. I choose it and then click on install now. The theme will be installed. Then click on activate. now the theme will successfully install.

Now you can use the Divi and Divi theme builder to create new pages and post on your WordPress website.

Create Pages

What we are going to do will create some pages so if you visit your website you can see on the header no menu appears and we don't have created any page yet so go back to your dashboard and we will create a page for this I will click on pages and it will take you to your pages setting as you can see two pages, privacy policy and sample page which is a default created by WordPress.

So I simply delete these pages, to delete them click on the trash now the page was deleted.

Create Menus

To create menus go to appearance and then click on menus. At the top, you have to add the menu name. I will add Primary Menu next you have to add menus you can add post custom links, categories, or pages I will add pages so I will stack them all, and then click on add to the menu you can adjust them by dragging and dropping now it will appear like that and it looks perfect at the end you have to select footer menu or primary menu I

will select only the primary menu and then click on the save menu now you have successfully created menus. Now visit the site you have successfully added menus to your WordPress website.

Ready to now start designing the website using the Divi builder.

Access the Builder:

So there are two ways to access the visual builder. On the top click on enable visual builder and this will allow you to build your website on the front end also if you click on edit the page there is also another button to use the Divi builder on every single page.

On the top of the page, it says Use the "Divi Builder". Go ahead and click on the use the Divi builder.

Open Divi Editor:

So now we will start building a new website similar to the demo website.
Now go to your website and click on the blue button and add our regular section.

Now before adding the row edit section, I will click on the clear button, go to the background and then click on the gradient. I will add a gradient background so I will click on add background gradient select color, I will select this overlay color now scroll down here layers gradient above background the image I will enable it. Now go to image background and click on the add background image.

Now after creating the hero section we will create a sign-up form section.
The question that came into your mind is

What is the Sign-up Form?

A signup form is a web page, popup, or modal where users enter the information required to access that website's services. The information collected is determined by the nature of the website and the services it offers. Most signup forms require a name, email address, username, and password.

Okay so after creating the signup form section we will create the "About Us Section". The first thing that you have to know is

What is the About us Section?

The about us section helps online retailers develop a relationship with customers and build trust by putting a face and a story to the name on the storefront. About us section/page serves much the same purpose for retailers who sell less-common or unique items as well.

Design Section:

I will add a new section click on the plus button and then click on the regular section I will not add any row yet first I will edit the section simply I will go to sizing in the spacing of this section and I will add 80 pixels of padding on top and bottom now click on this pick button click on this plus button and add a two column row. Then I will add a code module. Now scroll down go to backgrounds click on the background image and then click on add image.

Now I will select this background image and click on upload an image this image is similar to this image now go back to your page and go to design in sizing give it the height of 500 pixels now scroll down and go to animation give it a fold animation to the center now go to advanced open custom CSS and add in main element CSS code.

Okay so after creating the about us section we will create this our icon

boxes to show our expertise.

So do you want to know what is icon boxes?

Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. In this video tutorial, you will see the various options you get to customize every element of this widget: the icon, the headline, and the description.

Design Icon Boxes:

Go back to the editor and click on the green plus button to add a new row select row with four columns. Now in the first column, I will add a blurb module. Next, you have the title which is actually the expertise that you are going to add. I am going to type website design under this you can add your description I will add a dummy text layer there is the image and icon you can use an image related to your expertise or an icon so I will select an image. I have uploaded these images to my media library so I will select this one website design and click on upload an image.

Now go to design at the top image and icon I will make its placement to the top and make its width to 50 percent, make its alignment to center, now collapse the image and icon section and go to text section make the text center aligned.

Now collapse this section and go to the title text this website design title is actually an h4 heading so I will go to the h4 tab, and change the font to Roboto. Now make its size to regular, and make it underline as you can change its color I will enable hover for the desk desktop, I will make it blue and for the hover, I will make it white and its size to 20px.

Okay so now after creating the blurb icon boxes to show our expertise we will move to create a call to action section.

So what is the call to action section?

Call to action is a marketing term for any design to prompt an immediate response or encourage an immediate sale. A CTA most often refers to the use of words or phrases that can be incorporated into sales scripts, advertising messages, or web pages, which compel an audience to act in a specific way.

Design the Section:

Go back to the editor click on this blue button and add a regular section, first of all, I will edit this section so I will click on this gear button first, I will go to the background and add a gradient background I will click on the plus button now I will change the gradient background color. Now click on the stick button and go to the second color and add your code

now scroll down here I will place the gradient above the background image now I will click on the image background click on this plus button and I will choose this image from my media library click on upload and

the image now I am done with this section click on the stick button click on this plus button and again add a single row now in the row first I will add the text module.

Next, I will add a text call to action now go to the background click on this plus button and paste the code. Click on the stick button and go to design in the text I will change the font to Roboto make it regular and then uppercase now change its color to white and make it 16 pixels.

I will also change its line height to 1.8 em now in alignment, I will make it center aligned.

After creating a call to action button we will move to create our services section. so the first thing to know is that

What is the service section?

A services section on your homepage lets you quickly highlight the services to potential customers and clients. It is usually a compact area in the layout of your homepage or landing pages.

After creating a call to action button we will move to create our services section. But just go back to your website now I will add a new section for this I will hover over here and then click on this blue plus button.

Now add a regular section before adding a row go to section settings and click on this gear button, go to design, and open spacing add 80 pixels of top and bottom padding, now click on this pick button click on this plus button and add us in the row now take a look at demo site here you can see we have this our services button.

Okay so after creating our services section we will create the Why Choose Us section.

What is the why choose us section?

A why choose us section on your homepage lets you quickly highlight the services to potential customers and clients. It is usually a compact area in the layout of your homepage or landing pages.

Go to the page and then click on the green plus button to add a new row now add two column rows. Now first of all before adding any module I will add a new row at this I will go to row settings so first of all before adding any module I will edit the row then go to row settings and then the design tab in spacing I will give it top and bottom padding of 80 pixels now click on the stick button. Now click on this plus button and add a text module now here I will add Why choose us.

After creating why to choose us section we will create this watch video section.

Why add a video on the webpage?

Videos keep people on your website longer and engage them with your content. People work with people, and video helps people get to know, like, and trust you. Videos keep your audience interested, no matter your product or service. Videos are fast and convenient.

Design the Section:

Here I have used a button that I have created with the text module here I have used another heading module a text module a bar counter and under this, I have this video so go back to your page here, first of all, I will add a new section so I will click on this plus button and add a regular section now here you have to select rows I will select a row with two columns

now in the first column, you have to add a module I will add a text module

now in the content, I will add I will type watch video now go to the background here I will add background color so I will click on this pencil click on this box, and paste your code here now click on the tick button.

Go to design at the top and text first of all I will change its font to Roboto now I will make it uppercase and change its color to blue so I will click on this plus button and click in this box and paste the code here now click on this tick button.

After creating the watch video section we will create our work section using counters.

What is Our Work Section?

An Our Work Section is a special web section where your readers/visitors learn more about you and what you do. Writing this section isn't the easiest thing to master, but it's possible once you understand the essential elements that must be included. This includes the work that you have done so far and the clients you worked with. You can also add client reviews to show your credibility to your visitors.

Design Section:

First of all, I will add a new section. I will click on this plus button and add a regular section. Then I will edit the section and go to design in spacing I will add 80 pixels of top and bottom margin. Then I will click on the tick ✅ button to save the changes.

Now click on the plus ➕ icon in the newly added section and add a single row. Now add a text module and add text to it. I will type our work. Now go to the background here click on this plus button and add your background color code. Then I will click on the tick ✅ button to save the changes.

Now go to design, in the text first of all I will change its font and select Roboto, then make it uppercase and I will change its color to blue. Now in size, I will make it 16 pixels and line height to 1.8 em. Now I will make it center aligned then go to the sizing > maximum width, I will make it 160 pixels, and then module alignment I will make it center aligned.

Now in spacing, I will add 8 pixels on the top and bottom margin and 15 pixels to the left and right. Now I will go to advanced > custom CSS click on the main element box and add:

font-weight: 400;

Now I will click on the tick ✅ button to save the changes.

Now you know how to create Our Work Section. So after creating Our Work Section we will create Our Partner Section.

Q: What is Our Partners Section?

Typically found on the “About Us” page of a nonprofit website, a partners section is a way to acknowledge your collaborators, sponsors, and important funders. A partners section also presents an opportunity to build the credibility of your organization by featuring third-party endorsements and the impact of working together to get to your goals.

> Include Names and Logos

Let’s be honest, some logos are more readable and recognizable than others and not all of them are going to be from well-known companies and organizations. Including your partner’s full name in addition to their logo is a nice touch if the layout or size of the logos makes them hard to read.

Design the Section:

So, first of all, I will add a new section. I will click on this plus button and

add a regular section. Then will change the background color, I will select my desired background color and now you can see the background color was changed. Then I will go to design in spacing I will add 20 pixels of top and bottom padding. Then click on the tick ✅ button to save the changes.

Now click on the plus ➕ icon in the newly added section and add a single row. Now before adding a module I will edit the row so I will go to row settings then I will not change any design settings of the row just I will directly go to column settings. In column settings, I will go to advanced in custom CSS click in the main element box, and add this CSS code:

display: flex;

align-items: center;

justify-content: center;

What this code will do is align all the modules that I will add now in a single line in the center of the row. Now click on the tick ✅ button and again click on this tick ✅ button. Now I will add a module

Click on the plus ➕ icon and search for the image module. Now select the image from your media library. Then I will click on the tick ✅ button to save the changes.