How To Use Divi Tweaks

by | Mar 4, 2017

This tutorial covering how to use Divi tweaks relates to 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:

 

  • Section, row, and module padding
  • Module configuration examples

Section, row, and module padding

As noted in previous installments of this tutorial series, Divi modules are contained in rows and rows are contained within sections on the page.  All of these objects include options that can be used to further define how the object should appear on the page such as how much space should exist between objects.  Here are some examples of these settings:

 

Section Settings

Section Padding

Row Settings

Row Padding

Module Settings

Module Padding
You might discover that some objects have settings for padding, some have settings for margins, and some have settings for both.  What is the difference between margins and padding?  If you do not have a border around your item they can be used interchangeably.  Let’s take the example of an image with a border around it.  The padding will determine the space surrounding the image within the border, whereas the margin will determine the spacing between the border and the surrounding items on the web page.
Margins And Padding

Module configuration examples

Different modules contain different setting options.  Here we will briefly review two of the most often used modules, the text and image modules.

 

Text Module Settings

Here are some example configuration settings that can be changed in the text module:

  1. Text Color – This can be set to light or dark depending upon whether the background is light or dark.  The text color can be further refined in the “Advanced Deisgn Settings” section.
  2. Text Orientation – This can be left, right, center, or justified.
  3. Disable on – The module can be hidden on phones, tablets, or desktops.
  4. Admin Label – This needs to be set so when the page is viewed in Divi you can easily determine the content of all text modules on the page.
  5. Header and text style, color, spacing, etc. – the purpose and operation of these options is self explanatory
  6. Use border – If the border is enabled, additional options will be displayed for the border color, width, and style (such as solid, dotted, double, etc.)
  7. Custom padding and margins -The topic of margins and padding was covered earlier in this tutorial.
Text Module Settings Part One
Text Module Settings Part Two
Text Module Settings Part Three
Image Module Settings

Here are some example configuration settings that can be changed in the image module:

  1. Image Alternative Text – This is text that describes the content of the image for people using text-only browsers, screen readers or web crawlers (this will be covered in more detail in our SEO section of this tutorial series)
  2. Open in Lightbox – This enables the feature whereby a click on the image will open a larger image
  3. Link URL – If this image acts as a clickable object that leads to another site the URL is specified here and you can also specify if the new web page replaces this page or opens in a new tab in the browser.
  4. Animation – When the image first appears on the web page it can fly in from the left, right, top, or bottom.  It can also fade in or you can choose no animation.
  5. Image Alignment – The image can be aligned left, right, or center within the module
  6. Disable on – The image can be hidden on phones, tablets, or desktops
  7. Admin Label – This will allow you to easily determine the content of this image when viewed in the Divi Configuration.  I usually set this to be the same as the image alternative text.
  8. Use Border – If the border is enabled, additional options will be displayed for the border color, width, and style (such as solid, dotted, double, etc.)
  9. Custom Margin – The topic of margins and padding was covered earlier in this tutorial
Image Module Settings Part One
Image Module Settings Part Two
Image Module Settings Part Three

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/