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 Elementor Cloud Website 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 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.
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
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
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.
Ready to start adding content to your pages?
Need a tour of the UI (User Interface)?