Style a section in Builder

[sharonq]

Is there a way to apply a class to a builder section?

I would like to change the background of each section.

Topic

[Jason Bobich]

Yup, you’ve got tons of classes you can use there. Just whip out that inspector we’ve always talked about and see what’s there.

Checkout this article, as well: http://dev.themeblvd.com/tutorial/styling-builder-elements/

[sharonq]

Sorry – wasn’t clear.

I am ready style the sections with CSS but was looking for a way to add the class myself rather than use the defaults – that way if I reorder the blocks it won’t mess up my styles. Is this possible?

[Jason Bobich]

Apologies, but there’s no direct feature for doing this. But you could just get creative with different scenarios. For example, maybe want to style the “Slogan” element of a certain page only. So by looking at the body tag for that page, you can get unique classes to use like:

.page-id-123 .element-slogan { ... }

[sharonq]

Thanks Jason.

I’m building a front page with a stack of columns etc and was hoping to change the full width background on different sections for a more Bootstrap look.

I can do it using the page content and divs but Builder is no nice and I thought if there was a field for a class somewhere on the section that would be great. Just wanted to double check that I wasn’t missing anything.

[Jason Bobich]

Yeah, I did put filters on the classes used in the builder awhile back where this would be theoretically possible. I’ve had it on my list for awhile to figure out a way to make some sort of plugin that adds an additional “CSS class” option to every element of the layout builder.

[Author]

Replies