Introduction
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.
Design
Section
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.
Column
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
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:
- To preview click the
icon.
- If you are satisfied with the result, go ahead and click the
button.
- 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.
- Click the arrow next to Update / Publish
- Choose Save Draft
Summary
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)?