How To Use The Included Divi Modules

by | Feb 25, 2017

In this module we will cover how to use the included Divi modules.  These can be found in the Divi theme and also the Divi Builder plug-in which can be added to any WordPress installation.  Persson Technologies includes Divi technology at no extra charge to all of our customers.

 

In this module we will cover these topics: 

  • Which modules are included in Divi at no extra charge
  • How to add a slider to a page/post and configure it
  • Adding a sidebar to a page/post and configuring it

Which modules are included in Divi at no extra charge

Divi Modules

As mentioned in a previous article, there are several modules built into Divi.  Without Divi, several of these would need to be added using individual plug-ins gathered from several different companies across the Internet.  Since these modules are all part of Divi you can rest assured they will always work and they will not conflict.  Shown here is a master list of all the modules that can be added within a Divi page or post.  For more details regarding each module you can click on the name of the module on this page.  In this tutorial we will show you how to actually add some modules to a page or post and how to configure these modules.  These steps should be similar for any module you might want to add but of course there might also be special settings that only relate to each module type.

Adding a slider to a page or post

To add a slider to any section of a page you simply click on the “insert module” control and choose “slider”.  I have added a slider to the section immediately preceeding this text and below I will walk you through the steps required to configure a basic slider.

To add a new slide to the slider you simply click on the “add new slide” control.  There are several other options shown in this image.  I have hidden the arrows on the left and right of each slide that would allow manual scrolling through the slides.  I have also hidden the controls at the bottom of the slide that would permit the user to navigate to any slide in the series.  I have enabled automatic animation so the slider will scroll through the slides.  There are many more configuration options that are not covered here as this is just a brief introduction to the slider module.

Please note that when adding images to a slider it is wise to resize the images so the slider and your web page in general will be more responsive.  Using 2 MB image files would not be ideal.  In this case I am re-sizing these images so the width is 800 pixels.

Slider Add New Slide
Slider With Images
I am including a screen shot showing how the slider configuration appears once the images have been added to the above slider.  In this case I have configured these slides by adding the photos as background images.  There are several options regarding the image size, these are configured using the “fit” option so the entire image will be displayed in the slider.
Coronado, CA
This is a famous hotel in Coronado, California
SanDiego, CA
This is a beach in San Diego, California
Syracuse, NY
This is a picture I took of a building in Syracuse, New York just because I thought it looked interesting
Here I have added a new slider with a light green background instead of an image background.  The images were added as slide images and I included some descriptive text explaining each photograph.
To give you an idea of how the finished product appears in Divi I am including a screen shot of the configuration for this slider section.  It is important that you label the sections in a manner that makes sense so when using this view you can tell which section of the page you wish to modify.
Slider Section Of Page In Divi

How to add a sidebar to a page/post and configure it

Sidebar Config Location
Adding the sidebar to a page is the same as adding any module to a page and this topic has already been covered.

I find the location of the sidebar configuration to be somewhat difficult to remember.  When I look for the configuration I might look in the general theme options, the module options for the sidebar, or as a last resort the configuration options for the specific instance of the sidebar on the page or post.  All of those locations are wrong.  The sidebar is a widget container so you need to enter the Widgets page in the Appearance section of the dashboard.  Note that configuration changes here affect all sidebars regardless of their location.

To add widgets you drag them from the left side of the screen and drop them onto the widget container such as the sidebar or a footer.  To configure a specific widget you click on the arrow to open the configuration options.  In this example I have expanded the configuration section for the “recent posts” widget in the sidebar.

It is also possible to download additional widgets from the web to add to your sidebar or other widget containers.

Sidebar Config Options

Here is an index to all the articles in this tutorial series:

 

  1. Introduction to WordPress Part One - WordPress Basics https://perssontechnologies.com/wordpress-basics/
  2. Introduction to WordPress Part Two - WordPress Themes, Plug-ins, and Updates https://perssontechnologies.com/wordpress-themes-plug-ins-and-updates/
  3. Introduction to WordPress Part Three - Introduction To Divi https://perssontechnologies.com/introduction-to-divi/
  4. Introduction to WordPress Part Four - How To Use The Included Divi Modules https://perssontechnologies.com/how-to-use-the-included-divi-modules/
  5. Introduction to WordPress Part Five - How To Use Divi Tweaks https://perssontechnologies.com/how-to-use-divi-tweaks/
  6. Introduction to WordPress Part Six - A Brief Introduction to Search Engine Optimization https://perssontechnologies.com/a-brief-introduction-to-search-engine-optimization/
  7. Introduction to WordPress Part Seven - WordPress Advanced Topics https://perssontechnologies.com/wordpress-advanced-topics/