Turn on Custom CSS Class field for all ALB Elements

Once enabled, the following function adds a new field to each of your Advanced Layout Builder element’s pop up menu.

First Add this line of PHP to your functions.php file so that the custom class field is enabled:

add_theme_support('avia_template_builder_custom_css');

Whenever you open a shortcode/template builder element now you will see the following custom class field:

blur

Add Custom Classes to your Elements

Now you can add a custom class name of your choice so that you can easily style that element either through the Quick CSS field, custom.css file or your child theme’s style.css file. Just make sure to use unique class names so there are no conflicts with other plugins or the theme’s css.

Keep Class Names Unique

A good practice is to prefix the class with your initials. For example, Kermit The Frog would use the following to add a border to something:

ktf-darkborder

Then in the Quick CSS filed in the theme’s Styling options:

#top .ktf-darkborder {
  border: 1px solid #333;
}

The additional #top selector helps give the css some additional authority in case the element already has a border property.