The Elementor expert team made a list of improvements that will boost your productivity and workflow using Elementor. In this post, we’ll examine how to access these capabilities and provide you advice on how to make use of them like a pro.
WordPress users like Elementor over alternative page builders for a variety of reasons. To begin with, you can build a stunning website without ever writing a line of code. And you won’t need to devote weeks or months to designing it.
Did you also know that Elementor can make the process of designing and creating content more efficient?
Yes, there are a ton of widgets, page and block templates, and blocks that save you the hassle of having to design a website from start. If you understand how to take advantage of some of Elementor’s less well-known capabilities, you can perform even more quickly and intelligently with it.
Asaf Rotstain put together a list of features that will enhance your productivity and make using Elementor even simpler. We’ll look at where you can find these features below, as well as give you some pointers on how to utilize them like a pro.
How To Use Elementor To Boost Your Workflow
You will not have a huge amount of time on your hands as web designers. You’re under a massive pressure to work as rapidly as possible even with the thinnest of deadlines so you never know what’s going to happen next. a sudden personal emergency many new clients at once. a problematic client or website delaying everything else.
This is why having a productive design workflow is crucial.
Here are some ideas for enhancing your Elementor process even more:
1. Use keyboard alternatives to easily locate features or complete tasks as your first tip
When you use Elementor to accomplish the same tasks again, the time you may save by employing keyboard shortcuts can mount up rapidly. Elementor’s hotkeys provide you easy access to features and action execution in addition to allowing you to swiftly complete activities like Copy, Paste, and Undo.
The list of keyboard shortcuts for Elementor is available here:
Maintaining CMD +? on a Mac
On a PC, hold down Ctrl and?
Let’s look at a few personal favorites used frequently by the Elementor team:
Widgets Menu (CMD / Ctrl + P): Show / Hide
The widgets panel is pinned towards the left side of the screen while using the editor’s default view. When you’re designing, it’s helpful, but it’s not like you want to see how everything will appear on the page.
Clicking the arrow on the panel’s right edge is one technique to make it collapse:
The same result may be obtained by simply pressing CMD or Ctrl while pressing P. Once more pressing the hotkey will exit preview mode and return the widgets panel.
Change Pages by Pressing CMD or Ctrl + E
Regardless of where you are in WordPress, you can easily open a page, post, or template by using the Finder search tool. There are two methods for getting to it.
Select Finder: by selecting the menu icon inside the Elementor editor.
By pressing CMD or Ctrl while holding down E, you may also access this function. The Finder search box will then show up as soon as you do:
As you type, the Finder will automatically fill in the pages, articles, and templates that correspond to your inquiry. In the Elementor editor, click the one you wish to access immediately.
Without having to go back to the WordPress dashboard, you can also utilize this tool to quickly create a new page or post.
(CMD/Ctrl + I) Launch the Navigator
Inside of Elementor, you may make really intricate patterns. It might be challenging to discover, select, or move the precise piece you need as your designs get more complicated and the pages lengthen.
The Navigator is an essential tool for artists because of this. By choosing the icon in the bottom toolbar that is second from the left, you may go there:
Holding down CMD or Ctrl and I will also open it in the editor right away:
From this point, you may view a breakdown of the page’s elements, locate the one you want to change, and even drag and drop it into a different location.
Turn on responsive mode by pressing CMD or Ctrl + Shift + M
Generally speaking, it’s better practice to make your site designs responsive as you go along, as opposed to delaying your responsive adjustments till the very end. One of two options will activate responsive mode in Elementor.
The icon on the bottom toolbar, second from the right, may be selected by clicking:
Shift, M, and CMD or Ctrl can also be held down to activate responsive mode immediately:
The same keyboard shortcut may be used to switch between desktop, tablet, and mobile views.
Tip 2: To add and manage identical blocks, use the Template Widget
Building a website using blocks that span many pages is popular. A call-to-action, endorsement, or contact form block are a few examples.
Create the block once, reuse it often, or template it, then add it to your pages using the Template widget:
This setup is simple. First, under WordPress’ left panel, select Templates > Saved Templates. To add a new block, choose Add New.
As an illustration, we’ve added a pre-existing contact block from the library to our fresh template:
Once the template has been named and saved, you can use the Template widget to add the block to any page you like:
The advantages of doing it this way are numerous. First off, you won’t have to waste time repeatedly creating the same component. Second, rather of modifying each page individually, you’ll simply need to modify the block from your Templates.
Tip 3: To duplicate pages, use Copy All Content
WordPress doesn’t make it simple to replicate pages or posts right out of the box. You can use plugins to replicate your content, but since Elementor already has that feature built in, why bother downloading another one?
This is how you do it:
The page you wish to copy is at the bottom of the scroll. When you right-click the grey folder, the following choices will show up:
Choose Copy Content All. The material may now be copied and pasted onto another page. To achieve this, choose Paste All Content from the context menu by right-clicking on the grey folder.
Tip 4: Create smart links by utilizing the dynamic link feature
What should you do if the slug of a page on your site that is often linked to changes? You have several choices.
Making a redirect so that users who discover the old URL are immediately routed to the new one is one technique to handle changed internal links. You will need to either alter the.htaccess file or install a specific plugin to accomplish this.
Another option to solve this problem is to go through each page on your website and make individual edits. This applies to both text links and button placement. Even on smaller sites, this may be a highly time-consuming operation.
The more advantageous choice is to use Elementor’s dynamic links capability to build internal links. As a result, you’ll construct a smart link rather than entering a static link (i.e., the actual URL) in your widget’s settings.
Let’s imagine your website has buttons that all lead to the same page. We want to draw attention to “Book consultation” in this example.
You can see the static link that many of us are used to utilizing in this screenshot. The problem arises, though, when we have to design redirects or make extensive edits to repair internal links.
Instead, you should put it up as a dynamic link.
Open the related element to accomplish this (like the button in this example). Select the “Dynamic Tags” icon next to the settings icon in the link field. Select Internal URL under Site, then scroll down.
Once again clicking the link box will reveal a Settings menu. Select Content as the Type. Then use the search bar to look for the page’s or post’s name:
Select the article you wish to connect to, then save your modifications. The rest will be handled by Elementor.
Tip 5: To speed up retrieval, sort global colors and fonts
WordPress’s universal color and font settings already help designers create websites more quickly. By enabling you to sort your own settings, Elementor goes one step further.
As for Colors:
Consider sorting your global colors according to:
Use frequency, with the most frequent uses at the top and the least frequent uses at the bottom.
Color set, such as if you use certain hues for hover states, buttons, etc.
Listed in alphabetical order if it makes it simpler to discover your own colors.
If you like a more orderly and logical arrangement of colors, try using hue.
Click on the hamburger menu button, select Site Settings, and select Global Colors in Elementor to organize your colors.
The HEX code will be replaced by a drag-and-drop and trash can symbol when you hover over each color. Drag the drag-and-drop symbol to its new location by holding on to the color strip where it is located:
This tool also allows you to add and remove colors.
Even if your website just uses two or three fonts, you could have extra font styles that are specific to CTAs, multiple header levels, navigation menus, footer text, and other website features. As a result, arranging your global typefaces may also be necessary.
Fonts can be sorted by:
If there are several and you believe it will be simpler to discover them by name if they are in alphabetical order, utilize frequency of use to move the most often used items closer to the top.
Use case: Grouping headline fonts and text fonts separately
Sorting them into categories based on the sort of font they are, such as serif, sans serif, etc.
The same way you sort and arrange your colors, do the same with your typefaces. Go to Site Settings by clicking the hamburger menu button. Reopen Global Fonts this time. Next, move your typefaces into position using drag and drop:
This can help you save a ton of time if you customize Elementor frequently and create new pages and blocks from scratch.
Elementor will revolutionize your ability to create websites quickly.
Isn’t Elementor chock full of surprises? Our specialists provide you more tips and tactics to help you work more quickly and intelligently than ever before, just when you think you’ve learned everything you need to know to master our page builder.
Share this post!
Daniel Eriksson works as a full-time blogger and affiliate marketer. Learn how to scale your impact at startup speed with Daniel and 500,000 monthly readers on GrowthByDaniel.com. Daniel formerly managed digital marketing teams for startups and e-commerce businesses.