How to Use the Advanced Design Bar Option for Custom Classes, Margins and Padding
The CSS option in the main Customizer menu will load along with the theme’s styling, which is great if you just want to change things “globally”, but does not allow for easy custom classes or widget/page specific styling. For pros, this means you would need to use much more complex selectors to target specific pages or widgets, often requiring pseudo-elements.
Custom classes and styles added to the Advanced options in widget setups are saved along with the other data when exporting a page file, and only load when the widget does. By contrast, Custom CSS added to the main CSS area is applied to the entire site.
A custom class is an identifier that gets automatically added to the main widget’swrapper (such as the primary <div> )
You can use that identifier to build custom styles using CSS.
To add a class, click the Advanced button on the Design Bar, then type the class name into the Custom Class(es) field without a dot. The class name should be as short as possible but still unique.
For example, say we have a slider on a page we will use specifically to showcase promotions for our store. We can add a class called promos to our slider widget.
Now we can write any CSS style for this class or combine it with child selectors to affect specific elements in the widget such as the column title or button background color.
From here, there are a few things you can do with a custom class:
- Use it once to affect only this widget – custom styles are placed in the Custom CSS area of the widget.
- Use it to apply a global syle to this widget – custom styles are placed in the main Custom CSS panel in the customizer, and just the class is added to the Custom Class field in widgets you want to use that style for. This is useful when you have a style you want to use more than once across multiple Layers pages, but not have it affect ALL buttons, for example.
- Use it multiple times on the same page – custom styles are placed in the top-most widget Advanced option, and only the class is added to the Custom Class field in any widgets below it.
If you only want to affect this one widget, then ensure the class name you choose is totally unique and not re-used elsewhere on the page. The most fool-proof way of ensuring this is to add a semantic prefix that helps identify this page or this widget’s purpose, such as home-app-slider , or homepage-slider .
The following basic example shows how we added a class of promos to this page’s Layers Slider Widget, then used the browser inspector to look at the existing CSS styles for the title and excerpt text. We took the existing selector class combo .section-title.large .heading and combined it with our custom class to change the font size to be larger than the default “large” setting.
Of course, the Advanced option does require a little knowledge of working with CSS, as we need to know what the sub-class for these elements are and how cascade works. This is an easy technique to learn and a must for anyone who runs a website or a few.
You can also use the Layers Framework guide for further help with understanding which classes are always applied to certain elements (such as .section-title.large .heading for all widget headings using the Large setting) to get a better feeling for how widgets are structured.
Global Styles With Custom Classes
Custom styles don’t necessarily need to be added to this widget’s Custom CSS area if you plan to use the style in more than one place, such as creating an image-based button that you plan to use on multiple pages. You can create one custom style with a special class name like app-button and add it to the main CSS area, then simply add the class name to the widgets you want to use the style.
In this example, we combine a custom class named app-button with the large button class, which is btn-large :
Our custom button code is added to the CSS panel of the main Customizer menu. See the list at the end of this article for links to this and other Advanced widget styling tutorials with code snippets.
Now in our example Slider Widget , we can set the text size of the heading to the Large setting, and add the app-button class to the widget’s Advanced option = we don’t need to add the CSS since it already exists in the CSS panel.
If you add another widget, open its Advanced panel and add the same Custom Class name app-button . As long as your Slider Widget’s button or title size is set to Large, your buttons will be automatically transformed into your button image.
Page Specific Classes
The same shortcut can be applied with custom classes you created that you only want to use on this page. If you wanted all slider buttons to be white, as in our first example, but only on a specific builder page, you only need to add the style to the top-most widget’s Advanced option Custom CSS field. All widgets after that simply need the class name added to their Custom Class field.
Padding & Margins
The space between widgets can be adjusted through the Padding and Margin input fields, each of which correspond to the top, right, bottom and left sides of the widget.
Margins are applied to the outside of the widget’s box. Padding is applied to the inside. To reduce space between widgets, set the top padding to 20, then increase or decrease the number by 5 until it is where you like it.
Widget Anchor ID
This field simply shows you the dynamically created widget ID for this widget. This is helpful for creating menu anchors when building jump menus or single-scrolling pages.
You can add custom “name” attributes to your widgets to aid in creating single-scrolling menus.
Advanced Widget Tutorials
- How to Replace Buttons With Images in Layers Widgets
- How to Create a Single-Scrolling Page with Anchor Links
- How to Add Two Buttons in One Column or Slide
- Search overlay How to Show Titles on Post Widget Overlay Without Hover
- Content Widget Examples
- Slider Widget Examples