Exploring the Elementor Interface

When you launch the Elementor Editor, you’ll encounter an intuitive and user-friendly interface that allows you to design and customize your website’s pages visually.

The Left Panel

Elementor’s left panel is the control center for all your page building and design activities. It contains several important sections and tools that help you create, manage, and customize your web pages. Here’s a detailed exploration of the left panel in Elementor.

Top of the Left Panel

Hamburger Menu (Three Horizontal Lines Icon)
- This icon opens the main menu for Elementor settings and options.
  - Site Settings: You can configure global site settings such as colors, fonts, and theme styles.
  - Theme Builder: This option lets you create and manage theme parts like headers, footers, single post templates, and archive templates.
  - User Preferences: Adjust user preferences, including light/dark mode, default colors, and editing handles.
  - View Page: This link allows you to view the live version of the page as it appears to visitors.
  - Exit to Dashboard: Use this option to exit the Elementor editor and return to the WordPress dashboard.
  - Get Help: Access Elementor’s help center, documentation, and support resources through this link.
  - Role Manager: Control access and permissions for different user roles using Elementor with this feature.
Elements Icon (Grid Icon)
- Clicking on this icon displays the elements panel where you can find all available widgets.
  - Widgets: Drag and drop various widgets like Heading, Image, Text Editor, Button, Video, etc.
  - Global Widgets: Access widgets that you have saved globally for reuse across multiple pages.
  - Search Bar: Quickly locate the widget you need by typing its name in the search bar.
Navigator Icon (Compass Icon)
- This icon opens the Navigator panel, which provides a tree view of all elements on the page.
  - Tree View: View the structure of your page with sections, columns, and widgets in a hierarchical format.
  - Quick Access: Click on any element to quickly navigate and edit it.
  - Drag and Drop: Rearrange elements directly within the Navigator for easy reordering.
History Icon (Clock Icon)
- Clicking on this icon opens the History panel, tracking all changes made during the editing session.
  - Actions Tab: See a list of recent actions and revert to any previous action.
  - Revisions Tab: Access earlier saved versions of the page and revert to them if needed.
Responsive Mode Icon (Monitor Icon)
- This icon allows you to preview and customize your design for different devices.
  - Desktop View: Edit and preview how your page looks on desktop devices.
  - Tablet View: Edit and preview how your page looks on tablet devices.
  - Mobile View: Edit and preview how your page looks on mobile devices.
  - Custom Breakpoints: Define custom breakpoints for different screen sizes if necessary.
Preview Icon (Eye Icon)
- Clicking on this icon lets you preview the page live without saving changes.
  - Live Preview: See a live preview of your page as it will appear to visitors.
  - Open in New Tab: Open the live preview in a new browser tab for better visibility.

Middle of the Left Panel

Elements (Widgets) Area:
- This area is where you can drag and drop widgets onto your page.
- Categories:
  - Basic: Includes essential widgets like Heading, Image, Text Editor, and Button.
  - Pro: Contains advanced widgets available with Elementor Pro, such as Forms, Slides, and WooCommerce elements.
  - General: Includes additional widgets like Icon, Image Box, and Progress Bar.
  - Site: Widgets related to site elements like Site Logo, Site Title, and Post Content.

Bottom of the Left Panel

Settings (Gear Icon)
- Clicking this icon allows you to access the page settings.
  - Page Layout: Set the layout for the page (e.g., Elementor Full Width, Canvas, Default).
  - Title: Show or hide the page title.
  - Status: Change the status of the page (Draft, Published, etc.).
  - Page Attributes: Customize attributes like parent page, template, and order.
  - Preview Settings: Adjust how the page is previewed on different devices.
Navigator (Compass Icon)
- This icon provides a tree view of the page’s structure.
  - Hierarchy: See a hierarchical view of all sections, columns, and widgets.
  - Navigation: Easily navigate and edit any element.
  - Drag and Drop: Reorder elements directly within the Navigator.
History (Clock Icon)
- Clicking this icon tracks and manages changes made during the editing session.
  - Actions Tab: View and revert to previous actions.
  - Revisions Tab: Access and revert to saved versions of the page.
Responsive Mode (Monitor Icon)
- This icon allows you to customize the page for different devices.
  - Desktop, Tablet, Mobile Views: Edit and preview for each device type.
  - Custom Breakpoints: Set custom breakpoints for various screen sizes.
Preview Changes (Eye Icon)
- Clicking this icon lets you preview the page live.
  - Live Preview: See how the page looks live without saving changes.
  - Open in New Tab: Open the preview in a new browser tab.
Publish/Update (Green Button)
- This button saves changes made to the page.
  - Publish: Publish the page if it’s new.
  - Update: Save and apply changes to an existing page.
  - Save Options: Save as Draft, Save as Template, Save & Close.
Save Options (Arrow next to Publish/Update Button)
- Clicking this arrow provides additional save options.
  - Save Draft: Save the page as a draft.
  - Save as Template: Save the design as a template for reuse.
  - Save & Close: Save changes and exit the editor.

Conclusion

Understanding the left panel in Elementor is crucial for efficiently building and customizing your web pages. Each link and icon provides specific tools and options to help you create a polished and professional website. By familiarizing yourself with these features, you can make the most of Elementor’s powerful page-building capabilities.

Exploring the Elementor Interface