Installing and Using Divi

Note: You can get Divi with either a one-time purchase option or with a subscription-based model.

Download Divi

Shortcuts ⤵️

Installing Divi

Before you can install Divi, you definitely need to download it first. Go to its official website and join its membership. Once done, login with your account. Click the ACCOUNT menu and select PRODUCT DOWNLOADS.

On the Member Area page, click the DOWNLOAD THE DIVI THEME button on the left column to download the ZIP file of the Divi theme.

Login to your WordPress dashboard and go to Appearance -> Themes.

On the next page, click the Add New Theme button.

Click the Upload Theme button, followed by the Browse button to select the ZIP file of the Divi theme you have just downloaded. End by clicking the Install Now button to install it.

Activate the Divi theme right away once installed by clicking the Activate link.

A Brief Intro About Divi Builder

Divi Builder is the name of the page builder feature of the Divi theme, sometimes is called Visual Builder.

You can use Divi Builder to create the core pages on your blog. From the homepage, contact page, about page, and so on. You can also use it to create landing pages, custom header, and custom footer.

By default, Divi Builder is enabled on posts, pages, and projects.

You don’t need Divi Builder to create posts (content). So, you can disable it on posts.

Go to Divi -> Theme Options on your WordPress dashboard. Go to the Builder tab and disable the Posts option. Don’t forget to click the Save Changes button.

Using Divi Builder

Divi Builder comes with a visual editor where everything is drag and drop. It is totally easy to use, even for new users.

To start using Divi Builder, create a new page by going to Pages -> Add New Page on your WordPress dashboard. Give your page a title and click the Use Divi Builder button.

On the appearing dialog, click the left-most option (Start Building) to start from a blank page. And there you are — on the Divi Builder editor.

To make it easy to understand how to use Divi Builder, you can import a premade layout and edit the existing elements. To do so, click the three-dot icon at the bottom, followed by the plus icon.

Pick a template you like and click it to see the details. To import the template, click the Use This Layout button.

Wait a moment until the importing process is done. Once done, point your cursor to any area within the page, and you will notice blue, green, and grey lines. What lines are these?

In Divi Builder, there are three design elements that construct a page.

  • Section
  • Row
  • Module

Section (represented in blue color) is a large container to host rows and modules. Row (represented in green color) is a smaller container to host modules. Inside a row, you will also find columns.

And module is the actual design element which you can use to design your page. Divi Builder has 39 default modules.

To learn the design structure of your page, you can turn the Wireframe View mode on.

To add a new section, you can click the blue plus icon. To add a new row inside a section, you can click the green icon. And to add a new module inside a row, you can click the grey plus icon.

To customize each element — section, row and module — you can pick an element you want to customize and click the gear icon. This will open the settings panel where you can access all the available setting options.

Once you are done editing a page, you can click the Publish at the bottom to publish your page.

If you really want to learn more about Divi Builder, you can read my review here.


Designing Your WordPress Blog in Divi

Above, I have briefly mentioned about Divi Builder — the built-in page builder feature of the Divi theme. It is the tool you need to create the core pages of your website as well as landing pages.

In addition, you can also use Divi Builder to create and edit your site parts. Including:

  • Header
  • Footer
  • Single post
  • Archive pages
  • Search results page
  • 404 page

Importing Divi Templates

One thing you need to know before we continue. Elegant Themes uses the term layout instead of template to mention the pre-built design.

Don’t get confused. The two terms refer to the same thing.

As I said, I have created ready-to-use templates you can import to fasten the process of you creating your blog. You can hit the following button to download the template set.

Unzip the file once downloaded and you should see two folders as follows:

  • Theme Builder
  • Pages

Importing Theme Builder Templates

A brief intro before you start to import the theme builder templates.

Every WordPress theme has dedicated files that govern the appearance of header, footer, single post, archive pages, search results page, and 404 page. The files are written in PHP, JavaScript, HTML, and CSS.

Every WordPress theme also has a built-in feature to customize the appearance of the above mentioned parts, but with limited setting options.

A theme builder is a Divi feature that allows you create custom templates for the above mentioned parts, but without needing to write a single line of code.

Now, it’s time to import the template.

On the Theme Builder folder above, you will find a file named ThemeBuilderTemplate.json. To import it, login to your WordPress dashboard and go to Divi -> Theme Builder.

You will be taken to the Theme Builder page after clicking the above menu. Click the portability icon (the two-arrow icon) to initiate the importing process.

On the appearing dialog, click the Import tab followed by the NO FILE SELECTED button to select the json file of the template you want to import. Leave it default on the Options section and click the Import Divi Theme Builder Templates button.

Wait a moment until the importing process is done. Once done, you should see a set of templates. Click the Save Changes button to apply these templates.

Editing the Theme Builder Templates

The next step after importing the theme builder templates is to edit them. You can start from the header.

Editing the Header Template

Before you proceed to editing the header template, there are two things you need to prepare:

  • Logo
  • Menu

Logo

No worries. You don’t need to be a design master to create a logo for your website. If you can create a logo using Photoshop, Adobe Illustrator, or similar tools, that’s cool.

But if you can’t, you can use the following online free logo makers:

Once you are done creating the logo, go to Divi -> Theme Options on your WordPress dashboard. Under the General tab, click the UPLOAD button on the Logo option and select the file of the logo you have just created.

Don’t forget to click the Save Changes button once your photo is uploaded.

Menu

Menu is a crucial feature every website should have. It allows your visitors to jump between pages on your website more easily.

Here is an example of menu on my website:

To create a menu in WordPress, go to Appearance -> Menus on your WordPress dashboard.

Give your menu a name and click the Create Menu button.

Next, open the Custom Links block on the left column. Add a link as well as the label of a menu item and click the Add to Menu button.

Repeat the above steps according to the number of menu items you want to have on your menu. If you want a certain menu item to have sub-menu items (child menus), simply drag a child menu to a parent menu you like.

Don’t forget to click the Save Menu button once you are done editing the menu.

You can create multiple menus if you need it. To create a new menu, simply click the create a new menu link and follow the steps I have just elaborated.

Now, it’s time to use the logo and menu you have just created.

Go to the theme builder page and click the pencil icon on the global header template. This will open the Divi Builder editor where you can edit all the elements on the header.

You will find two sections on the custom header. The first section is for desktop header and the other one is for mobile.

Desktop Section

On the custom header template, the desktop section lies at the top.

By the way, you can use the Layers feature to see the elements of a section. You can also open the settings panel from here.

The desktop section consists of two design elements as you can see below:

To edit each module, simply click the gear icon on the concerned element to open the settings panel.

  • Image Module

The Image module is used to display your site logo. To change its design, you can go to the Design tab on the settings panel. There are several settings block you can open here. You can set many things. From size, spacing, filter, and so on.

  • Menu Module

Above, you have created a menu for your blog. You can use it here on this module.

Click the Menu module to edit. On the Content settings block under the Content tab on the settings panel, pick a menu from the dropdown.

Next, you can go to the Design tab to make some changes. You can open the Menu Text block to edit the typography (font size, font family, etc.). To edit the dropdown, you open the Dropdown Menu block.

If you want to change the color of the header background, you can edit the header section.

Mobile Section

For mobile section — which is aimed at mobile header — we only need one module, the Menu module.

Before editing the mobile section, first, switch to the Mobile mode by clicking the mobile icon on the Divi Builder editor.

Then, you can click the Menu module to edit it.

You can do precisely the same things as the one you did on the Menu module on the above desktop section.

Once you are done editing the header (both desktop and mobile), you can click the Save button on the bottom-right corner (top-right corner on Divi 5).

To exit the Divi Builder editor, you can click the X icon on the top-right corner (the Exit label on Divi 5).

Editing the Footer Template

Once you are done editing the header template, next you can move on to designing the footer. To start, simply click the pencil icon on the global footer template.

The custom footer template I created consists of two sections as follows:

Section 1

This section contains a row with three columns. On the first column, you can find two Text modules and a Social Media Follow module.

On the second column, you can find five Text modules. On the third column, you can also find three Text modules.

To edit a module on each column, simply click the gear icon on the module you want to edit to open the settings panel.

  • Text Module

There are a bunch of styling options you can apply to a text in Divi. Simply go to the Design tab on the settings panel and open one of the settings block to see the available setting options.

A crucial thing to note. There are two text types on the Text module: paragraph and heading. The Text settings block is dedicated to styling up the paragraph texts, while the Heading settings block is dedicated to styling up the heading texts.

To specify the text type itself, you can pick your option from the dropdown on the content editor under the Content tab.

From this content editor, you can also add a link to a text. Add bulleted text, numbered text, quote, and so on.

To change the design of link, bulleted text, numbered text, and quote, you can open the respective tab on the Text settings block under the Design tab.

  • Social Media Follow Module

You can use the Social Media Follow module to showcase the social media icons you use for your blog. Of course, you can also add a link to each social media icon.

Click the gear icon on the Social Media Follow module to edit it. Once the settings panel opens, you can click the gear icon on an existing social media platform to customize it.

You can click the dropdown on the Network block under the Content tab to change the social media platform. To customize the design, you can go to the Design tab.

Editing the Single Post Template

In most cases, the single post template consists of the following parts:

  • Post title
  • Featured image
  • Post meta (date, author, category, and so on)
  • Post content

In WordPress, the above parts are also called fields.

Take a look at the following image to better understand the anatomy of single post template.

On the custom template I provided, the single post template consists of the following elements/modules.

  • Post title
  • Post meta
  • Featured image
  • Post content

To edit the single post template, select the All Posts template and click the pencil icon on Custom Body to edit the template.

TIP: If you have no post yet, you can create a demo post so that you can preview the single post template you are editing.

  • Post Title

This element, as you can guess, is used to display the title of blog posts on your blog. You can tweak the design to your liking. Such as changing the font size, font family, font color, and so on.

Simply click the gear icon on the Post Title module to open the settings panel. Go to the Design tab to start tweaking the design. The setting options you need are available on the Title Text settings block.

A little note. On the Post Title module, you can actually show other elements such as featured image and post meta.

However, I prefer using different modules to display other elements for the sake of design freedom.

  • Post Meta

I use the Text module to display the post meta. And the post meta I display is post author. If you want to display other information (e.g. date, category), you can simply change it.

To do so, first, click the trash can icon to remove post author.

Click the dynamic content icon and pick a post meta data you want to display.

To tweak the design, as usual, you can go to the Design tab on the settings panel. You can open the Text block to set things like font color, font size, font family, and so on.

  • Featured Image

As I have just said above, I use a different module to display featured image, instead of the Post Title module. In this case, I use the Image module.

To tweak its design, first, click the gear icon to open the settings panel then go to the Design tab.

To set the size, you can open the Sizing block. To set the border style, you can open the Border block. To apply a filter, you can open the Filters block. Just play around with the settings panel to tweak the design.

  • Post Content

The Post Content module is used to display the body of your blog post (content). There are plenty of design options you can apply to style up the look of the elements of your blog post. From image, regular text, bulleted list, numbered list, link, and so on.

You can click the gear on the Post Content module to start tweaking the design.

On the Image settings block, you can tweak the look of the image elements on your blog post.

To tweak the look of the text content, you can open the Text settings block. From here, you can tweak the look of all text content types. From regular text (paragraph), list, link, and quote.

Simply click the respective tab to tweak each text type.

To tweak the heading elements, you can open the Heading Text block. As you can see below, there are six tabs you can open. Meaning that you can customize all heading levels. From H1 to H6.

Once you are done editing the single post template, don’t forget to click the Save button to apply all the changes you have made.

Editing the Archive Page Template

In WordPress, you can organize your posts with categories and tags. When you visit a certain category or tag, you will see a list of blog posts assigned to it.

You can click here to view the demonstration of a category page and click here to view the demonstration of a tag page. In WordPress, these two pages are called archive pages.

There are several other pages considered archive pages, but the two are the most common.

The theme builder template I provided also comes with a custom template for archive pages. To edit it, simply click the pencil icon on Custom Body of the All Archive Pages template.

The template consists of only two modules as follow: Heading and Blog.

  • Heading

This module is used to display the title of the archive pages, which change dynamically according to the title of the archive.

Simply click the gear icon of the Heading module to style it up. Go to the Design tab to customize the design just like you have done with other modules above.

  • Blog

This module is used to display the content of the archive (category or tag). Again, you can simply click the gear icon to start customizing it.

Go to the Design to customize the design. Here, you can change the layout, style up the image, text elements, and more.

Editing the Search Results Page Template

WordPress has a built-in search feature to make it easy for your visitors to find the content they need.

On most WordPress themes, the appearance of the search results page is pretty similar to archive pages, but you can customize it if you want.

I also included a custom template for the search results page on the theme builder template set you have imported. Simply click the pencil icon on the Custom Body of the Search Results template to edit it.

The construction of the Search Results Page template is the same as the archive page template above. It consists of only two modules: Heading and Blog.

Editing the 404 Page Template

When a visitor types a certain URL of your blog on the address bar and no associate page exists, she/he will be redirected to an error page called 404 page.

I also included a custom template to govern the appearance of the 404 page. Simply click the Custom Body of the 404 Page to edit the template.

The template consists only two modules: Heading and Button. You can simply click the gear icon on each module to customize them.

One thing.

I disabled the header and the footer for the 404 page. If you want to enable it, you can click the on the eye icons on the 404 Page template.

Just don’t forget to click the Save Changes button after making the changes on the Theme Builder page of Divi.

Importing a Page Template

Inside the Pages folder of the free templates you have downloaded, you will find 7 page templates created with Divi Builder.

  • Free Homepage: for homepage (1st option)
  • Free homepage 2: for homepage (2nd option)
  • Free Homepage 3: for homepage (3rd option)
  • Free About Page: for about page
  • Free Contact Page: for contact page
  • Course Landing Page: for landing page (1st option)
  • Course Landing Page 2: for landing page (2nd option)

The method of importing each page template is precisely the same, so I will only demonstrate how to import one template here.

First, create a new page by going to Pages -> Add New Page on your WordPress dashboard.

Give your page a title and click the Use Divi Builder button.

On the appearing dialog, choose the BUILD FROM SCRATCH option (leftmost) and click the Start Building button.

On the Divi Builder editor, click the portability icon (the two-arrow icon). On the appearing dialog, click the Import tab. Click the NO FILE SELECTED button and select the page template (JSON file) you want to import. End by clicking the Import Divi Builder Layout button.

Wait until the importing process is done. Next, you can edit each module on the page to tailor the content and design.

Once done making the settings on all modules, you can click the Publish button to publish the page.

You can repeat the above steps to import other page templates.

Setting the Homepage

After you created the homepage using Divi Builder, you need to set it as the front page of your blog.

To do so, go to Settings -> Reading on your WordPress dashboard.

On the Your homepage displays section, set to A static page and select the page you have just created on the Homepage dropdown.

Don’t forget to click the Save Changes button to apply the change.


That’s it about designing your WordPress blog with Divi.

Feel free to email me at aliko@totheweb.net if you need help.

This page may contain affiliate links, which help support the project. Read our affiliate disclosure.