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.
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)
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)
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).
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).
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).
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
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)
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)
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).
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.
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)
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).
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)
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)
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).
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).
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).
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)
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).
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).
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)
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)
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)
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.
