15 Fun Elementor Features You Don’t Know Exist

Today I’m going to share with you some of my favorite and fun elementor features that no one seems to talk about. From positioning to dynamic content, elementor favorites, text stroke, hidden elements, drag from desktop among others.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Hidden and Fun Elementor Features

1. Positioning in Elementor

In Elementor, go to your widgets area and search for the Lottie widget, drag and drop it in your section/canvas.

wBd8Jz4aSGX24iL kAcQ4kaOoUXeLiwj l2rts1 7owm6IU58QmrX6rGsTnPGrd8t8ri1WV5FC89XXyvnncnhvikMymuhy1tDI4IjFkW9kvBMiSkX7M3SgXFqoJ0M2GDm3jMNJVu

Back on the elementor editor, go to Settings and turn on the Loop option.

Go to Style and under Width; set the width to 100px.

Go to Advanced next, here go to Positioning and change position to Fixed, this places the lottie widget to the top of the page.(01:00)

xbiuR8khY2fVs511CL7fgVoEQfDKyh XOlISLarYU5n2zqGkFLklONiyFnpePf 7rZbXnPrKuh3YNH7O5TDblDSdSgJ5Zt2PUiMX8koWV9PT1HboOovBBiw8YhzVlBTK6koagVqB

What I want is for the Lottie widget to be at the bottom right corner of the page, and to do this:

With the Lottie widget selected, go to Advanced and under Positioning change width to ‘inline (auto)’. Then drag the Lottie icon to the right bottom corner. Now the icon is positioned at the bottom right and even on scroll it stays in the same position. (01:28)

kY kGMhSzuj4Ks4yh2lew4f7r4aXMhI0YL4XHvh72F hyfe7FOJHlEmOsIh8KFV0mF92dAUCOAnYuIr1Gx4VziB6CxE OPl47jKsijX8pAUGRVsPYLE3Fvj07gA9NknDzf44OMeq

You can also change the responsive settings and position your widget wherever you want on different devices. For this:

Go to the Responsive Mode icon at the bottom (01:48).

2Mnr6Gc1eRs Y8HneY3gbaLpxZdM8o9uV2MgxpYK Ke55iC2 7vfaR1UB6RgcHVjiZJuXTtDlx949RCE1tF3cFbvUXketpu9rmflygG34Sn6Wfrfkiax2CxKyqy lSeJtzlAveo

Select the tablet device, go over to Advanced, then under Positioning select the horizontal orientation to be on the right, then you can go to the icon and position it where you want.

Next, select the mobile device, on Positioning under Advanced set horizontal orientation offset to -3.1 pixels and vertical offset to 37 pixels, you can do this by just sliding the nob. After this just click the Update button at the bottom left, and when you preview, the icon is now well-positioned on the page.

2. Elementor Role Manager

The next feature I’m going to show you is the role manager. This you can find back on your Elementor dashboard (02:51)

The role manager can be useful if you have to share logins with some users of your website for example an editor, a proofreader or someone contributing to your website in terms of writing content, and you want to limit the rights of those people when they are accessing Elementor.

For example, let’s say you don’t want your editor to have access to the Elementor Editor, you can just go to role manager and select the Editor and then check or uncheck the ‘No Access to Editor’ option. Save changes.

3. Elementor Maintenance Mode

This feature could be very useful for people creating websites with Elementor, it enables you to put up notices when you are developing your site or making some important changes on it and you don’t want people accessing that website. To use this feature: 

Go to Tools in your Elementor (04:21).

N7qY6DO4PSyarpGY72VP9MCjrUpPk Z F7PIs9WsXBWr6x7Rc8cB1aytPLakz95DGB0t0sHz

Under the tools menu click on the Maintenance Mode button; it gives you 2 options that’s; the Coming Soon and the Maintenance mode options.

The coming soon mode lets Google know that the website is ready to be indexed.

The maintenance mode lets search engines know to come back later and check out your website. Whichever mode you choose, you have to create an Elementor template, which will be shown to your website visitors. 

To create your template for this purpose you just go to the Choose Template option and choose to create one. This will open up the Add New template page where you can just give it a title of your choice then click the Publish button. (04:56).

R7rjDKGOtRAMg5iTqlZud11ER6FPi5jPCxPkac6 9xrwXluZ hW3f FwzdHRJQznI3 tTZ88qS2nw9g CDiu2b4JKj5qQhR4eccOvw0afDS qBmnc9DrOSPSR9h2uy Y5i8XE2

After publishing, click on the ‘Edit with Elementor’ button. At the bottom left, find the gear/settings icon, click on it and then under Page Layout choose Elementor Canvas, then in the canvas paste your maintenance template, then update.

Now when you go back to your Maintenance mode you’re able to choose this particular template then save the changes. Now that’s the page that will show up when you open up your website URL. (05:32)

Also Read: Max Mega Menu for Elementor – Create Free Elementor Mega Menus

RVCOOgHKhy5mg

You can design the maintenance page any way you want. And in the “who can access” option you can choose which users you want to still be able to access your website even when it is in maintenance or coming soon mode.

4. Elementor Color Sampler

You probably know that in some software like Adobe Photoshop or Illustrator, you can sample colors somewhere on your canvas. This same feature is now in Elementor and here is how it works:

Using an example of a heading; when you select your heading and go to Style in the Edit Heading menu on the left, when you select Text Color there’s an Icon called a color sampler (06:17)

XkCFhsW2mM0VwssH0NTIolN59K7HM7Ra6TjqIimJUniMVX0T33kugX gMGwQsTxlqdkUec3rbDmPuscLOsTxKbmUpyyBgEbGfjTrIpUCIPECe a3C8h0jFJSaGT8OcTjaU5NHbAv

When you click on the color sampler, go to your images and click anywhere, then you’ll be given different color shades available and you can just apply them to your website (07:02)

CBdp9v6fxxvECV06kzcLaJoJd47vx x4cqoKyx5lVsFQUgybfUq5vnfQMSS3SR66tRAHwXMGc6cnXsr6ptH gtK5nKPtT3ZvWja1U6azTnbVAgSQTb2S67EKFlE4 krCX JVXh0p

And if you want to add the particular color to your global color settings, go back to the color picker section on the left, click on the plus (+) icon to create a new global color, then give it a name and save. And you’ll find that color in your color options when you need it.

5. Elementor Version Control

The other feature I want to show you is the version control option for Elementor. Sometimes when you update your plugins you may face issues where things are falling out or your website breaks, but now Elementor gives you the option of rolling back to an earlier version. This saves you the headache of having to install other rollback plugins into your website. So, how do you roll back?

Go to your Elementor menu, under Elementor Tools, there’s an option called version control. (08:08)

Under version control, you have options to roll back to the free version of Elementor and even the pro version by choosing which version you want to roll back to from the dropdown.

6. Dynamic Content

This next feature you probably have heard about, but maybe you’ve not demo-ed it, that’s the Dynamic Content feature. This literally changes everything in Elementor because it enables you to take your Elementor building skill and website features to another level. 

For example, let’s say you’re designing some website, with dynamic content, when you select a certain section, you don’t have to type in the text widget, you can just echo a title or some data from your database and it shows up where you want it. 

To do this, you select a widget then go under Content in the Edit area on the left, there’s an icon for “dynamic tags” (09:40).

9LqoPh8oXR2wUpvjEqo4wE5UlJX9ZUZt7WAfFul fEcqHfkGu rD80uDiLxCuuc4caStgLfwl2tEIzHRB6cBuzSbacWB70XmhYRa8kYAwzaZm0klE8Yggp8XS7S aAQPk0Au5201

When you click on dynamic tags you’re given a number of content options from the database which you can choose from to put in your widget. When you click on the particular text, it automatically appears in your selected widget.

Dynamic Content even works with image widgets. When you click on a particular image in your section you can still go to dynamic tags under content and choose an image from the database.

If you’re interested in checking out how dynamic content works with the Elementor, I have created a complete tutorial that will take you through step by step how to create a dynamic portfolio website. The basis of this tutorial is to show you how to work with dynamic content in Elementor and use other third party tools that will give you more options when designing your website. Here’s the link to that tutorial. 

To Read: How To Trigger Elementor Popups in the WordPress Native Menu (2 ways without installing another plugin)

7. Elementor Template Kits

Elementor recently released their kits library where they built up a number of sites in different categories like e-commerce, events and entertainment, health, sports and fitness. You may want to grab one of those complete demo websites and get started working along with it. 

Take, for example, this website (12:02)

Na8rf2Pu8n

It has a beautiful layout and it’s a free kit, though most of them are Pro kits. You can use it for several things like a portfolio, service site, etc. So how do you get this website imported into your WordPress installation? 

First, you have to have Elementor installed and activated. 

Then when you go over to Elementor and click on settings (12:20).

IF oXL771vxUzxj6ev8 g1xySGkN4o8pFNaer3oSxxBve38QxOuRXtrrKYu6UtuGc2kHnll7WyHhOJO8RzSu9lEoEGwmNyYdp2q34lvNRMc

In settings make sure that you have the import and export Elementor kits options set as active (12:26)

Once that is active, then you will be able to echo those templates from the Elementor kits library.

So next you go to Templates, and here you have the option to go to the Kits Library (12:41)

nSGZeyVRicSDj818z7JS 7TOukz9Yl8y3i8Yy3WjDHumQmDxZM RnDvRytqOoTPPXB WTqMigtQfcolmhQ9qEe

In the library, you get a number of kits to choose from and work with. You can filter them depending on what you want to create.

You can go through the different kinds offered and if you are happy with one, you can simply click the apply kit button and the import will start shortly whereby all the assets, the pages, the images will be imported in your WordPress website. (13:23)

xXjh4GoIIPIs7e0066TmF3wVr qpwMAeBN9g n1Mlvmo4P9Qi8y2F3J omIg9EK AdGY9LycwzS 5k7FpqQMM76pXZGgQWaFSpDo9wjbEBekvDi kYRcaIZXteacf5O5jymyW7

I’ve created a specific tutorial on how to get started using the Elementor kits.

8. Integrations

The other feature that I want us to look into is the possibility to integrate with third-party software once you are using Elementor. 

For example, if you’re using a contact form, when you click the form and go over to the Edit Form section, there’s an option called “actions after submit” and this option specifies what happens once someone submits this form.(14:03).

erB4 TxhDQ3WGeXmhaWEmQbyWQmtnqnlqHaTC2j7yFsaJIr3PHoPggx1l4uUkpczs6C5TLWCtwbNjjs9rfaPLdeSY1Kvrw3zuHLOS87 tdKHJFPBaisOfzRq0M2yhJbBwjq1BCpc

Under the actions after submit option you can choose to connect your form to MailChimp, it can be sent to your email autoresponder or they can be redirected somewhere else you want.

Or you may simply want a pop-up to show up and you’re provided with options on which popup you want to show. For example, if you want your data to be sent to MailChimp, once you select that option MailChimp options show up and you’ll have to enter in your API key for MailChimp and then you’ll have that data sent straight to your MailChimp campaign or list. 

9. Form Submissions

The other hidden but fun elementor feature is the form submissions. In this case, you are able to look at a database of the form submissions that have happened on your forms in your Elementor.

For example, when you go to your Elementor dashboard, when you go to Elementor, there’s an option called submissions. (15:23).

hrRV2NVY5ATgxpUXlDKGrqtU2r YqD7xRM8FiIxivp5 gPsSSwA4u0de0ebVL65zVrxHEw1IVt1zJkUKDbhjZQFo6z8piU2B8zuThVzHXW

When you go to Submissions, you’ll be given a list of all submissions that have happened on your forms, with the date of the submission and the specific page it happened. This way you can monitor how many submissions have happened on your site. And this saves you the headache of trying to sketch for which submission was sent, when and what time.

10. Code Highlight

If you are a website designer or a developer, I know you’ve had to share a code snippet in your Elementor website and you struggled with how to display that code snippet, then probably you’ve had to install a third party plugin to just do that simple task.

Now, with Elementor you can do that inside your Elementor editor since now we have a code snippet widget in Elementor. When you go over to your widgets area and search for “code”. You’ll be given a code highlight widget (17:31)

You can simply just drag it into your Elementor editor.

For example, when you drag this code highlight widget in your section then you have the option to add the code in that area/section. You can choose to use Markup, HTML, CSS, JavaScript code PHP, whatever code that you want. (17:43).

K8zOAlkUNHwi8pV9oShRWV5hsK GCfowjw9oS

All you have to do is paste that code snippet and someone has the option to copy it from there an paste it wherever they want on their website (18:33)

7u1MrzkBsNMEZsFghvAcXWUHMBBJlx3zd8pmw1jjZ7ETjFR5mBMXbQFccst32wWtHsJqyRbUhq0bwU 4nj7rquGSqj32OiSq9NIb7LWrhxKyG9In9Bn9hYfPKcGZ1HT RmS0Y86a

All this without having to add any extra plugin to your website!

11. UI Theme

The other feature that I think you would find interesting is the UI theme. This helps you to either use a dark mode or the light mode in Elementor, or you can simply just set it to auto so that once your computer is in dark mode your Elementor interface will automatically adjust to your computer’s setup.

To set the UI theme:

Go to the hamburger icon (19:40).

g 8aGnH0g6MnHPACfTNV NiH8YuOtzaIvQOaUlbyh9v KtQdyypZR3R9

When you click on it there is an option called the user preferences. Click on user preferences and there you’ll find the UI theme, here you can choose the dark or light mode and that will automatically change your Elementor theme. 

If you want it to be based on your computer theme, you can just go over to the UI theme and set it to Auto Detect, this will detect whatever theme/appearance your computer is set to.

12. Hidden Elements

The other feature that I think you will find interesting is the hidden elements in Elementor. 

For example, let’s say you have an image on your website but you don’t want that image to appear on a desktop, tablet and mobile.

Normally what you have to do is select the widget, go to advanced, go to responsive, and you turn on the hide feature on the different devices, however that widget is still visible in your editor, so how do you hide it so it doesn’t appear even in your editor?

To do this go to the hamburger icon, go to user preferences, and you have an option called responsive preview. Under this, you can see hidden elements and you can just choose to hide (21:57).

BJIaQOU9I TUFicNJ1FiUNvCsduny4JmuqDl7zbbYc7fFXWecf LR1IVTBHaYcUjIQcgx0rVfepk65kOHzr Oa

This automatically hides any hidden elements from your editor. You can even hide that particular widget from your tablet and mobile but leave it visible on your computer.

13. Elementor Favorites (Widgets)

This feature enables you to save your favorite widgets that you’re using in your Elementor. All you have to do is go to your widgets area and right-click on the widgets you usually use then click Add to Favorites.

This will place the widgets you’ve chosen at the top of the widgets column and you can quickly access them (23:39)  

vJTbxZTOThePjy9RlrPaVniPGYtypS51ILStBoFfi3HG6VwFKmyQwxiMRBlGDKIjOBeQOOaihnIzsUkvi 4bXJQbhkmLFdT zNI7lXY4hw9gnPbtgh5JwAQHgYLs3LwbLpoK2YyY

14. Text Stroke

Among the fun elementor features for me is the text stroke option. So, how does that work? 

When you select for example a particular heading and go over to Style in the Edit Heading section, there’s an option called text stroke. Under text stroke you can just  choose a stroke size for example 3 pixels, and you can also choose a stroke color if you want (24:25)

I02Eh8 Y0acGYrBZi0c5XD AFoGa r5ZsSHtfs LlBF2cgd1zT I9c6Ue iTjypavAbd nnO8VxxgiWY rGI5B3pCe4HO6d6mymEREX TdpYnfl4czR KfBXb

This is changing everything in Elementor because originally to have a text stroke you had to use custom CSS. So now Elementor is solving that for you. 

15. Drag from Desktop

The last fun feature in Elementor is the ‘drag from desktop’. This feature enables you to drag for example an image from your desktop directly into your Elementor editor (25:40) without going to the media uploader. (25:40)

N9eltpvxJROQOKhezouGRQd9hOgXwv24afHqqNA27I6TYSB7jiwW2XF5BcTQ Nr78GyaTt0el2lIXaLu9EIT6FrF3iNI03nAsqVYJz2D5xZLldyUckucUVvyS1UFzA8HkLghE GO

Once the image uploads, it automatically appears in your Elementor media library.

In closing

These are some of the interesting fun elementor features you can apply in your website design process to better your designs and workflow.

Please let me in the comment box below if you liked the tutorial or if you have any questions or comments. Don’t forget to subscribe to my youtube channel and newsletter for more tips and tutorials straight into your inbox.


Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users