Divi full-width layout

The Divi theme by Elegant Themes is a popular choice for creating beautiful and customizable WordPress websites. One of the key features of Divi is its ability to create full-width layouts, which can help you achieve a more immersive and visually appealing design.

To create a full-width layout in Divi, you can use the built-in Divi Builder and its row settings. By default, Divi uses a grid system with columns, but you can easily make a row full-width by adjusting its settings.

Here’s an example of how you can create a full-width layout using the Divi Builder:

function wpsnippets_divi_full_width_layout() {
    if ( function_exists( 'et_pb_is_pagebuilder_used' ) && et_pb_is_pagebuilder_used() ) {
        add_filter( 'et_pb_main_query_layout', '__return_full_width_content' );
    }
}
add_action( 'wp', 'wpsnippets_divi_full_width_layout' );

This code snippet checks if the Divi Builder is being used on the current page and, if so, applies a filter to make the main content area full-width. The et_pb_main_query_layout filter is used to modify the layout of the main content area, and the __return_full_width_content function is a built-in Divi function that returns the full-width layout.

You can add this code to your theme’s functions.php file or in a custom plugin. Once added, any page that uses the Divi Builder will have a full-width layout.

This code snippet is useful for anyone using the Divi theme who wants to create a full-width layout for their website. It allows you to take advantage of the Divi Builder’s drag-and-drop interface and design capabilities while achieving a visually appealing full-width layout.

Examples

Example #1: Creating a Full-Width Layout in Divi

This example demonstrates how to create a full-width layout in Divi using custom CSS.

.wpsnippets_full_width_layout {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

Explanation: This CSS code sets the width of the layout to 100% and removes any padding on the left and right sides, allowing the content to span the full width of the page.

Example #2: Adding a Full-Width Section in Divi

This example shows how to add a full-width section to a Divi page using the Divi Builder.

function wpsnippets_add_full_width_section() {
    if ( function_exists( 'et_builder_add_settings_to_divi_area' ) ) {
        et_builder_add_settings_to_divi_area( 'et_pb_section' );
    }
}
add_action( 'init', 'wpsnippets_add_full_width_section' );

Explanation: This code adds a custom function that hooks into the init action and calls the et_builder_add_settings_to_divi_area function to add full-width settings to the Divi section module. This allows you to enable the full-width layout option for any section in the Divi Builder.

Example #3: Creating a Full-Width Header in Divi

This example demonstrates how to create a full-width header in Divi using a custom template.

function wpsnippets_create_full_width_header() {
    if ( function_exists( 'et_builder_add_layout' ) ) {
        et_builder_add_layout( 'full-width-header', 'Full Width Header' );
    }
}
add_action( 'init', 'wpsnippets_create_full_width_header' );

Explanation: This code adds a custom function that hooks into the init action and calls the et_builder_add_layout function to create a new layout template for a full-width header in Divi. This allows you to easily select and use the full-width header template in the Divi Builder.