Elementor Document Settings

Elementor’s Document Settings feature allows the user to control various page definitions straight from Elementor’s editing panel.

The Document Settings controls are similar to element controls. In a similar way, you can extend the Document Settings capabilities, and add new controls and settings that will be managed through the Document Settings panel.

Controls structure

In the Document Settings panel, controls that define the settings of the page appear under two tabs:

  • Settings – For controlling certain page definitions like: page title, page template, post status etc.
  • Style – For controlling style definitions of the page, like background, padding etc.

Adding a new settings

Similarly to widgets, you can add more controls to Document Settings for controlling and saving any type of setting. The new controls can be added to the existing tabs, or to any new tab from the available tabs in Elementor.

Let’s see an example for adding a control that sets the items color in the page menu:

function add_elementor_page_settings_controls( \Elementor\PageSettings\Page $page ) {
	$page->add_control(
		'menu_item_color',
		[
			'label' => __( 'Menu Item Color', 'elementor' ),
			'type' => \Elementor\Controls_Manager::COLOR,
			'selectors' => [
				'{{WRAPPER}} .menu-item a' => 'color: {{VALUE}}',
			],
		]
	);
}

add_action( 'elementor/element/page-settings/section_page_style/before_section_end', 'add_elementor_page_settings_controls' );

With this example, we have created a function that adds a control for the instance of the class Elementor\PageSettings\Pagethat represents all the settings that can be controlled with the Document Settings panel.

The returned value from the control affects the page by defining selectors. In Document Settings, the {{WRAPPER}}placeholder represents a unique class for the body element.

After creating the function, we added an action that is called before closing the whole controls section. In the example above we have added the action before closing the section called section_page_style that contains all the Document Settings controls that have to do with styling.

Notes:

  • Adding the prefix {{WRAPPER}} before each selector is important to make sure the style rules do not cause any conflicts in case they are assimilated in other pages (like with the ‘Elementor Library’ widget).
  • Different themes may include changes of menu item selectors, or will require adding selectos that override the default theme directions. This is why the example above should be seen as an example alone and not as exact instructions.

Saving control value

The returned item from each control, including custom made controls, is saved automatically in the post meta of the page. This post meta contains all the settings that are related to Document Settings (Not including some settings that require different treatment). In most cases, you will not need to do any special modifications while saving the control you’ve created.

Retrieving saved value

Much like any Elementor element, you can get the saved value of each Document Settings control.

The right way to access is shown in the example below:

// Get the current post id
$post_id = get_the_ID();

// Get the page settings manager
$page_settings_manager = \Elementor\Core\Settings\Manager::get_settings_managers( 'page' );

// Get the settings model for current post
$page_settings_model = $page_settings_manager->get_model( $post_id );

// Retrieve the color we added before
$menu_item_color = $page_settings_model->get_settings( 'menu_item_color' );

echo $menu_item_color; // Possible output: '#9b0a46'

Live Preview

Each control contains a setting that determines how it will affect the live page preview right after changing its value. Similarly to widgets, when we set a selectors or a prefix_class to the control, the system will make sure to update the page automatically.

However, there are some situations where we would want to add custom made functionality that will be performed after each change of the control (for example: refresh of the preview area). We can do this with JavaScript:

We will first create the function that will handle the returning control value:

function handleMenuItemColor ( newValue ) {
	console.log( newValue );
	elementor.reloadPreview();
}

Next, we will connect the function and the control we created:

elementor.settings.page.addChangeCallback( 'menu_item_color', handleMenuItemColor );

Now, after every change of the control, the function handleMenuItemColor will run when it gets a parameter of the new control value.

Get The Latest Updates

We have a lot more where that came from! Join 880,651 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.