Q3: Making The Specialty Section Fullwidth

Here is a another Quick snack for you, making the specialty section fullwidth. I love the specialty section and think it is really underused, it’s great for more complex layouts and can be used to create a really nice effect with multiple module types.

Before we start, I just want you to know how difficult it is for me being British to write Specialty rather than Speciality in this post! But seeing as Divi uses Specialty, I am reluctantly ignoring all those red zig-zag lines spell check is placing under the word

Click here to check out the live demo.

So let’s get cooking!

Ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes
Images if you intend to use them.

Cooking time

This should take you around 5 minutes max.

Preparation

The first thing we need to do is create a new specialty section, I am using the first one of the nine options available.

Now open up the Section Settings, click on the Custom CSS tab of your section and add in a Custom CSS Class, I’m using ds-fullwidth-specialty, then save & exit

Method

You will see in the specialty section advanced settings tab that there is an option to make the section fullwidth. However, this doesn’t work like it does on standard sections and your content will not reach to the edge of the screen as you would expect it to so there is no need to activate it, we are going to do that with CSS instead.

Copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/*--------------Fullwith Specialty Section----------------------*/

.ds-fullwidth-specialty> .et_pb_row {
min-width: 100% !important;
}

Now you will need to add in the columns, rows and modules you want to use in your specialty section. I’m not going to go through each one as with nine layouts to choose from and 40+ modules there are too many variations to consider. but you get the idea Here is what mine looks like.

You will also need to play around with the padding values in the section, rows and modules to get it looking just how you want. Generally, I am using 5% padding in column 1 of the section with a little bit of padding to the right of each of the text modules.

And that’s it, easier than you thought it would be eh?.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X