How to Work with Elementor Navigator/Structure in JupiterX

Welcome to the JupiterX guide on using the Elementor Structure. The Structure is an incredibly helpful feature within Elementor that provides a navigational tree panel to manage your layers and elements efficiently on the page. Understanding how to work with it can greatly improve your website building experience.

Opening the Elementor Structure

To start using the Structure:

1. Log in to your WordPress Dashboard.
2. Navigate to Pages  and either create a new page or edit an existing one with Elementor.
3. Once in the Elementor editor, there are two ways to open the Navigator:
   • Click on the Structure icon located at the top of the panel on the left side.
   • Right-click anywhere on your page and select Structure  from the context menu.

Understanding the Structure Interface

Upon opening the Structure, you will see a hierarchical list of all the elements on the current page:

• Sections: The largest containers that hold your columns and widgets.
• Columns: The subdivisions of Sections that organize the actual content.
• Widgets: The content elements like text, images, buttons, etc.

Selecting and Navigating Elements

• Clicking on an element within the Structure will select it on the page and open its settings in the Elementor panel.
• You can drag and drop elements within the Structure to rearrange them on the page.
• Hover over an element in the Structure to highlight it on your page.

Renaming Elements

Renaming elements can help you identify them more quickly:

1. Right-click on the element within the Structure.
2. Choose Rename .
3. Type the new name and press Enter .

Showing and Hiding Elements

You might want to temporarily hide elements to focus on other parts of your design:

1. Click the eye icon next to the element name in the Structure to hide it.
2. To show it again, click the closed eye icon.

Context Menu

Right-clicking on an element in the Structure brings up the context menu, which offers several quick actions:

• Duplicate: Creates a copy of the element.
• Copy: Copies the element so you can paste it elsewhere.
• Delete: Removes the element from your page.
• Navigate to: Jumps to the selected element on the page.

Working with Layers

Layers can be especially tricky if you have overlapping sections or complex designs. The Structure helps you select the right one:

• Use the Structure to choose the correct layer without clicking through overlapping elements on the page.

Best Practices for Using Structure

• Utilize the Structure for complex designs with multiple layers.
• Before starting your design, plan a naming convention for easy identification of elements.
• Keep the Structure open on a second screen if you have one to streamline your workflow.

In summary, the Elementor Structure is a powerful tool within the JupiterX theme that simplifies page building. By helping you quickly select, organize, and manage page elements, you can enhance your productivity and enjoy a more organized web creation process.