Slide Anything in Elementor/WordPress? Advanced Custom Carousel/Slider with Templates (NO PLUGIN)
HTML-код
- Опубликовано: 12 сен 2022
- Today, I'll show you how to slide Anything in Elementor/WordPress and make an Advanced Custom Carousel/Slider with Templates using NO PLUGIN.
✅Get Elementor Pro:
makedreamwebsite.com/elemento...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsite.com/bluehost
✅Get additional code snippets:
makedreamwebsite.com/slide-an...
✅Get creative templates on my Template Shop:
templatish.com
In this tutorial, I’ll show you how you can slide anything in your WordPress website using the Elementor Page Builder. So, inside each of the slide you can do different design, different structure, text and image. Basically, you can put anything inside each slide which you can fully edit by the Elementor Editor.
Then, I’ll also show you how you can design a full width slider with anything where you can also add different kind of entrance animations when you change your slide.
Here, we can't use the default Elementor slider widget. We need to take a testimonial widget and clear all the text from its option. Because inside each of the slides, we'll use templates (custom content) instead of the normal content.
Then, from the dashboard we create those templates. Copy the shortcode of the template and paste that inside the first slide. Then, we create another temple and paste its shortcode on the 2nd one and so on.
We have also adjust some design of the custom carousel for removing it's default and also use some custom CSS code for some improvement.
At the 2nd part, we also create another full width custom slider. Here, we also do the same thing. But add some entrance animation on slide change. We use some JavaScript code to make the animation work.
If you enjoy this WordPress tutorial, don't forget to like and subscribe.
Seriously you are amazing !!! Love your tutorials - they are so easy to follow !!! Thank you for sharing it!
Glad you like them!
Holy crap, I didnt thought of using the templates shortcodes in the slider! Why are you so wise in the ways of elementor? Thanks for this video! 10/10 delivered on what it promised.
Thank you!
Many thanks for this tutorial. I always learn something new watching your videos
You are very welcome
This is awesome! Thank you so much! I'm mostly a Gutenberg developer but clients love Elementor, so I'm learning the page builder. This is just what I needed for a section on one of the web sites I was working on. Thank you again!
You're welcome!
Ireally love your videos and tuts, you're the best man
Happy to hear that! Thank you!
Excellent tutorial. Thank you!
You're very welcome!
Stunning as always!
Thank you!
what a life saver this video is!! I thought i would have to go deep into CSS to customise my carousel but this is a game changer!!
Thank you so much!
FOR SURE INVALID FILES ERROR WHAT IS WRONG ? thks
You first need to unzip the file and upload the json file inside that...
Amazing tuts, you deserve more likes, more subscribers! Keep up the good work!
Thank you so much!
Thank you very much for sharing this tip. Helped me a lot! 🙏🏻
You're welcome!
Thank you, you are a genius! Been looking for this solution for ages. It works perfectly :-)
My pleasure. Glad to help!
Thanks Man stucked so badly, loved your trick
You're welcome!
You're amazing dude! Really impressing everything you are doing for the community! Would be great if you could do a video where you could explain the selectors and how you work with Javascript in order to integrate the code into the builder .👌🙌
That's a whole new thing. Which you may not fully understand if you're not familiar with coding. And what I can do is: giving a little description of the code structure and purpose of the code. Which rather make some of you confused...
@@MakeDreamWebsite Totally agree. I am familiar with coding, but I still have quite a hard time understanding how all the selectors are structured in wordpress and how people use them in order to create interactive plugins and animations. Everything you do is simply amazing my man! Wish I could learn from you more ☺
The selector in CSS code here are actually refers to the current element/widget. If you inspect element on browser you can see the selectors are actually converted to those corresponding element's classes...
Life Saver! Thanks Make!
You're welcome
Your tutorial was a life saver, thank you so much!
You're welcome!
Great video - thank you. I subscribed to your channel. One question: If I want to make a full width slider with 3 different images (for 3 different slides), how big must my images be, in other words the height and the width?
NOTE: I do not want the slider to take up the entire 'above the fold' space. Thanks.
Really good toturial. Thank you.
You're welcome!
Awesome tutorial! Thank you so much buddy
You're welcome!
Thank you so much for this video!
You're welcome
Great!! Wonderful tutorial video...
Thanks a lot!
Hi, thank for this awesome video. That realy inspired me and opened my mind to what is possible.
I have 1 questiong though.
When creating a carousel with multiple elements (9), the first element seems to not quite lign up the same way as the following 8. Would you have any idea as to why that is?
straight to the point.
🙏🙏
thank you so much. i was imagine this but i was almost give up until see this video.
Glad to know that really helps you!
It's amazing you add up 4 star without using extra plugin ❤
😇😇🙏
Thank you so much for this amazing tutorial video!! I'm having trouble with images disappearing on auto-slide (but if I hit the "back" arrow, the image is there). It's happening on two different websites. Any ideas?
Hola com estas, muy buen tutorial, me funciona muy bien excepto por una cosa, cuando lo uso en un slide principal debajo de menu (header), el slide se superpone y no me permite navegar en el submenu, sabes como podria solucionarse?.. gracias..
This was helpful. Thank you💪
You're welcome!
Thank you!
You're welcome!
Luv this!
Thanks TheWebStylist!
This is awsome, thank you so much!!!
You're welcome!
Thanks Very helpful tutorial...
Welcome 🙏
Amazing
Thanks!
Thank you too!
hello, I'm facing a problem please reply, i have set to show 3 items in view but it is showing more items and showing in full screen not like you in box where only 4 items are shown, I have checked the content width of container and it not to fullwidth is boxed, edit: then i use overflow:""hidden" to testimonial slider then it is solved, not showing extra items anymore, but i tried to move arrows out I cant do this as overflow is hidden, so give a solution other than overflow hidden and i have set slide template width to 300px for each item..............please reply
Hi,
very nice video, thank you so much for sharing!
I would have a question. If i do a custom slider like your first in the video but the text of the different reviews are not equally long.
Do you know how to achieve that all the columns are the same height?
I would appreciate an answer so well.
At the last of the video I've shown the solution of this issue...
Thank you very much, you're good
Very welcome!
Love you!
Thanks a lot!
Very nice Content… 🎉 please make one video for Price estimate calculations like calculating transportation rate or calculation of per sqft
you are a legend
love from Pakistan
Thank you so much❤️
Very nice brother
Thanks
Awesome tutorial. One question, How do I adjust the vertical positioning of the nav arrows. I would like to put them below the images, on line with the pagination. Thanks!
You need custom CSS for that
Ommgg.. you are awesome 👏
Thanks a ton!
You are amazing
You're welcome!
what if i want the center slide to go bigger, in a 3 slides slider?
Great tutorial! I have been following your work. Is there a way to use motion effect in the slider templates?
I haven't tried it! But I think it should work too!
Amazing tutorial - thank you SO much. It's exactly what I was looking for! Also - what tool did you use to measure at 2:57?
You're welcome! I used Lightshot for Windows there
Amazing tutorial! Thank you so much for your work!
Very welcome!
Great tutorial thanks!, it's possible to add Lightbox for images using this custom carousel slider?
Yes...
Thanks for the content, I learned a lot.
I would like to know if the first model with the cans you have for sale, as I found it very interesting and beautiful.
You can get all those pictures on unsplash.com
Hey Budd! thanks for the tutorial. Its really helpful for my page. I just have 1 question.
It occurs to me that there's some error right after adding the entrance animation.
I found that after clicking "next" button on my page, all the text/image that i've inserted the entrance animation is missing.
im using Astra theme + Elementor PRO
Would you mind helping me on that? Appreciate it
***Edit***
i just found a bug. its actually the * inifinite loop * inside the testimonail carousel > additional options > infinite loop.
after i turned it off, everything's working fine
no me funcionó.
This is really a great solution. I spent quite some hours with searching and evaluating carousel/slider solutions: E.g. Depicter ist NOT ready to work with yet in my opinion - especially in regards to responsiveness. Depicter (v. 2.x) seems to be really 'young' and has bugs which I reported to them. Also smartslider doesn't do the job like your approach which works great ans is really smart. My only question: Is there any chance (with additional CSS code) to have a function like "stop advancing slides when the mouse-is-over-the slide"(= stop the automatic slide advancement)?
On the testimonial carousel widget, you can see an option "Pause on Hover". That should work. Thank you for your amazing comment BTW.
AOA your video is very helpful i have a question when i have created team carousel how can i make that carousel templets click able mean when i click any team member then i can visit team member profile?
From this video ruclips.net/video/vCJBXzHjtHk/видео.html you can learn how to make a clickable section/container/column with link
could you make a fast tutorial for repeate the animation entrance in the loop carrousel / listing grid slider widget 🙏
nice work dude
Yes, Elementor Pro is needed for that too
Thank you for the video! I learned a lot! However, when I post my shortcode, nothing shows except the shortcode text, even when I am previewing the website. Do you know what might cause this?
Do you have Elementor Pro installed?
@@MakeDreamWebsite Yes, I do. I was able to figure it out. I just had the code in the wrong spot. Thank you for your quick response though! I appreciate it.
Great video, thanks for the tip. Can I ask why you used a Page Template instead of a Section template? Was it simply to provide a cleaner editing environment, or was there a technical reason?
Yes, section template is also fine...
@@MakeDreamWebsite That's what I thought because I've done similar stuff with embedding templates in other areas (such as Tabs). I was just curious as to why you chose that route? It does provide a cleaner editing environment when selecting Elementor Canvas to remove headers / footers. But in my mind, it does not compute to use a "page" for a small section. .hmmmm, decisions.
@@blakemiller8811 I made it page because in case anyone want to add multiple sections in a single slide...
@@MakeDreamWebsite Ahhh, that is a good point. Thanks!
Nice tutorial, you fixed height problem which I was facing. One more thing I want to ask that when this slide on auto slide mode, everytime my 1st slide shows blank why? But when I scroll manual by arrow first slide show ok maybe entrance animation effect that?
Ok, I'll check. And update the code if needed
I get the same problem. Any solution?
You can email me your page link
@@MakeDreamWebsite Thanks! I sent you an email a few days ago. Did you get it?
@@danlidholm836 Did you solve it?
Awesome
Thanks a lot!
Awesome. Can you add this to your online store please?
Basically, this tutorial is about the concept of sliding anything. But, the slider itself is not too usable for everyone. So, I also don't make it as product. But, if you want to buy it, I can also set a purchase link for you...
I have problem with sliding button , sliding button is not the way it looks as your tutorial !! is like both a button are left side and not fitting inside the container !!
Sir need to know which Extension is being used on 2:57 for knowing the Size of image. Thank You
It's the lightshot, very lightweight desktop software
@@MakeDreamWebsite Thank You❤
hello, thank you for this tutorial ! do you know how to add a link to the whole template ?
You can place a button above the template and make it transparent.
@@MakeDreamWebsite i love you????
is this also possible without the pro version and any other plugins except for elementor free?
If any plugin you know supports template shortcode, testimonial carousel like widget and custom css for each widget then it can be possible
the testimonial carousel is breaking. It has a scroll at the bottom of my page
The links for the demo doesnt work!!!! In all of your templates !!! Im looking from mobile oppo reno 4 pro...what am I doing wrong ???
regenerate the files & data from Elementor Tools
sir im having some problem with your designs, they are amazing but there are very few of them which you make using inner section and the rest you make using container. im a innersection guy and when i turn off my flexbox after making your designs those containers dissappers so what is the solution. i am hoping you will reply.
You can first create the section using section/column and export it as a template. Then, after activating container you can import and insert your section/column part. This is the only way to keep them together.
@@MakeDreamWebsite it is possible to create those designs with flexbox deactivated?
@@huzzer624 no, when you deactivate flexbox, you can't do design with container.
How do I achieve this to display comments in each slide (one slide per comment) dynamically in response for a post?
As far I know there is no way to dynamically show comment this way. You may search for a plugins for that (if there is any) or you have to do it manually.
we want to learn how to create snipet for using in elementor. thank you.
You need to learn CSS and JavaScript for that...
What about sliding horizontally by scrolling not clicking… is it possible you think??
That's a good idea, but, it's not possible in this way... maybe I'll also make another video about that
@@MakeDreamWebsite Thanks in advance, you are the best
I would really look forward for that!
It seems to me that the content is a bit blurry when i extracted from the short code. Its just me?
If you have any image try to set the image size to full
@@MakeDreamWebsite no, i used a colored container and heading and text inside.
Your artist na should be "Kristal Klear" because that was what I just watched here.
🙏🙏
How to make a second slide preview for 1/3
You can't show any fractional part of a slides here
@@MakeDreamWebsite might be possible with css, tried something, it is half working
@@uncodedlife you can try... As I have not tested yet, I can't guarantee you that it'll work perfectly
Footer like app
make fire as soft
lets go
this is for elementor pro users
Yes, this tricks is not possible in free version. As we need shortcode feature of saved templates and also need the testimonial widget. These are only available in Elementor Pro.
@@MakeDreamWebsite you must be said that in video and title. this is click bait. Cuz everybody can do almost everything in elementor pro already.
@@tahirbalci Yes, I have mentioned about Elementor Pro at the very beginning of the video at 0:35
literally rn..
Why voice is like Jim Fahad?
I'm also thinking 🤔
ρɾσɱσʂɱ