8 web development tips for using elementor

February 2, 2022
8
min read
8 web development tips for using elementor
Tomas McKannie
by
Tomas McKannie

With more than 5 million active installs, Elementor is among the most popular page builders in the world.

The platform is packed with practical and highly customizable features, helping users craft all types of WordPress sites. 

One of the reasons why so many people use Elementor is its ease of use. This page builder includes an intuitive drag-and-drop visual editor, facilitating and speeding up the process of building websites. And to use it, you don't even have to know how to code.

To help you make the most of this terrific page builder, we talked to our friends from one of the best web design agencies in Chicago. They shared valuable tips on how to best use Elementor and craft commanding websites with ease.

Let's see what they had to share with us!

Use a default template

If you were to design your website from scratch, you'd need a lot of time for it. There would always be something to tweak and improve. 

To save yourself the trouble, we suggest using Elementor's premade templates. They're professionally made, available with the free and pro version of Elementor. 

The practical page builder packs an extensive template library. You can explore it either to get inspired (in case you want to design your pages by yourself) or to find a layout according to your requirements. 

All templates are professionally designed and available in both the free and premium versions of Elementor. 

You can import templates you previously saved. To save a page as a template, click on the arrow to the right of the Publish Button situated at the bottom of the panel. Click and choose the Save as Template folder, then name your template and save it. 

You have the option of importing an entire page or certain Blocks (sections of a template). Simply go to the Templates section of your WordPress Admin Dashboard, then go to Saved Templates, then Theme Builder and Popups. 

Click on the Import Templates button, choose the template you want to import and press Import Now. Your newly imported template will be displayed in the Templates list. 

Make the most out of the keyboard shortcuts

To speed up your website creation process, we suggest you use keyboard shortcuts.  

Among the most commonly known keyboard shortcuts, you'll find Ctrl + C and Ctrl + V (Cmd + C and Cmd +V for Mac OS). Ctrl + C allows you to copy a section, column or widget. In turn, Ctrl + V lets you paste a section, column or widget style. 

Apart from the simple Ctrl + C and Ctrl + V, Elementor enables you to use some more advanced hotkeys.  

To explore the list of available shortcuts, you have to press Ctrl + ? (Cmd + ? for Mac) on your keyboard. 

The hotkeys we found particularly useful include:

  • Ctrl/Cmd + Shift +M – allows you to switch between desktop, mobile and tablet view
  • Ctrl/Cmd + P – it lets you switch between the panel and preview view
  • Ctrl/Cmd + Shift + H – it opens the History panel
  • Ctrl/Cmd + Shift + L – it opens the Template library
  • Ctrl/Cmd + I – it opens Navigator, a tree panel that provides quick access to elements on the editor
  • Ctrl/Cmd +S – saves a page to the revision history
  • ESC – it helps you quickly open Settings. It also jumps to Exit to Dashboard. 

With these shortcuts, you can speed up your web development project. It's easier to jump through the different panels and menus, so you find what you're looking for faster. As a result, you develop websites more efficiently.

Define the color palette for your website

The appearance of your website is of utmost importance for your brand. After all, your site is the face of your business that reflects the values you stand for. 

The first thing most people will notice on your site are the colors. So, when deciding on a palette, we suggest you opt for the colors that best reflect the personality of your brand. 

You can also consider the psychological effect certain colors have on people and use the hues that will help you evoke desired feelings in your audience. To choose a color for your site in Elementor,  you can use the platform's custom Color Picker option. 

The Color Picker feature is useful for choosing your site's color palette. To do that, click on the hamburger item on the top left of your page and then use the Color Picker. There, you customize your site-specific colors. 

Alternatively, you can choose a preset color palette to use every time you style your website or widgets. You either pick one of the 10 presets available in the Color Picker feature, or you build your own. 

Use the Export/Import Kit to reuse your website designs

Elementor's handy Export/Import Kit allows you to export the entire content from one Elementor website and import it to the other.  

This feature is extremely useful for users who want to create a website layout locally and then export it to a client's website. 

To use the Export/Import Kit in Elementor, head over to Settings, then click on Experiments. Activate the Import/Export kit function, and you'll find the options in Elementor when you go to Tools. From the Dashboard, click on Templates, then Saved Templates and you'll see all your saved layouts there. Simply click on Export Template for the template you want to export. 

To export from the Elementor library, click on My Template, then on the three dots on the right and on Export.

When you wish to import a template, the process is pretty much the same. Once you open the My Templates page, click on the layout you want to import and then select the Import Template option found at the top of the page. 

 Move through the sections of your website using the Navigator feature

Elementor's Navigator feature gives you quick access to a navigation tree panel containing all the elements on your page. You also get an overview of your entire page structure. You can rearrange, edit, name, collapse, expand, show or hide elements to customize your layout. 

Navigator is especially useful when your site includes pages with intricate designs, multiple layers, or a lot of elements. 

To access Navigator, you can right-click on the element you want to edit and select the Navigator option from the menu. You can find Navigator in the footer of a panel.

You can also use a shortcut on your keyboard to access it. Simply press Ctrl + I for Windows or Cmd + I for Mac OS. 

Use the Finder tool

When you're working on a multi-page website, there can be times when you want to toggle between pages. The classic way is to save the page, go to the dashboard, search for a page you want to work on and open it again. 

Finder is Elementor's search bar that appears on your screen when you press Ctrl + E or Cmd +E. This useful feature enables you to quickly find and jump to the desired section of your website. 

The Finder tool helps you quickly find pages and templates that exist or quickly create new ones. Instead of searching for an existing element, type Post, Template, Page, Product to create new elements.  

Use the Global Settings option for making basic changes

Some page elements remain the same, no matter which page you're working on. So, instead of wasting a lot of time changing settings for every row, use the Global Settings feature available with the Pro version.

Global Settings is a feature that allows you to set colors and fonts, theme styles, layouts, and make changes to your site identity and lightbox. Basically, you control all global elements of your website from one place. 

Global Colors allows you to set predefined global colors (Primary, Secondary, Text, Accent) or select and save your own. 

Global Fonts makes it easier for you to set typography styles directly from Elementor's Site Settings menu. 

With the Theme Styles feature, you control your website design (button, heading, background, form field, image styles, etc.).

Global Settings allows you to adjust the page layout. Set widget space, content width and stretch sections to fit certain places in one move.

Use third-party add-ons

Elementor is a powerful page builder on its own, but you can further enhance its functionality by installing third-party add-ons on your site. 

We highly recommend adding PowerPack, an impressive add-on that includes more than 70 widgets and templates for Elementor. Use the PowerPack Templates library to build faster websites by using any of the professionally made section blocks or page templates. 

Choose essential widgets, content widgets, pages, pricing widgets and more. The add-on includes specialized WooCommerce widgets (add to cart button, my account, checkout page styler, etc.) and Social Media widgets, as well as practical SEO widgets (table of content, FAQ schema, sitemap, etc.).

Conclusion

Elementor is a powerful page builder that allows for easy website creation.  It includes a myriad of features that enable you to craft a site exactly to your taste. 

Moreover, Elementor is easy to use and available for free. Of course, if you purchase the Pro version, even more options become available. 

To make the most of this page builder, we suggest you implement at least some of the tips we featured in this article. That will help you save time and make the most of the platform. 

Learn to quickly navigate through Elementor features by using the tips above and take advantage of its powerful building tools to create highly personalized websites—experience one of the best and fastest ways to build a WordPress website. 

About the author:

Tomas is a digital marketing specialist and a freelance blogger. His work is focusing on new web tech trends and digital voice distribution across different channels.

Ready to take charge of your dev career?

Join Europe's leading job platform for software developers!

Register for free

Read more like this