• ProBeaver Weekly
    Weekly for all things Beaver

  • How to remove specific columns layout for rows in Beaver Builder

    Out of the box, Beaver Builder plugin allows you to add rows containing: 2, 3, 4, 5 and 6 columns. What if you want to keep only 1 and 2 columns row layout and remove 3,4,5,6 columns row layout? Chinmoy at posted a code intensive solution for this, here is a CSS based solution. Choose method as per your perference.

    Before and After view of Beaver Builder

    Beaver Builder Columns in row layout

    Hiding specific columns layout in Beaver Builder

    1. Open any page in Beaver Builder mode.
    2. Go to: Tools > Global Settings option.
    3. Paste the following CSS code and Save changes. It’s done!

    This will hide specific columns layout on all pages when opened in the edit mode of Beaver Builder. You can alternatively – add this code to style.css file of your child theme.

    If you want this to happen on only specific pages(s), instead of adding above CSS code in “Global Settings”, add it to “Layout CSS / Javascript” box on that specific page (Tools > Layout CSS / Javascript).

    Davinder Singh Kainth

    About Davinder Singh Kainth

    Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)

    2 Comments

    1. Chinmoy Paul on December 5, 2016 at 2:20 pm

      Very simple one.

    2. Athlone on December 6, 2016 at 5:53 am

      Sweet! Thanks, so simple and clean.

    Leave a Comment





  • Pro Stuff

    for  Beaver Builder

    Pro Styles for Beaver

    Customize Beaver Builder Modules beautifully with pre-made CSS packs

    Creative9

    A premium modern agency template for Beaver Builder users