Full-width row with colored columns with Divi

While I was doing a new website, for one of the pages I wanted to create a nice 2-column design. The main column would be giving a detailed description about a service, the other column would be the “sidebar” outlining the different services in that area.

It’s quite easy to do with the Divi builder, just choose a section, set the gutter, set the background and you are done.

But what happens if you want to have a more complex layout in the main column, for example start with 1 wide column, then have more columns, while the sidebar remains the same and follows the content all the way to the end? And filling the whole width of the screen?



That is where it gets a bit tricky.

Fortunately it is not at all that hard to do and most of it can be done with the settings in the Divi Builder. Only a few lines of CSS is needed, which you can find in the sidebar (step 12) and you will need to paste it into the Divi > Theme Options > General tab > Custom CSS box.

In the sidebar you can read the detailed steps for creating such a layout.

If you don’t want to bother setting it up, then you can simply download 2 free layouts or purchase the full pack of 9 layouts from the store. (More layouts will likely come soon.) Note though, you will still need to manually paste the CSS snippet!!! Otherwise it will not work.

An in any case I suggest to check the video below which walks you through the setup step by step.

You like it? Or you don’t? Let me know about it in the comments below.

Got questions? Leave a comment at the end of the page or write me.

This is my short version:

Insert specialty section (1/3 – 2/3)
Insert module in the left column
Insert column and module in right column
Open Specialty Section Settings, Content tab
1. Set background color (this will be the background color of the wider column)
2. Set background color of column 1
Open Specialty Section Settings, Design tab
1. Use custom width: yes
2. Unit: %
3. Custom width: 100%
4. Equalize column heights: yes
5. Use custom gutter width: yes
6. Gutter width: 1
7. Custom padding: 0px 0px 0px 0px
8. Column 1 padding: 2em 2em 2em 2em
9. Column 2 padding: 2em 2em 2em 2em
Open Specialty Section Settings, Advanced tab
1. CSS Class: tdm-full-special-section
2. Column 1 CSS Class: tdm-full-special-section-sidebar*
3. Column 2 CSS Class: tdm-full-special-section-main*
  * The sidebar should be the one where you can only insert modules, the main should be the one where you can also insert rows with different layouts
Save & Exit
Open Row Module Settings, Design tab
1. Custom padding: Top 0px
Save & Exit
Open the settings of the Module in the sidebar column, Design tab
1. Custom padding: Bottom 1em
Save & Exit

Go to Divi > Theme Options > General tab > Custom CSS box and paste in the code

/* TRUE FULL-WIDTH ROW WITH COLORED COLUMNS */
/* Make the row really full width */
.tdm-full-special-section .et_pb_row {
    width: 100% !important;
}
/* Adjust sidebar column content for large screens */
@media screen and (min-width: 981px) {
    /* Content more narrow than sidebar column */
    .tdm-full-special-section-sidebar.narrow .et_pb_module {
        max-width: 300px;
    }
    /* Content floating right, typically when narrow and when on left side */
    .tdm-full-special-section-sidebar.float-right .et_pb_module {
        float: right;
    }
}

Notes: if you want to make the content of the sidebar column less wide, add “narrow” in the CSS class field of the sidebar. If you also want to make it stick to the right, then add also “float-right”.

Done