Customizing & Restricting the Beaver Builder Editor for clients

This video looks at how easy it is to hide and block various parts of the Beaver Builder editor for certain user roles. We’ll look at the hiding the Beaver Builder logo, Toolbar buttons and Module and Saved template areas. We’ll also look at how to restrict client access to Rows, Columns, Modules or even an entire page.

Links

Set Page Builder editing capabilities

Hide options in the Page Builder toolbar

(this from the new Beaver Builder Knowledge base was I discovered after making the videos and includes some other CSS snippets for hiding element. Particularly useful is sub navigation buttons to the “help” button.

The Code Snippets

This needs to go in your child theme’s functions.php file:

// https://gist.github.com/jancbeck/3178689 (Bryan Willis)

if ( is_user_logged_in() ) {
 add_filter('body_class','add_role_to_body');
 add_filter('admin_body_class','add_role_to_body');
}
function add_role_to_body($classes) {
 $current_user = new WP_User(get_current_user_id());
 $user_role = array_shift($current_user->roles);
 if (is_admin()) {
 $classes .= 'role-'. $user_role;
 } else {
 $classes[] = 'role-'. $user_role;
 }
 return $classes;
}

This needs to go in your child theme’s style.css file:

To make Modules, Columns or Rows clickable to for client you need to add “no-edit” (without the “”) to the advance tab of the area you would like to restrict. Add to the CSS class selector area as in the video.


/*Example in the video */

/*Removes the Beaver Logo from the Toolbar*/
.role-editor .fl-builder-bar .fl-builder-bar-title img {
display: none;
}

/* This hides the editor tabs (style,advanced and any others from 3rd party add-ons)*/
.role-editor .fl-builder-lightbox .fl-builder-module-settings .fl-builder-settings-tabs {
display: none;
}

/* Add these to make rows,columns or modules non editable */
.fl-builder-edit .role-editor .fl-builder-content .no-edit {
pointer-events: none;
border: 1px solid red;
}
/* This adds a red border so administrators know which areas they have blocked */
.fl-builder-edit .fl-builder-content .no-edit {
border: 1px solid red;
}
.fl-builder-edit .role-editor .fl-builder-content .no-edit:before {
content: "NOT EDITABLE";
color: #FFFFFF;
text-align: center;
background-color: red;
border: 1px solid red;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
z-index: 999999;
position: absolute;
white-space: nowrap;
}

This earlier video explain the idea of using CSS to block content areas (not role based here)

More Snippets to  Hide individual elements

Hopefully these are understandable from their selector names.

/*-------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Removes Logo, buttons and module sections */
.role-editor .fl-builder-bar .fl-builder-bar-title img {
 display: none;
}
.role-editor .fl-builder-bar .fl-builder-bar-title {
 display: none;
}
.role-editor .fl-builder-bar .fl-builder-help-button {
 display: none;
}
.role-editor .fl-builder-bar .fl-builder-tools-button {
 display: none;
}
.role-editor .fl-builder-bar .fl-builder-templates-button {
 display: none;
}
.role-editor .fl-builder-blocks #fl-builder-blocks-widgets {
 display: none;
}
.role-editor .fl-builder-blocks #fl-builder-blocks-saved-rows {
 display: none;
}
.role-editor .fl-builder-blocks .fl-builder-blocks-node-template {
 display: none;
}
/*Removes Module icons*/
.role-editor .fl-module .no-icon .fl-block-remove {
 display: none !important;
}
.role-editor .fl-module .no-icon .fl-block-col-settings {
 display: none !important;
}
.role-editor .fl-module .no-icon .fl-block-copy {
 display: none !important;
}
.role-editor .fl-module .no-icon .fl-block-move {
 display: none !important;
}
/*Removes column icons */
.role-editor .fl-col.no-icon .fl-block-remove {
 display: none !important;
}
.role-editor .fl-col.no-icon .fl-block-col-settings {
 display: none !important;
}
.role-editor .fl-col .no-icon .fl-block-copy {
 display: none !important;
}
.role-editor .fl-col .no-mod-icon .fl-block-move {
 display: none !important;
}
/*Removes row icons */
.role-editor .fl-row .no-icon .fl-block-remove {
 display: none !important;
}
.role-editor .fl-row .no-icon .fl-block-col-settings {
 display: none !important;
}
.role-editor .fl-row .no-icon .fl-block-copy {
 display: none !important;
}
.fl-builder-edit .role-editor .no-icon .fl-block-move {
 display: none !important;
}

Restrict editing on a whole page

This CSS need to be added via the Page Builder front editor while in the page that need restricting.


/*Blocks the whole page - add the Page Builder editor via Tools > Layout CSS/ JavaScript (CSS tab input area) */
.fl-builder.role-editor .fl-builder-content {
 pointer-events: none;
 border: 1px solid red;
}

.fl-builder.role-editor:before {
 content: "NOT EDITABLE";
 color: #FFFFFF;
 text-align: center;
 background-color: red;
 border: 1px solid red;
 padding: 5px 10px;
 font-size: 12px;
 font-weight: 600;
 z-index: 999;
 position: absolute;
 white-space: nowrap;
}

 

Over to you… Is the something missing here?. Do you think we need a plugin? What should the Beaver Builder team be adding to the core?

DWcircle

I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.

22 Comments

  1. Alan Alan on 16th September 2016 at 10:29 am

    Hey David.

    That’s a great little video and whilst we’ve been using Beaver builder for some time to create layouts for clients that they can easily update afterwards, we’d not made any attempt to restrict what they could actually do. Thanks for shining the light on these features that are so easy to implement.

    A quick heads up, your link to Beaver Tunnels in your Bio 404’s. Perhaps you can fix that when you get time.

    • David Waumsley David Waumsley on 16th September 2016 at 12:19 pm

      Hi Alan, Thanks so much for popping by and the kind words. To be honest I have not needed to restrict either. The conversation though keeps coming up about it. I expect some of the things here will get implemented soon by the BB team. They have been trying to nail down what people actually need recently.

      Thanks for noting the Beaver Tunnel 404. It was a sneaky aff. link and it looks like they have a problem with it.

      • Alan Alan on 16th September 2016 at 12:33 pm

        Nothing sneaky about being rewarded for sending relevant traffic :)

        • David Waumsley David Waumsley on 17th September 2016 at 5:06 am

          Thanks Alan. I’m always in two minds about affiliates and their power to corrupt.

  2. Fran Fran on 20th September 2016 at 3:39 pm

    Great work, David. Very helpful.

    • David Waumsley David Waumsley on 19th December 2016 at 3:16 am

      Thanks Fran. I completely missed your comment until now so sorry for that

  3. Tariq Tariq on 18th December 2016 at 7:08 pm

    Very good job. but only problem I couldn’t get to hide the Row icons.
    So the advance tab still shows on Row module. Any solution for that?

    Also for it to be in effect i have to re-run child theme configurator. But thats fine.

    • David Waumsley David Waumsley on 19th December 2016 at 4:09 am

      Hi Tariq,

      Thanks for commenting. I never worked out how to isolate the advance tab. If it’s the standard install the CSS below effectively does that

      .fl-builder-lightbox .fl-builder-module-settings .fl-builder-settings-tabs {
      display: none;
      }

      If the tabs that needs hiding is alway the same position you could use nth-child

      .fl-builder-lightbox .fl-builder-module-settings .fl-builder-settings-tabs:nth-child(n+2){
      display: none;
      }

      I’m sure there’s a better way.

      • Tariq Tariq on 31st March 2017 at 5:34 am

        Thanks.

        Logo hiding doesn’t work anymore with the new beaver version?

        • Tariq Tariq on 31st March 2017 at 5:38 am

          Never mind it’s all good. :)

          • David Waumsley David Waumsley on 31st March 2017 at 5:41 am

            Cool, thanks Tariq

  4. Michele Holley Michele Holley on 30th August 2017 at 2:23 pm

    I am curious to know if there is a plugin that will do this?? I am very apprehensive about making these changes myself!

    • David Waumsley David Waumsley on 31st August 2017 at 9:08 am

      Hi Michele,

      Thanks for commenting. No plugins to help with Beaver Builder restrictions (that I know of), but this post really could use an update as the Beaver Builder team have a few more options that I have not checked out properly

      I personally came to the conclusion that for my business I am better off training the client rather than restricting them so I have not been keeping up to date. Sorry :-(

  5. Reuben Reuben on 25th September 2018 at 3:49 am

    Hi david,

    Just wondering how do you get these ‘names’
    .fl-builder-lightbox .fl-builder-module-settings .fl-builder-settings-tabs

    The reason i need to know is because before i start on my project, i might be using third party plugins and might cased a few more additional tab to be appearing there. So i need to know how and where i can get those names so i could use the above code

    .role-editor .fl-builder-blocks .fl-builder-blocks-node-template {
    display: none;}

    • David Waumsley David Waumsley on 25th September 2018 at 9:13 pm

      Hi Reuben. I personally like to use Stylizer to help understand what selectors are being applied to an element (and to get a senses of the order of the cascade) http://www.skybound.ca/. Is that what you meant?

  6. Reuben Reuben on 1st October 2018 at 6:43 pm

    hmmm hey david! sorry for the late reply! i tried to use your above tutorial and implement the restrictions to other user role. However, it’s not reflecting anything for me. I’m pretty sure that i may have did somewhere wrong but i am not sure what’s the mistake..

    I am using : Beaver builder plugin(pro) & Beaver theme child

    I tried to insert the code as stated above into both my function.php as well as style.css

    Here’s a look of my current function.php & style.css
    Style.css: https://photos.app.goo.gl/1P6tw8dbTQ9RxDMe8
    Function.php(part 1) : https://photos.app.goo.gl/99qhGGHeE15K2aAF6
    Function.php(part 2) : https://photos.app.goo.gl/jTb9bLDNr3HaJScU9

    i went on to set “no-edit” into one of my module class but when i log in as another user, it seems that particular module still can be edited. strange.. i followed exactly in the video.. is there anything that i have missed out?

    Oh and to add on,

    1) apparently right now in BB plugin they do have a restriction for user access. But however there are modules which i would not wish for clients to even touch on. ( for example, the menu module) so i still need to learn from you how do i restrict user to even click on that module.
    2) I also downloaded a third party plugin called ” powerpack beaver addon”. wondering if the above code also have the ability to hide and restrict other user roles to edit.

    • Reuben Reuben on 2nd October 2018 at 8:15 am

      scrap that, i figured out how it works. thanks for the code mate!

      • David Waumsley David Waumsley on 3rd October 2018 at 5:40 pm

        Pleased you got it sorted Reuben :-)

      • Nita Nita on 26th July 2019 at 3:46 pm

        I am having the same . Can you explain how you resolved the issue?

  7. john john on 3rd October 2018 at 7:02 am

    What happens if i do not wish to direct this to editor? i want to direct this restriction to author instead?

    • David Waumsley David Waumsley on 3rd October 2018 at 5:08 pm

      You would just need to swap the .role-editor in the CSS to .role-author. The php is adding these selectors based on the role someone has logged in.

  8. JOHN LEE JOHN LEE on 22nd October 2018 at 6:49 am

    Hi!

    is there anyway to remove away the “row setting” button away? i do not wish to restrict the row away for my client because i do want them to edit a certain module within the row itself. however i would want to remove away this “row setting” button.
    https://photos.app.goo.gl/a5yQoZnnS6dkU2LbA

    is there and additional css code i could use to achieve this?
    I am not too sure but i am currently using a 3rd party addons for beaver builder does this affect it also?

Leave a Comment