Last updated - May 6, 2022
Elementor is an excellent web development tool that can give you many options in terms of customization with its top-notch drag-and-drop editor. In time, this tool has grown into more than just a page builder — you can now use it to design full-fledged websites without ever typing in a single line of code.
Given that Elementor has so many customization options, even experienced developers might miss out on a few of them and may end up building a less compelling website as a result.
Designing pages with Elementor is quick and easy, but there’s always something you can do to optimize the process even more. That’s what this guide is for.
We talked to developers from the best New York web design companies, and in the following paragraphs, we’ll show you how to create a website using Elementor by using the editor and its features to their full potential. Let’s get started!
Begin with a Template
When you build an Elementor website, you won’t often need to develop your entire layout from scratch. This is where templates come in, and the good news is that Elementor has an expansive template library with a wide range of professionally made templates.
These templates can be used to design web pages quickly and easily, but if you don’t want to use a full web template, there’s always the option of Blocks. These are sections of a webpage, such as a contact page, hero section, services, etc.
Keyboard Shortcuts Make Everything Faster
There’s no question that using keyboard shortcuts can make your work much faster and more streamlined. Elementor’s relatively recent addition of shortcuts to the page builder allows users to speed up their design process and make everything run smoothly.
Everyone knows about the simplest keyboard shortcuts like Ctrl + C and Ctrl + V, but Elementor’s page builder has some more advanced stuff built-in as well.
If you can’t remember all the shortcuts (let’s face it, nobody can), the one you should keep in mind is Ctrl + ?. This will open a list of all the shortcuts so you can always refresh your memory.
If you want to memorize some of the most important shortcuts after all, here’s a list of some Elementor-specific ones:
- Ctrl + P — Panel/preview view
- Ctrl + Shift + M — Desktop, tablet and mobile views
- Ctrl + Shift + H —History panel
- Ctrl + I —Navigator
- Ctrl + Shift + L —Template Library
- Ctrl + ? —Keyboard Shortcuts Window
- ESC —Settings
- Save Sections and Reuse them Later
You’re bound to have a few sections of each page that you’re going to want to reuse on other pages. Well, instead of redesigning each one over and over again each time you want to use it, you can save it for later.
We’ll use a straightforward example to illustrate the usefulness of this feature. Since the future of service is digital, every website you make will probably need a customer service or customer support section. With Elementor, you can build this section once and reuse it with a few tweaks as many times as you like.
Every section that you design can be used on other parts of your website or even on other websites that you build. This gives you a massive amount of freedom to experiment, not to mention the time-saving aspect.
Think Carefully About the Color Palette
When you’re designing a webpage or an entire website, for that matter, you should always follow a pattern in terms of creating a repeating color combination. Obviously, the selection of colors that you come up with should be carefully considered rather than picked out randomly.
Once you’ve chosen your palette, you’ll have to reuse the same few colors throughout the design, and entering the color code or picking out the color from the selection panel each time can be pretty tedious.
Thankfully, Elementor has a solution for this. You can go to the settings and add your chosen colors to the color picker so that your colors always show up in the “Custom” section of the color picker.
Reuse Common Sections with Global Rows
Few of Elementor’s features can help you speed things up quite as efficiently as Global Rows. Let’s say you want to have the same widget show up in many sections of your website. This can be anything from a sale banner listing your product’s details to your universal CTA row.
If you wanted to make a small change to this row on each page, it could potentially take a while, depending on the number of pages your website has. Thankfully, Elementor has the Global Rows feature in place designed to tackle this exact problem.
The yellow-hued Global Rows are designed to change in unison, so whenever you change one, the others adapt accordingly. It goes without saying that this feature could potentially save you a truckload of time and effort, so be sure to take full advantage of it.
Export and Reuse your Designs on Other Websites
Exporting and importing whole templates is another handy feature that Elementor offers.
With this, you can quickly export a design and reuse it on another website with a few clicks. This is particularly useful if you’re building a layout locally and wish to export it to the client’s website in the quickest and most straightforward way possible.
To use this feature, go to the “My Templates” page and click the “Export Template” button for the template you wish to export. The process is pretty much the same for importing templates; simply click on the appropriate button, select the template you want to import, and it’s done.
Use Navigator to Move Through Sections More Easily
The folks at Elementor have recently added the “Navigator” feature to the page builder. We believe this to be one of the website builder’s best features for streamlining the design process.
It is basically a navigation tree providing easy access to each part of the website straight from the page builder. Navigator’s little pop-out window also allows you to drag and drop elements and easily customize the layout.
You’ll find this tool to be most useful when you’re working on pages with lots of elements or those with multi-layered and complex designs.
All you need to do to access the Navigator window is right-click on a widget and select the Navigation option from the drop-down menu. If you prefer using keyboard shortcuts, the Navigator window is accessed using the command Ctrl + I.
Take Full Advantage of Elementor Finder
If you’re designing more than one page and want to toggle between them, you could waste a lot of time doing it the “old-fashioned way” by saving the page, going back to the dashboard, searching for the other page, and opening it up again.
Doing this once or twice doesn’t sound all that bad, but if you have to do it dozens of times for each build, it can take away some valuable time you could have spent getting the project done.
As you might have guessed, there’s a solution for this as well, and it is called Elementor Finder. This feature allows you to jump to any Elementor page, template, theme, or setting simply by using the search bar.
To access Finder, go to Elementor Settings, or use the command Ctrl + E on your keyboard.
Cover the Basics
When you’re creating a web page, you’ll probably want to keep some settings the same across all the rows and sections. To do this efficiently, instead of changing the setting on each page and in each row and wasting a lot of time, you can use Global Settings and eliminate redundancy.
In case your chosen font is not available, you can add it to Default Fonts. If you want to put some white space between your widgets, you can do so in the Global Settings as well, and while you’re at it, you can define the default content width for rows.
These and other options are available on the Global Settings page, so it is definitely worth checking out before you start working.
Now you can use Elementor Cloud Services to create a WordPress site from scratch. Watch this video for more details:
Hi there! I could have sworn I’ve been to your blog before, but I realized it’s new to me after browsing through some of the articles. Regardless, I’m definitely happy I stumbled upon it and I’ll be bookmarking it and checking back frequently!
Very interesting, good job, and thanks for sharing such a good blog. your article is so convincing that I never stop myself to say something about it. You’re doing a great job. Keep it up.