• Facebook Icon Link
    • Instagram Icon Link

    The Ultimate Divi Theme Tutorial.


    ultimate divi theme tutorial graphic

    Divi Theme Tutorial Overview.

    This tutorial will explain how to install the Divi theme in WordPress, what the Divi Builder is, all about Divi sections, rows and modules and how to use them.

    Quickies.

    Divi Theme Tutorial.

    If you are setting up a new website, I highly suggest using a child theme. Are you new to child themes? See this tutorial: How to Make a WordPress Child Theme. If you need to install WordPress before we get started, check this out: How to Install WordPress.

    Divi WordPress Banner

    How to Install the Divi Theme in WordPress.

    Divi is a premium WordPress theme which means you must purchase it. You will get a lifetime license so it is well worth it especially if it becomes your go-to theme for all of your projects. You can purchase it here: Divi Theme. Once you have the Divi theme you can install it one of two ways: upload directly into WordPress or upload through an FTP connection.

    How to Upload Divi Directly Into WordPress.

    1. Login to the admin area of the website.
    2. Click on Appearance in the admin sidebar.

    wordpress admin sidebar menu appearance

    1. At the top left of the screen, click on Add New.

    wordpress add new

    1. Click on Upload Theme.

    wordpress upload

    1. Upload and activate the theme. Remember, if you are using a child theme, activate the child theme.

    How to Upload Divi via FTP.

    1. Make an FTP connection to your server. I like FileZilla but you can use any FTP application.
    2. Locate the directory that has the website in it. Most of the time it will be in the root directory but it could be in another folder if you have multiple websites. The root will typically be the public_html directory.
    3. Go to: wp-content > themes and upload the Divi theme folder into this directory.
    4. Login to the admin area of the website.
    5. Click on Appearance in the admin sidebar.
    6. You should see the Divi theme here.

    activate divi

    1. Activate the theme.

    The Divi Builder.

    The Divi Builder is an interface that lets you build web pages on the front-end or back-end of your website without having to know any code. Every page you build with Divi will consist of Sections, Rows, and Modules. For the most part, sections and rows provide the structure and some styling for the page and the modules provide the content on the page.

    Divi Sections.

    Everything you build in Divi has to be in a section. You can think of Divi sections as containers that hold rows and modules and stack vertically.

    divi section row module

    Divi Section Buttons.

    move divi sectionMove Section: Drag and drop the section to a new location on the page.
    divi section settingsSection Settings: Brings up the Section Settings panel.
    duplicate divi sectionDuplicate Section: Makes an exact copy of the section including everything in it.
    save divi section to librarySave Section to Library: Adds the section to the library so you can use it on other pages or export it for use in other websites.
    delete divi sectionDelete Section: Deletes the section.
    add divi sectionAdd New Section: Brings up the Insert Section panel. You can add a Regular Section, a Specialty Section, a Fullwidth Section, or a section from the Library.
    add divi rowAdd New Row: Adds a row to the section.

    Types of Divi Sections.

    divi insert section

    Regular Section: A regular section is made up of rows and each row must have the same column structure. If you want to change the number of columns in the section you will have to add a new row with the new column structure or use the Change Column Structure link.

    Specialty Section: A specialty section is made up of more complex column structures. You can have different column variations within a row. This solves the problem of unwanted page breaks in your design.

    Fullwidth Section: This section spans the entire width of the page. The fullwidth section has a limited number of modules available and there are no rows or columns in this section.

    How to Add a Section to a Page in Divi.

    1. Click on the Add New Section icon.
    2. Select the type of section you want to add: a Regular Section, a Specialty Section, a Fullwidth Section, or an existing section from your Library.

    Divi Banner

    Divi Rows.

    Rows are placed inside sections and can have many different column layouts. Rows create the structure of the page and are the containers for the modules.

    divi row

    Divi Row Buttons.

    move rowMove Row: Drag and drop the row to a new location on the page.
    row settingsRow Settings: Brings up the Row Settings panel.
    duplicate rowDuplicate Row: Makes an exact copy of the row including everything in it.
    change columnsChange Column Structure: Easily change the number of columns in the row.
    save row to librarySave Row to Library: Adds the row to the library so you can use it in other sections, pages or export it for use in other websites.
    delete rowDelete Row: Deletes the row.
    add rowAdd New Row: Adds a row to the section directly below the current row.
    add moduleAdd New Module: Brings up the Insert Module panel with a list of all modules available.

    How to Add a Row to a Section in Divi.

    1. Click on the Add New Row icon.
    2. Select the column layout you want to use.

    SiteGround WordPress Hosting Banner

    Divi Modules.

    Modules contain the actual content that makes up the page. Divi currently comes with 46 different modules and each module has its own settings. Some common modules are the text module, the image module, and the button module.

    divi modules list

    Divi Module Buttons.

    move moduleMove Module: Drag and drop the module to a new row or column on the page.
    module settingsModule Settings: Brings up the Module Settings panel.
    duplicate moduleDuplicate Module: Makes an exact copy of the module.
    save module to librarySave Module to Library: Adds the module to the library so you can use it in other sections, pages or export it for use in other websites.
    delete moduleDelete Module: Deletes the module.
    add moduleAdd New Module: Brings up the Insert Module panel with a list of all modules available.

    How to Add a Module to a Row in Divi.

    1. Click on the Add New Module icon.
    2. Select the type of module you want to use.

    Where Are the Divi Builder Page Settings?

    To access the Divi Builder page settings click the purple icon in the center bottom of the page.

    divi builder page settings

    Left Button Group.

    divi builder settingsBuilder Settings: Controls the general settings of the Divi Builder.
    wireframe viewWireframe View: Toggles between front-end view and wireframe view. The wireframe view is similar to the classic Divi Builder.
    zoom outZoom Out: Gives a zoomed out view of the page.
    desktop viewDesktop View: Preview page at desktop view, this is the default setting.
    tablet viewTablet View: Preview page at a tablet size.
    mobile viewPhone View: Preview page at phone size.

    Center Button Group.

    page settingsOpen Page Settings: Opens Divi Builder page settings.
    load from library buttonLoad From Library: Loads a page layout from the library.
    save to librarySave To Library: Save the whole page to your library.
    clear layout buttonClear Layout: Clears the entire page content and layout.
    divi page settings buttonPage Settings: Global page settings.
    divi editing history buttonEditing History: Shows editing history of the page so you can go back to an earlier version.
    divi portability buttonPortability: Export the page layout for use in another website or import a layout from a template or different website.
    close divi page settingsClose Page Settings: Closes Divi Builder page settings.

    Right Button Group.

    divi search buttonSearch: Searches the page for anything.
    divi question markQuestion Mark: Opens the Divi Builder Helper with video tutorials and keyboard shortcuts.
    divi save page buttonSave: Saves the page.
    divi publishPublish: Publishes the page.
    divi save draftSave Draft: Saves the page as a draft. The page will not be visible on the front-end of the website.

    Note: If the page has already been published, the Save Draft and Publish buttons will not be visible.

    Where Are the Divi Builder Document Settings?

    1. To access the Divi Builder document settings go to Pages > #Your Page#. If you are already on the page builder screen, click on Edit Page in the Admin Bar.
    2. Click on Document in the right sidebar.

    Status & Visibility: Edit the visibility of the page: Public, Private, or Password Protected. Select a publish date if you want to publish in the future.
    Revisions: Shows revisions so you can go back to an earlier version.
    Permalink: Edit the page URL or Permalink.
    Featured Image: Set the featured image of the page.
    Excerpt: Enter a summary of the page.
    Discussion: Allow or restrict comments on the page.
    Page Attributes: Assign a Page Template, Parent Page, and set page Order.
    Divi Page Settings: Dot Navigation and Hide Nav Before Scroll.

     

    Additional Posts.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Pin It on Pinterest

    Share This