The Ultimate Divi Theme Tutorial. 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.How to Install the Divi Theme with WordPress.How to Upload Divi Directly Into WordPress.Upload Divi via FTP.The Divi Builder.Divi Sections.Divi Section Buttons.Types of Divi Sections.How to Add a Section to a Page in Divi.Divi Rows.Divi Row Buttons.How to Add a Row to a Section in Divi.Divi Modules.Divi Module Buttons.How to Add a Module to a Row in Divi.Where Are the Divi Builder Page Settings?Left Button Group.Center Button Group.Right Button Group.Where Are the Divi Builder Document Settings?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.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.Login to the admin area of the website.Click on Appearance in the admin sidebar.At the top left of the screen, click on Add New.Click on Upload Theme.Upload and activate the theme. Remember, if you are using a child theme, activate the child theme.How to Upload Divi via FTP.Make an FTP connection to your server. I like FileZilla but you can use any FTP application.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.Go to: wp-content > themes and upload the Divi theme folder into this directory.Login to the admin area of the website.Click on Appearance in the admin sidebar.You should see the Divi theme here.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 Buttons. Move Section: Drag and drop the section to a new location on the page. Section Settings: Brings up the Section Settings panel. Duplicate Section: Makes an exact copy of the section including everything in it. Save 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 Section: Deletes the section. Add 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 New Row: Adds a row to the section.Types of Divi Sections.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.Click on the Add New Section icon.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 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 Buttons. Move Row: Drag and drop the row to a new location on the page. Row Settings: Brings up the Row Settings panel. Duplicate Row: Makes an exact copy of the row including everything in it. Change Column Structure: Easily change the number of columns in the row. Save 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 Row: Deletes the row. Add New Row: Adds a row to the section directly below the current row. Add 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.Click on the Add New Row icon.Select the column layout you want to use.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 Module Buttons. Move Module: Drag and drop the module to a new row or column on the page. Module Settings: Brings up the Module Settings panel. Duplicate Module: Makes an exact copy of the module. Save 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 Module: Deletes the module. Add 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.Click on the Add New Module icon.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.Left Button Group. Builder Settings: Controls the general settings of the Divi Builder. Wireframe View: Toggles between front-end view and wireframe view. The wireframe view is similar to the classic Divi Builder. Zoom Out: Gives a zoomed out view of the page. Desktop View: Preview page at desktop view, this is the default setting. Tablet View: Preview page at a tablet size. Phone View: Preview page at phone size.Center Button Group. Open Page Settings: Opens Divi Builder page settings. Load From Library: Loads a page layout from the library. Save To Library: Save the whole page to your library. Clear Layout: Clears the entire page content and layout. Page Settings: Global page settings. Editing History: Shows editing history of the page so you can go back to an earlier version. Portability: Export the page layout for use in another website or import a layout from a template or different website. Close Page Settings: Closes Divi Builder page settings.Right Button Group. Search: Searches the page for anything. Question Mark: Opens the Divi Builder Helper with video tutorials and keyboard shortcuts. Save: Saves the page. Publish: Publishes the page. Save 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?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.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. Web DevelopmentThe 2020 Ultimate Guide to Favicons.Read More Web DevelopmentHow to Install a Free SSL Certificate.Read More WooCommerceHow to Setup One Page Checkout in WooCommerce.Read More
