Follow us

Q3: Making The Specialty Section Fullwidth | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

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 wink

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.

Making the specialty section fullwidth

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

Making the specialty section fullwidth

 

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.

specialty4

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 wink Here is what mine looks like.

Making the specialty section fullwidth

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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!