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?
I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.
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.
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.
Nothing sneaky about being rewarded for sending relevant traffic :)
Thanks Alan. I’m always in two minds about affiliates and their power to corrupt.
Great work, David. Very helpful.
Thanks Fran. I completely missed your comment until now so sorry for that
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.
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.
Thanks.
Logo hiding doesn’t work anymore with the new beaver version?
Never mind it’s all good. :)
Cool, thanks Tariq
I am curious to know if there is a plugin that will do this?? I am very apprehensive about making these changes myself!
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 :-(
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;}
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?
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.
scrap that, i figured out how it works. thanks for the code mate!
Pleased you got it sorted Reuben :-)
I am having the same . Can you explain how you resolved the issue?
What happens if i do not wish to direct this to editor? i want to direct this restriction to author instead?
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.
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?