How To Use Divi Tweaks
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:
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:
- 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.
- Text Orientation – This can be left, right, center, or justified.
- Disable on – The module can be hidden on phones, tablets, or desktops.
- 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.
- Header and text style, color, spacing, etc. – the purpose and operation of these options is self explanatory
- 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.)
- Custom padding and margins -The topic of margins and padding was covered earlier in this tutorial.
Image Module Settings
Here are some example configuration settings that can be changed in the image module:
- 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)
- Open in Lightbox – This enables the feature whereby a click on the image will open a larger image
- 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.
- 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.
- Image Alignment – The image can be aligned left, right, or center within the module
- Disable on – The image can be hidden on phones, tablets, or desktops
- 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.
- 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.)
- Custom Margin – The topic of margins and padding was covered earlier in this tutorial
Here is an index to all the articles in this tutorial series:
- Introduction to WordPress Part One - WordPress Basics
- Introduction to WordPress Part Two - WordPress Themes, Plug-ins, and Updates
- Introduction to WordPress Part Three - Introduction To Divi
- Introduction to WordPress Part Four - How To Use The Included Divi Modules
- Introduction to WordPress Part Five - How To Use Divi Tweaks
- Introduction to WordPress Part Six - A Brief Introduction to Search Engine Optimization
- Introduction to WordPress Part Seven - WordPress Advanced Topics