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.
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 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...
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
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?
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!
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!
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?
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?
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.
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 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)?
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.
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.
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
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.
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.
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?
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 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.
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.
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
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...
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!
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 tuts, you deserve more likes, more subscribers! Keep up the good work!
Thank you so much!
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
Thank you, you are a genius! Been looking for this solution for ages. It works perfectly :-)
My pleasure. Glad to help!
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?
Thanks Man stucked so badly, loved your trick
You're welcome!
Many thanks for this tutorial. I always learn something new watching your videos
You are very welcome
Just subbed, this is a great way to create a really nice custom slider
Glad you like it!
It's amazing you add up 4 star without using extra plugin ❤
😇😇🙏
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
Life Saver! Thanks Make!
You're welcome
Ireally love your videos and tuts, you're the best man
Happy to hear that! Thank you!
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!
you are a legend
love from Pakistan
Thank you so much❤️
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!
Thank you very much for sharing this tip. Helped me a lot! 🙏🏻
You're welcome!
Excellent tutorial. Thank you!
You're very welcome!
I make a slide width around 700 px and make slide per view 3 but when publish my slide got smaller.
Stunning as always!
Thank you!
Awesome tutorial! Thank you so much buddy
You're welcome!
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
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
Amazing
Thanks!
Thank you too!
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?
This was helpful. Thank you💪
You're welcome!
Really good toturial. Thank you.
You're welcome!
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❤
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!
Your tutorial was a life saver, thank you so much!
You're welcome!
Thanks Very helpful tutorial...
Welcome 🙏
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
could you make a fast tutorial for repeate the animation entrance in the loop carrousel / listing grid slider widget 🙏
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..
Thank you so much for this video!
You're welcome
This is awsome, thank you so much!!!
You're welcome!
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.
Damn bro saved the day, cheers, subscribe and like to 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…
Great!! Wonderful tutorial video...
Thanks a lot!
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 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.
what if i want the center slide to go bigger, in a 3 slides slider?
Great tutorial thanks!, it's possible to add Lightbox for images using this custom carousel slider?
Yes...
Very nice Content… 🎉 please make one video for Price estimate calculations like calculating transportation rate or calculation of per sqft
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????
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ó.
Amazing tutorial! Thank you so much for your work!
Very 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
Ommgg.. you are awesome 👏
Thanks a ton!
Thank you!
You're welcome!
nice work dude
Yes, Elementor Pro is needed for that too
Luv this!
Thanks TheWebStylist!
straight to the point.
🙏🙏
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.
Love you!
Thanks a lot!
Very nice brother
Thanks
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.
You are amazing
You're welcome!
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?
Thank you very much, you're good
Very 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...
the testimonial carousel is breaking. It has a scroll at the bottom of my page
How to make the carousel vertical?
You can only make horizontal slider in this way. Vertical slider is not possible with this approach.
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!
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.
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.
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
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;
}
}
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
we want to learn how to create snipet for using in elementor. thank you.
You need to learn CSS and JavaScript for that...
Thank bhi
Welcome
Awesome
Thanks a lot!
I don't see any shortcode
You probably don't have Elementor Pro
Your artist na should be "Kristal Klear" because that was what I just watched here.
🙏🙏
Footer like app
Not free
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 🤔
lets go
literally rn..
Love U bro🤍🤍
ρɾσɱσʂɱ
totally time waste that code doesn't work