Premium HTML5 Website Templates

if you subscribe to the website templates, you may know that you've just had an email saying that the beta version 2.4 is available for testing and in this video I want to show you some of the new features that have been added in and how I think these really are a game changer when your creating websites. So if you're wondering why I have this screen open in front of me. It's because it demonstrates some of the new features that we have inside this beta version.

Now, my name is Paul C and this is wptuts, the channel where we create beautiful WordPress websites together. If this is your first time on the channel, please consider subscribing and smash that Bell icon below to become part of the WP crew and be notified every time new content is added. Okay, so let's just check over to the dashboard and as you can see I've got the page that I've created in front of me and one of the things I want to show you is how we have a lot more control over background images and also some of the cool things we can do with those background images.

So let's just start off with a fresh page and let me show you how I built this to demonstrate some of the cool things we now have in this forthcoming version of Elementor and when working with background images in Elementor you'll know you don't have the best level of control. However, a lot of that has been addressed in this beta version. So let's take a look at some of those things. First thing we will do is just create a single one row, one column block. So we've got some area to put an image into. We'll set this height to be fit to screen so we make sure we maximize it to the entire screen resolution. What we'll do then is we'll jump to the style section. come to our background option. And you see that everything looks exactly the same as it always has. Let's come in and choose the classic option. You should notice now that we get the option to choose the image, but we also get a new option that allows us to choose a different image based upon the device we're viewing the website on. So, let's take a look at that in action. Let's click and we'll add this image in for the city. We'll insert that media.

You can see now that's inserted the image in exactly the same ways you'd expect. However, if I change this over and say on a tablet view I can click on there you can see it currently shows us the scaled-down version of the image that we've just selected but we can come in and choose a completely different image let's just choose this one and you can see now when we're looking at this on a tablet we'll see it with this particular image in the background however we switch over to the desktop and we get the different image so this is great if you want to optimize your images for the device that your website is being viewed upon to someone viewing it on a mobile device could have a lower resolution version or a different image whereas someone with a faster internet connection on a desktop could have the full high-res version so that's really cool to start seeing that we also though have some additional options so if we look underneath where we have the position attachment and so on we have those same options to fine tune and tweak the device that we're using so you can see we can have a different position for different devices so let's come in and say we want this to be bottom Center so we focus on the main part of this particular image attachment we'll leave as is repeat we'll disable that. really we don't want to repeat and the size you can see we've now got Auto Cover contain and custom let's just say we want this to cover so we can make sure that it covers the screen size no matter what size it actually is but then we could also come in and say well on a mobile device or tablets we want this image to be positioned differently so this works whether we're using a different image or if we're using the same image we might want the focus to be different because the screen sort of size and shape is going to be different to your traditional desktop hope that makes sense so just say with this one we want this to be positioned differently we'll say we want this to be top center so we can kind of focus on the person's head as opposed to focus in maybe on the middle of their body and then on a different device size we kind of lose the focus of the image and again we can adjust the attachment option the repeat and the size so there's some really great options available there for us just by using these new tools that we've got for the background image now for me I think this is a bit of a game changer because you do work with a lot of images in the background this gives you so much more granular control to make sure it looks fantastic on whatever device is being viewed upon now there are a couple of things I would still love to see this is part of Elementor itself are not just limited to this particular set of options we are really limited to only viewing a phone in portrait view and a tablet in portrait view.

We really need to open up some additional options for seeing things in landscape mode as well so we can fine tune and tweak I'd love to see that built directly into the interface or something that we could enable now before we move on to the next and then I want to demonstrate this one thing that I just want to jump back to to show you that is also new if we come back over to the Styles tab to the background you can see we've got the cover option and we always had default auto cover and contain we now have the option for custom and we click to enable that you can see we can now adjust this based upon the slider and we can work on pixel percentage em's all different kinds of measurements so we can set this up to make sure that the width of this is perfect again based upon the device that we want to use it on so we have a lot of control over that entire background image so not only do we have control over the different background images and the different devices they're viewed upon we can do the same thing with the border options if we jump to the border section you can see we now have the option to choose different border widths based upon the device so at the moment we set this to 50 pixels however if I jump over to a tablet view you can see it still retains the 50 pixels which might not be ideal for the view that we were working with so what I can do is I can easily come in and I can adjust this based upon the value I want to place in it let's just say I want to set 30 on there and if we jump over onto a mobile view you can see we're currently viewing 30 on there and we could say well let's have this set to 15 and we can obviously do the same things we normally would which is adjust things like the styling of the text and so on so we could adjust that based upon being on a mobile device and obviously we can do things like adjust the padding's and margins and things along those lines so again it's quite cool now that we have the option to go in and adjust those items we're not restricted to just the width of the actual outline border we can also come in and control the curvature of it so we want to we can adjust the border radius based upon the devices being viewed upon so it just gives us a lot more control now over how everything is displayed upon different types of devices so jumping back over to the dashboard if we take a look on the left hand side you can see we've still got the elemental man entry now some of the options in there have changed a little bit we also have the templates option so they've moved the templates out of the elemental menu and give its own section inside the dashboard reason being is we've got some more control available to us with the templates you can see we got saved templates which is where we go and see any of the templates we've got all we can create a new one directly from inside there so we just jump into that you'll see it that's the typical look that we've kind of become used to inside elemental and elemental pro which has more options however we've got the add new we also have categories now categories is a great way of grouping the various different templates together to make it more logical for you the end user so when you are working on this and you might be working on lots and lots of different templates these sections at the top where you've got pages and sections and global widgets and so on it can get a little unwieldy very quickly so the advent of adding in categories makes life a lot easier so you can see whenever you have a template listed you now have the categories column as you can see I already created one called blog templates so if I click on that that'll now filter through all the templates and find anything that I've categorized under the blog template section so you can use this as another level of organizing the actual template structures with elemental Pro it's very easy to work with if we drill into the category section click on there you can see it works in very much the same way as categories inside posts and tags and so on and things like that you simply add in a new field entry so we'll just call this one we call this page templates and we'll just simply add new as you can see we can control the hierarchy of this if you want to get even more low-level control we can start parenting things together and so on I'll keep this really simple we'll just create a new category I'll say add new category and you can see now that adds it in on the right hand side we've got the count of any kind of templates that fit into that particular category created and what we can do then is we can just simply jump over to our templates we could either add a new one in and then sort of apply a category to it or we can retrospectively go back to a page or template we've created before and we can just simply jump into that and you can see on the right side we now have categories inside there which I could say this is a page template hit update we'll jump back out then chose save templates and you can see now the head and new is set as a page template category if I click on there it'll now sub filter that information out to just show the templates that are inside that particular category so those are the two key things that I want to highlight in this video there are lots more updates in this beta version but I don't really want to cover those I don't think they're necessary for most of us she uses these are the things that I think it can be most useful when it's released in version 2.4 hopefully very soon now as always I'd love to get your feedback on what you think of these new features that are forthcoming do you think they're cool do you think there's something you could use are there features that you think really need to be added into future versions of Elemental please let me know in the comment section below where we can discuss this thing in a little bit more detail as always if you enjoyed the video please give it a thumbs up if you didn't give it a thumbs down but let me know in the comment section why you didn't enjoy the video helps me create better content for you moving forward well - people see this is BW Peterson until next time take care.