Elementor - Create Custom Sliders with the Testimonial Carousel
HTML-код
- Опубликовано: 13 сен 2024
- This is the simple way on how to create your own custom slider using tools available for you inside of Elementor Pro.
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer....
Artists: brokeinsummer.com
Contact: brokeinsummer....
Music provided by Audio Library Plus
- Get Elementor Pro here --- trk.elementor....
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at info@websquadron.co.uk
PPPS: We only build with Elementor Pro
May God bless you for this bro. I almost cried yesterday trying to find out how to do this even with elementor pro. You deserve a big hug right now❤
Every time I get stuck with some peculiar design requirement and be like "How the hell do I do that" and then always find a tutorial out there from you - whether it be Bricks or Elementor. Thank you very much.
Superb!
Thanks for coming up with such a cool way to add some proper styling to the testimonial carousel. Love it!
Thank you. One more piece of flexibility to my dev world
Thank you so much! I tried with loop carousel from Elementor 3.11 but I can't achieve this so going back to traditional way. This has helped me a lot! :) Please create more contents like this
Will do. Keep an eye out for Monday's new Loop video.
This is gold, thanks for the tip.
Such a helpful tutorial thank you! I’ve been struggling to find a seamless way to display sliding content and this is exactly what I needed thank you 🙏
Awesome. See this video that shows how to make it seamlessly move - ruclips.net/video/xHhPM9aG-bc/видео.html
I love you so much for this, I tried for almost a month, God bless u more
Incredibly useful and easy to understand. Thank you!
just thanks
Thanks much. This is great and clear
This was a great solution... Thank you!
Thank you for this tutorial, this was a great solution
Glad it helped!! Please do share on your social media.
It is always so easy when you know how, thanks for swinging education my way :)
Great tutorial and use for testimonial carousel.
Fix for Italic text. Go to the template, select the container with the text. In the Advanced tab under Custom CSS, put this code:
selector {
font-style: normal;
}
This code is not working on my theme basically i am using hello elementor theme in my site, please suggest difrent CSS code suitable on my situation
Thanks for the video! Is there a way to accomplish this with just Elementor & not Elementor Pro? The testimonial carousel widget is a pro feature for me.
Thanks Man!
Thank you so much for this!!!!!!!!
Thanks a lot bro, you save me!
really good solution, I like it. Thank you
i created 5 templates and its working fine in Desktop view and also in mobile view but in mobile view because of it's width, navigation bar is giving trouble in Android but working fine in IOS.. and i am not able to solve this problem. please help
thank you so much! is there a way to make a hover effect for the card?
Thanks for the video, as I was wondering already, there must be a way to create a slider using testominal etc in any front end at least premium ones as I used to do it using some HTML code in Blogger decade ago, old days :), but how to add styles etc. like width and size of each testimonial, I think each style, oh got it...
Man you are insane
Wow excellent ❤️❤️
This is ingenious. Thank you
Hey i tried this and it works perfectly everywhere except on product pages bruv...
Thank you for the video!
If you want to have different quotes/content, do you need to create multiple templates?
Yes, but the new Loop Grid Carousel is better.
Just want to confirm if you want to add another feedback are you going to make another template? or just add icon in the current template.Thanks
Could add another icon, but I suggest using the 'better' nested carousel instead.
Thanks
No problem
@@websquadron quick question tho, I can't find the option of short code I'm designing my company website.
I see no category of shortcode and instance, how do i go about it?
Its great...tnx❤
Is it possible to show 10 or 20% content of 4th slider?
Let me check
@@websquadron Thanks bro
@@websquadron Bro did you checked?
@@viveknath Not got the perfect answer yet. Have you checked?
@@viveknath Not found the perfect answer yet. Have you played around with any solutions?
You saved my job
thanks so much for this video
Glad it was helpful!
I'm doing something wrong because I want to create a new one, but the main page template always appears instead of a completely blank page.
Difficult to be sure what's wrong there without a 1-2-1, sorry. Have you tried posting in the Web Squadron Facebook Group?
Thank you brother
Hello, thank you for your tutorials , I have I request, can you make a video for ( How To Customize Woo-commerce Login & Registration Form ) we need a way that we can control the design of the both forms as Elementor currently Not Control Them and Most Importantly How can we display them for separate page outside woo-commerce My Account Page like maybe in Tabs widget or something and customer redirect to my account pages after successfully login or registration. Thank u Again
Let me check on that, as editing those pages is limited.
You can modify the colours on those pages with some css.
@@websquadron yes edit color and maybe some layout of fields is easy i just need to control the display of the forms I didn't find any solution for that, it will be good if you can come with something , thank u
Amazing, how the heck can we make the center slide always slightly larger then other two ? pleaaaase.
Have you seen the new Elementor Carousel Widget that has that feature?
@@websquadronthank you. Yes, I looked again and it says the padding applies to all slides in the carousel.. strange. any tips?
Great tutorial as always! Is there a way to stop the caroussel changing the fonts of the elements though? (like the paragraph txt and text inside my buttons are being set to italic, and also a different font?)
Are you using a custom font and has it been set at italic anywhere like global typography?
Please help me, I'm a newbie, in my panel, in the templates section, the shortcode column doesn't appear so I can get this ID, where do I enable it?
Are you using EL Pro?
I might be wrong but the testimonial carrousel has been useless for me! I cant change the image position for mobile screens so the testimonial content is never clear on mobile...Am I crazy or what!??
In that scenario you need to check how it looks on the mobile view especially when using template shortcodes.
@@websquadron Thanks dude. BTW I don't mean your tutorial, I mean the widget has always looked bad on mobile unless you delete the image which kinda sucks!
Why my templates loads with sidebar when loading editor?
You need to see it in live to see it properly
just wow
1st time i found my comment value
can you please tell me how can we make it in elementor ruclips.net/video/ccO2B40zkv4/видео.html
Thank you for all your useful videos!!!
Is there a way to display images inside the loop carousel by categories? I have to put buttons above the loop carousel with the different categories. Clicking on a button/category/ the loop has to show certain images. When clicking on another button, different images have to appear. Can this be done with Elementor Pro?
Yes, you could select Categories after adding the Loop, and just make sure that Categories have an image assigned in the Categories.
@@websquadron Thanks a lot for your reply :)! I was looking for more information but it looks like it can be done for blog post categories, right? Inserting a featured image in the template.
I actually need to create a loop with logos, which to be shown in categories: Logos for Pharmacy companies, for Industry, etc. These categories are not specified anywhere in the web, the logos are just images in the media library. Can this be done?
Is there a way to change the direction going to right or in reverse?
Not with this widget.
If you use the New Nested Carousel then you can change the direction.
But imran there is a problem , i want to make a hero section slider but when i add the custom slider there, there is an unusual white space around the corners,PS, everything is full widh, can you tell me how to solve this?
You need to use the new Carousel widget and 0 the margins and padding.
@@websquadron which new carousel? I didn't understand can you elaborate
thanks i used this
Hi! I have been able to follow your direction until I get to the copy the shortcode. I do not have a shortcode category in my saved templates information. Do I need a shortcode plugin to have this category or is there a setting or is something else that I need to do?
You should see it if you have pro
Thank you
Is there a way to make it have a fade effect instead of sliding?
Interesting question. Maybe if there was another spacer on the left and right with a transparent gradient.
great
Why isnt it working for me, all i see is the shortcode after publish and i did follow exactly what you did
Try using the New Carousel now. Good luck.
@@websquadron Do you mean Loop Carousel?
my text is all stuck in italic - anyone know why?
For every page?
@@websquadron no just the content on the testimonial slider:/
you are king
do i need to create a template for EACH testimonial ? is there a way of making the content dynamic or something ??
The new carousel by Elementor removes the need for separate templates
Followed the process. However, it will not display my image. I can only see the shortcode rotating! Help
Are you viewing on live and not in the edit screen
Hey man, is there any possibilty for this carousel to have active option for objects, and can I connect them with id so when one active object is changed there, the other one changes on the other widget? thanks in advance
Unfortunately I don't look into expanding unless it's part of a 1-2-1 consultation (because I get 40+ daily requests all the time).
Why isnt it working for me, and i did follow exactly what you did, all that appears after publish is the short code
Try using the New Carousel now.
@@websquadron Do you mean Loop Carousel?
@@aLvaRo7z This is an old video, but yes I mean the Loop Carousel now
So how do I add the image and content on the template?
Use the new carousel instead
Hi Web Squadron. Can I add a URL to each testimonial so that it redirects me to another section of my page? Thanks!! =)
Yes you could apply to an entire column or container depending on how you build it.
Hi, can you tell if the text from the cards in this slider can be used for SEO on page?
Not really and as it's pulling from a template, just like how SEO in pop-up menus is not a good idea.
I was hoping you teach how to add a new custom skin, but this is a workaround, and it generates bloated code
This is an old video based on what was available then. Better to use the Elementor Nested Carousel that we've covered in many videos since.
@@websquadron ok, I will check that component
I want to check out some of your websites you created.
how to get the short code in saved templates without elementor pro
ruclips.net/video/N1gMcGx3Z_E/видео.html
This is great if you want all of your slides in the carousel to be exactly the same, not sure why anyone would want that.
It all depends on consistency. But also you could mix it up, and have videos in one, etc.
Thanks for the video. But it seems like all my content is italicized when I place the shortcode? Any idea why that is happening?
Any css or typography settings?
@@websquadron in the widget, I have not added any typography or CSS settings. In the template, I've just added basic typography tags to apply some styling.
This is an old video but in case you are still checking comments here, I have a problem where the first slide shows normally but the second and after, it is invisible, it exists but it does not show so do you by chance know why or what I need to be checking?
Is it an image or what kind of content is in the 2nd slide?
@@websquadron thank you for replying!, I’ve got 6 columns with an image box in each same in every slide
why not found? Can you help me?
But how do I add this to a page that's already created on the homepage
Just add the widget
Hi! I have a slightly blurry text on the cards. I don't like it
Not sure why you would get that unless the templates are not sized right. Have you regenerated the css?
is it possible to get a single slide to stretch to the the edge of the screen? When clicking 'stretch section with js' it breaks the slider.
In that scenario just use the Slides widget.
@@websquadron sorted, thanks
same issue with using slider. Breaks the second slide :/
HI, any idea how to get this working within a site header? It just displays the short codes. Looks like short codes don't work in the header template.
Update, fixed by using the dynamic short code section.
Just seen your next comment :)
@@websquadron absolutely love your content. Keep up the great work.
What about different content and images ?
You can mix it up with the templates
hello, did you know how to remove "italic" style from font?
If you inspect it, then you can add css to make it 'Normal'
Can you set the Testimonial Carousel with Overflow?
I tried that and it didn’t work for me
@@websquadron what code should I place to make that? 😊
Is free or we need pro
Always need Pro.
How do create a custom slide naviagtor?
The new carousel allows you to to modify the navigators
@@websquadron Yeah, but i mean, create a custom positioned navigation outside the Slider... Certain web projects require custom navigations at the top or at the side of the slider... I've been doing this using javascript and a lot of custom code... was wondering if there was a simpler way to do this... i.e create both back and forward using the button widget in a seperate container and make them able to control a slider (i do this but with a ton of Js)
Yes, the EL Nav settings allow that@@flowmaintenance
Can't reduce section size less than 500
You can type the number in and overwrite the 500.
This isnt mobile responsive for me
It will be if you style the templates to be mobile responsive before adding them
@@websquadron I have done that and my fonts are still not responsive. the only time I can make it work responsive is when I add woocommerce products as the template. When I generate my own template, the text acts a bit weird. It looks as if its going to work and then when you refresh the page, you see the text loading in my styles & size ect, but then it jumps back to the default size and styling. Every view has the same styling as the desktop view. I've been using this technique for a while with products but cant seem to get it to work properly with normal templates. I will be looking to use the loop builder from now on, but this is a very useful technique if I could get it to work for me. Many thanks for all the helpful vids btw! Great content, keep up the good work. And thanks for the reply!
I’m wondering if a font swap is occurring as for some reason the browser is loading the system defaults. This could be due to not having custom fonts or if a theme has !important within the css.
@Web Squadron I was thinking the exact same thing. I did originally think that the Blocksy theme was doing it with it's css.I tried a different theme, but my layout messed up so much that it wasn't worth the effort. Im sure you are right in what you say. Thanks so much again for your reply, I never expected a reply from yourself, I've never had one from a popular RUclipsr before. Good stuff!
hahaha, your hiar style is totaly diferent.
SHORTCOdE???? where?? this components you say doesn't EXIST!!!
Are you using Elementor Pro?
Go to Templates - copy the shortcode.
Then go to the Carousel, and paste into where you would normally add the content.
So yes it does exist.
do you just assume everyone has pro?? Call your video ELEMENTOR PRO then 99.9 percent of us are not using pro....@@websquadron
Austrian painter ahh haircut.
Good tutorial though.
My bad
Kindly Help
See my other answer :)
YOU WILL NOT SEE THE SHORT CODE IF YOU ARE NOT USING PRO. SAVED YOU FROM WASTING YOUR TIME.
The Cover Art states Elementor Pro - so you should know that it's Pro.
PS if you use the new Carousel widget you don't need to use this old method.
PPS: This is an old method in case you skipped the PS.
PPPS: There is a new carousel nested widget if you're using Flexbox Container.
PPPPS: Your Caps-Lock is stuck.
What cover art? all i see is the title that says "Elementor - Create Custom Sliders with the Testimonial Carousel"
@@websquadron
@@indiegamesonly6617 the cover art is the thumbnail. The cover art is not the title.
Wish I read your comment before attempting, already wasted my time🤣 Dunno why he didn't just literally put an extra 3 characters in the title and not just a minuscule pro symbol in the thumbnail.
Why aren’t the short codes appearing?
Check on Live and not in Edit Mode.
thanks
Its great...tnx❤