Mastering Elementor Editor in Under 5 minutes

First time using Elementor and feeling little lost? No worries, let’s see quickly how it works. 

Elementor basics under 5 minutes!

 

To create a new Elementor page or post, click new and pick one.
Then write a title and click on the Edit with Elementor button.
Now this is where you build everything.

 

On the left side you have the tool bar to control everything you see on the page on the right side.

You can hide the toolbar from the side button to see a better preview.

 

When you open a new page, the toolbar shows you all the available Elements. We can grab a text element for example and drop it on right to show how it works.

 

Elementor toolbar: Content, Style & Advanced

Now the toolbar changes and shows you three tabs,
1. Content to edit the content,
2. Style to edit the style of the content,
3. and Advanced to change margins and motion effects and background images for example.

 

To change the structure of the sections or containers, click on the plus icon, and pick one. Flexbox is great, and if you are still using sections it works similarly.

 

Now the toolbar shows you options to change the layout, style and advanced.

To add more Elements you can click on the grid icon to access them, and drop another element on one of the empty boxes. Let’s place an image here.

 

Elementor grid layout explained

Now we have two sections, two containers, and two elements.
– To select the section, click on the pink bar
– to select the column, click on the gray column icon
– to select the element, click on the pen icon

 

On the bottom of the toolbar you can click on the gear icon to open Page setting, where you can hide the default title if you see one on your screen.

 

Navigator helps you browse through the content when you have more sections and elements on your page. Keyboard shortcut is control + i.

 

History shows you the actions you can Undo, and on the revisions page you see earlier versions of you page to restore them, if anything stops working.

 

Elementor responsive modes

Responsive mode let’s you see how the page looks on desktop, tablet and mobile by clicking on the button on the top row.

 

Preview changes opens a new tab to show you how the live page looks.

 

And – Publish makes you page go live, and behind the menu, you can save a draft, save the page as template or save without modifying the date.

 

Finally, on the top-left corner you can access Elementor Settings, where you can View Page, Exit back to WordPress dashboard, or Go to Site Settings, where you can change what colors and fonts the website uses, among other things.

 

To go back, hit the X on the top.

 

What else would you like to learn about Elementor? Let me know in the YouTube comments! 😊

Build your own website!

Website course €49,00

Get the newsletter to join the AI revolution in Marketing and Design:

80% OFF

with promo code

				
					WEBCOURSE80
				
			

Copy the code now and use it on the checkout to get your web builder course only for €9 instead of €49. 

AI-Powered
Web Design
Free Toolkit

⚡ Join SCRIIV newsletter to get 6 best tools to leverage your output.