Top 27 Elementor Hidden Features | Elementor Tips and Tricks

hey what's going on guys today in this tutorial i'm gonna share with you the 27 hidden feature of elementor you know elementor have a thousand of feature but in today's tutorial i only pick up the best 27 hidden feature that is really very useful but you don't even know about them maybe you have used other third party plugins and you don't know the feature is already have inside elementor so without further ado let's see the best hidden feature of elementor okay here first of all i wanna say that here are some of the features you get in elementor free and some of them are available in elementor pro so if you didn't already have elementor pro you can quickly get this on my link on the description so here's the feature number one is inner section inside inner section so here you can see we have taken and two column layout and inside this first column if we take an inner section here okay that works properly but inside this inner section if we try to add another inner section you can see it doesn't work so inside an inner section we normally cannot take an inner section but if we copy the parent column of this inner section this is the parent column let's copy this from here and if we paste this inside any of the column of our intersection okay we can now able to take an inner section inside an inner section okay here let's delete this extra column and here you can do that in multiple level so following the same process if we copy this parent column of this inner section from here and paste this inside here here now this is an intersection inside an inner section inside an inner section that's really crazy so normally 90 percent of time you don't need to take an intersection inside an inner section but if you want to create more complex layout like this one or this then you can use this feature okay then let's talk about the navigator so if we click on anywhere inside our elementor page inside this menu we can see an option navigator so if you click on here here we can get a navigator bar so from here we can see a hierarchical view of our pages so in this hierarchical view we can see each of this section and inside this section we can see all of the columns all of the content this is really very helpful in case of this kind of cases so here basically we have created two headings one for our mobile devices and another for our desktop and tablet and both of these are positioned at the top of our page and you can see these two are overlapping on each other and from here we cannot edit our content properly so in that case we can get the help of navigator so from here if we click on this any of the widgets from the left panel now we can see the editing option for this content or the section and from this preview if we completely want to hide any item we can also do that by clicking on this eye icon here okay then the next feature is is called to section so here if you go to this edit button from here on the link option you can see by default it's hash but after this hash if we type something like take and if we copy this text excluding this hash and if we paste this text inside any of this section so if we click on this section and go to the advanced settings and if we paste this in this id field here so now if we click on this button here we can see we have scroll to the exact section where we paste the exact name of this id so we can do that not only with section but if we want to paste that id with any of our widget if we cut this from here and if we paste this for like this widget you can see this also works for this widget and inside your page if you have a contact form at the bottom of your page and if you want to link a button with this section you can also utilize this functionality on your website okay then our next feature is the inline width so here you can see these two buttons and for these buttons if we go to the settings and go to the advanced and from here go to the positioning here you can see the option for the width from here let's choose the option to inline and if we also do the same for our second button okay now we can see we are able to place this two button one after another horizontally so here we need some gap for this if we go to the first button settings and if we add some right margin like 20 pixel that looks great and here if you want to make these two buttons to place on the center here you can also do that by going to the column settings here and make the horizontal align to center okay then go to our next tip so when you are using elementor and if we press ctrl and e then you can see a search bar like that and from here you can search anything from your wordpress like if you want to go to edit any of your page like i want to search for my home page here you can see from the result if i click on the home page it will directly send me to the edit with elementor panel so you don't need to first go to dashboard then pages then edit with elementor that really makes your workflow more faster okay and from here if we type add here you can see there is also some option for adding new page post or template or if you want to go to any specific portion of the dashboard like the plugins you can also go that from here and this finder option will work both from the front end and also from the dashboard when you logged into your wordpress then our next feature is hitting the like and subscribe button i'm just kidding but if you really enjoy this video don't forget like and subscribe to this channel because that really helps me to make more helpful content like this so let's go to our next feature if we go to any of our widget like here the image carousel widget and right click on that so here we can find an option save as global so if you click on this here we can save this widget as a global widget so let's name this global widget and save this now you can see this widget has become a global widget which is the logo carousel one and now if we go to another of our page and here if we want to add this global widget we need to go to this global section and here we can also find this widget from this page so let's drag this to here and our global widget here is also added so in your website if you want to add the same widget on the multiple places on your website in that case the global widget is very helpful because here if you want to edit this widget from here like here i want to set the slideshow to five okay now here it's updated in this place and as this is a global widget this widget will be automatically updated in this place here so when we modify this we don't need to change this on each of the places where we have used this maintenance mode so if you go to elementors and then go to tools and under here go to the maintenance mode here you can see some option for setting the coming soon or the maintenance page for your website so if you just launched your website and if you don't ready your content yet in that case you can enable the coming soon mode on your website or here there is also an maintenance mode so if your website is on maintenance you can also enable this mode so right now let's enable this coming soon mode from here and then from here you can also select the template for your coming soon page so i have already created one template coming soon and let's save this now from this edit template option you can customize the template of your comments on page so if you click on here here you can see our coming soon page template and inside this template i don't want to show the header and footer so if we go to the template settings and go to the page layout if we make these two canvas for now the header and footer has gone now let's update this and now if we go to any of our pages like if we go to our home page everything looks fine or go to about page here also everything is okay but if we logged out from wordpress so log out from here and try to go to our home page here you can see instead of our normal home page we can see a custom coming soon page and here if we try to go to our about page about it also redirect us to this comments on page so basically for the normal visitors when they try to come to your website they can see a coming soon page like this and you can normally do your work from your dashboard and here after enabling the maintenance mode you can see on the red background maintenance mode on this is also very helpful because if you buy mistake turn on this maintenance mode or if you forget to turn off this coming soon mode your visitor cannot visit your website so that's why it always remind you that the maintenance mode is on on your website if we try to create a dark background website that is really very painful because for each of the section you need to go to the section settings and set the background color from there but here you don't necessarily need to do that because if you go to the page settings from here if you go to the style so from here if you want to modify the background color you can do that just by one click okay or here if you want to add a new section you can also create that with this by default dark background if we go to templates or the pop-up or the theme builder here for each of the template on the right side you can see a shortcode is provided for each of the templates here if we go to this free ebook section here we have created this section with elementor so now if we want to use this section anywhere inside our website we can easily do that by using this shortcode so we need to just copy this shortcode from here and if we want to include this section inside our post we need to simply paste that here and if we update our post okay you can see our template has been added inside our post and not only inside post you can also add your section inside any of your pages or anywhere by using this shortcode feature our next feature is the link option so if you go to any of the link option like here from the button we can go to the link option to here and if we click on the settings icon right here here we can see we have some additional option for this link like if you want to add this link in a new tab you can check this so this option is really very helpful because if you add an external link and you don't want to leave your user from your website in that case you can turn on this open in a new tab option and here is also option for nofollow so for seo purposes sometimes you need to add this nofollow with the link and here is also some option for custom attributes if you want to add additional custom html attributes with your links you can also do that from here dynamic tech is a great feature for creating dynamic content inside your page so here i have inside a singular post template for the single post page and here you can see i have used an heading widget here and here i have used and text hello world so here if we remove this static text and instead of this text i want to use this dynamic tag option so if you click on here we can see here are a lot of option for creating dynamic content inside this heading so from here if we choose it to post title so now we can see the post title this post title is basically comes from the title of this post right here and here we can see this dynamic tag option not only for the title but if we go to any link option we can see it here we can also find it for any of the background or any of the image option so here for this image if we go to this dynamic tag and here instead of this fixed image i also want to use a dynamic image so here if we go to the post under here you can see i have also added an extra field for the post which is image 2. i have done this using the advanced custom field plugin so if you go to our single post template and go to this images dynamic tag here under acf let's select this option and go to the settings and under key if we select it to the image 2 which the field i have already created okay now we can see the dynamic additional image instead of that static image and if you don't want to set any additional image for the post from here you can also set and fall back image for that so by combining the dynamic tag option and also the advanced custom field you can create this kind of cool dynamic things we can easily create the dual color heading from the existing option of elementor some of you may have used some additional plugin for that but you don't need to do that so here if we go to these heading settings here we can see this text so here for this portion of the text i want to make it a different color so to do this first of all we need to wrap this inside and span html tag so let's start the span tag here and we need to close that span icon with this slash and inside this opening tag we need to write down an space and then style equal to color then a colon and then we can set the color for this portion of the text if we set it to red we can see the color has been changed to red or if we want to use any other color so if we go to style and here from the color picker if we choose any other color like this blue color we need to copy that color code from here and here let's redo this original color to white and if we paste it in that place instead of the red okay now we are able to paste this blue color only for this portion that's really cool okay the next feature is the color sampler you can use the color sampler option to pick up any color from your website like here for this heading color i want to choose a color from this image so let's go to the color option and at the corner you can see an option color sampler so let's click on this and now if we click on anywhere on your website if i click on this image here this color picker automatically pick some colors from this image so if i choose a color from here this color is also added for this heading then go to our next feature which is the dark mode so here on the elementor panel if we go to on the top left corner and go to user preferences from here you can change the ui theme for the elementor editor so if you set it to dark it will become dark and here is also the option for auto detect so this auto detect option will automatically detect the theme from your operating system so if you have a dark theme on your windows this will automatically detect from your computer and apply this on this ui theme okay so right now if we make it too dark now on this editing panel here we can see everything in dark mode all the elements here in the dark mode or even if we refresh our page here this loading screen we can also see in this dark mode i'm also a dartmouth lover because that gives my eye comfort and if you are using it from the laptop that also gives you a long battery time here you can see we have created a section on the left column we have take some text and on the right column here is an image so right now if we go to the responsive mode and go to tablet here everything looks okay but if we place this image above this text that really makes very good sense in this layout so for this we have an option which is reverse column so if you go to the section settings and go to advanced and go to responsive and turn on this reverse column option we can see our second column goes to first and our first column goes at the bottom and on the mobile we can also turn on this option so from here if you turn on this this is also applied for our mobile if we press ctrl and question sign then we can see a list of some keyboard shortcut like here we can see the shortcut for undoing is ctrl and z for redoing it's ctrl shift z or for enabling the responsive mode we can also press ctrl shift and m i know remembering these shortcuts is really a headache but once you are comfortable with this shortcut you can speed up your workflow really fast our next feature is the additional breakpoint it's recently added inside elementor so if we go to the responsive mode normally here we can see only three options the desktop the tablet and the mobile but if you want to add some more additional breakpoint we need to click on this settings icon and here you can see the mobile and tablet is already added and if we click on here we can see some more extra devices like mobile extra or if we want to add wide screen here also the wide screen devices added and here you can see for the mobile device the range is between from 0 to 767 pixel for mobile extra it's 768 to 880 pixel and for tablet it's 881 to 224 and so on so if you want you can also customize the breakpoint value from here like if you want to make it to 600 you can also do that but i'd like to make it to default so let's keep it default and if we click on update and also click on reload now okay now if we go to again to responsive mode now we can see our additional devices has also been added to this bar so if you want to see it from the mobile extra we can preview this or the wide screen okay we can also do that here you can see and form and inside this form if we go to each of this field and go to the advanced we can see a shortcode for each of our field like for the name we can see this is our shortcode for this one this is our shortcode so by using this shortcode we can do some really cool stuff here we have also made and thank you page and after submitting this form i want to redirect my user to that thank you page and inside this thank you page i want to show that fellow which the user have been submitted from here so i will be do that by using this short code feature so if you go to the action after submit here now collect submit and email is activated now i want to also add it to redirect and go to this redirect option and here i want to paste the link of my thank you page and after the link i want to type a question mark then let's write username equal to then we need to copy the shortcode from the form field so i want to pass the value of the name field so go to advanced and copy the shortcut from here and paste that after this equal sign and then i also want to pass the fellow of the email field to our thank you page so let's also add an and sign and then let's write email address is equal to then also the shortcode from this email field okay now we need to save this and here this is our thank you page and inside this thank you page here i want to show up the user's name and here i want to show the email address of the user so for this let's go to this paragraph and go to these dynamic tags and let's choose the request parameter and click on this settings icon and for the parameter name i want to copy it from here the username and before the username i want to set it to thank you so here it says thank you the username and then it says contacting with us so the full word will be the thank you then the username then the after contacting with us and for the second paragraph i will do the same thing okay here for the second paragraph we have used the parameter name exactly email address which we have also used right here the email address and before that we have also add some text and after that we have used this full stop we can also use a fallback text if we didn't get any value from this form field okay now let's save this and test this on the preview so if we fill up this form this confirmation message has been shown and it's redirected to our thank you page and inside this thank you page here we can see their name we have just submitted from this form and here we can see the email address for the user here this is very useful if you want to make your thank you page more personalized for your user the next feature is the replacing url feature so we need to go to elementor and under that go to tools and need to click on the replace url so sometimes when you migrate your website from a url to a new url in that case something may not be working properly on your new site like for some buttons you still have the url of your old website so in this case you need to replace your website's old url with the new url but before doing that you need to make sure to take a backup for your database and we also need to do another thing if we go to general after doing that here we also need to regenerate our css because in some of our css file we still have the url of our old website so when we click on regenerate files and data this will also replace this with our new url so after that let's go to our next feature so if you click on the left top corner and go to the site settings then click on the background here we can see an option mobile browser background so from here if we select and color like this okay here you can see nothing has been changed but for the mobile browser instead of this default top bar you can see the background has been changed with this custom color so if you want to change the background color for this bar to match with your brand color you can set that from here but here this option is not supported by all of the browser and the devices so i cannot guarantee you that it will work for all of your users okay then next go to the next feature okay here we have discussed about some advanced option of pop-up so if you are a marketer this pop-up feature is really helpful for you because you can create different type of pop-ups like a sales or promotion or edit capture pop-up from this elementor's pop-up option so here's i have made two pop-ups if we go to this one okay here you can see i have already created a pop-up and from here this saving option if we go to display conditions from here you can set the display condition for this popup so if you want to show it on a specific page you can also do that from here and from this trigger option you can set various triggering option like if you want to trigger this popup on the page load you can do that you can also set the delay in seconds from here or if you want to enable these on user scroll you can do that from here you can set up the direction from here or you can show the pop-up on click on your page or there are a lot more option like when user try to exit your page you can also show this pop-up and after that from the advanced rule option you can also set some advanced option for your popup like here it says shows after x page views so if you want to show this popup after your visitors comes to your page like three times you can also do that from here or when they arrive this page from a specific url then only you can show this pop-up for example if you want to show this pop-up when user only comes from facebook you can do that from here or here is more another option like showing on devices so you can enable or disable this pop-up for various devices and from different browser from here so here i don't want to do anything with that so let's close this instead here on this page for this button when i click on this i want to show this popup so we can also do that easily from the buttons link option so if we go to the link dynamic tag option and choose the action to pop up and from here on the settings icon if we select our pop-up here we name that pop-up pop-up to okay this one so if we save this and go to preview okay now if we click on this button we can also get this pop-up sometimes after updating elementor you have caused some problem on your website so in that case what you can do you need to go to elementor then tools and go to version control and from here you can roll back to your previous version of elementor and you can do that both for elementor free and also for elementor pro so from here on this drop down we can see some previous version of elementor so if we want to roll back to a older version we need to select that and click on this reinstall button and click on continue and then our elementor has successfully rolled back to that previous version here under elementor tools if we go to the export import kit option from here we can export or import the whole elementor template kits in one click so from this export option if we click on here here we can see by clicking on this export button we are able to export all the saved templates header footers all the singular post templates and all other templates from here and also the content like the elementor page the landing page wp page everything and here even the site settings like the global settings of the global colors global fonts or the light box or the background settings we can do all and everything from here and here if you don't want to export any specific part we can also deselect these from here and after setting all of this we need to click on this export button and all of our content has been exported within this one zip file that's really cool and after exporting if we want to import this zip file to our another website we can also use this import template kit option our next feature is the html tag feature so here if we click on any of our heading widget on the left panel you can see an option html tag so probably you can see this option but you don't know when to use this html tag so from here if we select it to h1 here nothing has been changed and here for this one if we select these two h1 or h2 we cannot see any differences for our design but here for the search engine optimization or seo we need to keep in mind about this html tag like here you can see we have used the html tag 2h1 so according to google seo we should not have more than one html tag in our page so that's why only for this setting we use the h1 tag and here if we look at this here for this heading we have used h3 and also for this one we have h2 and here this html tag is not only for the headings if we go to any of the section here we can also see this html tag okay here i would like to keep it to default but for our header section we can select the html tag to header and also for footer we can also select this footer tag here if we try to use any of the content for our product here we can see we have the normal wordpress editor we can only see the elementor editor for our post and pages for the other custom post type like if you create another custom post type like recipe or portfolio we cannot see our elementor editor there and also for the product here we cannot see that so to enable elementor editor in this place we need to go to the elementor settings and here you can see an option custom types so from here if we also check this for product and click on save changes and here also refresh this now the edit with elementor button is also available for our products so from here for our product we can now create more complex layout with elementor editor okay the next feature is the background slideshow so normally for this section you can see we have used a single image background so go to the section settings and if we go to the style and we can see that image here but here for this background type we can see for option if we go to the last option slide show from here we can set multiple images for our background slideshow so let's click on this plus icon and from here let's choose a couple of images and now we can see instead of a single image a slideshow is running on this background and from here we can also control the duration for the slideshow and also change the transition for the slideshow like it is set it to fade if we want a different transition we can do that from here okay that's really cool we have reached out to our last feature which is the honeypot and the hidden feature so for any form if we go to the form settings and from here click on add item and choose the type of this field to honeypot here you can see nothing has been changed but this honeypot field is really very useful because if someone tried to run an automated bot the honeypot field would block them and protect your form from this kind of spam so this will give your form extra security basically this is an hidden field so user also don't have to do anything with that so that's it about the honeypot field and then we also have an another field the hidden field so if we choose the hidden field here also nothing happens but we can do some interesting stuff with this hidden field here by using this hidden field we can detect the user source so we can know that where the user comes from this page and fill up this form so for doing this we need to go to this advanced tab of this hidden field and here in this default value field we need to click on this dynamic tag option and choose the request parameter and click on the settings icon and here i want to name the parameter to source and also here let's give a id for this field you can keep this to default but i would like to change this to from let's save this so now let's test this from different sources okay now on facebook i have shared the link of the page the contact page contact us these pages url from here and then we have written the question mark source equal to facebook so the source have to be identical with the name of the source right here and then we give the name facebook as we share it from facebook so we have given its name to facebook so if you click on this link here and fill up this form okay our form has successfully received so now if we go to our dashboard and go to submissions here you can see we have received our form information so let's click on this and under here we can see the source is facebook so that means user first comes to this page throughout facebook and then fill up this form and when you share this link on another social media like youtube here instead of facebook you can write youtube or if you share this link throughout your blog post like this blog here i have also shared this link here after the page link as a source you can see i have pasted the url of this page so if we go to this contact page throughout this page and then fill up this form then on the from field we can see the url of that specific blog post cool right all right so that's all the 27 features in elementor which i have found after a lot of research i know it has become a really long tutorial and if you are still watching here i want to congratulate you because today you have learned a lot of new things so thanks for today i'll see you very very soon

Channel: Make Dream Website

Views: 67,712

Keywords: elementor tips and tricks, elementor free tips and tricks, elementor pro tips, elementor tips, elementor tricks, Elementor Hidden Features, elementor features, elementor pro features, elementor new features, elementor advanced tutorial, elementor advanced settings, advanced elementor, advanced elementor tutorial, elementor hacks, inner section inside inner section elementor, elementor dynamic content, elementor popup settings, elementor form settings, shortcode template

Id: SqwQFiaFMOQ

Length: 38min 2sec (2282 seconds)

Published: Tue Sep 07 2021