Divi Theme: Beginner’s Guide to Divi Theme Tutorials

Divi Theme is an innovative creation of Elegant Themes which is a complete theme framework to create any kind of WordPress site without learning programming codes. Divi Theme makes easy to create and manage your entire WordPress regarding design sections, page building options, header and navigation management, search engine optimization, email marketing, social follow management, membership login form, user subscription management and much more.

Divi Theme is a made easy to WordPress beginner who does not know coding but very eager to create personal or business blog or site with WordPress.

Divi WordPress Theme
To keep beginner’s word in mind I have arranged a complete guide to Divi Theme tutorials where you learn how to install, activate and license your Divi Theme, get started with Divi Library, Divi Module and Divi Customizer. Hope that you enjoy reading.

 

Divi Theme Installation, Setup & Activation

1. How to Install and Activate Divi Theme on WordPress

How to Install and Activate Divi Theme on WordPressDivi WordPress theme can be downloaded from official Elegantthemes site which provides all the Divi versions, plugins, documentations and supports. As a beginner you have many things to learn about Divi theme which starts from theme downloading, installation, activation and tutorials to create awesome pages. Divi is not any simple WordPress theme, it’s a dynamic page builder plugin and it enables you to create any kind of WordPress site you want. Here is a complete tutorial that teaches you how to download, install, activate and update Divi theme on WordPress site…Read More

2. How to Update Divi Theme on WordPress

how to update divi theme wordpressThis is an additional tutorial that teaches you how you can update Divi theme with Elegantthemes updater plugin. This plugin can be downloaded from Elegantthemes site for free. To update Divi theme you need to have a membership account with Elegantthemes so that you can get a Personal API Key which you will use to update Divi theme in addition with other Elegantthemes products…Read More

 

Divi Theme Basic Guides

3. Using Divi Premade Layouts

Using Divi Premade LayoutsDivi premade layouts are built for creating and designing pages instantly by simply loading premade contents from Divi Library. Divi Predefined Layouts contain tons of different content layouts which are mainly categorized in Product Features, Contact Us, About Us, Landing Page, Sales Page, Our Team, Creative Agency, Maintenance Mode, Portfolio Fullwidth Grid, Project Extended, Blog Masonry, Homepage Portfolio etc. You can load any of these predefined layouts which suite your business most also add your custom made layout to Divi Library to use on multiple pages…Read More

4. Using Divi Library

Using Divi LibraryDivi Library is the ultimate design toolkit of your Divi builder. In Divi Library you can store your favorite layouts, sections, rows or modules for future use. You create pages with Divi builder using sections, modules, rows and other elements, after creating and designing your page you can save this as a layout to Divi Library by giving a unique name. Whenever you add a new page you can use your custom made layout without doing the same work as you have done before. Divi Library provides you these advantages and you can use this option to create landing pages that grab users’ attention and boost up sales…Read More

5. Divi Theme Rows & Row Options

Divi Theme Rows & Row OptionsDivi Rows are important element to add module and create blog post or page. Divi provides different row styles 1/1, 1/2 1/2, 1/3 1/3 1/3, 1/4 1/4 1/4 1/4, 2/3 1/3 etc. formats. After adding a row style Divi builder allows you to add modules in different categories: Accordion, Audio, Bar Counters, Call to Action, Code, Contact Form, Blog, Blurb etc. Without Divi row options you can’t create any page so this is an important component of Divi builder…Read More

6. The Divi Theme Options

The Divi Theme OptionsDivi them options are the most important part of Divi theme since all the important theme settings are included in “Divi Theme Options” section including General, Navigatoin, Layout, Ads, SEO, and Integration.

In General section Divi allows you to add basic changes across your site regarding: Logo, Favicon, Fixed Navigation Bar, Blog Style Mode, Email Subscription Setup, Social Accounts Setup, Date Format, Shortcodes etc.

Navigation allows you to bring changes in Pages, Categories, General Settings etc.

Layout integrates settings for Single Post Layout, Single Page Layout. Ads management allows you to enable 468X60 Banner sizes on different places on your site.

SEO section plays an important role to optimize your site for Search engines ranking. You can setup SEOs for Homepage, Single Post Page, and Index page. Integration is simply the code integration for Header, Body, Single Top, Single Bottom and custom code integration for Header, Footer, Top and Bottom of your posts…Read More

7. Divi Theme & Module Customizer

Divi Theme & Module CustomizerDivi theme and module customizer provides you control over Divi theme style and Div modules. You can access to Divi Theme Customizer via the Divi −> Theme Customizer and Divi −> Module Customizer links in your WordPress account dashboard. Divi theme customizer gives you control over site-wide theme elements, like menu & logo style or your body or header text styles. Also you can bring changes on Footer, Button, Blog, Mobile Styles, Widgets, and Static Front Page etc. With Divi module customizer you can bring changes on Image, Gallery, Blurb, Tabs, Slider, Testimonial and all other Divi Modules…Read More

8. Introduction to Divi Sections

Introduction to Divi SectionsDivi sections are the important element to create and design your blog post or pages. Each section allows you to add rows and different modules. You can add multiple rows and modules in one section. Click on section settings to add background image or color, play video in background, use parallax effect, and add inner shadow etc. Also Divi section allows you adding Custom CSS with CSS ID, Class and custom code Before, and After element…Read More

9. Divi Right Click Controls

Divi Right Click ControlsWhenever editing page or post with Divi builder you can right click on any element that may be section, row or module to apply controls over that element including Rename, Save to Library, Undo, Disable, Lock, Collapse, Copy, and Preview. With Right click controls you can quickly bring changes on your elements. Suppose if you do anything wrong with your page you can click on “Right Mouse” and choose “Undo” though latest version of Divi includes “Undo” and “Redo” buttons…Read More

10. Divi Right Role Editor

Divi Right Role EditorDivi Role Editor allows you apply different roles for Administrator, Editor, Author and Contributor. Using the Divi Role Editor, you can limit the types of actions that can be taken by WordPress users of different roles. This is a great way to limit the functionality available to your customers or guest authors to ensure that they only have the necessary options available to them. Normally for each role editor all items remain enabled but you can disable any item for Editor, Author and Contributor…Read More

11. Creating Blank Pages with Divi Theme

Creating Blank Pages with Divi ThemeDivi theme allows you to create blank pages with “Blank Page” template that is saved inside theme template. Whenever you need to create a blank page just choose “Blank Page” template in Page Attributes and add content inside your page. Blank page template keeps disabled your header and footer options and a specific page layout, only leaving what is built with the builder visible. With Blank page template you can create a sales landing page, a coming soon page, a newsletter optin page, or a maintenance mode page…Read More

12. Using Blog Post Formats with Divi Theme

Using Blog Post Formats with Divi ThemeDivi theme supports all major blog post formats like Article, Video, Audio, Quote, Gallery and Link. Each of these formats structures you post differently, putting more focus on the type of content that the format represents. If you want to create a video based post simply choose Video under Format options. Also choose Audio, Quote, Gellery, and Link for different post formats and each will be displayed in individual blog post style…Read More

13. Creating Mega Menus with Divi Theme

Creating Mega Menus with Divi ThemeDivi Mega menus are the special attraction to visitors while searching for content through navigation option. Mega menu contains upto 4 columns under one single menu. If you want to create mega menu with Divi theme simply navigate Appearance −> Menus and create a normal menu style first. Setup different links under a specific menu and append that menu under one single menu. In this way you can build a mega menu to display portfolio, store, shop, products and services…Read More

14. Creating a New Project with Divi Theme

Creating A New Project with Divi ThemeDivi allows you building projects for your business. A ‘Projects’ menu item has been added right inside of your Admin Panel so you can create projects as if you were creating a Post or Page. You also have the option to use the basic project structure, or to use the builder to create truly amazing project layouts. To create new projects simply navigate to Projects −> Add New and you will appear on default WordPress editor while you can add either “Divi Builde” or “Default Builder.” Once you’re familiar with Divi Builder you can easily create projects for your business…Read More

15. Creating One-Page Websites with Divi Theme

Creating One-Page Websites with Divi ThemeDivi allows you to create one page website which means all your content will be displayed on a single page with sections. These sections can be accessed through “Dot Navigation” option once Dot Navigation is enabled for the page. There is another good point adding “Dot Navigation” is that all the sections will be assigned with different IDs so that you can let visitors’ access specific section from menu options by appending Section’s ID on menu…Read More

 

Divi Theme Modules

16. The Divi Blurbs Module

The Divi Blurbs ModuleBlurb module is a simple and elegant combination of text and imagery. Blurb module can help you providing information for specific section, and rows to display skills of features. Inside Blurb Module Settings you can provide Title, URL, Icons, Image, Content and much more. The Advanced Settings options allow you to add properties for Image max width, Icon font size, Header font, Body font etc. In Custom CSS sections add CSS ID or Class also code before and after element…Read More

17. The Divi Slider Module

The Divi Slider ModuleDivi Slider module is a great way to display custom slider with Heading, Text, Button, Background Image, Slide Image, Background Overlay, Slide Video, Background Video and much more options. Sliders can be placed anywhere, spanning the full width of whatever column structure they are in. Divi sliders support parallax backgrounds, as well as video backgrounds!…Read More

18. The Divi Pricing Tables Module

The Divi Pricing Tables ModuleDivi’s awesome pricing table module allows you to display featured pricing tables for buying membership to join your site and access your products and services. You can see a featured table when buying membership to join at Elegantthemes, likewise you can create your own pricing table and attract visitors to join your site. With Divi pricing tables you can create as many tables as you want, and control the pricing and features of each. You can even feature a particular plan to increase conversions. Even if your module includes more than one pricing table, it will be treated as one module, and can be placed into any column size…Read More

19. The Divi Call to Action Module

The Divi Call To Action ModuleDivi Call-to-Action is an important element to grab visitors’ attention on specific offers, or promotions to let them take actions on it. Call-to-Actions module displays a Title, a short text and CTA button which tells to take action. You can add different styles on your Call-to-Action regarding Background color, Background Image, Max width, Header style and much more. The CTA module is a simple combination of a title, body text and a button…Read More

20. The Divi Image Module

The Divi Image ModuleDivi theme allows you to add images in grid style with title, text and anchor text. To add image module simply click on Sections and choose Image. With Image module you can add URL of your image or paste an image URL. Add an Image alternative text, Image title text, Link URL, Animation (Lazy-loading Animation) etc. In Advanced design settings you can apply more styles in Image max width, fore fullwidth, border and custom margin…Read More

21. The Divi Portfolio Module

The Divi Portfolio ModuleWith Divi portfolio module you can display blog posts in either fullwidth or grid view. Define how many posts you want to display. Include Categories only work if you have any projects assigned to a category. With the Portfolio Module you can show off your work anywhere on your site in any column structure. Portfolio module can help you to display your work that you have covered with projects in attractive styles that your visitors will prefer to get engaged…Read More

22. The Divi Blog Module

The Divi Blog ModuleDivi Blog module and Portfolio module are the same the only difference is that Portfolio module displays your projects in different categories and Blog module displays your posts only. With Blog module you can display blog posts either fullwidth or grid layout. You can define how many posts you want to display per page. You can include categories, define Meta Date Format. Content will be displayed as Excerpt or Content. You can have control over Author, Date, Categories, Comment Count, and Pagination etc…Read More

23. Divi Email Optin Module

Divi Email Optin ModuleDivi email optin is integrated with three services (1) MailChimp (2) Feedburner (3) Aweber etc. If you want to display email optin with MailChimp you have to add MailChimp authorization code on “Theme Options” or Aweber authorization code to enable either MailChimp or Aweber email option. You can choose your email lists either from MailChimp or Aweber lists. Provide Title and button text of your Email optin and finally click “Save & Exit” or “Save & Add to Library” to add this as a layout to your Divi library…Read More

24. Divi Text Module

Divi Text ModuleDivi Text module is a primary module to display texts on your blog post or page. With Divi text module you can choose text color as dark or light. Choose text orientation Left, Right, Center or Justified. You will get WordPress default post editor to type your content. When you’re finished typing your content click on “Save & Exit” and you’re done…Read More

25. Divi Toggle Module

Divi Toggle ModuleDivi toggle module is great way to display multiple contents with expandable toggle options. To add toggle module you need to add a section first then choose Toggle from Module manager. Toggle is the best option to display FAQs about your services. Toggle module settings allow you to add Title, State as Close or Open, and Content. When you’re done editing your Toggle settings simply click on “Save & Exit” button…Read More

26. Divi Tabs Module

Divi Tabs ModuleTabs are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of tabs that will look great inside any sized column. At 1/4 columns, tab buttons are stacked and remain visible. At larger sizes, tab buttons lay in a horizontal row. With Divi tabs you can display different content with texts, links or widget option. You can choose multiple tabs but giving it limits to 4 or 5 tabs can boost your presentation quality…Read More

27. Divi Contact Form Module

Divi Contact Form ModuleDivi Contact form module provides intuitive options to display an engaging contact form including three form options: Name, Email and Message. You can add any more fields you want to create a customized contact form for your business. Display captcha option is enabled which protects your contact form from spam attack. In email field add your business email where you want messages to be sent from Divi contact form. Also provide a title of your contact form and message pattern…Read More

28. Divi Social Follow Module

Divi Social Follow ModuleDivi Social Media module lets you adding icon-based links that point to your online social profiles, like Facebook, Twitter and Google+. Social module supports 14 different social networks including top social networks: Facebook, Twitter, Google+, Pinterest, LinkedIn, Tumblr, Instagram and more. To add an account simply choose any account and provide Account URL, choose Icon color and click on “Save” button. When you’re all done simply click on “Save & Exit”…Read More

29. Divi Accordion Module

Divi Accordion ModuleDivi Accordion is as like as Toggle module which is a great way to consolidate information within a single system. Accordions are very similar to tabs, except that the items are displayed within a vertical list. When a new item within the list is opened, the previously-opened item is closed and the new item’s content is displayed…Read More

30. Divi Login Form Module

Divi Login Form ModuleDivi member login is a great system to display an intuitive login form which Administrator and Contributors can use to login your site. Divi login module displays two fields (1) Username and (2) Password. You can provide Login form title, choose background color, text color and text orientation to left or right also add content to your module section and finally hit “Save & Exit”…Read More

31. Divi Shop Module Integration

Divi shop moduleDivi shop module is a great way to display products on a single page of your Recent, Featured, Sale, and Top Rated products from your site. Divi has been designed to be WooCommerce compatible. To integrate WooCommerce you will need to install the latest version of WooCommerce. WooCommerce is a WordPress recommended online shopping plugin; it has the nicest feature set, interface and follows the best coding practices. After you enabled the plugin, you will see a new “WooCommerce” and “Products” section has been added to your WordPress Dashboard. You can use these areas to adjust your eCommerce settings and publish new products. You can find full documentation on WooCommerce hereRead More

 

Divi Theme Library

32. Divi Global Modules, Rows & Sections

Divi Global Modules, Rows & SectionsA Global library item is a module, row or section that appears exactly the same on whatever pages it is added to. You can add a single global module to multiple pages. If you change the item on one page, it gets updated instantly on all of the other pages it has been added to as well. A simple use-case for this would be a Call To Action Module that appears at the bottom of many or all of the pages on your website. If a single module is repeated on multiple pages, it’s very useful to make this module Global. This way, you don’t have to edit every single page when you want to make a change to it.

When you add a layout to Library you can enable “Make this a global item” to save that library item as global. Finally click on “Save and Add to Library”…Read More

33. Using Selective Sync

Using Selective SyncSelective sync allows you to save individual settings when saving a new library item. You can choose to selectively sync any or all of the General Settings, Advanced Design Settings or Custom CSS tabs. For example, if you save a new module to the library, and choose to only sync the Advanced Design Settings, then only these settings will be added to the library…Read More

34. Importing & Exporting Divi Library Items

Importing & Exporting Divi Library ItemsDivi importing and exporting option allows you import or export layout content using XML format. If you have built great looking library, you may want to add that library on different websites. To export any Divi library, first access your Divi Library by clicking on Divi −> Divi Library. Now click on “Export Divi Layouts” and select template you want to export Sections, Rows or Modules. Later click on Download Export File and save the XML file on your computer hard drive. You can use this Library on other Divi sites you want…Read More

 

Divi Theme & Module Customizer

35. Divi Header & Navigation Customizer Settings

Divi Header & Navigation Customizer SettingsDivi Header and Navigation customizer allows you to bring changes on Header Format, Primary Menu Bar, Secondary Menu Bar, and Header Elements. To access Header & Navigation customizers simply choose Divi −> Header & Navigation. In Header format you can bring change on Header style. In Primary menu bar bring changes on Menu height,Logo max height, Text size, Letter spacing, Font, Font style, Font Size, and Fullwidth, Logo Image options. On secondary menu you can bring the same changes but a little bit different. In Header elements you can show Social icons and search icons also provide Email and Phone number. Finally click Save and you’re done!…Read More

36. Divi Layout & Typography Customizer Settings

Divi Layout & Typography Customizer SettingsDivi theme customizer provides lots of ways to bring changes on Site Identity, Layout Settings, Typography and Background. To access General Settings simply navigate to Divi −> Theme Customizer and choose General Settings. In Site Identity choose Site title and Tagline. In Layout Settings you can either enable boxed layout or use custom sidebar width. In Typography settings choose Body text size, line height, header text size, letter spacing, fonts and other design properties…Read More

37. Divi Mobile Customizer Settings

Divi Mobile Customizer SettingsEnabling Divi for mobile styles including Tablet, and Phone can help your visitors access your site from any device they want. To bring changes on Mobile Styles simply choose Divi −> Theme Customizer −> Mobile Styles. Now you will see your theme is automatically enabled to view screen for Table device. Click on Tablet and bring changes on design properties including Section height, Row height, Body text size and Header text size. In the same way click on Phone and bring changes on design properties for Phone screen view. You can also bring change on mobile menu. When you’re all done simply click on “Save Changes” and you’re done!…Read More

 

Divi Theme Example Sites

38. Most Popular Divi Theme Examples

divi example sitesExplore Divi sites from following categories which can inspire you to create yours with Divi Theme

 

Divi Theme Freebies

39. Divi Theme Freebies

divi freebiesExplore the Divi Theme freebies which you can utilize to rich your site’s content and layout. Divi theme freebies include fre Divi theme, free shortcodes, icons, vectors, banners and more stuffs. You can download any of the freebies from Divi resources that come from Elegantthemes official site…Read More

Conclusion

I have tried to put much effort to arrange a complete tutorial on Divi Theme that can help beginner’s to get started appropriately with Divi theme and start building sites with proper confident. I will be updating this page with new tutorials on Divi Theme that exactly appears on this site.