Would you like to learn tips that can help you become a better Elementor web designer? Elementor, one of the most popular website page builders for WordPress, offers numerous features that simplify the implementation of modern web designs.
Even if you're familiar with its popularity, you might not be aware of the time-saving tips that can greatly benefit your website development.
In this tutorial, we will provide you with valuable Elementor tips and tricks that will empower you to become a proficient user of this incredible drag-and-drop builder plugin. Please note that some of the tips we'll share require the premium version of Elementor.
Is Elementor Good For Beginners?
As mentioned earlier, Elementor has gained popularity as one of the most widely-used website page builders due to its intuitive interface and user-friendly tools.
Elementor enables you to build a functional website using its drag-and-drop builder. Furthermore, beginners find it ideal as they do not need coding skills to utilize the Elementor plugin
Discover 14 essential Elementor tips and tricks you should know
This section provides web designers with useful tips to save time when using the Elementor page builder plugin.
To get started, make sure you have installed and activated the Elementor plugin on your WordPress site. Assuming you have completed this step, here are 14 valuable Elementor tips for WordPress websites.
Use a Starter Template
Elementor offers a library of pre-designed templates and blocks that you can use as a starting point for your designs. You can fully customize these templates and blocks, allowing you to easily change the colors, fonts, and other design elements to match your branding.
In this tutorial, we will give you valuable Elementor tips and tricks that will help you become an expert user of this incredible drag-and-drop builder plugin.
Click on any of the templates in the "Pages" tab to import them to your page, both free and premium options are available.
The pro version of the Elementor plugin is required to access Elementor templates with the Premium tag.
To import just a section, click on the Blocks tab in order to access a list of page sections that you can import into the Elementor builder.
Quickly navigate to a section using the Navigator feature
As the page you're building grows larger, locating sections within the Elementor builder can become challenging. However, the Navigator feature displays a hierarchical list of all the sections you've added. You can click on a specific section to navigate directly to it.
Switch Between Pages Using the Elementor Finder
When working on multiple pages, you may need to swiftly switch to another page from within the Elementor builder.
Instead of exiting the current page and opening the new page from your WordPress dashboard, you can use the Finder option to locate the page you want to edit.
To access the finder tool, navigate to the sidebar menu of the Elementor builder and click on the icon with three horizontal lines.
The Preview area will display a new search box. You can type the name of the page you want to find and click on it to switch to that page from within the page builder.
Utilize the Power of Keyboard Shortcuts
Elementor offers several keyboard shortcuts that aid in enhancing your workflow efficiency and speed. For instance, you can utilize the Ctrl+S shortcut to save your changes promptly or the Ctrl+Z shortcut to quickly undo an action.
The image below displays a list of available keyboard shortcuts from Elementor.
Save Sections as Templates – Useful Elementor Tip
Let's assume you want to reuse an entire section on your website across multiple pages. Accessing the section as a template will save you a lot of time.
To save a section as a template, right-click on the section you want to save and choose the "Save as Template" option.
After saving it, you can access the template in the Elementor builder's "My Templates" section, and then reuse your section templates from there.
To add the saved template to your posts or pages in WordPress, you can also use the shortcode generated by Elementor.
To obtain the shortcode, navigate to Templates >> Saved Templates in your WordPress dashboard. The "Saved Templates" tab displays a list of all the templates you have previously saved.
The shortcode for each template can be found in the "Shortcode" column. Copy the shortcode you want to use and add it to the post where you want to display the template.
Saving sections as templates facilitates the reuse of common sections across different Elementor designed pages. Using this feature is also a great way to avoid duplicating your efforts.
Use Global Widgets – Elementor Tip
Global widgets allow you to create a widget once and reuse it on multiple pages or posts, saving you time and making it easy to maintain consistency across your site.
To create a global widget, right-click on the Widget icon and choose the Save as Global option from the available options.
Once you add the widget to the preview area, you can globally edit and update it everywhere the widget has been used.
Alternatively, you can click the Unlink button to detach the imported one from the Global widget. By doing this, you can edit and update the widget only on that page while leaving the Global widget untouched.
Upgrade to the premium version of Elementor before using this feature, as it is available exclusively with Elementor Pro.
Add Global Settings
You can use the Global settings feature in WordPress to create a default layout for your pages if you have multiple pages on your site that will use the same layout and elements.
Global Settings enable you to customize fonts and colors, theme styles, layouts, and make changes to your site identity and lightbox, consolidating control over the global elements of your website in one place.
Use Revisions to Revert Changes
Elementor keeps track of your design changes, enabling you to effortlessly return to an earlier version when necessary. This is useful for reverting any changes you don't like or that create problems with your design.
It will open a section that contains all the recent actions you have performed since opening the editor. You can click on any of them to undo the changes made.
On the Revisions tab, you will find the versions at each point where you saved your Elementor changes. The top will display the current version, while scrolling down reveals older versions of the changes.
The author can also see the revisions that display the person who made the change on the Elementor page. If you want to revert your changes, simply select an earlier version from the Revisions menu.
You can access this feature in both the free and premium versions of Elementor.
Copy and Paste Sections and Styles
To reuse a section on your Elementor page, you can copy the section from one page in the Elementor builder and paste it onto a different page.
If you prefer, you can also paste the styles copied from another section into a new one. This will prevent the need to repeat customizations on all your Elementor sections.
Custom CSS – Pro Elementor Tip
The custom CSS class option enables you to incorporate CSS styles into any element on your page. This option proves useful for refining your design and incorporating custom effects. You will find this option valuable if you possess technical expertise.
To add custom CSS in Elementor, click on the section where you want to apply the custom CSS.
Please note that this feature is best suited for users with a basic understanding of CSS. If you are not familiar with technical aspects, you can still use the drag-and-drop builder to create your Elementor website.
Background Carousel (Image Slideshow)
Elementor allows you to choose images to display in the background of a section. This feature proves helpful when you wish to add a slideshow in the background while preserving the content of that section.
The background image slideshow functions similarly to an image carousel integrated into a page.
To incorporate a slideshow as the background in Elementor, click on the Edit section icon, which will reveal options for this section on the left sidebar.
You can choose images from your media library. Click the plus icon to add images. The plus icon will take you to your media library, where you can either upload new images or select existing images.
You can further customize how the slideshow works by changing the duration, animation, background size, and position of the images.
Add Parallax Effect To Images
Parallax scrolling is a technique that creates 3D effects on your page by making some elements appear to move faster than others. This technique provides users with a stunning browsing experience.
To enable parallax scrolling effects in Elementor, open the available options by clicking on the section where you want to enable it.
While editing your page, you can preview how it works in the preview area. Remember to update your changes after adding the scrolling effect.
Replace URLs – Elementor Tips
Elementor includes a find-and-replace feature that enables you to update links on your website. This feature proves useful when migrating from an insecure HTTP connection to a secure SSL (HTTPS) connection, as it allows you to replace the links effortlessly.
Extend Elementor With Third-Party Addons
Elementor, a robust plugin, contains all the features you need to get your website up and running. However, you can enhance the plugin's capabilities by utilizing various addons available for Elementor.
If you want to design navigation menus on Elementor, you can utilize the Sticky Headers and Menus addon. This addon enables the Elementor plugin to manage your site navigation directly from the drag-and-drop builder.
You can download free and premium addons for Elementor from the Elementor marketplace.
You can access and download Elementor Addons using this link.
Want to read more?
Conclusion
Here are 14 useful tips that can streamline your Elementor workflow. These tips work for beginners as well as seasoned web developers, allowing you to enhance your efficiency and productivity with Elementor.
Elementor, a feature-rich plugin, can potentially slow down your website. To speed up your Elementor website, we recommend checking our speed optimization guide for a complete tutorial.
