Turn anything into a SLIDER in Elementor (No Plugin)

[Music] hey what's going on guys my name is jim fudd in this tutorial i'm gonna show you how to turn anything into a slider or carousel without using any extra plugin also without writing any custom code we will be creating this whole carousel or slider only by using elementor page builder in this slider we can swipe like this we can navigate them by using this right or left arrows also we can use this bottom dots as navigator like this and i have splitted this video into two different parts first i will show you how to design this capsule card and secondly how to turn them into a slider let's now start with the step number one which is to designing this capsule card so without further ado let's now go inside elementor page builder so to create the capsule card first i want to take a section to take a section click on this plus icon and i'm taking the single column structure here i'm giving it's a width that's 320 now with this section temporarily i just want to add some padding so go under advanced tab unbind the padding at the top i'm adding 100 and at the bottom i'm adding 100 pixel of padding like i said this is temporary i will remove this padding later now let's select this column go under its style tab because i want to make its background color to hash f7 f7f7 it's kinda off-white color now from here open the border i'm adding 180 pixel of border radius we cannot see the border radius right now because we don't have any content inside of this column but we can see it shortly also go under its advanced tab and i'm making the padding to zero now within this column let's click on this plus icon here i'm dragging an inner section of widget and first of all i'm deleting one of these inner columns from here so now this inner section has only one column here i'm making this inner section's height to minimum height and um setting is 260 pixel then go under style tab because i wanna add a background image so from here background type let's select an image i'm selecting this one click on insert media and here let's set its position to center center repeat to no repeat and size i'm making it cover all right let's now scroll down from here open the border so you know we want to make it look like a capsule that's why i'm unlinking the border radius only at the top and right i want to apply the exact body radius that we have applied on the column so that's 180 pixel at the top and 180 pixel at the right it's already taking shape now let's open the shape divider go to its bottom and here i'm selecting the type to book the last one this one and here i'm making its color to that of white color that's hash f7f7f7 all right now underneath this inner section i wanna add some content so go to the rubik's cube icon first here i'm dragging a heading widget under the inner section here and the text i wanted to say indonesia let's make the alignment to centered now quandary style tab from here i just want to do one single thing that's from typography i wanna set its style to normal and there is a reason for that just stick with me you can understand that later all right now go under advanced tab i just wanna add some margin top so unlink it at the top i'm adding 20 pixel of margin now underneath this heading um here adding some text so i'm dragging text editor widget here let's now make its alignment to centered and similarly like the heading widget i also wanna make its typography i mean the style to normal and we can make its size to 15 pixel and then if you want you can add some spacing so i'm going under advanced tab from here unlink the margin only at the bottom i'm adding negative 20 pixel and let's unlink the padding on the left and right i'm adding 20 pixel of padding now underneath this paragraph i wanna add a button widget so click on the rubik's cube icon from here i'm dragging the button widget here let's make the alignment to centered go under style tab similar like this heading and paragraph i'm selecting the typography here and let's set the style to normal then from here i'm making its color to black color and here border radius i'm adding 20 pixel now go under advanced tab only at the bottom i want to add some margin so unlink the margin at the bottom i'm adding 40 pixel so we have made the capsule layout now we can move to the next part that's turning this capsule card to a carousel or slider so now the main thing i want to remove the temporary padding from the main section so let's select this section from under its advanced tab i'm removing this 100 pixel padding also let's remove it from here and as we have removed the padding from top you see now it's difficult to grab the main section and the inner section because they have placed now at the same place so you know we can take the help of the navigator just right click here and open the navigator and now just make sure you have selected this main section not this inner section okay so i'm selecting the main section this one right click here and then click on save as template i wanna name it country card then zero zero one click on save so it's now saved under my templates now close it here i wanna create our second card so this time instead of indonesia i'm writing here africa and i wanna also change this image and you know this is the background image of the inner section so from here let's select the inner section i'm changing the background image with another image i'm selecting this one click on insert media and again make sure you have selected the main section from the navigator now right click here click on save as template and this template i'm saving it as country card 0 0 2. again save it close the pop-up then i'm preparing the content for the third card instead of africa i want to write here silent now select the inner section change this background image i'm selecting this one select it again make sure you have selected the main section from the navigator right click here and click on save as template i'm naming it country card 0 0 3 let's save it then close it let's create our fourth card here instead of thailand i wanted to say brazil select the inner section because i wanna change its background image as well so i'm selecting this image and insert it again make sure you have selected the main section right click here click on save as template and i'm naming it countrycard04 now click on save all right let's now close it also i'm closing the navigator now if you wonder where these templates are saved you can just go back to your wordpress dashboard so from here i'm clicking on this hamburger icon here you see exit to dashboard i'm opening the dashboard from a new tab so from your wordpress dashboard on the left you see here templates under the elementor from there click on saved templates here you see all the templates that we have saved they are sitting here inside the country card zero zero one zero zero two zero zero three zero zero four all these are here all right now go back to elementor page builder and this time we no longer need this capsule card here so let's delete it also delete the main section so basically we are starting from scratch as we have saved all the templates on our elementor saved templates all right so to take a new section let's click on this plus icon i'm taking the single column structure this time make its height to minimum height and i'm setting it 100 vh then go under style tab because i want to use a gradient color so from here i'm selecting the gradient the first gradient color i'm selecting hash 7 3 4 f f 2 and let's keep this reddish second color then go to the rubik's cube icon and here i'm searching for testimonial carousel so here testimonial carousel this one now just drag this testimonial carousel widget inside of this column here by the way this widget is only available on elementor pro i will put my elementor pro affiliate link in the description if you purchase elementor pro through my affiliate link you don't have to pay any extra but i will get a little credit for that that will help me to continue this youtube channel and make more interesting tutorials like this all right so here with this testimonial carousel widget the first settings i wanna do here it says slides per view i'm making it to three and by default there are three slides or three items so let's open the item one from here i wanna delete this image first click on this delete icon also i'm removing this name and title from here so let's remove it also remove the title and here instead of this content first let's remove this text content i wanna use the shortcode of that capsule card so just go back to your wordpress dashboard from under your saved templates for the first one i'm using the country curve 001 here on the right side this is its shortcode just copy this shortcode from here go inside elementor and paste the shortcode inside of this content field so far we cannot see anything inside of this carousel you see here we can see only this plain text shortcode but notice for now let's just minimize this item one and i wanna delete this item two and three so click on this x also click on this x and here open the item one here we have inserted the shortcode within the content we have deleted the image we have removed the name and title from here so now we can just copy this item one i'm copying it one two three actually i have copied it four times so the first one has the content is basically the shortcode for country card 001 now let's minimize the item one open the item two here instead of this one let's remove it go inside save templates copy the shortcode for country card 002 this one copied go inside elementor paste the shortcode here similarly like this open the item 3 remove the shortcode from here go to save templates i'm copying the shortcode for country card 0 3 go inside elementor and paste it let's do the same with the fourth one so remove it go to saved templates here i'm copying the country card 0 4 shortcode from here go inside elementor and paste the shortcode inside the content field alright now we have inserted four slides or four items here but in the similar way you can add as many as slides or as many as items you want and you may notice we cannot see any card here within the element of page builder actually within the elementor page builder we cannot see the cards to see it we need to preview it from the real browser so for now let's click on this green update button to save our work and to preview the real web page click on this eyeball icon here we go we can see all the capsule cards here we can swipe them like this we can use the arrows from right also from the left and here these bottom dots are also working perfectly but i think there are some settings that's coming from the default carousel settings so to remove them just go inside elementor page builder from the testimonial carousel widget go under style tab here let's keep everything same just under the slides i'm making the padding to zero and let's open the content here i'm making the gap to zero and if you wanna adjust these arrows i mean the right and left arrow also if you wanna control this dots navigation then go under content tab from here scroll down open the additional options like here you can enable or disable the arrows from here as i have disabled it we cannot see the left and right arrows but i want them back so i'm turning on the arrows similarly you can turn on the pagination from here or if you want you can turn off it but i want to keep the dots and to style it go under style tab scroll down open the navigation let's say if you want to increase the size of the left and right arrow you can increase the size from here so instead of 20 i'm making it 30 then if you want you can change the color of the arrows like here i'm making its color to white similarly if you want you can change the size of these dots from here like this i'm keeping it eight and also if you want you can change the color from here but i like the way it is then click on this update button to save your work and here we can see our beautiful carousel with all the swipe option the arrows and the navigation dots and now let's see if you want to change any image or any title from inside this carousel then you cannot do that from inside this slider you need to go back to your saved templates for example if you wanna change something inside of this country card03 just click here on edit with elementor i'm opening it from a new tab so here we can only see the template here let's say here instead of thailand i wanted to say italy also i want to change this image so click here or you know we can always navigate through the navigator from here so make sure you have selected the inner section from under its style tab let's change this image i'm changing it with this one click on insert media now click on this green update button if we now go to the live preview page and let's refresh the page now here instead of thailand we can see the itali cool and one last thing of course we should check how it's looking on the tablet and mobile device to check its responsiveness if we now go inside elementor page builder as you see we cannot see anything from inside elementor page builder so actually we cannot check its responsiveness from inside elementor page builder but if we go to the front end of the page i mean the final preview page we can check its responsiveness by shrinking our browser so right now this is the desktop view if we now minimize or shrink our browser at this state this is basically the tablet view but on the tablet view i don't want only one card here on the tablet device i want to display two cards and on the mobile device yup on the mobile device one card is okay so to make that change let's go to the normal width of the browser and go back to elementor page builder make sure you have selected that testimonial carousel go under its content tab and here if you have a look slides per view we have set it to three but it's for desktop now click on this icon and go to the tablet device for the tablet device here i'm selecting two cards and from here let's select the mobile icon on the mobile i'm selecting one so let's click on this green update button to save this change and go to our live preview page all right if we now start shrinking our browser to the tablet with here you see we can see two cards here and if we shrink it more to the mobile width you see we can see only one card and everything is working perfectly the arrows the navigation dots everything is working perfectly all right i hope you have learned something new today if you like it please give this video a big thumb up and don't forget to subscribe to this youtube channel also press on that notification bell icon to get notified before anyone whenever i will upload a new video on this youtube channel and if you want me to help you on your wordpress project or elementor project then you can contact me through my website that's jim fahad digital.com i will try my best to help you once again thank you so much for watching this whole tutorial i will see you in the next video for now bye bye

Channel: Jim Fahad Digital

Views: 197,906

Keywords: Turn anything into a SLIDER in Elementor, Elementor Card Slider, Elementor Card Carousel, Elementor Post Slider, Elementor Post Carousel, Elementor Slider without Plugin, Elementor Carousel without addon, elementor carousel anything, elementor carousel with text, Elementor Slider, Elementor Carousel, Jim Fahad Digital, elementor, elementor pro, elementor tutorial, elementor tips and tricks, Elementor Tricks, Elementor WordPress, WordPress, elementor slider with text and image

Id: DP3Y0pUy4xg

Length: 18min 0sec (1080 seconds)

Published: Tue Mar 15 2022