Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #24805


    I would like to apply individual css classes (styles) to Layout Builder elements. How can this be achieved?



    You mean the Avia Builder on the admin side?

    Yeah, sure. Edit wp-contentthemesenfoldconfig-templatebuilderavia-template-builderassetscss

    Look for shortcode_insert_button styling. You can use the child and siblings css selector to target each element. Also note that there are four tabs which you can target by .avia-tab selector. Layout element tab will be avia-tab-1, Content element tab will be .avia-tab-2 and so on. For example if you want to style Text Block element, place this code below the shortcode_insert_button styling:

    .avia-tab-2 .shortcode_insert_button:first-child {
    background: red;

    For 1/3 column element under Layout elements, you can use this

    .avia-tab-1 .shortcode_insert_button:nth-child(3) {
    background: blue;




    Hey Ismael,

    thanks for the reply – it works fine (!) – but unfortunately it´s not what I was looking for…

    If I open an element in Content Builder to edit the content I would like to apply a custom css class to this element. It would be perfect if this could be done with all Content Builder elements. Please see the modified screenshot to get an idea. This feature would make it easy to design individual layouts.

    Thanks, Tom



    I marked this thread for Kriesi (feature request) because this would require some changes to the template builder elements code.

    Best regards,



    I am not sure about giving each element a unique class but the next update will allow to apply unqiue ids to sections, so you can place elements within a section and then target those elements by using the parent section id


    Wow, that makes styling much more better. Thanks! A unique css class for every element would make the theme most perfect. Why not think about it?

    Kind regards, Tom

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Layout Builder – Apply individual CSS styles’ is closed to new replies.