Designing with the Elementor Editor


In order to start designing your website using the Elementor editor. You need to learn the following:

  • What the editor is
  • How the editor works 

What is the Elementor Editor

The Elementor editor lets you be able to create websites. It lets you view your website as you build it. You may drag and drop any widget onto your canvas. By using the editor zero coding is generally required. 

How does it work

You can create pixel perfect designs by using your the Elementor Editor. By learning to use the editor and best design practices, you can achieve endless creation possibilities.



Sections are the largest of the building blocks. These are used to divide the page content structure for your visitors. You may learn more about creating and styling Sections in the overview article.


Columns are created inside of Sections and may be divided into up to ten vertices You can learn more about how to create, edit, and styling columns with Elementor by reading the article.


Widgets are the smallest of the blocks. These are placed in the columns. A few basic widgets are the Heading, Text Editor, Image, Video, and Button. You can have complete creative freedom over your Elementor Cloud Websites design and bring your vision to life with 90+ powerful widgets.

Global Settings

Global Colors & Typography

Improve your workflow and ensure there’s consistency across your website by setting global color codes and typographies, all from one place. Typography is the term used for the websites fonts. They may be selected from many of the Google Fonts right from the editor, Adobe Typekits or by uploading your own custom fonts.  Choosing the best typography for your website is important, as it plays an important design role. 

Advanced Settings

From the Advanced Settings tab you may seamlessly adjust your margins and paddings, borders, add motion effects, and transformation, apply a shape mask, and much more. Create complex layouts with overlapping sections using z-index for even more design freedom.

Previewing, publishing, and saving as draft

After you’re done designing your page, you can Preview it and Publish it.

Go to the bottom panel:

  1. To preview click the icon. 
  2. If you are satisfied with the result, go ahead and click the button. 
  3. Click ‘Have a Look‘ to view the published page

Note: The Preview link is different than the actual page link

Save Draft

In Elementor you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

  1. Click the arrow next to Update / Publish
  2. Choose Save Draft


We hope that you now have a better understanding of how you can design using the Elementor editor. You may go on to create amazing designs with this knowledge.

What’s Next

Ready to start adding content to your pages?

Need a tour of the UI (User Interface)?

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page