How to Use the Navigator in Elementor
Elementor is a powerful page builder for WordPress that allows users to create stunning websites without needing to know how to code. One of the most useful features of Elementor is the Navigator. The Navigator provides an overview of all the elements on your page and makes it easy to navigate, reorder, and edit them. In this guide, we’ll walk you through how to effectively use the Navigator in Elementor with simple step-by-step instructions.
What is the Navigator?
The Navigator is a panel within Elementor that displays a structured view of all the sections, columns, and widgets on your page. It helps you quickly find and manage parts of your layout, especially when working on complex designs.
Step-by-Step Instructions to Use the Navigator
Step 1: Open Your Elementor Page
Start by logging into your WordPress dashboard. Navigate to the page you want to edit with Elementor. Click on the “Edit with Elementor” button to launch the Elementor editor.
Step 2: Access the Navigator
Once you’re in the Elementor editor, you can access the Navigator in two ways:
- Click on the three horizontal lines (hamburger menu) located at the top left corner of the editor. Then, select “Navigator” from the dropdown menu.
- Alternatively, you can use the keyboard shortcut Cmd + I on Mac or Ctrl + I on Windows to open the Navigator.
Step 3: Navigating Through the Structure
Once the Navigator is open, you will see a vertical list of all the elements on your page. Each item in the list corresponds to a section, column, or widget. You can click on any item in the list to highlight it in the main editor:
- Sections will be denoted by a blue bar.
- Columns will be represented by grey bars.
- Widgets will show as individual items within their respective section or column.
Step 4: Selecting and Editing Elements
To edit any element via the Navigator:
- Click on the element name in the Navigator. This will select the element in the main editing area, and the settings panel for that element will appear on the left side of the screen.
- Make the desired changes using the Elementor panel on the left.
Step 5: Reordering Elements
If you want to change the order of your sections, columns, or widgets, simply click and drag the desired element up or down within the Navigator. This is particularly helpful for rearranging content quickly without having to click on each element in the main area.
Step 6: Hiding and Duplicating Elements
Within the Navigator, you can also right-click on any element to access additional options:
- Hide: This allows you to temporarily hide the element from view without deleting it.
- Duplicate: This option lets you create a copy of the selected element, making it easy to replicate content.
Step 7: Closing the Navigator
When you’re done using the Navigator, you can easily close it by clicking the “X” button at the top right corner of the Navigator panel, or by clicking the three horizontal lines again and selecting “Close Navigator.”
Conclusion
The Navigator in Elementor is a powerful tool that can significantly enhance your design workflow. By following these simple steps, you can effectively manage your page elements, making it easier to create beautiful, complex layouts.
Don’t hesitate to explore more of Elementor’s features as you become more comfortable using the Navigator. Happy designing!
This detailed blog post provides beginner-friendly, step-by-step instructions on using the Navigator in Elementor, complete with appropriate HTML headings. You can paste this into your website’s content management system, and it should display nicely formatted.
