If you’ve read my previous post as to why you should choose Divi over any other WordPress theme and are starting your journey in to building your very own website, you’ve come to the right place.

Below walks you through the steps you need to follow to upload the Divi theme and start building your first website.

Purchase and Install Divi Theme:

  1. * If you haven’t already, you need to purchase a membership to Elegant Themes to gain access to the Divi theme. Once purchased, download the Divi theme files from your Elegant Themes account.
  2. Install and activate the Divi theme on your WordPress website. You can do this by navigating to “Appearance” > “Themes” in your WordPress dashboard and clicking on the “Add New” button to upload the Divi theme files. Upload your divi theme file from the file you have downloaded it to and press “activate” once it is uploaded.
  3. Once Divi is uploaded, you need to ensure you get the theme updates when they come out. Without this your version will become out-dated and your site will be vunerable to attacks and will eventually stop working properly. To make sure Divi stays up to date you need your username and API key to be added to Divi. The below video will help walk you through this.

Now you have the theme installed and automatic updates set up you can move on to starting to create your vision….your new Divi WordPress website!

To do this you need to start by creating a page. follow the steps below to do this.

  1. Create a New Page:
    * Navigate to “Pages” > “Add New” in your WordPress dashboard to create a new page for your website. Give your page a title and click on the “Use The Divi Builder” button to launch the Divi Builder interface.
    * Choose a Layout or Start from Scratch:
    * In the Divi Builder interface, you can choose to start with a pre-made layout or build your page from scratch. Divi offers a wide range of pre-designed layouts to choose from, categorized by industry or website type.
  2. Customize Your Layout:
    * Once you’ve selected a layout, you can customize it to fit your brand and content. Use the Divi Builder’s drag-and-drop interface to add new modules, rearrange elements, and adjust styling options.
    * You can customize text, images, colors, fonts, and more using the settings panel for each module. See my bog titled “How to change styling elements in Divi” for more information on this subject.
  3. Save and Publish Your Page:
    * After customizing your layout, click on the green checkmark icon to save your changes. Then, click on the “Publish” button to make your page live on your website.
  4. Create Additional Pages:
    * Repeat the same process to create additional pages for your website, using the Divi Builder to design and customize each page as needed.
Divi WordPress Theme

Pages in Divi are created by using SECTIONS which hold ROWS within them, which then hold MODULES within those rows. When you create pages you will have to change, add or remove sections, rows and modules.

To help you do this let’s dive deeper into how to add sections, rows, and modules in the Divi Builder.

  1. Adding Sections:
    * A section is a large container that holds rows and columns, allowing you to structure your page layout. Here’s how to add a section:
    * Launch the Divi Builder by clicking on “Use The Divi Builder” when creating or editing a page.
    * Click on the gray “+” button to add a new module or layout. This will open the Divi Builder’s module selector.
    * In the module selector, navigate to the “Basic” tab and choose the “Regular” option. This will add a new section to your page.
    * You can also choose other section types, such as Fullwidth or Specialty sections, depending on your design needs.
  2. Adding Rows:
    * Rows are containers within sections that hold columns and modules. Here’s how to add a row:
    * After adding a section, hover over it, and click on the blue “+” button that says “Add Row.”
    * This will open the row options window, where you can choose the row structure (number of columns) and column layout (equal width, custom width, etc.).
    * Once you’ve selected your row settings, click the green checkmark button to confirm and add the row to your section.
  3. Adding Modules:
    * Modules are the building blocks of your page content, such as text blocks, images, buttons, forms, and more. Here’s how to add a module:
    * After adding a row, hover over it, and click on the gray “+” button inside the row.
    * This will open the module selector window, where you can choose from various module types categorized under different content types (text, images & videos, forms, etc.).
    * Click on the desired module type to add it to your row. You can then customize the module’s content, styling, and settings using the module’s settings panel.
  4. Customizing Sections, Rows, and Modules:
    * Once you’ve added sections, rows, and modules to your page, you can customize them to fit your design and content needs:
    * Click on the settings icon (gear icon) for the section, row, or module you want to customize.
    * This will open the settings panel for that element, where you can adjust various settings, such as content, layout, design, advanced settings, etc.
    * Use the settings panel to customize the element’s appearance, add animations, adjust spacing, add background colors or images, and more.
    * You can also duplicate, delete, or drag and drop sections, rows, and modules to rearrange them on your page.
  5. Saving Your Changes:
    * After customizing your sections, rows, and modules, be sure to save your changes by clicking on the green checkmark button at the bottom of the settings panel.
    * Once saved, you can continue editing your page, previewing your changes, or publishing your page when you’re ready.
    By following these steps, you can effectively add sections, rows, and modules to your page using the Divi Builder and create stunning custom layouts for your website.

The below video will show you how to do this in more detail.

One thing I would strongly suggest is that you start as you mean to go on. That being said, I would encourage you to NOT.use the settings for headers & footers found under APPEARANCE>CUSTOMISE but I would take the time to set up specific templates for your header and footer and any other pages you need templates for such as blog posts or portfolio pages. You can read more about how to set up header and footer templates in my blog here.

 

  1. Set Up Theme Builder Templates (Optional):
    * To create custom headers, footers, or other global elements, you can use the Divi Theme Builder feature. Navigate to “Divi” > “Theme Builder” in your WordPress dashboard to access the Theme Builder interface and create custom templates for different parts of your website.
  2. Preview and Test Your Website:
    * Once you’ve created and customized all your pages, preview your website to ensure everything looks and functions as expected. Test your website across different devices to ensure responsiveness and usability.
  3. Launch Your Website:
    * After finalizing your website design and content, you’re ready to launch your website to the public. Congratulations, you’ve successfully created a website using the Divi Theme Builder!