10 things about Slider Revolution you didn’t know…

Hey Jason from Team punch here today we’re going to talk about 10 things that you may not know about slider revolution and we’ll do it all through the simple task of adding a logo to one of the slider templates so let’s just go ahead and import the scroll effect template which you’ll find right down here toward the middle big and bold and in just a few moments we’ll have this imported and then we’ll go ahead and add it to one of our pages and the reason why we want to add it to a page is so we can test it from the front end as it’s always good to do that so I’m going to use the shortcode creator here add the selected slider and now we should have this up and running on the front end of our site very cool so we have all three slides so what we want to do is just add a logo maybe to the top left hand corner here so let’s go ahead and do that if we head over to edit slides we can scroll down to the canvas here and if we choose add layer we can choose object and this will be the first part of our logo so maybe we want to add an icon and also some text so I’m going to click object and I’ve already searched for one that I wanted to use and so I’m going to just type in pets here and here it is the paw print and I’m just going to change the width in the height of this to 64 and also the color going to change this to white okay so next let’s go ahead and add a text layer and then let’s give it a font family of Pacifico right here let’s bump up the font size to maybe 64 how about 48 and we’ll also set the line height to 48 as well so one thing that’s really cool about repositioning layers is if you scroll all the way down here to our helper grid we could choose maybe 10 by 10 or 50 by 50 and this just kind of gives us a visual guide to positioning layers along our canvass so you can also choose snap to help lines and then as we move our layers they’ll start snapping to these gridlines here which is really cool so I’m going to choose custom here and one thing that you may not have known is if you click along the rulers here you can create your own gridlines so I’m just going to click right here and you can see we just added a grid line to the stage which is really cool so right over to the right we have a move icon and we also have an X which would just delete the line so I’m going to select the move icon and now I can move this up and down my ruler here and as you can see toward the left it gives us a pixel number so let’s set this to 40 and then let’s go ahead and create another line right up here and if we just scroll down we can choose the move icon again and let’s set this to 40 as well and then let’s go ahead and align our paw print right with these two gridlines which is just really cold snaps right in there okay so let’s go ahead and test this now from the front end so I’m going to just save the slide and if we back to our home page here we can see that it’s aligned nicely up toward the top but not over to the left now the reason why is if we head back and we select one of the layers and we head into behavior the behavior line here is grid based and what we need to do is set it to slide based so let’s do that for both of the layers save it and now this is what’s going to sort of stick it to the top left corner here and so it won’t matter what the screen size is this logo is always going to be in the top-left corner so next let’s just say that maybe we wanted to play around with some colors and I wanted to change the color of this text here from white to purple so here we’ve changed the color to purple and then I go ahead and test that from the front end and I decide you know what I kind of want to change it back to white so if you scroll all the way down to the bottom here we can see the change history and if you click the burger menu we can see all of the things that we’ve done so far to set up this logo and we can revert any individual change that we’ve made or if we just click this arrow here we can revert the very last change and you can see our logo is now white again so this is just a really cool way of streamlining the process of being able to play with different colors and positions and sizes and knowing you can always go back to how you had it before so let’s go ahead and take a look at the animation from the front end here for the logo and it’s just kind of fading in and not really synced up well with the rest of the animation so let’s head back here and just select these layers head over to animation and let’s choose pop-up smooth for both of them right here I’m going to choose pop-up smooth and now what we can do is we can sync these animations with each other if we scroll to the bottom and we choose the two check boxes here I’m going to choose the fourth option from the left and I’m going to enter 1500 for the adjust to start time one thousand for the overlap keep n time position I’m going to set that on and then choose set and basically that just Auto time these two layers so they’re a little bit better synced with the rest of the slide which is really cool so let’s go ahead and save the slide out and see what this looks like on the front end so if we reload the page we can see how that logo would look with the new animation and I think it’s much cooler now with that delayed smooth pop and animation so let’s say that we wanted to make this text selectable and maybe you know you want to be able to highlight it copy it to a clipboard paste it somewhere else normally text layers are not selectable by default but we can change this so let’s head back over to the editor and select our text layer here and head into the advanced style options and right at the very beginning here with the font selected if we change layer is selectable from default to on and then save the slide we should be able to select this text now there we go so we can go ahead and select it we can copy it and then we can just paste it anywhere else so because this is a logo maybe we don’t want this text to be selectable and instead maybe we want to add a link to it so let’s head back to the editor here and let’s change this back to default and let’s go ahead and add a simple link so let’s head over to the actions tab and inside the actions let’s add a click link and then simple link and then for the link URL being punch comm link target we could choose to open a new window or open the link in the same window let’s choose new window and for link type let’s choose a tag link which is great for SEO and so now that we’ve added that let’s go ahead and add the same to the pawprint as well and now let’s save our slide go ahead reload the page and here’s our logo now it is hyperlinked should take us right to theme punch calm so now we have our logo hyperlinked so as we change the slides here the one problem with adding the logo to the slide there is that it’s going to disappear if we change the slides so what we really want for this situation is we want the logo to always appear on top of all of the slides so let’s head back to the slide editor and let’s head over to the static global layers and basically what the static global layers is is sort of a blank canvas where you can add content that would always be visible on top of all of the other slides so let’s go ahead and choose the third slide as the backdrop here and then let’s head over to add layer and choose the import here and then for select a slider let’s choose scroll effect and select a slide let’s choose big and bold which is the first slide and basically what we want to do is we want to import those logo elements to the static slide content layer so let’s head over to SVG which we know is our Pau icon choose the plus choose okay for import selected layer and let’s do the same thing for creative ink which is our text layer and you can see we have layer added to stage with the little check mark here which just lets us know that the import process was successful it’s going to do the same and then when I’m done importing my layers I can choose the close icon here and this is very cool we have our layers imported from the other slide into our static slide and now let’s go ahead and save this let’s head back to our big and bold slide and let’s go ahead and delete these layers now because now they’re on the static layers slide so I’m just going to choose these two layers delete them right from here and save the slide and then let’s head back to the front end test this from the front end you can see basically we have our cool animation still intact they’re both still hyperlinked is just really cool to be able to import layers like that and move them from slide to slide you can move them from slider to slider it’s just one of the great options with slider revolution so now as we change the slides we’re going to see that this content is above all of the other slides it never disappears and that is what we wanted for our logo so lastly let’s go ahead and add on just a nice cool little loop animation to this pawprint here so we head back to the static global layer slide and just so we can get these layers showing up a little better let’s choose a backdrop and so for the pav I’m going to head into loop and for the loop animation let’s choose pendulum and I think this is just kind of a cool subtle animation that sort of brings the logo to life a little bit so let’s save that let’s go ahead and test it from the front end and here we go we have our logo we have our pod just kind of tilting to the left and the right sort of spices up the site a little bit and the slider so those are ten things that you may have not known about slider revolution and good luck with your projects and we hope sly revolution helps bring your website’s to life

As found on Youtube

(Visited 3 times, 1 visits today)

About The Author

You Might Be Interested In