Elegant Themes' Divi template is a popular and robust WordPress theme known for its flexibility and user-friendly page builder. The spacing between columns in a row, also known as gutter width, is a highly sought-after customization by users.
Although the Divi builder offers predefined adjustments for gutter width, there are situations that may necessitate a more precise level of control using CSS. This guide can be utilized to assist in adjusting the gutter width within Divi by implementing CSS.
Comprehending Divi's Gutter Width
The Divi gutter width establishes the row's horizontal column spacing. Divi has three gutter width options by default:
- The narrow distance between columns is the first gutter width.
- Medium spacing is the default option for Gutter Width 2.
- Wide spacing is the third gutter width.
The row configurations in the Divi Builder enable users to adjust these settings. However, CSS offers a robust alternative for individuals seeking greater customization flexibility or more detailed control.
Why Use Gutter Width with CSS?
- It is possible to adjust the space between columns with greater accuracy and variety by using CSS to specify gutter width. It can be beneficial for:
- When the pre-built solutions don't satisfy the design requirements, there are unique layout requirements.
- Adapting gutter width to various screen sizes is a component of responsive design.
- Uniformity Throughout the Website: Ensure that the gutter width is the same on several pages or sections.
How to Use CSS to Adjust Gutter Width
You need to implement personalized styles on your Divi theme to be able to utilize CSS for adjusting the gutter width. Below is a comprehensive guide on how to do this:
Step 1: Determine the Columns and Rows
Locating the specific row and columns you want to edit is the initial task. Divi provides distinctive class identifiers for every row and column, allowing you to apply CSS styling to them. Columns are assigned classes such as .etpbcolumn, while rows typically possess a class identifier like .etpbrow.
Step 2: Include Personalised CSS
After determining which items are involved, you may set the gutter width by adding custom CSS. You have three options for doing this: utilizing a child theme stylesheet, adding the CSS straight to the page, or using the Divi Theme Options. The Divi Theme Options allow you to apply custom CSS in the following ways:
- Go to the Divi Theme Options page. Navigate to the Divi menu in your WordPress admin and choose "Theme Options."
- Click the Custom CSS Tab to open: To access the "Custom CSS" option, scroll down.
- The code that follows can be included in the Custom CSS section:
/* Adjust gutter width */
.et_pb_row {
margin-left: -15px; /* Adjust this value to control the overall row spacing */
margin-right: -15px; /* Adjust this value to control the overall row spacing */
}
.et_pb_column {
padding-left: 15px; /* Adjust this value to control the column spacing */
padding-right: 15px; /* Adjust this value to control the column spacing */
}
Step 3: Adjusting to Fit Various Devices
You might want to choose varying gutter widths for different screen sizes to ensure your design adapts well. To achieve this, media queries can be employed:
/* Default gutter width for desktop */
.et_pb_row {
margin-left: -15px;
margin-right: -15px;
}
.et_pb_column {
padding-left: 15px;
padding-right: 15px;
}
/* Adjust gutter width for tablets */
@media (max-width: 980px) {
.et_pb_row {
margin-left: -10px;
margin-right: -10px;
}
.et_pb_column {
padding-left: 10px;
padding-right: 10px;
}
}
/* Adjust gutter width for mobile */
@media (max-width: 767px) {
.et_pb_row {
margin-left: -5px;
margin-right: -5px;
}
.et_pb_column {
padding-left: 5px;
padding-right: 5px;
}
}
Step 4: Test and Save
Save your changes once you've integrated your custom CSS, then review your website to confirm that the gutter widths are displaying as intended. If you wish to achieve a specific spacing, you may have to fine-tune the parameters accordingly.
Divi's gutter width is customizable through CSS, offering a higher level of precision in managing column spacing and enabling the creation of layouts that accurately mirror your design vision. Utilizing custom CSS provides the adaptability required, whether aiming for a more compact layout or increased space between columns.
Innovative Methods for Customising Gutter Width
You can employ more advanced techniques alongside the fundamental ones to increase your precision in adjusting gutter widths within Divi. Here are several options:
/* Apply to all rows */
.et_pb_gutters {
margin-left: -20px;
margin-right: -20px;
}
.et_pb_gutters .et_pb_column {
padding-left: 20px;
padding-right: 20px;
}
Using a Gutter Width in Particular Rows or Sections
You have the option to assign personalized CSS classes to specific elements within the Divi Builder interface. This allows you to subsequently style these components using CSS, particularly when adjusting the spacing between columns or sections. As an illustration:
Add a Row's Custom Class:
- Open the row you wish to modify's settings in the Divi Builder.
- You can add a custom class name, like custom-gutter-row, under the "Advanced" tab.
- Add Personalised CSS to the Class:
/* Custom gutter width for a specific row */
.custom-gutter-row {
margin-left: -25px;
margin-right: -25px;
}
.custom-gutter-row .et_pb_column {
padding-left: 25px;
padding-right: 25px;
}
Integrating with Different CSS Attributes: You might consider merging adjustments to gutter width with various CSS properties such as padding, margins, or even flexbox attributes to create more complex layouts. This allows you to incorporate vertical spacing modifications or create uneven gutter widths, for example.
/* Asymmetrical gutter width */
.et_pb_row {
margin-left: -30px;
margin-right: -10px;
}
.et_pb_column {
padding-left: 30px;
padding-right: 10px;
}
/* Add vertical spacing */
.et_pb_column {
margin-bottom: 20px;
}
JavaScript-Based Dynamic Modifications
You can combine JavaScript with CSS to enhance control dynamically, especially when adjusting spacing between elements based on user interactions or live updates.
document.addEventListener('DOMContentLoaded', function() {
var rows = document.querySelectorAll('.et_pb_row');
rows.forEach(function(row) {
row.style.marginLeft = '-20px';
row.style.marginRight = '-20px';
});
var columns = document.querySelectorAll('.et_pb_column');
columns.forEach(function(column) {
column.style.paddingLeft = '20px';
column.style.paddingRight = '20px';
});
});
Testing and Troubleshooting
To ensure uniformity, evaluate your alterations across a range of hardware and browser pairings once they are integrated. Employ live CSS adjustments and inspect elements using resources such as Chrome Developer Tools.
You have the flexibility to adjust the design of your website further than what the Divi Builder's standard settings provide by leveraging CSS to personalize the gutter width. By utilizing CSS, you can achieve the specific appearance and behavior you want for your website without the need to specifically address each row, implement changes across the entire site, or employ intricate responsive design strategies.
With certainty, you can adjust the gutter widths within your Divi theme to enhance the professional appearance and user-friendliness of your website by referring to the guidance and illustrations provided in this post. As is customary with any alterations, remember to create a backup of your website prior to implementing significant adjustments, and conduct thorough testing to ensure a seamless user experience.
Using Child Themes for Divi Customization
It's recommended for users who frequently alter their Divi theme to create a child theme. You can make extensive changes to a child theme without affecting updates to the parent theme. This makes sure that your custom CSS doesn't get overridden and keeps its original gutter width changes.
- Making a Child Theme for Divi
- Make the folder for the child theme:
- Go to wp-content/themes in your WordPress directory.
- Make a new folder called divi-child for your child theme.
- Establish the look.CSS File:
- Make the file style.css inside the divi-child folder.
- To the file, add the following header:
- Make a file called functions.php:
- Make a functions.php file in the same folder.
- To enable the parent theme styles, add the subsequent PHP code:
- Turn on the Child Theme.
- Access your WordPress dashboard.
- Navigate to Themes under Appearance.
- Set the Divi Child theme to active.
- Customizing the Child Theme with CSS
- You can easily enter your custom CSS for gutter width modifications into the style.css file of your child theme once it has been activated.
/*
Theme Name: Divi Child
Theme URI: https://logic-practice.com/divi-child
Description: Divi Child Theme
Author: Your Name
Author URI: https://logic-practice.com
Template: Divi
Version: 1.0.0
*/
<?php
function my_theme_enqueue_styles() {
$parent_style = 'divi-style';
wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
/* Custom gutter width adjustments */
.et_pb_row {
margin-left: -20px;
margin-right: -20px;
}
.et_pb_column {
padding-left: 20px;
padding-right: 20px;
}
/* Responsive adjustments */
@media (max-width: 980px) {
.et_pb_row {
margin-left: -15px;
margin-right: -15px;
}
.et_pb_column {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 767px) {
.et_pb_row {
margin-left: -10px;
margin-right: -10px;
}
.et_pb_column {
padding-left: 10px;
padding-right: 10px;
}
}
Making Use of Divi's Pre-Inbuilt Design Features
Divi comes equipped with pre-installed design choices that can complement your personalized CSS endeavors, despite CSS offering a greater degree of customization. These include:
- Row and Column Settings
Within the Divi Builder, each row and column has design settings that allow you to adjust the spacing, including:
- Gutter Width: In row settings directly, you can select predefined gutter width: 1-4.
- Custom Padding and Margin: It is possible to specify the padding and margin values specifically if the person wants greater control over the spacing.
- Spacing Module: There is also an additional Spacing module that can be added to the layouts to control the spacing precisely between elements without getting into CSS.
This tutorial explores the customization options within the Divi theme Visual Builder and Custom CSS.
Designing Real-Time - Divi's Visual Builder can be used to make changes on the fly. Combining this with custom CSS can streamline the design process:
- Use the Visual Builder to Layout Your Design.
- To begin with, the Visual Builder interface offers an easy-to-use drag-and-drop page layout to create the desired page.
- Tap the plus/minus buttons in the built-in settings menu to change the gutter's widths to get a rough design.
- Refine with Custom CSS:
- Once the general structure is established, the use of custom CSS can fine-tune your site further.
- This hybrid approach ensures you get the best of both worlds and the ability to have very granular control over installs.
- Save Settings - The Best "Underused" Feature in Divi CSS. Global adjustments, partial changes, section bypass, and various other techniques for CSS customization enable detailed adjustments to the appearance of elements in the design. If you layer up all these CSS tricks with Divi's features and maybe a child theme for long-term maintenance, you can rest easy with the knowledge that your site will look good and can be run, too.
Tips for Working with CSS to adjust Gutter Widths with Divi
In the design of Divi Theme, the customization of gutter width by CSS is highly useful for the web project, yet some practices to reinforce the maintainability, performance, and accessibility of the web project should be avoided.
- Keep CSS Organized Always keep the CSS sheet uncluttered, sort the classes according to their respective functions, and use descriptive labels in sections. This practice would offer an easier way to find a specific style and change it if needed.
- Use Specificity Wisely Be mindful to use high specificity for the CSS to take precedence over Divi's predefined styles. If you have multiple elements with the same classes or IDs attached, use additional attribute selectors to customize only the elements you need.
- Making the Most of Browser Developer Tools Include functionalities for using browser developer tools such as Google Chrome extensions). g. and use tools designed for this function, such as the Chrome DevTools to view elements on a page, test CSS styles in real-time before applying them, or solve errors. This helps in learning how to use a particular style before applying it fully.
- Test Over Various Devices and Browsers Make sure changes to the appearance of your site are acceptable on various computers and displays as well as in different browsers. Checking your website on a set of tools simulating devices and actual devices will help you identify any discrepancies.
- Minimize CSS Bloat Use CSS with proper thought and avoid including CSS rules that are not really needed to avoid having a large CSS file that may slow the page load. Ensure that you only include styles that will help you carry out your customizations.
- Backup Before Editing the Document Zip up your whole site before changing any CSS entries. This is to ensure that you can always restore the article in case of failure.
- Extra Materials and Equipment To augment your proficiency in Divi customization with CSS, contemplate perusing the subsequent materials and instruments.
- Divi Community and Documentation Elegant Themes offers a wealth of documentation covering a wide range of topics related to the Divi theme, including best practices and customization advice. Join Facebook groups, forums, and other online communities to ask questions, share experiences, and receive assistance from other Divi users.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divi Custom Gutter Width Example</title>
<style>
.et_pb_row {
margin-left: -15px;
margin-right: -15px;
}
.et_pb_column {
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 980px) {
.et_pb_row {
margin-left: -10px;
margin-right: -10px;
}
.et_pb_column {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 767px) {
.et_pb_row {
margin-left: -5px;
margin-right: -5px;
}
.et_pb_column {
padding-left: 5px;
padding-right: 5px;
}
}
.custom-gutter-row {
margin-left: -25px;
margin-right: -25px;
}
.custom-gutter-row .et_pb_column {
padding-left: 25px;
padding-right: 25px;
}
</style>
</head>
<body>
<div class="et_pb_section">
<div class="et_pb_row">
<div class="et_pb_column et_pb_column_1_2">
<div class="et_pb_text">
<p>General Column 1 Content</p>
</div>
</div>
<div class="et_pb_column et_pb_column_1_2">
<div class="et_pb_text">
<p>General Column 2 Content</p>
</div>
</div>
</div>
</div>
<div class="et_pb_section">
<div class="et_pb_row custom-gutter-row">
<div class="et_pb_column et_pb_column_1_2">
<div class="et_pb_text">
<p>Custom Row Column 1 Content</p>
</div>
</div>
<div class="et_pb_column et_pb_column_1_2">
<div class="et_pb_text">
<p>Custom Row Column 2 Content</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output: