Select Page

Working With Your Divi Theme – Part 2

Advanced page controls for Divi

Remember if there is something specific about Divi that you aren’t sure of, check this link to the Divi Documentation page explaining what each part does in detail.

Controlling the space

The Divi visual builder gives you handles for controlling exactly how much space each section, row and module takes up. Two of the easiest to use are called Content Margins and Content Padding.

Click section settings on the outline of the blue section box.

Scroll down to the bottom and you will see custom padding. Padding pushes the content away from the direction listed.

“54px” from the bottom means the content will have 54 pixels of space between any content and the bottom of the border. If I reduce that to 0px then there will be no space at all from the bottom of the border.

Now let’s take a look at the row settings.

At the top there is a toggle to make the row fullwidth, increasing the size of anything within the row.

For example, the Purple background “call-to-action” module at the bottom of this page with the button going back to part 1 is a fullwidth module with a Custom Gutter Width of 0 (no distance between it and other modules or borders).

This is really useful for creating striking sections that take up the full width of any screen they are on. You can click on the mobile phone icon on the right to separate this for different size screens, and have different padding depending on whether it is shown on a desktop, tablet or phone.

This can also be done by clicking and dragging at the edges of the borders in both sections and rows.

I hope you have found this tutorial useful – these are just the basics of the Divi theme but I thought it best to explain it in my own words. Next take a look at the tutorial videos I have sent to you to see how to apply these to your own site.

If you have any feedback, be sure to let me know. It is hard to know what people will have problems with when you have as much experience with WordPress and Divi as I do, so please tell me what you need to know and I’ll update my tutorials.

%

You Finished the Divi Tutorial - Enjoy working with your swanky new website!

Back to Part 1 - Basics of Divi