Quick Snack: Making The Specialty Section Fullwidth

by | Mar 18, 2016 | CSS Tips & Tricks, Sections

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Quick Snack: 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.

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 😉 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. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. 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.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

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

You have successfully joined the waitlist!