Dynamic Content for Elementor – Frontend Navigator

Introduction

Dynamic Content for Elementor recently added a new feature, a front-end navigator. It allows you to look at the structure of pages created with Elementor. This is a useful debugging and informational tool and works with Elementor and all addon widgets, no matter the vendor.

Video Version

Enabling and Disabling the Frontend Navigator

The Dynamic Content for Elementor settings are located under the Elementor menu in the WordPress dashboard. The settings for the Frontend Navigator are found on the Globals tab. The first checkbox for “Frontend Navigator” toggles the feature on or off.

When debugging, you may want to view the site as a non-logged in visitor to, for example, test a display condition. The “Enable for Visitor” option is a toggle that allows for a non-logged in site visitor to use the feature in a read-only mode, if they add a URL parameter of “?dce-nav“.

The “Enable Copy Button” checkbox enables a copy function that copies a selected portion of the page, the Elementor sections, widgets, etc, to the clipboard. These can then be pasted into another page.

The Feature in Action

To show the feature in action, I’m looking at the Resources page on the Elementor360 website. I selected this page to illustrate the feature because it is a more complex page. It is the archive for a Custom Post Type called “Extensions” and the extensions are categorized into three groups: themes, plugins, and tools, using a custom taxonomy. There is a template added to the page for each of the categories and within each template there is a Loop created using the “Elementor Custom Skin” plugin. Here is screenshot of the full page.

When the Frontend Navigator is enabled there is a new admin toolbar button added to the top called “Navigator.”

Often when you hover over the menu item you just see the page, if it is a simple page. However, since this page has several template components, you can see those listed in the sub-menu. You can click on any of those sub-menus to go into the Elementor editor to edit that template, which is a nice convenience.

If you click on the top level Navigator menu item then you toggle on the front-end navigator panel. The panel shows on the right side of the page. This is similar to the Elementor Layout Navigator that you can toggle on in the Elementor editor. It shows the full layout of the page with all of the elements. The ones that show in yellow are the page, archive, and templates. The sections show in blue.

If you hover over one of the items in the navigation structure then an edit icon appears. If you click on the edit icon then you go into the Elementor editor.

If you click on one of the items in the navigator structure, it is highlighted in blue on the page, so you can match the two together. Also, on the left side of the page a panel opens with information about the element.

This panel has a lot of information about the selected element. At the top, in red, is the element name. Under that it shows that it was a widget. In the Details list there is the name of the widget type again. The Time information is the amount of time it took for the widget to render. This is useful in the event that a page is loading slowly. It shows that there are 4 heading widgets and that the category, which is the group in the Elementor editor. In this case it is found in the Basic panel. This information would make investigating where widgets are used much quicker than opening individual pages one-by-one in the Elementor editor.

You can click on the “eye” icon to toggle the element on and off (hide and show). The “copy” icon allows you to copy whatever you have selected in the navigator structure and paste it into another page. This could be copied into another page on the site, or using the cross-site functionality, to another site with Elementor and Dynamic Content for Elementor installed. The edit button will open the page in the Elementor editor.

Special Visibility Feature

The Frontend Navigator has an additional feature related to the Dynamic Visibility functionality. Here is a page in the Elementor editor where I’ve set a display condition. I set the “Subscribe to our newsletter” section to be visible during the month of June.

Now here is the page from the front, with the navigator open. We see the section with the visibility condition has a red highlight around it.

If we click on that section in the navigator then we see more information in the details panel. As you can see, it shows the display condition that has been set for the section. This is a great helper when trying to debug display conditions.

Conclusions

The Dynamic Content for Elementor Frontend Navigator adds good debugging and convenience functions:

• It provides a fast link into editing pages and templates from the top sub-menu.
• The right side navigator that lists all of the elements on the page is a good way to see the elements used, how they are nested, and the page structure.
• The ability to click on an element and go into the Elementor editor for the page is a convenience.
• The information panel on the left side that opens when an element is selected in the navigator has a lot of useful information. For example, the widget’s name and the widget group it was in is useful when trying to track down where particular widgets are used. The timing information is useful when trying to debug slow loading pages.
• The copy button lets you copy sections, widgets, etc without going into the Elementor editor. If you know you want to copy something on a site, copying it from the front-end is faster. It works cross-site as well.
• The extra Dynamic Visibility information and showing the conditions used is helpful when debugging visibility settings.

The Frontend Navigator continues the trend of the Dynamic Content for Elementor plugin of adding creative, useful, and unique features not found in other Elementor addons.