Today we will learn about elementor tools and how to use them.
Prerequisites
- Elementor Plugin Installed on your WordPress Website
- Create new page or edit the existing page in Elementor.
Elementor Editor Sidebar
- Left Corner Hamburger Menu for Settings, Navigation & More.
- In the center will be the name of the selected element for editing.
- Right Corner 9 dots will show all the available elements that we can use.
![](https://mastertej.com/wp-content/uploads/2022/04/elementor-tool.jpg)
![](https://mastertej.com/wp-content/uploads/2022/04/elementor-element.jpg)
Add New Section
![](https://mastertej.com/wp-content/uploads/2022/04/add-section.jpg)
![](https://mastertej.com/wp-content/uploads/2022/04/structure.jpg)
You will find 3 ways to edit the added section. Layout, Style & Advanced.
![](https://mastertej.com/wp-content/uploads/2022/04/edit-section-3-way.jpg)
Each Section is surrounded by a blue border and has 3 controls on the top.
These 3 actions are: Add Section, Edit Section & Delete Section.
![](https://mastertej.com/wp-content/uploads/2022/04/section-1.jpg)
Column element is surrounded by dotted border and you can edit the column by clicking on edit column icon on the right top corner.
![](https://mastertej.com/wp-content/uploads/2022/04/edit-column.jpg)
Without making any changes to the Section or Column. Will now add elements to our 1st Section. Using elemetor editor sidebar you can drag and drop element into the column.
![](https://mastertej.com/wp-content/uploads/2022/04/element-mastertej.jpg)
![mastertej vedio](https://mastertej.com/wp-content/uploads/2022/04/mastertej-vedio.jpg)
![mastertej image](https://mastertej.com/wp-content/uploads/2022/04/mastertej-image-2.jpg)
![mastertejicon](https://mastertej.com/wp-content/uploads/2022/04/mastertejicon.jpg)
![mastertejmaps1](https://mastertej.com/wp-content/uploads/2022/04/mastertejmaps1.jpg)
You will find 3 ways to edit the added element.
Content: Here you can add the text or images in the selected element.
Style: Here you can edit the appearance of the element like backgrounds, fonts, alignment and more.
Advanced: Here you can edit the position of the element, its padding and margins, transitions, effects and more.
Navigator
How to use Navigator-
You have three simple options to open the Navigator window:
- Right-click any element and then click on Navigator. This automatically redirects you to the specific element in the navigation tree.
![](https://mastertej.com/wp-content/uploads/2022/04/N1.png)
2.Use Click on the layers icon in the footer of the panel.
![](https://mastertej.com/wp-content/uploads/2022/04/n2.png)
3.The keyboard shortcut Cmd/Ctrl+I.
Update Or Publish
![](https://mastertej.com/wp-content/uploads/2022/04/update.jpg)
![](https://mastertej.com/wp-content/uploads/2022/04/publish.jpg)