What's New In Slider Revolution 5.3 – Object Library, Layer Groups & More



hi and welcome to another episode of piece Meg TV in today's video for WordPress I'm gonna be showing you the latest version of slider revolution 5 and all of the new updates that we made to the interface now this is a pretty major update and alongside the add-ons that have been added into it which we'll cover in a different video there's been a range of new features that we've built into the interface to make you're working with slider revolution 5 much more intuitive quicker and easier so let's take a look at those new updates right now so as someone who spends a lot of time every single day by building websites dealing with creating sliders anything that theme punch can do to make my daily grind that a little bit easier is welcomed and with this new iteration of slider revolution 5 they really added some great new features to it so what are they doing this video is I'm gonna give you an overview of some of those features I'll demonstrate some different things and just talk through and just show you what has been added to this great piece of software so as you can see I'm looking at a slider at the moment and I've got three slides on there and anyone that uses this on a regular basis would realize that we now have a new button and that's the object library now we used to have in the media library where we can go in and we can choose the files you want to work with in our slider for the background and so on we now have this object library so you can see if I click on that that will open up a new window and you can see I've got a range of different photographs that I can work with now at the moment we can categorize those down based upon Beach City nature night and so on and I'm sure this is something that will expand as they bring our newer versions of slider evolution you can also check up the license information to make sure that any image you use in your slider you have the right license in fall just make sure you keep on the right side of the copyright so I recommend check in there before use any of these images but you can see we can easily filter these down to any of the particular groupings that they have in there and as we mouse over you can see we now get some little symbols for the different sizes that we have available so you've a medium large and all for whatever that stands for and underneath it tells us what the Add physical dimensions of that image is we can search for objects if we want to so we could say we wanted a road for example and you can see that will now filter it down to show us all the ones that fit that particular category so we can just get rid of that let's just say that I want to choose one of these I'm gonna use this in multiple different slides so what I can do is I can come to the top right hand corner and I can click on the little star and that they'll now make that a favorite so you can see I can add that one in there's a star and I go back and click on favorites and anything that's been starred will now show up in my favorites section which is quite a good way of making sure that you can just speed up the process of finding images that you want to use on a regular basis so that's the first thing that's pretty cool so let's just choose one of these images let's go for the o2 goes to 1920 and that will then change the background to that image that I've just created so I just given this layer a second so we've got a good Bank of images and like I say I'm sure this would expand as it grows and new iterations come out of sight a revolution but it's a great starting point if you don't have the time or you just prototype in a website for someone and you just want to drop some images into slide a revolution and this is a great way of doing that to get started so that's the first thing that's been added in there now let's take a look at some of the other things that we added in when we're working with images so next up let's move down to the actual slide itself what we can start working with editing it you'll see that we have the object library icon again now what this is going to do is it's going to open up the same kind of browser but it's going to give us a lot more options you can see we're looking at the favourites but you also noticed we now have some icons and we have some graphics and some different things in me and we've also got a lot more categories we can filter this information through including at the top SVG icons PNG files and JPEG files so let's just say for example we want to go to a PNG you can see we now have a whole range of different objects that we can start using to build up our slides a massive array in they're all completely free to use again check the license info for the purpose that you use them for but you can see there's a big big collection of different images in there some great wise things like iPhones and blackberry so if you develop in a technology based slider then you have instead of me to go through and download all of these kind of things you have access to a massive amount of different images that you can quickly load in the same goes with the icons you can see we have a whole range of icons available and again we can filter these out and do whatever we want with them via that so that's a really cool way of being able to quickly add in new things into your sliders would that have to go and download these separately so again a great tool so we went onto some of the new additions we've got to slide revolution if we scroll down you can see now underneath where we go a timeline we now have two new buttons one is ad group and one is ad row now we're going to take a look at the ad group a bit later on but for now we're going to concentrate on the add row and what that allows us to do is if you've ever use something like visual composer or any of the kind of layout tools everything works in rows and columns and what you can do now with slider revolution is you can create the same kind of layout so if you want to create a design that includes a large fullscreen background that animates through different images and you'd like to have a design over the top of that you can now use slider revolution to build that design and in future videos we will take a look at all these different features and a lot more detail and we'll build up different pages and things using these different tools but for now I want to give you a brief overview so let's go down let's click on add a row and you'll find once we do that it now creates three new layers so we've got two columns with this current default layout on one row so if it's called the top you see we now have this green block that shows us two columns on one row we have these three icons that allow us to do various different things the first one allows us to change the row layer and how it interacts with different kinds of devices so tablets and phones and so on so we click on that you can see we can now choose a range of different layout options from a single column till column triple column and so on so we can choose anything we want from this so for this example let's just choose the triple column if we click on that again you can see we also have brick columns at laptop size tablet size or mobile size so we can say we could just select which device this actually breaks into different layers so we leave it as mobile for now just this demonstration we'll hit update and you can now see we have three columns inside our roll so now we can put different elements inside there so let's go and create a text layer like we would normally so we click Add layer and click text HTML I'm just gonna paste some text in there that I've already copied and thick to confirm that now all I need to do is just drag that up drop it over any of the columns and you can see they highlight to tell me which one it's gonna drop it into I can let go and that'll drop the text in me and now we can style this and we can style the actual columns and the rows themselves to make sure that everything lays out exactly how we like it to so let's go and duplicate this two more times create the additional two columns and then there starts styling this information to layout the way we want so before we do copy it let's just set the text to the way that we want to look so we're gonna click on that to make sure that's active we'll change the font now this operates in exactly the same way you would when you're working with slider revolution in its normal fashion so nothing new is different it's only when we start to go on and do some of the other things so let's just set this down to a 14 and we'll set the lines to be about actually the line looks tidy on there color we can change that if we want to exchange the font weight and so on what's important to note at this point is when you create a block of text like this when you get selected make sure you set the width to be Auto you can see we have a range of options and you may find you got a numeric value in there if you've adjusted anything yourself set it to auto and it will automatically wrap the text around in the way you expect it so we'll see it the way it is on here at the moment so just something to be aware of so we set that up the basics of it so all I do now is click on there I'm just going to duplicate that so you can see I can come up and duplicate it to clone it twice drag it over the next drag it up to the third one so nothing that you haven't already done if you've ever use anything like element or or visual composer but now we can go in and control various different aspects of these columns and these rows so if I click on the column of text you can see we've got all the normal options available to us and if I come over and just expand this out we can now do a few other things so let's just say we wanted to set a background color on it so we said the background and we'll set that to be the Gopher a little black we've set the transparency on there too about 0.8 so we end up not to see the image underneath it so we set that up so you can see that now allows some transparency through there we can do then is we can come over we can choose any of the other options so if we want to we can add some padding in there we can also add margins to it so remember we were only dealing with this text box inside the confines of this particular block inside our role so let's click on that let's just set the padding on there to 20 on each one of those so you can see we now have some nice space around there if we want to we can add some margins around this as well so let's just go into the same on this will set under 20 and you'll see why I'm doing this in a moment so now we've separated that from the outside edge of the box so we now have a nice neat layout text is style the way we wanted to we've got a transparent background and we've got some space around the row and the column now who wants to I could duplicate that and just take over these but what I'm gonna do quickly is I'm just gonna go and set these up so all three look exactly the same I'll pause the video we're back in a second okay so there's our three columns all set up nice and neat everything laid out the way we expect it to looks which is cool so the next thing we can do is we can actually control the way the actual columns work or the row works so if we come down to this little teardrop icon click on that we're now gonna make edits to the actual row itself so we're no longer editing the text or HTML blocks or whatever you place inside these rows and columns we're editing the row and the column independently so you can see if we want to even come to the background for example and we'll set this one will set this to white we'll do the same again we'll set this down to 0.6 so it's even more transparent so again a sort of transparent effect on top of a transparent effect so we now have a nice a nice layout if we want to we could just select these and we can align them so we can make sure that everything is aligned the way you want so we align that to the center so that's in the center of our slider so you know we have a whole range of control we can do with this because of any of these options and now apply to the row and the column so we did if we wanted to we could add padding in there we can add margins in there and that's now going to effect that as opposed to be in effect in what's inside each of those blocks you'd also come into advanced CSS and you can add after things in there if you want to build these epic book buttons and so on you know you can build these up to be quite complex layouts but we're gonna keep it simple let's just save that let's just jump over them to our test page and take a look at what this looks like on the page itself so as you can see it looks pretty good we've got all the elements laid out the way we expect it to if i refresh the page we'll see how the animation takes effect so let's just refresh and there you go you can see then that builds at the animation so we can easily build up a layered that we want quite complex layer it's quite easy by using these rows and columns so that's a great addition now there's a lot more things you can do to this and like I say in a future video we will come in and take a look at this in a lot more detail but for now that's how we work with this new columns and rows feature where we can build things I've been building blocks pretty cool now quickly before I wrap this up and move on to the next option I want to just quickly go through and show you that you can rename any of these items so as you build up more complex layers it can get quite difficult to keep track of everything so you see if we expand the top everything is said that we've got columns inside there we've got the different blocks that we've got so this for example is the first block layer we can just click in there select all the text by ctrl command a and we can change this to something else so we could call this block 1 for example and you can see we also have the option to rename it we can just move things and delete things and clone things and so on so we can very quickly organize our information very easily just by using this way of going through and renaming everything so something to bear in mind when you are creating complex layers keep your life easy by going in and naming things and giving them some kind of relevancy to what you're doing anyway let's move on so next up let's take a look at how we can group objects together with the new ad group function so if we take a look I've got two objects to SVG objects or shapes that are on screen I've set them up where I want but obviously if I want to move this around they are independent of each other so it means that I've got to make sure that everything is aligned every time I move them which could be a little bit of a pain but with the new ad group option if I just click to add a group and we'll just name this for the test group that'll do for me you can see that what we have is this box and you can see I can move the box around and it doesn't do anything other than move around so what I can do is if I drag any of these items into that box area they become grouped so if I drag this over you see that it starts to highlight when I go over it I can drop it in there and that now becomes indented you can see we're now working with the group itself so the entire background gets darker because it tells us we're working inside a group so once I click outside that the image goes back to the way it was we now have our group so I can do the same thing again with the second icon I can just drag that over drop it in there when it highlights and you can see that now becomes grouped if I want to I can resize this box to get to make a little bit more sense so let's just do that position the icons in relation to each other inside the grouping resize the glueten box if I need to and now I can drag that box around and the relationship between the two icons is kept in place because we're not moving the independent icons we're moving the group and also if we come down and take a look at our timeline below you can see now that SVG or the two icons that we have which we could rename to make a little bit more logical sense and now indented inside our test group grouping so that tells us that we have a group available to us we can still go through we can edit the timeline and we can adjust the way the things animate in and animate l and all those kind of good things but the reality is this just means that you can synchronize everything together into a nice layer and then you can just drag it around in position wherever you want to make your life that much easier to keep the relationship between the items inside that group so that's how we can group objects together the other powerful thing about when you work with groups is that you're not limited to only working with the objects inside that group you'll see at the moment we have the group selected by the background going darker and this be an outline to tell us that that's what is currently selected if we go to the top you can see we still have things like the background and so on that we can still edit so if we wanted to we could create a background color in there so we could set this to be a background color and a transparency level on it she will set down to 0.8 so we now have a background effect on us we click outside that you can now see that that takes on the characteristics that we've just set up on it so we're not limited to just the objects inside it we can actually style and control the actual grouping itself which again is pretty cool so you can use that group everything together getting nicer aligned and then we can just use the alignment icons we're now perfectly in the center with a colored background if we want to we can come in there we can apply padding's and borders and margins and things to this so it's really is a very powerful and versatile way of working also if we come down to the section where we can go and choose our different layers to work on we expand that out you can see everything is laid out in this if I want to quickly come in and rename this I can come in and I can just specify a name that I want or I could change the icon I've got a whole range of great things that I can do and again this is just one of those awesome little features that's been added in there to make you're working with complicated projects so much quicker and easier so that's pretty cool there's one more thing I want to show you before I wrap this video up and that is on the timeline itself now if you've ever used slider revolution to create your timing you know yourself that the adjustment of the duration that it takes to do for the fades and so on can be a little bit awkward well they've updated the way the timeline actually operates now and it's just made it so much easier you can see we've got thicker lines we got rid of the little sort of dot at the beginning and the end to show the duration of the transition we've now got this block which gives us a number on it which we can still edit but it doesn't have that horrible lag that the earlier versions had so you can see if I want to make a change to this I can literally come to the left hand side drag it over if I want if I drag that over to the left hand side you can see it automatically just stretches the duration of the transition so obviously I can still come to the right hand side of that and I can adjust that but the latency that you had there is gone it really is quite a nice quick and really intuitive way of working so we can now reposition things you can see I can reposition that to control the time that these different things come in and the same goes with the actual grouping itself I can control that so you can see very quick and very easy way of working with things so it's just one of those little enhancements that just makes the working with this particular function inside a revolution just that little bit more like working in a dedicated application as opposed to working in your browser now like I say all of the things that are touched upon in this video I will be going to a lot more detail in their own dedicated videos will I'll show you how to create great looking sliders using these different building blocks we've covered today well I hope you found this video useful hope is giving you a reason to go away download the latest version of slider evolution whether you've got it as part of your theme or you're looking to buy it if you are looking to buy it please use the link in the description below which is an affiliate link and it gives us a little bit of money back to help form more into doing our video tutorials anyway if you did enjoy the video please give it a thumbs up and hit that subscribe button to be kept up to date with all of the new content we add every single week you comments questions or feedback on this video please pop those in the comment section until next time take care you

23 thoughts on “What's New In Slider Revolution 5.3 – Object Library, Layer Groups & More

  1. Wish Slider Revolution could merge different sliders into one group like Smartslider3 can.
    I can't find an option to do that. Did they really missed out on that?
    Also the block type slide option Smartslider3 offers is great.
    Then export the group to html and end up with a standalone cool onepage website with all the slides in them.
    (without the bulky wordpress the website is way faster)
    I love the Revolution Slider interface but Smartslider3 is way more ahead. Hence the name I guess.
    Hope Slider Revolution will implement these features soon.

  2. 7k views!?!?! That's all! I agree with @bmizzle010, you should be paid for your time. Thank you for your time, I was looking for some inside advice with grouping and this is best video on the web. 5 Stars!

  3. LOVE the layer addition in the plugin !! 😀 That is exactly what was needed so you can work with more structure and more control of the slides.

  4. BTW, I'm hoping to find a video that helps me understand rows and how they are effected by responsiveness.

  5. This was a pleasure to listen to. You're voice is pleasant, the timing was just right, you are thoughtful of your viewers. A rare commodity when compared to other RS videos. And I agree with the person below!

  6. This tutorial was very useful and clear and I followed it without problems I think BUT the video didn't run when the page opened. Do you know why that might be?

  7. edit.. I figured this out. It wasn't simple at all. I went back and forth a million times comparing settings but I eventually got it. Now I have new problems. haha

    Hi, I am hoping you can help me or point me in the right direction toward one of your other videos if you have already answered this. I am trying to use the Tech Journal template in Revolution Slider. On the template before doing anything to edit it, all the images or text that slide in on top of white boxes stay stationary on top of the white box regardless of whether you resize the browser window. Once I try to add my own image to replace the stock ones that came with it, things are no longer lining up. They don't act as one piece with the white block underneath. I have tried the obvious, grouping the layers but either I am doing that wrong, or grouping the layers is only for the purpose of moving things around on the back end. What I am ending up with is a image that is in the right place while editing, but off to the side when previewing. What am I missing? Thank you for all your videos. They are very informative and helpful!

  8. Another great video! Love your videos, so clear and concise!! As you're obviously a master with Slider Revolution, do you know if you can use layer groups on the static layer? I've been trying, but can't get anything in a group to show up (it works on other slides, just not the static one). Any thoughts?

  9. I group the objects and position them, save the slider but the objects don't show up. If I delete the group layer the objects show up but they all move to the top right of the slider… So grouping them is pointless….

  10. Themepunch needs to pay you! You do more in depth and detailed videos about their product then they do! Thanks for sharing your knowledge and more importantly your time!

  11. Thank you for this tutorial…I have a small problem with it , when i try to open the objet library…All the layout stay on the right side of the page …I use CHROME and also try it with mozilla…Same issue….Any ideas ? Thank you.
    You can clic on the image link to see it: https://i97.servimg.com/u/f97/17/93/51/86/rev_sl10.jpg

Leave a Reply

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