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.
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
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...
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?
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!
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!
Hello and many thanks for this great video! I would like to make this but in mobile like one of the next card are visible, do you think it is possible to make that with elementor and this opction? Thanks!
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?
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..
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.
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?
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)?
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?
@@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.
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.
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.
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
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?
@@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.
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.
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...
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?
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.
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 !!
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.
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!
Seriously you are amazing !!! Love your tutorials - they are so easy to follow !!! Thank you for sharing it!
Glad you like them!
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...
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
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...
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
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?
Amazing tuts, you deserve more likes, more subscribers! Keep up the good work!
Thank you so much!
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!
Thank you, you are a genius! Been looking for this solution for ages. It works perfectly :-)
My pleasure. Glad to help!
you are a legend
love from Pakistan
Thank you so much❤️
Thanks Man stucked so badly, loved your trick
You're welcome!
Life Saver! Thanks Make!
You're welcome
It's amazing you add up 4 star without using extra plugin ❤
😇😇🙏
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!
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
Hello and many thanks for this great video! I would like to make this but in mobile like one of the next card are visible, do you think it is possible to make that with elementor and this opction? Thanks!
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?
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..
Many thanks for this tutorial. I always learn something new watching your videos
You are very welcome
Amazing
Thanks!
Thank you too!
I make a slide width around 700 px and make slide per view 3 but when publish my slide got smaller.
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!
Hello sir, Can we get the Cans Images ? Need them for the sliding practice
You can get them from Unsplash
@@MakeDreamWebsite 🙏🙏
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
Stunning as always!
Thank you!
nice work dude
Yes, Elementor Pro is needed for that too
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
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.
Ireally love your videos and tuts, you're the best man
Happy to hear that! Thank you!
Thank you Brother❤ But where is "slider animation repeat codes"?
I couldn't find it. 🙏
If you delete and recreate the DOM element and add the animated class with it then it will be animated again in Elementor…
Just subbed, this is a great way to create a really nice custom slider
Glad you like it!
Excellent tutorial. Thank you!
You're very welcome!
Great tutorial thanks!, it's possible to add Lightbox for images using this custom carousel slider?
Yes...
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????
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.
Thanks Very helpful tutorial...
Welcome 🙏
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...
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.
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ó.
what if i want the center slide to go bigger, in a 3 slides slider?
This was helpful. Thank you💪
You're welcome!
Really good toturial. Thank you.
You're welcome!
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
Awesome tutorial! Thank you so much buddy
You're welcome!
Damn bro saved the day, cheers, subscribe and like to you ;)
could you make a fast tutorial for repeate the animation entrance in the loop carrousel / listing grid slider widget 🙏
Thank you so much for this video!
You're welcome
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.
@@blakemiller-mito 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!
Thank you very much for sharing this tip. Helped me a lot! 🙏🏻
You're welcome!
straight to the point.
🙏🙏
This is awsome, thank you so much!!!
You're welcome!
Very nice Content… 🎉 please make one video for Price estimate calculations like calculating transportation rate or calculation of per sqft
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.
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❤
You are amazing
You're welcome!
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...
Great!! Wonderful tutorial video...
Thanks a lot!
Thank you!
You're welcome!
Luv this!
Thanks TheWebStylist!
Ommgg.. you are awesome 👏
Thanks a ton!
the testimonial carousel is breaking. It has a scroll at the bottom of my page
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?
How to make the carousel vertical?
You can only make horizontal slider in this way. Vertical slider is not possible with this approach.
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!
Thank bhi
Welcome
Thank you very much, you're good
Very welcome!
Love you!
Thanks a lot!
Very nice brother
Thanks
we want to learn how to create snipet for using in elementor. thank you.
You need to learn CSS and JavaScript for that...
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
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.
Your tutorial was a life saver, thank you so much!
You're welcome!
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.
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 !!
same here. did you found any solution?
Test this CSS
selector{
--distance: -1.8em;
--background: #929292;
--padding: 2;
}
selector .elementor-swiper-button{
width: 2em;
transform: translateX(var(--distance)) translateY(-em);
height: 2em;
}
selector .elementor-swiper-button.elementor-swiper-button-next{
transform: scaleX(-1) translateX(var(--distance)) translateY(-em);
}
selector .elementor-swiper-button i{
width: 100%;
height: 0.1em;
background: currentColor;
position: relative;
opacity: 0.7;
transform: translateY(0.97em) scale(calc(1/var(--padding)));
transition: opacity 0.2s ease-in-out;
}
selector .elementor-swiper-button:hover i{
opacity: 1;
}
selector .elementor-swiper-button i:before,
selector .elementor-swiper-button i:after{
content: "";
position: absolute;
width: 50%;
transform: rotate(45deg) translateX(-0.04em);
transform-origin: left center;
height: 0.1em;
background: currentColor;
}
selector .elementor-swiper-button i:after{
transform: rotate(45deg) translateX(-0.04em);
}
selector .elementor-swiper-button:before{
content: '';
position: absolute;
top: 25%;
left: 25%;
transform: translate(-50%,-50%);
background: var(--background);
height: 100%;
width: 100%;
border-radius: 100%;
opacity: 0.3;
transition: opacity 0.2s ease-in-out;
}
selector .elementor-swiper-button:hover:before{
opacity: 0.8;
}
/* Small Desktop Device */
@media (max-width: 1250px){
selector{
--distance: 0em;
}
}
/* Tablet Device */
@media (max-width: 1024px){
selector{
--distance: 1em;
--background: #929292;
--padding: 2;
--size: 20px;
}
selector .elementor-swiper-button{
font-size: var(--size) !important;
}
}
/* Mobile Device */
@media (max-width: 767px){
selector{
--distance: 1em;
--background: #929292;
--padding: 2;
--size: 20px;
}
}
@@danielsandhika3068 test the CSS
selector{
--distance: -1.8em;
--background: #929292;
--padding: 2;
}
selector .elementor-swiper-button{
width: 2em;
transform: translateX(var(--distance)) translateY(-em);
height: 2em;
}
selector .elementor-swiper-button.elementor-swiper-button-next{
transform: scaleX(-1) translateX(var(--distance)) translateY(-em);
}
selector .elementor-swiper-button i{
width: 100%;
height: 0.1em;
background: currentColor;
position: relative;
opacity: 0.7;
transform: translateY(0.97em) scale(calc(1/var(--padding)));
transition: opacity 0.2s ease-in-out;
}
selector .elementor-swiper-button:hover i{
opacity: 1;
}
selector .elementor-swiper-button i:before,
selector .elementor-swiper-button i:after{
content: "";
position: absolute;
width: 50%;
transform: rotate(45deg) translateX(-0.04em);
transform-origin: left center;
height: 0.1em;
background: currentColor;
}
selector .elementor-swiper-button i:after{
transform: rotate(45deg) translateX(-0.04em);
}
selector .elementor-swiper-button:before{
content: '';
position: absolute;
top: 25%;
left: 25%;
transform: translate(-50%,-50%);
background: var(--background);
height: 100%;
width: 100%;
border-radius: 100%;
opacity: 0.3;
transition: opacity 0.2s ease-in-out;
}
selector .elementor-swiper-button:hover:before{
opacity: 0.8;
}
/* Small Desktop Device */
@media (max-width: 1250px){
selector{
--distance: 0em;
}
}
/* Tablet Device */
@media (max-width: 1024px){
selector{
--distance: 1em;
--background: #929292;
--padding: 2;
--size: 20px;
}
selector .elementor-swiper-button{
font-size: var(--size) !important;
}
}
/* Mobile Device */
@media (max-width: 767px){
selector{
--distance: 1em;
--background: #929292;
--padding: 2;
--size: 20px;
}
}
Amazing tutorial! Thank you so much for your work!
Very welcome!
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
Not free
Awesome
Thanks a lot!
Your artist na should be "Kristal Klear" because that was what I just watched here.
🙏🙏
I don't see any shortcode
You probably don't have Elementor Pro
Footer like app
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
make fire as soft
Why voice is like Jim Fahad?
I'm also thinking 🤔
literally rn..
lets go
ρɾσɱσʂɱ
totally time waste that code doesn't work
Love U bro🤍🤍