Elementor One Tutorial for 2026

Hey, welcome. In this video, I'm going to dive deep into the new Element One subscription. I will talk about who is it for, how to get it, how the credit system works, and some of their new applications. Now, as you can see, they've had a full rebrand, which looks great. By the way, if we go to products and click on Get Element 1, this brand new subscription is basically one subscription with the complete experience. You will get one tool that will help you create, optimize, and manage your website into one unified experience. If we click on see pricing super quickly, you can either build for yourself, basically get a license for yourself, or if you own an agency, you can click on build for clients and then you have two plans for agencies. This essentially will give you unlimited sites and the features will be exactly the same as the build for yourself, but you will get a lot more credits. I'll talk about the features in a second. At the moment, if we click on build for yourself, you will see that they do have a launch trough on this and I will leave my link in the description below. Something very important that I want to talk about before we talk about the tiers here is that when you buy this, you are actually buying the plug-in which will allow you to create your website. This does not include a web hosting. So, you're basically buying a plug-in, but you will need to have your own web hosting. Obviously, you will need to have a WordPress website installed and then install this plug-in, which I'm going to show you how to download and install on a WordPress website that I've already created. Another thing that I feel like it's very important to mention here is that if you're currently on any of these plans and you're happy with the functionality that you get, don't worry about upgrading to one. In terms of like development features, you'll get exactly the same building features. Obviously, you pay annually. So, you will be kept up to date and you're going to get the latest features regardless. But, of course, this new tier will have a couple of more features which I'll talk about now. If you go down a little bit, you will see that they've added this creditsbased system. This is very important to know because the new features like AI, site optimization, site accessibility, email deliverability will use those credits. All of these credits will be shared between those tools. For example, if you use a lot of AI, then you can easily use all of those credits and then not have enough for image optimization. This is just an example. Those credits renew every single month and if you have something left it doesn't stay in your account. They just renew at 25,000 every single month. And another thing that I wanted to mention here is that email also uses it. So what this means is that if you run out of credits, you won't be able to get email deliverability and you'll just have to wait till the end of the month, which isn't perfect. Maybe they need to have some allocation where you can just stop or something. But I don't know, that's for Element to solve, but I just wanted to stress that out because you want your emails to be delivered. Uh for most businesses, emails are very important. Let's do a super quick breakdown of the credit usage per action. Here we have the two tiers, whether you go with one license or whether you go with an agency license. An agency license will obviously give you a lot more credits because you can create unlimited websites. If we look at the capabilities, we have editor pro which takes no credit. Accessibility scans takes no credits. Accessibility fixes for each accessibility fix that will be 91 credits. Image optimization that will be 23 credits. Email deliverability that will be 10 credits. And for AI actions, which includes text, code, image, and container generation, and more, each action could cost you from 10 to 400 and potentially even more. Now, they do say that the credits per action might change from time to time, applying to all plans regardless of the purchase date, and as I mentioned, the AI actions could vary. Now, let me do a super quick breakdown for you of how you might use those credits. Let's say you have a single one license which gives you 25,000 crates. This will give you accessibility fixes of 274 a month. Obviously after that they renew and you can do it again. For image optimizations you can optimize up to 1,086 images. For email deliverability 2500 emails delivered. If we look at the same stats for one agency, which is the unlimited websites one, for accessibility fixes, you can get 3,846 actions. For image optimizations, you can get 15,217 actions. For emails, you can get 35,000 actions. Now, in terms of site management here, I believe that this is going to be a centralized hub to monitor the performance across all of your sites if you have one or more. And this is going to be obviously great for freelancers and agencies. Quick pause. Element is generously giving away five free Elementor one subscription. And I want you to win one. To enter, like the video, subscribe to the channel and drop a comment below telling me what you're planning to build with Element. It could be a portfolio, a client site, a landing page, anything. I will randomly pick five winners from the comments on the 31st of March 2026 and announce them right here in the comments below. Good luck. Okay, so for those people that are interested at having a look at some of those features, let's get going. I'm going to leave my affiliate link in the description below, which should hopefully give you some extra discount and you don't need to worry because it's 30 days money back guarantee. You can test it out, see whether you like it or not. So, if you wish to try it out, you can go here, buy now. I've already done this. In fact, I'm going to have to blur my details, but essentially it's just a normal checkout process. Enter your card details here or use PayPal and then make sure that you have the one launch discount for now and pay for it. Once you pay for it, this will lead you to download the plug-in for me. This will be under my.element.com/ebsites because I've already done this. And to download it, here on the top right corner, you'll get the icon. And the one that I need is Elementor one. So, let's click on this. Okay. Now that I have Elementor Pro downloaded, let's go to the WordPress website, which I've already installed to save time. It's basically a blank WordPress website. If I go to the front page, you'll see that it has the default theme installed. And that's it. Let's change the theme super quickly. Go to appearance. And I'm going to install the Hello Element theme from here. This is basically a blank theme that we can use. It's quite popular, I believe. And let's just activate it. And basically, now that we installed this theme, it's asking us to also install Elementor, which is a plug-in that allows you to drag and drop elements on your page in order to build your website. This is actually going to be from plugins here. Let's do it this way. Uh, just so people understand. And if we add a new plug-in, search for Elementotor. Here it is. Click install. Now activate it. We have Element which is the free plugin. And now we need to install the Element Pro plugin which I've already downloaded. So add plugin and we can go upload plugin and then choose file. From here, let's select it and install. Now, this is now installed. Let's activate the plug-in. And here we go. We have Element and we have Elementor Pro working together. The last thing that we need to do is to actually connect our website to our account. So, we need to connect and activate. It's just going to say ready to use Elementor. We need to click connect and continue. Here we go. Welcome to the new Elementor. Let's get started. This is going to ask us whether we want to install the accessibility plug-in, image optimization, site mailer, and an which is currently in beta. I'm going to put everything on and I'm going to click install and continue because I want to show you some of those plugins. Okay, these are going to take a few seconds to install and then here we go. I think they all done now. Okay, great. So, if I was to go and look at my website now, not much would have changed because we have an empty theme and we haven't really built anything. To showcase some of the plugins that we're going to be using today, I'm actually thinking of installing one of the predefined themes from Element. So, let's do that. I'm going to go back to the website. In order to install one of the predefined templates, we need to go to editor and then templates. Maybe it's not this one here, but it is under templates and then website templates here. And then you can find a template that you want. In this case, I'm going to look for photography. So, let's do photo. And the one that I like is this one here, wedding photographer. I'm going to click on this. And I'm going to apply this theme to a website. Let's apply to all. And here we go. What's included? We have six navigation menu items, seven pages, two tax, six menus, one popup, one arrow page for the header and so on. So let's see it live now. Okay, so this is our fully working website now. It looks pretty good. Let's have a look. We have some pop-ups here. Yeah, it looks pretty nice. I like it. Okay, so I had to remake this part because I kept discovering new stuff that Elementor have built. And the first app that I'm going to talk about in this video is the accessibility. So as you can see here on the bottom right corner, we have this accessibility icon. If I was to click on this, this will open the accessibility menu here. And we have a couple of options. This tool essentially lets people choose how the website behaves for their specific needs. For example, if we look at some of the text here, we have recent weddings. This text in itself is not too bad to read. But as you know, some fonts can get really fancy and super hard to read. And if somebody was struggling to read this text, they can literally go open this tool, click on readable font, and that would make it so much better. And the same goes for the bigger text. If some of the text on the website was really really small like a modern then you can just click bigger text bigger and so on and that will make the accessibility way better. And the same goes for line height text align and then you also have visual contrast for people with visual impairments. For example, if I click on this that would change the contrast quite a lot as you can see. Then you have black text with white background. And then you have some of the links highlighted as yellow, which is pretty cool. Obviously, you can always untoggle this and use the website uh once you select the settings. But uh this is something I wanted to show you. Let's go back. So, just to sum up this tool, this is an accessibility tool that lets you adjust your text, visual filters, and navigation aids. This is great for people who have visual impairment, people with ADHD, people with dyslexia, senior people, and anybody with really tech fatigue because you can also disable animations and so on. Now, let's have a look at this tool on the back end. If I go to element one here, this is my website title, but basically go to the dashboard and click on element. This will lead you to the app dashboard here. And we have accessibility. If I was to open this app here, you'll see that we have the widget. This is what I was just showing you. And if I was to click on design from here, you can actually change the way the widget looks. You can change the icon, which is cool. You can also change the actual size of the icon, and you can change the corner radius and so on. Uh, also you can change the color, which is pretty cool. And then you can change the position and you can choose to hide it. For example, on desktop at the moment we have in the bottom right corner. But on mobile you can also change the position to whatever you like and you can hide it if you wish to. That goes to desktop and mobile which is great. You can also change the exact position. The those options are probably going to work for most people. Let's move on to capabilities. From here you can actually toggle what you want. For example, these are the content adjustments like the text. Then we have the orientation adjustments and this includes stuff like screen reader which you can toggle on and that will be added to your widget. I think this is just a demo. The other thing that you can do is you can actually hide uh the logo at the bottom here. So if you don't want it, you can hide it. You have a couple of more options like the skip to main content and widget activation. Okay. So this is all good. I think this is going to be it for the accessibility tool. Now moving on, when I talk about accessibility, there is website accessibility in general. What I mean by this is for example this text here, a lot of people might struggle to actually read this text and this is purely because of the contrast. If this text was darker like those two links, that would be a lot easier to see. And what Elementor has developed is an assistant which can help you fix your website errors. So if I click on the accessibility assistant here, you can actually scan your website which I've already done here. And this will find some of the errors for you. For example, it's found that some buttons need alternative text because this is great for screen readers. If I go back here, we have a heading structure problem. You see if I click on this, it says that an H1 is missing, which is actually correct. This heading does not have an H1 tag, which is not perfect. But ideally, this needs to be reworked a little bit. Uh maybe the text needs to be changed in order to work a little bit better. Let's go back to color contrast, which was I was talking about earlier. So, as you can see, it says this is a problem. So from here you can actually change it and the contrast level at the bottom either gets really bad or if you go the opposite direction it gets better. So if we go really good this is just going to make the text darker which has more contrast on this background. So next time you scan you should have one error less than what we have now. In fact let's just do it. We have 12 now. Let's have a look. We should have 11. Here we go. We have color contrast 11. And just like that, you can go throughout your website and this is going to help you manage your uh issues. You can always reset stuff. You can always look at what you've done so far and so on. This is currently in beta, but to be fair, it's worked fairly well so far. And that's it for this tool. Let's move on to the next tool. I'm going to close this. Let's go back to the dashboard. Let's go back to Elementor. And the next tool that I want to talk about is the image optimization. Now the way the image optimization works is when you upload an image or when you want to optimize an image, this is actually sent to the element cloud server which does the image optimization and then comes back to your website. So the processing doesn't happen on your server. Uh this is good in terms of resources for your server but also some people might have privacy concerns here. What happens is element doesn't actually keep your images on their server. Once the optimization is done the image is deleted from their server. They don't keep any of your images. Just to mention this now let me uh show you how this works. If I open it from here of course they have some settings. For example you can choose your compression level. You can choose to optimize new upload. So every time I upload an image to my media, it will be optimized, which is great. From here, you can resize larger images. I've already set this to 1080 just to test it, and it worked pretty well. We'll test it in a second. They have some privacy options here. For example, you can clear your metadata such as the date, time, location. You have backup original images. This is great. And then you have different image format. You have those three here. Webpie is probably the one that I use the most and like they said, this is the best for high compatibility. I use on all of my websites. You also have this one which offers superior compressions. That's true, but is not as compatible I believe just yet, but it probably will become at some point. And then you can keep your original format and no changes will be made if you wish to. And then you have another file optimization here which if I click on custom sizes basically from here you can choose what you want to optimize which is great. I'm going to leave it to all. And the last advanced option here is to restore your original images and remove backups permanently if you wish to. You can also book optimize images. So basically I believe that this is going to go through your entire library and optimize them all. But uh let's upload an image and let's see how it works. So if I go to the media here. Okay. So I've already downloaded an image that we can use. And this image is 15 megaby and it's actually fairly large. As you can see, as you can see, this image is 15 megabytes and it's super large. Normally I would never upload an image like this on my website. I'll scale it down. Um and then obviously I optimize it myself manually. But let's have a look whether this works. So, I'm going to upload this to my media library here. Here we go. It's uploading. If I click on it, let's click on it. And this is going to say in progress. So, what's going to happen now is this image is going to be sent to the element service to optimize this image for us. And then it's going to come back optimized. Let's give it a second and see how long it takes. At the moment we are at 1436 and it's already done by the time I finished token. So as you can see it says that the over saving is 87% which is pretty good. So here we have 336 kilobyt and the dimensions did not look correct because I wanted the max dimension to be 1080 which was set in the settings. So this is a little bit strange. What we can do is to refresh and let's have a look again. So let's have a look. So suddenly the file size has gone to 27 kilobytes which is absolutely insane because the quality hasn't changed much which is a little bit weird. I'm going to have to download this in a second. And then this is uh 1080 by 71 pixels. It's kept the dimensions correct and it's made it so it's 1080p max which is exactly what I wanted. So this is actually brilliant. I think this worked pretty well. And now I'm going to download this picture because I don't believe this. So, let's download it in downloads. Um, the format is clearly WEBP. Whoops. Yeah, the format is WEBP, which is good. The image in terms of quality, it looks great in my opinion. And then if I was to I mean, you can see here at the bottom, let me just click properties and we should be able to see. So, the size is 27 kilobytes, which is correct. And this is pretty good coming from 15 to 27 kilobytes. This is a fairly chunky optimization. Let's move on to the next app. So if we go back to element, the next app that I want to talk about is the emails. So here under element we have email deliverability. If I click on this, you will see that earlier I actually gave this a test. Oh, let me tell you a little bit about this. So, this plug-in is basically created to deliver emails. Normally, when you create a website, you need to install a third party SMTP plug-in in order to send emails. This is just a standard practice, but obviously Elementor here has bundled everything together to make it easy for people. And the other thing that I want to mention is that you get 30-day retention to see what emails have been sent successfully and what emails have failed and so on. Now, in order to test this, we can go to general settings here. Of course, you can add your custom domain name and I would highly suggest this because obviously this might end up in spam. It doesn't look professional anyway, but this is just for testing purposes. In order to set up your domain name, all you need to do is click add custom domain name and you will need to update some of your DNS record. They'll [snorts] guide you through the process and normally it doesn't take this long, but maybe just to make sure they've put 72 hours. So, I'm going to close this and I'm just going to test this super quickly. So, the name is going to be site mailer. The reply to is going to be one of my email to is going to be my uh business email. And let's click send test. It says test email has been sent. If I go to email logs here, it says this is sending. And now if I open my inbox, as you can see the top email just now, 442 442. Congrats, the test email has been sent successfully, which is great. So this is how you can test your email super quickly. And as you can see, it worked. Let's refresh the data here. And as you can see, it says delivered. So two emails I've tested with. and both of them were delivered which is great. And let's have a look at the supervisions. So essentially email addresses that will not receive emails from your site either because users have unsubscribed or because they have been added manually. This means that you can use this for marketing as well. In this section I'm going to show you some examples of Angie and also I'm going to show you some examples of element AI. Now, let's start with Angie. If you go to the dashboard and then click here, Angie. And as you can see, this can help you create different widgets. It can help you find news media. It can help you customize your admin dashboard and so on. The way you can use this is by going to your website and then you can click on here. You need to sign in first of all. And here we go. Okay, we are now back. It's gone back to the dashboard. But if I go to the homepage for example and when we toggle an you will see it here on the left side and it even gives you some suggestions. So you can ask Angie to do any of these things. It is currently in experimental beta. So not everything is going to work and sometimes it can be a little bit slow. One thing that I wanted to show you for example is let's try to remove one of those buttons from the menu here. What we can do is just ask it. So, can you remove the kind kind words from the main menu? Press enter. And now this is going to go ahead and remove this button for us. Obviously, this is a very easy example. I can do this in literally 2 seconds from there. But I just wanted to showcase something that you can do with Angie. So, we need to confirm now. And hopefully it'll be removed in a second. I've removed the words from primary menu. It's giving me all these options, but it hasn't removed it. So maybe we need to refresh the page. Let me have a look. Yep. So I refreshed the page and the actual button is gone, which is good. Earlier when I was testing it, he actually gave me a refresh button. When I clicked it, it refreshed the page instead of me wondering why it wasn't here. As I said, this is still experimental, but it could be really cool once it's a little bit more stable. Now, let me show you Element AI, which is different than IG. I actually got them mixed up a little bit uh earlier when I was recording this video. So, they're totally different. But, for example, with Element AI, you can do different stuff. Let's say if we edit this page with Element, a simple example could be that uh let's say we wanted to rewrite this text. I can click on it here and I can click on edit with AI and then this is going to give me some suggestions. So for example, you can simplify the language, you can make it longer, make it shorter, fix spelling and grammar, you can change the tone and you can translate it to different languages. You can even and you can create a new prompt if you wish to. And that's pretty much it. Let's try to make it shorter. And there we go. The text did become short, which is pretty good. And now I can use this text and it will update it for me. So this is one example of using element AI. And you'll probably see this added pretty much everywhere now, which is good. So you can use it. So you can use it pretty much everywhere. As you can see, you can edit this title with AI and so on. Another example of Elementor AI is generating images. So let me show you an example. If we go back to our admin dashboard and if we go to media and then here we have generate with element AI. If I click on this, this is going to give you some example prompts in here that you can use or you can create your own one inside here. And you can uh say what type of image type do you want. Do you want it to be photographic, vector, background, handmade, digital, 3D, and so on? And then you can choose a style, landscape, macro, portrait. And then you can choose the aspect ratio. Let's go with a landscape. And let's just say a cute cat. Generate with AI. And let's see what we get. Okay, we get these two colorful cats. Let's have a look. I can zoom in. It looks pretty good to be fair. And let's see the other one. I think the other one is very much the same. It's just sort of mirrored by the looks of it, but they do look really nice. So, you can choose the one that you like or you can edit it from here. You can expand the image, generate fill, resize, you can do different variations. You can remove the background, replace the background, clean it up, isolate the object. Uh if you're happy with this image, obviously you can just click use image. And now this will be inserted into your library and you can use it pretty much anywhere on your website. I go back to my website for example I can click with edit with element and let's say I wanted to swap uh one of the images uh let's say this one here and then I can choose image from the library select it give it an old text and then here it is or AI generated image so don't make the mistake like I did an is totally different than element AI as of now you can literally go to your dashboard. Click on element. Go to editor settings. And from here, version 4, you can actually enable and try the new element editor. Currently, it's in beta, so don't expect everything to work perfectly, but this is meant to be a much faster, more flexible visual editor. They're using an atomic approach just like any modern library out there nowadays. is basically going to simplify everything in terms of cleaner code and obviously this is going to give you a lighter code footprint meaning that you hopefully your website will load faster and they have included tools like variables classes and states which is very useful variables for example if you had a blue button and you wanted to update one variable that goes across the entire website and changes all of your buttons to I don't know let's say red you can do that It's very useful to have and which obviously then leads to consistent styling experience and everything will be fully responsive and you get so much more. So you can activate it today and mess around with it if you wish to. I already did a little bit but I haven't actually built like a proper website with it just yet. And that's it. I hope that I've made everything clear in this video. Feel free to ask any questions in the comment below and I'll try to answer to the best of my ability. Consider liking this video and subscribing to my channel.