How to Create a FREE Slider in WordPress with Depicter Slider

hello friends i am nishiki and train this really i'll teach you how to create a beautiful and professional slider for your wordpress website now we'll be using a free plugin to do this thing and with this free plugin you can create amazing looking sliders for your business website e-commerce website or any other website we'll also see how to add animations and additional customizations to these slides and then how to make this slider mobile and tablet friendly also there are many beautiful sliders already created for you so if you want you can simply import these sliders and customize it according to your needs then there are millions of free stock images vector files shapes background images patterns and illustrations that you can easily import on these slides and again let me remind you that doing all these things is completely free so as you can see these are some of the examples of these slides and if you see over here so many pre-made templates and slides are already created for you and i'll show you how you can simply with one click import this slider and after that you can do some changes according to your needs so let's see how this is done now first of all you need to go back to your wordpress dashboard so i'll be using this website this e-commerce website to create this slider so we'll create a slider on this website so as you can see this is a also very beautiful website so this is a hundred percent professional e-commerce website so if somebody wants they can add this product in their cart they can favorite this product and after that they can go to the checkout page and they can do the checkout and so many different payment gateways are also integrated over here as you can see cash on delivery then we have net banking credit card debit card we have stripe payment gateway so in fact if you want you can if you want to create a free e-commerce website this is a totally professional e-commerce website and again this website is also created using only free resources so if you're not do that thing if you want to create a professional e-commerce website for absolutely free using free theme and free plugins so you can go to my youtube channel and you can see this video here if you don't see this video you can just search for new shake e-commerce you will see this website you'll see this video basically as you can see the very first video how to create an e-commerce website with wordpress free online store 2022 if you're watching this video in future 2023 2024 you will see a latest video related to that so make sure you watch that video if you want to create a professional looking beautiful looking ecommerce website now let's get back to the slider so first of all you need to go back to your dashboard and we need to install a new free plug-in to install this slider now to download this plug-in you have to open a new tab and type in blogdude.com depictor in fact you don't even have to type in this thing i have given you this link in the video description below you can simply click on that link and you should be now redirected to this page so here as you can see this is the plugin that we'll be using depicto wordpress plugin and this is i don't i don't know how they were able to make it free such an amazing and professional website such an amazing and professional plugin to create you know these kind of amazing sliders and this is also very lightweight like there are few plugins that are available in the market those are paid plugins premium plugins but when you create a slider with that you know the slider is very heavy your website becomes very heavy so it takes a lot of time to load your website but with this this slider is very lightweight so we need to download this plugin for free so you'll see this download button click on this thing and you will download a new zip file so as you can see it says your download will begin in few seconds if your download does not start you can click on this link download now link but it will start here as you can see it has started i'll cancel this thing because i already have the zip file now you have to come back to your dashboard and click on plugins from the left hand side now click on add new and because we have the file we have to you know just upload this file over here so click on upload plugin choose file and just choose the file that you have just downloaded so i have downloaded this depictor zip file open this file and click on install now now once it is installed you need to click on this activate plugin button and this plugin will be activated you don't have to do anything else once this plugin is activated you will get a new option at the left hand side so if you see at the left hand side at the bottom left you will see this depictor logo depictor option click on that and now you should see this screen now because we are doing this for the first time we don't have any sliders created now here i'm going to show you three things first i'll show you how we can import a slider then after that i'll show you how you can do some changes in this slider according to your needs and how you can customize this slider and finally at the end i'll show you how you can create your own slider from scratch so let's see that so first to import a new slider you don't actually have to create click on import a slider you can import a slider by clicking on this create slider button so if you click on create slider they will give you so many different pre-made layouts so whichever layout you want to use or to create this thing you can just select that layout you know so many different layouts are available as you can see so for example i want to use this one okay so i'll click on import and this will import this slider for me and once it is imported this page will reload and you will see this slider over here so here as you can see this is how this slider looks like now the very first thing i want to show you in fact i want to explain you over here is what all elements you see on your screen so let me explain you what all elements you see on your screen and once i explain you this thing you will automatically you will already get a better idea about how to use this plugin now let's start from here from these five six different elements now the left hand side here as you can see we have photos then we have text we have videos we have shapes and vectors then we have button and after that finally we have control now in the photos as i said earlier they have integrated many different websites like pixels.com unsplash.com so with these websites you can download free copyright free images you know and you can use it on your slider for example if you want images related to business and work you can click on this category and you will see so many free images related to business and work okay simple assume similarly if i again come back to photos let's cut this thing now if you want any image for the background you can click on background and here as you can see so many different images that you can use in your background again if you come back we have textures and patterns so if you want to use any of these images for background or for textures or patterns you can just keep on scrolling down and you can you will you know keep on getting more images now if you want to use or if you want to search for some image some kind of image you can do that thing as well for example if you search for school if you want to see school related images you can see now here you can see all these free images related to school and if you want to be more specific school girl for example you can type in this thing and now you'll see some more examples related to that you can scroll down and you can type in girl with book you know a guy in suit you know anything like that now if you want you can upload your own images as well you can just click on upload and upload whatever image you have and you can use it on your slider i'll explain you how to use the image in this slider first let me explain you all the different elements now the second element is this text element which obviously will be used to add different text and you'll see so many different styles are automatically created for you so basically you can do one thing you can just add as text and after that you can style it or if you want there's so many different styles already created you can just import these text on your website and you can change the content okay so we have the text then we also have videos over here so if you want you can you know use these free videos in your background so i have explained you have shown you this template in this template if you see we have these videos we have different videos in different slides in this particular slider so you can do it like this you can add video in the background and then after that you can create your slider so we have this option as well if you want video related to ocean you can click on ocean or if you click if you're on video related to forest you can search for forest and you can see all these videos then we have shapes so here as you can see we have used a few shapes over here so you can use these kind of shapes you can just import it on your website then we have buttons so we have used this button so you can use any one of these button and you can customize it and design it according to your needs and finally we have the control so these left and right controls if you see it on any option for example here as you can see the control is at the bottom okay in in the second slider the control is over here and the shape is also different this is circular this is you know just a regular button without any shape then if you see this one this is also a different button so you can create these kind of controls as well so this was the most important thing the left hand side now at the right hand side you have settings so if you click on any of the option for example if you click on text you will see the options at the right hand side will change now you will get settings related to the text so for example if you want to increase uh the width and positioning of the text if you want to change the font family right now it is open sense if you want to make it maybe a bell or if you want to change the font family and if you do any changes if you if you want to go back to the previous change you can just press ctrl z to undo the changes all right so as you can see it is now done now similarly if you want to do some changes on the button you can click on this button and now here is the right hand side you have no options related to button then after that if you want to animate the button you can click on this animate option and you can see preview animation if you hover over preview animation it will preview the preview the current animation for the button if you want to preview all the animation on this slide you can hover over this button preview all animation okay let me show you again just like this preview all animation okay so this is the right hand side thing once you click on any one of these elements you can see that thing and you can change it from here then we have few more options uh if you see at the bottom we have this slide one slide tool so when you import any slider there are multiple slides created in that particular slider so in this case there are three slides created in this slider so if you want to go to next slide you can click on next slide and now as you can see this is your next slide if you again click on next slide this is your third slide if you want to add one more slide you can click on this new slide button and you can add a new slide then after that you have the you know option for different devices so right now this is how your slider will look on a desktop if you want to see how your slider will look on a mobile phone you can click on this mobile icon and you will see this is how your slider will look in a mobile phone all right so you can change the design you can change how your website or how your slider looks on a mobile phone and how your slider looks on a tablet and on a desktop you can change this thing so basically you can make it device friendly or mobile friendly all right so we have seen all the elements that are available over here there are few more options but we'll see them later on so basically all the basic elements we have seen now let me show you once you import this slide for example we have just imported this slide how you can make some changes in this slide now i don't want to change the layout design i think the layout and design is perfect i just want to change the content for example instead of this girl's image i want to change this image with maybe a boy's image okay so i'll type in boy with book okay now i'll get all the images related to that so here you can see you can also type a kid with book or you can type in anything you want i'm just showing you some examples now whatever image you want for example let's see well suppose i want this image okay and i don't if i if you just click on this image it will just open this thing in this option okay in this content area and now you can you know change it wherever you want you can resize it and you can do all these things what i want to do is i want to delete this thing i want to replace this image with this one so i don't have to click on this i can just just click on this and drag it over here okay now drag it over this image the top image now once you see once i bring it over the top image you can see the background image that girl's image is now highlighted in blue if you see properly now if i just leave it now this image will be replaced with that guy's image as you can see and if you want to re reposition this image you can double click on this image and now as you can see you can reposition this image suppose i want to show maybe this much portion so i'll do it like this and after that you can click anywhere so i'll click outside this box and now as you can see this is repositioned now similarly maybe i want to change this image okay and instead of this maybe i want to put let's see let's see some other image okay maybe i want to use this image okay so again i'll do the same thing i'll drag and drop it over here over this image and again you can see the images change if you want to reposition is just double click on this thing and after that you can reposition this image okay and then click outside the box okay so this is also done if you want to move anything for example i want to move this thing over here or wherever you want you can move it now another great thing is that one whenever you move this thing it will also tell you the gap between all the other elements so between this star and this gap you can see the gap and you can also see the positioning and everything related to other objects okay so this is also great now if you want to make anything for example i want to make this image circular this is a rectangular image i want to make it circular so you can click on this image and you will see this corner radius or you can increase this thing for example if you type in 50 pixels or 500 pixels now as you can see this is a circular image so you can make it change that thing as well similarly if you want to do some changes in the text i want to change this text so i can double click on this text and now as you can see i can change the text so right now it says investing in knowledge and in your future uh you can type in anything you want so something about the slider okay like this and you can also you know add you can do it like this you can add multiple lines you can change however you want to you know present this thing and again once i you know change this thing it will show you when this thing properly aligns with all the other text similarly for the second text you can click on that then you can change the text now if you want to change the styling of this text you can click on this text and at the right hand side you have this font right now by default it is open sans instead of that if you want some other font family a font style you can select that font as well maybe uh let's see let's select let me scroll down actually let me search for poppins font family okay now as you can see this is poppin's font family now for the button if you click on this button now at the right hand side you can see this is the background color for this button if you want to change this background color instead of this maybe i want this orange color now as you can see background color is changed to this orange color if you want to increase the size or decrease the size you can do that thing as well obviously now for this button for the arrow button you can change the background color for this as well so maybe for this i want this green color okay i'm just showing you obviously should not be doing this thing a green is not looking that great okay i'm just showing you that you can do some changes like this okay now this is your slide now whenever you do any changes on your website you should always publish these changes so so click on this publish changes so that whatever changes you have made those changes will be saved now similarly you can go to next slide so click on next slide and whatever changes you want to do over here you can do that changes as well okay and if you want to add a new slide click on this new slide button and you can do that thing now there are many benefits of importing a slider so it saves you a lot of time and the design in layout is already created as you can see you just need to replace the content so i have replaced the content with this thing you i've also changed the color and it saves a lot of time because i don't have to you know add any animation animation is also added so if i click on this play animation button as you can see animation and everything is added so this saves a lot of time and if you want to do it manually you can do it but that will take some time let me show you how you can do this thing manually first again whenever you do any changes make sure to preview the changes now i'll show you at the end of the video how you can now we have created this slider but how you can you know use this slider on any page or on any post any blog post or any page how we can do that thing first let's again come back to our dashboard now if you want to create a new slider from scratch you can click on create slider and now you don't have to select any uh any of these templates you can click on this option create blank slider because we want to create a blank slide obviously now you can change uh you can change the name so by default it will give you some name and then after that you have to select the content width and height so for width i would recommend you 1600 pixels and height you can change this thing to 900 pixels okay then for layout you can make it full width you can make it full screen you can make it boxed i'm keeping it at full screen now click on create slider and now as you can see the content area is created for you now in this content area what i want to do is there is one slider for example you can take any slider for example now i am taking this slider and now i'll show you how you can create or for example this is a slider that i like i know and i want to implement this same type of slider on my website so how you can do it okay so all all the element that you see on your screen i'll show you how you can create this slider from scratch so first we'll come over here first if you see let me actually bring it over here first we have this left hand side element okay this element that you see on your screen so this is a shape i'll add a shape okay so we'll click on shape option and you can select any shape i'll select this option okay this a shape this square shape and after that what i want to do is if you see this shape over here at the bottom right we have this round option i don't know you can see it properly or not okay this is a rectangular shape but at the bottom right side this is rounded okay this is circular so what i'll do is i'll select this option go to corner radius okay here at the right hand side by default if i just change this thing to 50 pixels this will become like this but i don't want to do it like this so i'll again click on this thing make it zero first okay now this is logged i'll unlock this thing so click on this lock pad this is now unlocked i want to make i want to change this thing but only for the bottom right side before that i want to increase the size of this thing okay maybe this much let me see okay okay this big all right now i want to make this thing circular only at bottom right so i'll select the bottom right i'll make it maybe 200 let's see now as you can see this is circular and if you want to change the color of this thing let me see what the color is alright so if you click on this thing f1 f1 f1 this is the color so fill color as you can see by default is aaa i'll change this thing to f1 let me type in this thing f1 f1 f1 okay now as you can see we have this color you can you can hide this thing to see how it is looking right now all right so with this we have this shape at the left hand side then after that we have another shape if you see properly we have this shape over here uh below uh below this thing below this text we have that shape okay so let's add that shape as well so for that i'll again come back over here and i'll use the same shape bring it over here and change the size a little bit and then change the color okay so let's get the color code let me get rid of this let me refresh this thing actually so i already know the color code so i can type it over here under fill color at the right hand side i'll type in 4d e f e d okay now as you can see this color and you can bring this shape wherever you want so here as you can see this is overlapping this shape is on top of this shape so this is overlapping like this one okay you can change the size you can change all these things if you want and on top of that shape you have this option we have this text modern furniture so now we need to add the text so click on text click on add text option and bring it wherever you want and type in modern furniture now once you have the text you can now go ahead and increase or decrease the size you can change the a font family you can change all these things so first of all the default font family is open sense instead of open sense i'll make it hebo okay h-e-e-b-o okay so font families change and after that i'll also change the size uh default size right now is 34 pixels i'll increase this thing to 80 pixels okay now as you can see bring it over here just like this all right so this is how it is looking maybe like this all right and now as you can see this looks very much similar to this one i think this shape size we can decrease the shape size now if two things are on top of each other it is very difficult to select the second option so what you can do is we cannot select actually if you see we cannot select the back element so if you want to do that thing you can right click on this and you can you have this option select element now i want to select the shape so click on shape and now as you can see we can do some changes i think we can decrease the size of this shape a little bit all right all right now it is looking much better then after that we have another text okay so many different text so you get the idea now again you can use this option now we have subheading i'll bring this sub heading over here and as you can see when you bring this thing anywhere you also get these options when it is properly aligned now it says starts from 150 dollars so if you want to type in this thing double click and just keep on option just type this thing starts from 150 now again to change this thing instead of this you if you want to change the font family you can change it then after that you can also change the tag so this is h3 i'll make it h4 okay and after that you can also change the sizing for this as well so maybe for this i'll change this thing to 23 24 i think is looking good so i don't need to change this thing but if you want to make it bolder or anything like that you can do that thing as well so maybe let's do one thing let's make it bold because this thing this text is bold as you can see okay now this is how it is looking all right let me bring it over here similarly for the second third text you can just keep on adding that thing so i'll again come over here add paragraph this is just a simple paragraph so i'll bring it over here type in whatever i want to type in all right then bring it over here and after that we can again change the size and everything for this as well now for this i want to change this thing to roboto font family all right so i'll change this thing to roboto font family and size maybe instead of 15 let's make it 16 pixels okay a little bit bigger and if you want to add multiple lines for example after uh spring i want to add this lines so you can just press enter to bring it in next line or new line okay and you can also control this uh you know spacing and also maybe i want to bring it a little bit at top right so maybe looking good fine then we have this button so we'll select this button element and we don't have this circular button we have a simple rectangular button so we'll select the first option rectangular button bring it over here now after that the button text says read more so instead of click here i'll double click on this and type in read more now if you want to zoom in this thing you have this fit option maybe i want to zoom in 150 okay so that i can see properly now as you can see you can see it properly if you want you can zoom it like this with your mouse and press ctrl and scroll up or down you will zoom in or zoom out okay so that you can see it properly then if you click on this thing we have to do some changes we have to change the background color to black and the text color to this color okay so to do this thing you have this thing at the right hand side background color you can select this color and whatever color you want so will you we have this color in the recent colors as you can see earlier we have used so this is the text color not the background color so background color is black and text color you can see the text color which is so here as you can see at top text color is white we want this color as our text color now for size by default it is 13 if you want to increase or decrease the size you can do this thing as well so i'll make it 15 pixels a little bit bigger you can also increase or decrease the size of the button obviously so if you want to increase the size of this button you can just do it like this all right fine then after that we have the arrows okay so if you want to add these arrows you can select whatever type of arrow you want okay as you can see we have all these options if you want arrow at left and right you can just select any one of these arrows if i click on first option as you can see this has added one arrow at left and one at right so if you want to add this option you can add it like this and if you want you can just press ctrl z to get rid of this if you want to add arrow wherever you want for example if you have added it over here so you can do it one by one so i'll click on this first option bring this arrow over here let me see all right well click on the second option and bring it over here and as you can see this will help you to align this thing so we have these two okay not this one we want this one okay and let's see bring it over here all right so this is how you can if you want to increase the size obviously you can click on this thing and you can increase the size as well width and height you can increase the width and height it will automatically increase the size so this is your arrow okay and after that at the right hand side whatever things you have so at the left at the right hand side first we have this background image so for the background image you can come back to images and you can search for any image so this is basically a wall image so you can search for wall and whatever image you want okay you can just use that image on your screen okay on this slider so maybe uh let's select let's use this first image so i'll click on this thing bring it over here and again you can just go ahead and resize it like this okay like this fine and on top of that if i want to use this chair image so i have this image under my images so i'll bring this image over here okay resize it properly all right so bring it over here fine all right now i think everything else looks pretty good maybe i want to do one thing i want to select this element now if you want to select multiple elements you can do one thing uh you can just press this thing you can press you can press a shift and you can select all these elements so i'm selecting these elements and then after that you can bring them wherever you want so maybe i want to bring them over here now i'll bring this thing as well all right so this is looking better and this is how it is looking if you you know do it like this so this is your slide one if you if you want to create a new slide click on new slide and you can just you know keep on adding uh you know i've already shown you how you can design this thing add element and keep on designing it now once you do this thing after that you have to add all the animations so to add animations you can do it one by one first we have this thing at the left hand side you can see the animation if i bring it over here okay all these animation delays and all so first for the left hand side uh let's see you have this option animation option go to animation option and this is i'll have to again and again show you this thing so as you can see this is coming from top okay so for this we'll select move option okay move in select move in and move in from top okay then we have short and we have medium we have long i want long so long move from top this is the one i want to select and direction is top movement you can control the movement however you want i want movement hundred percent hundred percent okay i cannot explain you these things in more detail because i think the video is already getting a pretty lengthy so i'll have to move a little bit fast okay so this is basically moving in from top and movement is hundred percent which basically means that whole entire object should move if i hover over this preview animation you can see this is how the animation is now we can control the duration how small for example the duration is 2500 which is 2.5 seconds okay i want to increase this thing to 3.5 so i want to slow down the animation speed okay you can also add some delays if you want then similarly you can select the text you can add animation to the text you can select this image you can add animation to the image many different images are or many different options are available for example for this you can select scale in and you have scale down one okay and after that you can change the percentage you can also add uh some delay so in this maybe i want to add delay of 500 okay now if i click on preview all animations okay as you can see this is how it will look like so this thing is delayed it starts after half a second if i increase the delay to 1500 this thing will start after 1.5 seconds let me show you preview all animation as you can see animation started after 1.5 second this has started okay as you can see okay so you can add some delays as well so this is how we can add your animations and all once you're finished with this you can click on publish click on publish changes and you're done with this what i would recommend you to do is first come back to your dashboard if you want to understand more about uh you know animations and all i would recommend you to just open any one of these options any one of these options that you have any one of the imported templates go to the animation section you will understand more about animation so basically the more you play around with this template and with this slider the more you will understand about it basically they have made it so easy that you you know you have already seen how easy it is to create this slider now let me show you how you can use this on on anywhere or anywhere on your website so it is you can use it with any page builder if you want or if you want if you're not using page builder if you if you're using gutenberg or something else you can use it using the uh shortcut option so if you see this option let's see okay we have to open this thing so maybe i want to you i want to use this school option so i'll click on this school option and you will see this option if you click on publish you will see this shortcode copy the first shortcode once it is copied come back and maybe i want to use it any page so i'll click on page click on add new and i'll give it a title of a demo page maybe okay now we we have copied this shortcode to paste in the shortcut over here this is gutenberg you can just click on plus and search for shortcode element okay now paste in the shortcode publish this page now if i open this page in a new tab let me show you we have this slider over here okay so this is how easy it is to do this thing if you're using elementor click on edit with elementor with elementor you you'll get your own element so if you want you can just search for depictor okay here as you can see depict a slider you can just bring it over here and after that you can select the slider so under slider if you want to create if you want to select this slider untitled slider you can select okay we have not published it i think let's see it says we have not published it this untitled one let's set it okay we have not published it let's publish this thing make sure to publish it click on publish changes all right let's come back update it okay let me try it again school and after that untitled okay now because we have published it you can see this is working and if you're using elementor if you're using any page builder make sure to always change this section so click on edit section and change the content with to full width and stretch section okay and gap column gap will be no gap okay now it is looking better okay now we can change the slide we have not created the second slide so that's why you cannot see this if you come back to your previous slide you can see the animation and all whatever you have added all right so this is how it works all right so this is it for this tutorial i hope you guys find this tutorial helpful if you find this tutorial helpful if you never watch and learn more useful things like this make sure to subscribe and click on the bell icon so that you don't miss any future notifications if you like this video give a thumbs up to this video and share it with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any sessions for me you can always leave them in the comments section below and finally thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 118,721

Keywords: wordpress slider, slider for wordpress, how to create a slider in wordpress, depicter, depicter wordpress

Id: qtqpH6amHWc

Length: 32min 41sec (1961 seconds)

Published: Tue Aug 09 2022