Divi is one of the most popular website builders nowadays with over 800,000+ users worldwide. You don’t need to write a single line of code to create a website with its drag-and-drop modules.

However, as a beginner, it could be difficult to grasp the idea and the features of this advanced theme. So, we have brought you the ultimate guide on how to build a website with Divi!

Before You Start Building A Website with Divi

There are some prerequisites to building a website with Divi. For example, getting a domain and hosting, installing WordPress, and buying the Divi theme. But if you already have these, you can skip them and go to the next step. 

Domain and Hosting

Before you even begin working on a website, you will need a domain and hosting. A domain is what your website’s name is going to be and hosting is where everything about your website is stored.

For choosing a domain-

• First, come up with a cool name for your website. Make it unique and easy to remember.
• Go to a domain registrar like GoDaddy or Namecheap. Type in your chosen name to see if it’s available. If it’s taken, try a different one.
• Decide on the extension, like .com, .net, or .org. Pick one that suits your site.
• When you find an available name, register it. You’ll have to pay a yearly fee to keep it.

As for hosting-

• Think about what your website needs. Speed, storage, and support are important.
• Look for reviews from others who use the hosting service. It gives you insights.
• Make sure the hosting has high uptime, meaning your site is online most of the time.
• Having reliable customer support is essential. 

For domain and hosting, there are a lot of websites, but we suggest Hostinger or Namecheap as it is easier to use and cheaper than the rest. 

Install WordPress

Now that you have your hosting and domain sorted out, you will need WordPress to use the Divi theme. You can use your hosting’s auto-installer to install WordPress with ease.

You can also manually download and install WordPress from the WordPress website.

Get the Divi Theme

Since you will be using the Divi theme to build your website, you will need to buy the Divi theme as there are no free versions available. To buy and install the Divi theme, you need to-

• Go over to the Elegant Themes website. 
• Create an account from the pricing page. Click on “Sign Up Today!” and provide all the required information to complete the registration.
• Then download the Divi theme and install it in your WordPress.
• Once the installation is complete, you’ll see a message that says “Theme installed successfully.” Click on “Activate” to make Divi your active theme.

Now, we have all we need to start building websites with Divi. 

How to Build a Website with Divi: 6 Simple Steps to Follow

For your convenience, we have sorted out 6 basic steps that you can follow to build a WordPress website with Divi. Without further ado, let’s get on with it!

Step One: Start With the Basics

As the first step, we will start with very simple things. For instance, uploading a logo, creating homepage menus, etc. These steps are not mandatory first steps for building the website per se but they are important. Since they are very basic, we will be starting with these. 

But if you want to get started right away with Divi, click here.   

1.1 Get a Site Logo

With your new website, you will want to look professional. That’s why we think it’s best to start with your website logo. If you do not have a logo for your website yet, don’t worry, this is not mandatory for building your website with Divi. You can just skip this step for now and come back to it later. 

But if you do, then great, you can just upload it to your site, and here’s how-

• Go to your website dashboard and find Divi from the panel on the left. Hover over the cursor and some other options will show up. Select “Theme Options” from the list.

• In the next window that will show up, you can see an option to upload your logo. You can directly upload the logo from your computer.

• After uploading the logo, you can check out if it is displaying on your website. For that, click on “My Blog” in the upper left corner of the WordPress dashboard. Doing so will take you to your site and you can see how it looks.

For now, it should look like this-

1.2 Create a Menu with Pages

Since you have your logo all straightened out let’s make a homepage menu with links to all the pages on your website. 

• Go back to the main Theme Customizer menu again. Choose Menus from the menu bar. In the next step, there will be an option named “Create New Menu”. Once you click on that button, you will see different options to create and customize your homepage menu.

• You can set your Menu name from here. Give your menu whatever name you like, for example, you can name it “Main Menu” or “My Homepage Menu”. 
• Also, you can select which menu you want to customize. For now, select Primary Menu and click Next.
• On the next menu, there will be a button that says, Add Items. From here you can add pages to your menu bar.

• The number and the type of pages you need to create here depends on what type of website you are looking to create. As a reference, we are creating an About Us, Contact Us, Blog, and Services page.
• As you add new pages to the menu, you will notice that the page names appear in the top right corner. You can change the sequence of the page names in the left-most menu by changing their order.
• If you want to add a submenu, you can do so by adding an item first. Then drag and put those items under their parent in the menu on the left. Then slightly drag them to the right. 

• When you are done, click on the Publish button which is on the top and your menu should now look like this-

If you want to further customize your menu, there are other options you can explore. Go to the theme customizer main men, select Header and Navigation > Primary Menu Bar. You will find a couple more options to customize your menu bar. 

1.3 Change Homepage Settings 

By default, your homepage will display all the latest posts that you post on your website, which is not optimal. If you want to change that, you need to-

• Go back to the Theme Customizer main menu and click on Homepage Settings. 
• You will see two checkboxes that say “Your Latest Posts” and “Static Page”. By default, “Your Latest Posts” will be selected. This means all of your latest posts will be shown on your homepage. This option is great if you are making a simple blog website.
• But for any other websites, selecting “Static Page” is better as it will stay the same regardless of what you post.
• When you select “Static Page” more options will appear that will let you choose which page of your website will be shown as the home page and the post page.
• You can select whatever you like here, but in this case, we will be selecting the “Home” page as the home page and the “Blog” page as the posts page. Click on publish once you are ready to save.

Now, go back to the theme customizer main menu again. Click on General Settings > Site Identity. You can see three options, Site Title, Tagline, and Site Icon.

The site Title is what your website will be shown as on the Google search page, so this is important in terms of SEO. Use the keyword that you want people to find your website with. For example, we will put “Make Your WordPress Website With Divi”. With the keyword, you can also set the name of your company.  So, the whole thing will stand as,  “Make Your WordPress Website With Divi | DiviWizard”, for instance.

As the tagline, you can describe what you do briefly. Like, “We make WordPress websites with Divi” in our case.

The site icon will appear in your browser tabs and bookmark bars. You can use the same logo you used for your website but if that’s not possible, you can make another for this especially. But remember that the icon should be square and at least 512 by 512 pixels in size.

Once you are done with these, hit publish to save.

Step Two: Enable the Visual Builder

What we have shown you so far is not specific to Divi, but rather common steps that would apply to any WordPress page builder. From this step, we will be using the Divi builder to build an amazing website, so keep your eyes open.

To start building your website with Divi, you should see an option named “Enable Visual Builder” on the top. Click it.

You will be presented with three options: Build from scratch, Use premade layouts, and Clone an existing page. You need to choose the first option, Build from scratch.

When you do click it, you will see something like this-

With this, now we are ready to start building your website with Divi. First, we will be building the homepage from scratch.

Step Three: Build the Home Page

The first thing you should see is two plus icons, one green, and one blue. The blue add button will let you add sections and in each section, there will be a green button that will let you add rows. 

So, let’s try adding a section to your website.

When you click on that blue add button, it will give you three options-

• Regular: Choosing this option will offer you some simple selections of rows.

• Specialty: Choosing this will offer you some complex selections of rows.

• Fullwidth: Choosing this will offer you a selection of fullwidth modules. 

You can explore your options to see which one goes best according to your requirements, but we will be going with the Fullwidth Header for starters.

3.1 Design the Header

Once you select the “Fullwidth Header” module, your website will look like this-

On the small editor on the corner, you can customize your header however you want. Under the content tab, there are options to edit the text, image, background, etc.

You can change the title, the content, add a subtitle, an image, etc. from this editor. Let’s add a title, subtitle, and body text. Also, let’s change the button text. Here is what it should look like-

If you want a second button, just input some on the Button #2 field and the button will appear.

You can also add images in the header. First, let’s add a header image. Click on the Images tab in the editor and you will see the option to add a header image. You can add whatever image you think is appropriate for your header.

Let’s add a link to the button in the header. Scroll down in the editor to find an option named Link. Click to expand and you will see options to add links to different buttons. Hover over the field of the Button #1 Link URL and you will see three discs with a plus icon will show up. Click on that and it will give you many options.

We want to link this button to our blog page, we will click on the page link option, and then in a dropdown menu all the existing pages of your website will show up and we will link it to the blog page. 

After this, we have a very basic header for your homepage. But that’s not enough, is it? So, we will try to make it better.

For starters, if you do not like the background color, you can change it from the background tab. 

After choosing a suitable background color, let’s add some modules to our sections. 

These options under the background tab let you play with your header’s background. The first option will let you simply change the color of the background. The second option lets you add a gradient. You can change the gradient colors, type, position, etc. from here.

From the third and the fourth option, you can add an image or a video in your header. You can also add a pattern and a mask from the fourth and the fifth option in the background tab.

There are different options to further customize your video, image, patterns, or masks. So, you need to explore those to find the best look that suits your taste.   

If you want, you can also customize your texts too. Go to the design tab and scroll down to find the Text, Title Text, Body Text, and Subtitle Text options. 

By using the “Text” option, you can add shadows to the text in your header. Also, there are options to change the intensity and the orientation of the shadows.

The rest of the text options will allow you to change the font, font size, alignment, style, etc.

If you want to customize the button text, you can go to the Button One tab. You will find an option to use custom styles for button one. If you enable that, you will get many options to customize the button as you wish.

3.2 Design the Footer

To design the footer, go to your WordPress dashboard and find Divi > Theme Builder. You should see something like this-

Click on the Add global footer option and then select build global footer. Once you do, a blank page with a green and a blue add button in the middle will appear. Hover over the blue add button and you will see this-

Click on the settings button on the top left corner, and the editor will appear. From the editor, we will be adding the background color. Scroll down to find the background option and you will see the color options that you can pick. 

When you are finished adding the color you like, we will be adding sections in the footer. Click on the green button to see your choices. You can pick whatever you like, but we will be choosing a section that is equally divided.

By clicking on the black add buttons we can add modules in our section. For creating our footer we will be choosing the blurb module. It should then look like this-

Since we can’t see the texts that appeared, go to the design tab on the editor, find “Text” and once you expand it, you will see an option that says Text Color. Set it to light from dark and the text should now be visible.

Now, let’s add text to the footer. We will remove the default body text for now and add a phone number in the title. Also, we will move the image placement from the top to the left. For that, go to the design tab, go to Image & Icon > Image/Icon Placement, and select left.

Now, instead of an image we want to use an icon. To do that, go to Content > Images & Icon and enable the use icon option. After enabling the option, you can see a selection of icons that you can use. We will need a phone icon in this case so we will search for it. 

Once you find the icon that you like, click on it and it will appear on the footer beside the phone number. 

If you want to change the color of the icon, go to the design tab and you can change the color from there. There is also an option to change the icon’s size.

To save time and effort, we can copy the module. To copy the module, click on the green tick on the editor to save the changes and close it. Then hover over the module and a black box with options will come up. Click on the copy icon, the third one from the left, and the module will be copied.

Now drag the copied module on the other side. What we plan to do with this duplicate is to just change the text and the icon to add our location in the footer. Follow the same process as before to add the location.

Now, we want to add our company logo and important links to our pages on the website, so let’s add a section divided into three by clicking on the green add button. As a module, we will select the image module and upload the logo there in the leftmost section.

We also want to add some text under the logo. So, hover your cursor over the logo and click on the plus icon to add a text module. Add your text in the module and like before you will have to change the text color from dark to light under the design tab. You can also change the text spacing, sizing, fonts, etc.   

Now, in the middle section, we want to add the links to your socials. Click on the black add button in the middle then search for “Social Media Follow” and click on it to add. The icons of Facebook and Twitter will appear by default.   

You can add more social media icons from the editor.

If you want to merge the background of the icon with the background of the footer, click the settings icon beside the social media name in the editor, go to the background option, and select the transparent background. Do the same for all the social media icons.

Or, to save time, you can right-click on the transparent background on the editor, and select extend background color.

Another box of options will appear. Select “All Social Media Follow” from the from the “To” dropdown menu and select “This Section” from the “Throughout” menu.

Then click on “Extend” to save. Now, we will add links to the social media icons. From the editor, click on the settings icon beside the social media name, find the option to link and you can add your social media link from there.

In the third section, we will add quick links to our site’s pages. Add a text module and in the body, write the names of the pages you want to link. To link the text here to the respective pages, select the text and press Ctrl + K. A box with options to link will appear. 

Just write “/” and the name of the page you want to link and it will be done. For example, to link the About page, you will need to write “/about.” 

With the linking done, your footer should look like this-

You have noticed that because of the linking, the texts have turned blue automatically, which is not optimal. That’s because it may match the background color of the footer and become completely invisible.

To fix this, we will need to apply a simple CSS code. To write the code, save all the changes you made on the footer by pressing Ctrl + S. Then, go to your WordPress dashboard > Divi > Theme Customizer > Additional CSS.

Then the code editor will open on the side. Write the following code-

footer a: link {

color:#fff

}

When you’re done, click Publish to save the changes and your footer should now look like this.

For the last part, we will add another section underneath the footer. We will need an undivided section for this. Add a background color, a text module, and some text. As always, change the font color from light to dark and it should look like this-

We feel like the bottom section is too wide and we can adjust it from the section settings. Go to the design tab and under spacing, set margin and padding to 0px. When you finish that, your footer should be complete and look like this-

Since we have built this as a global footer, this footer will be displayed on all the pages of your website.

3.3 Design the Body

With the header and the footer designed, we need to build some body parts for your home page. So, for starters, we will add a slider section in the middle of the header and the footer.

To add a slider section, visit your site and enable the visual builder. Click on the add new section button in the middle, select Fullwidth, and scroll to find the fullwidth slider. Click on it to add it to your homepage and this should happen.

By default, there should be two pages in the slider, if you need more you can add them from the editor. Also, the slider looks quite big, so you can adjust its size by adjusting the margin and padding in the design tab.

Now, as for styling the slider, let’s add an image to each slider. On the editor, you can edit each slide individually. 

Click on the settings icon here and you will find all the options to customize the slides. Like the previous modules, you can add text, image, video, background, etc. You can even add animations from the animation tab.

Now that you have a basic idea of the Divi modules and customize them, you can use your creativity to modify and customize the modules to design your website however you want. 

After the sliders, we will create another part using a couple of text and image modules that look like this-

These are all made by using simple sections, text, and image modules. 

Step Four: Create a Blog Section with Posts

In this step, we will create some blog posts and design the blog section with the posts. To create new posts, go to your WordPress dashboard, hover over Posts then select Add New. 

Select “Use Divi Builder” from the page that will appear and you will see a page like this-

Now, this is a very basic post page that doesn’t give you much freedom to design your blog pages. That’s why we will create a blog post template to make the blog pages more appealing and easier to create.

4.1 Create Blog Post Template

To create a blog post template, go back to the dashboard, and select Divi > Theme Builder. From the Theme Builder page, select Add New Template > Build New Template. When you do that you will be presented with a lot of options, but you only need to select All Posts.

After that, you should see something like this-

You should notice that there’s already a global footer in place that’s because we made a global footer that will show on all the new pages and it includes blog posts too. 

To start designing the blog post template, click on Add Custom Body > Build Custom Body. It will take you to a blank page where you can start building the template.

First of all, let’s add a background to the section. You can also add an image or a gradient for a better look. 

Go to the section settings > Background and add a color, image, or gradient. To add a gradient, select the background gradient option. Then click on the add background gradient option and a bar named Gradient Stops will appear.

You will see two small circles in the bar, click on that circle to add a color of your liking. Follow the same process for adding a second color. Make sure that the two colors complement each other and you should have something like this-

Let’s add a text module over the background. Click on the green add button to select a single column then add a text module.

Some random text and the text editor will pop up. Hover over the top right corner of the body in the editor and you will find the option to add dynamic content. 

Click on this to reveal a bunch of options and choose the first option that says “Post/Archive Title.” 

We will now customize the dynamic post title we have just added. Click on the settings icon beside the Post/Archive Title in the editor. 

A small box with two fields named Before and After will come up. We can add HTML code here to make it look like a heading. So, we will start an H1 tag in the before field and break it in the after.

Your title will display as a heading now. 

Let’s head to the design tab to further customize the title. You can make all kinds of changes from here to your heading text like changing the text font, alignment, size, spacing, color, etc. 

For the body of the template, we will add a two-column section, one slightly bigger than the other. In the bigger section, we will add an image module which will be the featured image of the blog post. 

As for the smaller section, we will add a blurb module which we will be using for author information. 

We will add dynamic images in the image section, so we will need to hover the cursor over the image and click on the settings button. Then the editor will pop up. Delete the blank picture by clicking on the trash icon on the image. 

Once you delete the image, the icon to add a dynamic image will appear. Click on the icon and select Featured Image from the options.

You can go to the design tab and customize the featured image however you want.

Let’s turn our attention to the blurb module by opening the blurb module editor. Move the cursor to the right corner of the title bar and you will find the dynamic content button. Click on that and select Post Author from the options.

Like before another box will pop up with fields to add Before and After. You can skip this if you want or you can add something if you want it to appear with the author’s name. For example, we can add “Written By” to the before tab.

From here you can also change the format of the name and link the author name to one of your webpage. 

For the blurb content, we will follow the same process to add dynamic content but instead of Author Name, we will select Author Bio. 

Also, for the image of the blurb, we can add a dynamic author image. The process is the same as before, which is going over to the “Image & Icon” tab, deleting the blank image, clicking the dynamic image button, and choosing the Author Profile Picture.

The template for the profile picture will appear on the top by default. If that’s not what you want, you can change it from the design tab.

We will add another blurb module under the author section where we want to showcase the post categories. So, hover the cursor over the author section, click on the black add button, and add another blurb module.

We will not be using an image here, go to the Image & Icon tab and enable the Use Icon option. Now, choose a suitable icon for the categories. 

The icon should appear on top and it’s size should be bigger than our requirement. So, head over to the design tab, set the Icon Placement to the left, and adjust it’s size. 

As always, there will be some random content generated by the module under the title but we won’t need that here. So, just go ahead and remove it. 

As for the title of the blurb, we want to add categories, so find the dynamic content button in the title bar on the right corner, click it, and select Post Categories. After selecting the Post Categories, the before-after window will pop up. From that window, you can edit the categories type and separator, etc.

After setting up the dynamic categories, it’s time we head over to the post content. Add a new column under the feature image and add a “Post Content” module there. If you want to change or modify anything in this module, you can go over to the design tab and make adjustments.

We will add another single column under the post-content module. In that section, we want to add a Post Navigation module. The post navigation module will look like this-

By default, without adding anything to this box the module will show you the title of the previous and next post. However, this will not be visible in the template but if you go to any of your posts, you will be able to see it.

Here we have created some blank posts to demonstrate-

Now, if you want to add this is what the module will show if we add some text-

If you want to show the title along with some text, you need to use the %title tag in the module editor. For instance-

The result will be this-

As always, you can further customize the text from the design tab.

After this, we want to add a section that will display related posts. Just add another single column beneath the post navigation and add a text module that says, “Related Posts”

Under this, we will add a Blog module. The blog module editor will give you a lot of options. You need to enable the “Posts For Current Page” option. You can also choose the number of content you want to show and whether you want to show the full post or just the post excerpt. Other than these, you can determine the excerpt length and the post offset number.  

In the elements tabs, you can choose what to show in the post snippet, like if you want to show the featured image, the author name, date, etc. 

In the design tab, you can choose the layout of the module. The default setting is to show the posts at full width, which will display them horizontally. You can change this to vertical for a better use of space.

We are almost done with the post template, all that’s left is adding the comment module. Use a single column to add the comment section, which will look like this by default-

You can make all kinds of changes to every element in this module from the design tab, which we leave up to your preferences and exploration.

The post template is ready now, to test if the template is working properly, add a new post using the default editor and see if it applies to the post.

If you do not know how to add a new post using the default editor, watch this video-

4.2 Create the Blog Page Template

Since we have a blog post template and you know how to use this template to add new posts, we will start designing the blog page template. If you are confused, the blog page is where all of your blog posts will be displayed. So, let’s get started!

First, go to your WordPress dashboard > Settings > Reading. Set your posts page to the Blog page which we previously set to None before creating the blog post template.

When that’s taken care of, go to Divi > Theme Builder > Add New Template > Build New Template. Then from the options that will pop up select Blog and click on Create Template.

Then a template will be created, and from there, select Add Custom Body > Build Custom Body. You will be taken to a blank page where you can build the template.

After creating the blog post template, you should have a basic idea of how templates can be created, so we will keep things really simple this time. We will add a heading and display the blog posts using the blog module.

To start, add a single column and change it’s background. You can add a color, image, or gradient. We will go with a gradient again. 

Now add a text module, write some text, change alignment, color, font size, etc. 

Just below the heading, add a new single column and utilize the blog module. Once you do, your posts will show up. Customize the blog module as per your preference, just like we have shown you before. 

Save all the changes you have made and go to the blog page of your website. We were aiming for something like this-

Again, this is a very basic blog page template with minimal design. If you want to make it more stylish, you can use the design tab to stylize it however you want.

Step Five: Create the Contact Us Page

With the homepage, blog posts, and blog page done, we can now move to the contact page. We will use the Divi contact form module to create the Contact Us page.

To start, go to your WordPress dashboard > Pages > All Pages. Then find the Contact Us page and click on “Edit with Divi.”

It will take you to a blank page with the global footer at the bottom. Since you have the basic idea about creating headers, we will skip that here and only focus on the contact form module.

Add a new section and select two equally divided columns. We will use the contact form module on the left side and add some text or images on the right side.  

When you select the contact form module, the default form will look like this.  

If you like this and want to use this as it is, you can. But we will tweak it a bit. So, let’s just delete all the fields from the editor. To delete the captcha box, scroll down to the Spam Protection section and disable the “Use Basic Captcha” option. 

With all the fields deleted, we are left with only the button, so let’s start with that. 

Head over to the design tab, find the Button section, and enable the “Use Custom Styles for Button” option. Once you do that, options to customize the button will appear.

Depending on your preference, you can change the button size, text, color, font, etc. In this case, we will change the font color to white and the background color to blue. Also, we have disabled the Show Button Icon option.

Now, let’s add the fields one by one. For a basic contact form, we will need a field for Name, Email, and Message. 

To add fields to the form, go to the Content tab and click on the Add New Field option. Once you click on the add new field option, it will give you two new fields with Field ID and Title. The field ID is for the type of data you want from the user and the field title will be shown in the field.

For reference, let’s put the First Name for both of these fields and you should have this-

The next option which is the Field Options, offers some important features. The first option, Type, allows you to set the type of field you want to create. 

By default, the field will be an input field, which is appropriate for names. But you will need the Email Field for emails, Textarea for messages, and so on. 

The next option is the minimum and maximum length, which will determine the minimum and maximum character length of the user input. Let’s the maximum length to 60.

The Allowed Symbol option will let you choose the symbols that are allowed in this field. You can choose from Letters, Numbers, and Alphanumeric. For names, allowing only letters is appropriate.

Up next, there is a Required Field option, if you enable it, the user must fill up the option, otherwise their input will not be valid. 

Now that you know the basic requirements, let’s add a couple more fields to the form.

The form should look something like this-

This form looks very straightforward and we want to make it look a bit better. Open up the editor and click on the settings icon of the first field. Go to the design tab then expand Layouts. Disable the Make Fullwidth option and the first field, which is the field for “First Name” will be shortened. Do the same for the Last Name field as well.

Looks a bit better, doesn’t it? 

With the form all set up let’s give a title to it. Go to the Contact Form settings, scroll down, and you will find the field to write the title of the form. You will also find a field to set the success message that will be displayed when the message is successfully recorded.

Using the submit button, you can change the text of the button, but we will just keep it as it is.

If you scroll further down, you will see an option named “Email”, this is really important because this is where you put your email address to receive the user message. So, Put in the email address you want to use for this.

As for the message pattern, you can choose how you want the message to be displayed in your email. If you leave it empty, the default pattern is this-

If this is okay with you, you can leave this message pattern box empty. But if you want to change the pattern, you can utilize the %%field_id%% tag.

For example, you can use this pattern-

“Hello, my name is %%first_name%% %%last_name%% and I want to say that %%message%%.”

Here, first_name is the Field ID that I have used for the First Name field, last_name is the Field ID for the Last Name field, and so on.

Up next is the Redirect option, using this you can send the user to a different page after completing the form. If you want that, turn the “Enable Redirect URL” on and put in the redirect URL. 

If you want to include a captcha in your form then expand the Spam Protection option and enable the Use Basic Captcha option.

Or, if you want to use a third-party spam protection service, you can add it by enabling the Use a Spam Protection Service option. 

These are all the components needed to create a basic contact form using Divi’s contact form module. As for the text module on the left, we just added a simple text but you can use a blurb or other module to design it.

Step Six: Design the Other Pages

With the completion of the Contact Us page, we have demonstrated all the basic modules that you will need to create a web page. So, using that basic knowledge and your own creativity and preferences, design the rest of the pages. 

Step Seven: Optimize for Mobile Devices

The last step in this guide is to make your website responsive for mobile devices like tablets or smartphones. Divi has this amazing feature where you can simply view and edit how your web pages look on mobile devices.

Take the homepage for example. This is how it looks on a computer. 

If you look closely, you can see there are several options in the bottom left corner of the homepage. These options will be available with the visual builder enabled. 

There are three icons in that bar, one for computer view and the other two for tablets and smartphones. Let’s see how your homepage looks on a tablet and a smartphone. 

Now, let’s see how it looks on a smartphone.

As you scroll down you will surely find design flaws and for a better user experience, you need to fix them. The best thing about this feature is that the changes you make in the tablet view or phone view will not affect the computer view. So, you can make three different versions of your webpage using the Divi builder.

Final Words

So, building a website with Divi is not that difficult, the drag-and-drop modules and customizable features make website building a breeze. But since there are tons of options and features to customize it could be too much to handle. 

That’s why, to get the best out of Divi, you need to explore and experiment with all of its features.