Harness the Power of Keyboard Shortcuts for Elementor and Elementor Pro

Hello, WordPress enthusiasts! In today’s post, we’re going to delve into the world of shortcuts – specifically hotkeys for Elementor and Elementor Pro. This will be a short but informative journey into enhancing your workflow, speeding up your web design process, and perhaps introducing you to some features you weren’t even aware existed. So let’s get started!

Quick Introduction to Elementor Shortcuts

Elementor provides an extensive list of shortcuts to expedite your web design process. To access this list, all you need to do is hit Command / Ctrl + ?, and voila! You have a comprehensive keyboard shortcut pop-up in front of you. This list is divided into two sections – Actions and Go To.

The Actions Shortcuts

The Actions section includes widely used commands, such as Undo, Redo, Copy, and Paste. These shortcuts are quite similar across various operating systems, so you may already be familiar with most of them.

A game-changing shortcut is Paste Style. This comes handy when you’ve tweaked the style of one element and want to apply it to other similar elements on your page. Just use Copy, followed by Paste Style, and your elements will inherit the new styles instantly.

For deleting an element, you can use the Delete command. Mac users without a delete key can use Function + Backspace instead – a handy workaround! Also, although the Save shortcut exists, it is advisable to click the green ‘Update’ button for a more reliable saving experience.

The Go-To Shortcuts

The Go-To section contains shortcuts that are absolutely vital for accelerating your workflow. The Finder shortcut, accessible via Command / Ctrl + E, acts like a search box for your admin. It might not be essential while editing pages, but it significantly speeds up navigation to different admin sections.

Shortcuts for an Enhanced Editing Workflow

Let’s now focus on some shortcuts that can turbocharge your editing workflow. The first one is Show/Hide Panel, triggered by Command / Ctrl + P. This shortcut toggles the Elementor editor window, giving you a cleaner view of your page, free from any clutter.

Next is Responsive Mode, activated by Command / Ctrl + Shift + M. This shortcut allows you to toggle through different device sizes without leaving the editor. This feature becomes incredibly powerful when combined with the Show/Hide Panel shortcut, as it gives you a clear view of how your design looks across various devices, right within the Elementor editor.

Another valuable shortcut is History, invoked by Command / Ctrl + Shift + H. This is a quick way to revisit your previous actions or to rollback to an earlier version of your design.

Leveraging the Navigator

The Navigator is another highly useful tool in Elementor. Unfortunately, its shortcut, Command / Ctrl + Shift + I, opens the inspector in Chrome on Windows, so you may have to manually click the Navigator icon. Once opened, the Navigator can be docked to the right side of your editor, where it provides a clear hierarchy of all the sections on your page. The real power of the Navigator lies in the ability to rename your sections by double-clicking inside them, which allows for better organization of your design elements.

Wrapping Up

Those were some of the hotkey shortcuts for Elementor and Elementor Pro that can help you streamline your workflow, speed up your web design process, and improve your efficiency. This list is not exhaustive, and there may be more shortcuts that could come in handy, depending on your specific needs. Do explore and experiment with these shortcuts, and feel free to share