More recently, page-builders have taken the web-world by storm as it extended its functionality and made it much easier for users to build a website on their own. One of the main reasons for them to gain so much popularity is due to its ability to streamline the process of web design.
One of them is Elementor. It is a page builder that has gained traction and grown to become of the popular ones. For the most part, it’s because of its ability to help businesses establish their presence online much more efficiently than they did in the past. The adoption rate of Elementor grew so fast due to its extremely simple workflow. By going through some tips and tricks to do so, this article will explain in more detail.
1. Pre-made templates
Pre-made templates allows designs to be repeated over several times instead of having to redesign them from scratch. This allows for working more efficiently and leaving you more time to work on aspects that provide extra value. There are many pre-made templates for Elementor that are both free and paid. Of course, Elementor has an extensive library of pre-made templates that help you kick start your web design project. These help you build upon them to make a stunning website within minutes. Fortunately, there are plenty of free and premium templates available for Elementor apart from their library.
2. Use Hotkeys
These are keyboard shortcuts that can help you perform common actions thereby eliminating the need for a series of clicks. They can come in handy especially if you want to navigate between the panel and preview mode or switch to mobile editing. Elementor has a list of hotkeys which you can refer to.
3. Branded color palette
It is highly likely that your website would be following a color scheme. As a designer, Elementor’s color palette makes it easy to store and apply colors to your elements on the live editor. This tool helps speed up the process of setting colors to every element as it can now be conveniently picked off from your color palette that you have set up already.
4. Global font settings
Setting the default font helps you maintain consistency throughout the site. Once this is set, you will not need to set the font each time an element is added. Elementor currently allows you to set the default font for four different categories namely; Primary Heading, Secondary Heading, Body Text and Accent Text.
5. Inline editor
With this feature, you can and format your written content visually and directly on-screen (how cool is that!). These would be ideal if you are writing long-form blog posts, optimizing landing page copy and fixing minor spelling mistakes on your current content. This could save you the hassle of having to go back to your editor to make your desired changes.
6. In-built mobile preview mode
With its in-built preview mode, you can easily switch to the mobile-editing mode (Ctrl / Cmd + Shift + M) and make changes within the editor. You could switch to a tablet and mobile mode to see exactly how it looks on multiple devices. Building a responsive website is the new norm. Elementor just makes it much easier for you to do just that!
7. Finder search bar
With the Finder (Ctrl / Cmd + E), your workflow just got much simpler! Previously, you had to move back and forth from the dashboard settings to your live editor. However, Elementor introduced the Finder to eliminate this problem! You can now quickly access various areas across your site without having to leave the interface. It’s a search bar that helps you seamlessly jump between different pages, templates, dashboard settings and post new content. Thereby improving the workflow and the efficiency of building a website on Elementor.
8. Navigator
Another useful design feature introduced was the navigator (Ctrl / Cmd + I). This helps clear the clutter by enabling you to drag and edit elements (sections, columns, widgets etc.) throughout the page quickly and easily. It can come in handy especially if you are designing a long-form pages that have many elements on a single page. For a more detailed guide, you can refer to the article on Elementor Docs.
9. Paste-style
This feature can come in handy if you want to style the same elements placed in multiple places on a website. Using the Paste-style feature (Ctrl / Cmd + Shift + V), you can copy the styling (colors, fonts, padding and margins) of one element and paste it to another element in the same category. In addition, this eliminates the entire process of repeating the setting same styling values for duplicate elements. And here’s the best part! It works across pages too!
10. Global Widgets (Pro feature)
This feature of Elementor helps you easily display specific widgets that appear on multiple places in a website. Once you save an Element as a Global Widget, editing the styling in one place will automatically affect the styling in all the places where the widget is placed. These are more commonly used for CTA-buttons, testimonials etc. They can either be added as a widget from the WP dashboard or inserted as a shortcode.
