Question

Disable the Header/Footer edit handles based on user Role

  • 14 January 2022
  • 2 replies
  • 7 views

Hey everyone!. 

So I’m working on a multisite. I need to disable the header/footer edit handle bars that appear when you are editing a page in the Elementor Editor. Those little orange tabs that show up when you over over the aforementioned locations of a page. 

How best to accomplish this with hooks? I’ve looked through the documentation and nothing is jumping out at me. Essentailly if the current user role is X then I want to say, “Hey elementor, don’t show these things to them.”

Any suggestions or ideas are welcome. Even if it’s hokey like hiding it via CSS rule like display:hidden; 
 


2 replies

Ok I figured out a little something that seems to have accomplished what I was after. If you know a better way please share. Seriously!

I have this hiding the elementor-document-handle as well as a couple of section options I don’t want the non-admin users to have access to. Premium addons as well as the Template folder. I want them to only have access to the Add Section option.

Hope this helps someone else!  :grin:

/**
* Add to your functions.php or custom plugin as desired.
* Hides the Edit Header/Footer tabs inside the elementor editor
*/
add_action( 'elementor/element/parse_css', function( $post_css, $element ) {

$user = wp_get_current_user();
if ( !in_array( 'administrator', (array) $user->roles ) ) {
// Hide the Premium Addons for elementor Sections widget
$selector = 'div.elementor-add-section-area-button.pa-add-section-btn';
// HIde the Template section option.
$selector .= 'div.elementor-add-section-area-button.elementor-add-template-button,';
// Hide the Document handles. To keep people from accessing the Header/Footer orange edit tabs.
$selector .= 'div.elementor-document-handle';
$style_rules = [
'display' => 'none!important', //property and value
'visibility' => 'hidden'
];
$post_css->get_stylesheet()->add_rules($selector, $style_rules, null);
}
}, 10, 2 );

 

Whoops. Looks like I forgot a comma after I updated it to post here. Here is the corrected code.

 

add_action(	'elementor/element/parse_css', function( $post_css, $element ) {

$user = wp_get_current_user();
if ( !in_array( 'administrator', (array) $user->roles ) ) {
// Hide the Premium Addons for elementor Sections widget
$selector = 'div.elementor-add-section-area-button.pa-add-section-btn,';
// HIde the Template section option.
$selector .= 'div.elementor-add-section-area-button.elementor-add-template-button,';
// Hide the Document handles. To keep people from accessing the Header/Footer orange edit tabs.
$selector .= 'div.elementor-document-handle';
$style_rules = [
'display' => 'none!important', //property and value
'visibility' => 'hidden'
];
$post_css->get_stylesheet()->add_rules($selector, $style_rules, null);
}
}, 10, 2 );

 

Reply