How to Add Image Carousel in WordPress With Elementor
Articles Blog

How to Add Image Carousel in WordPress With Elementor

August 16, 2019


– [Instructor] Hey guys,
this is Nila from Elementor. Today we’ll go over the
image carousel widget. With it you can add interesting
and dynamic galleries to your page. As you can see on this page, we have a gallery image carousel, a three column carousel, and a logo strip carousel. To begin, let’s click on the
Edit with Elementor button. First, let’s search for the
widget in the search bar, and drag it to where the
blue line is displayed. Now once the widget is placed, you’ll see the Edit Image Carousel area with the content, style, and advanced tab. In the content area, you have full control over the image carousel contents. In the content area, you have
the image carousel options and additional options. In the image carousel
options, you can add images from the media library
using a WordPress gallery. So you can see the images
are now displayed on the page and we have image size. The image sizes that are listed here are the image sizes that
you set for your website under Settings>Media. So here we have thumbnail,
medium, medium large, large, full, and customize. Now if we customize
it, you can set a width and a height, apply it. Now you could choose the slides to show. Let’s pick one. Image stretch, which means
stretching the image out in the widget. Navigation. You can choose whether to
display the arrows and dots, or only arrows, only dots, or none, and you could add a link to the carousel. You could choose media file link, which links every image to its media file, or custom URL. Those were the image carousel options. We’ll move on to the additional options, where you could choose
whether to pause on hover or autoplay when you enter the page, whether it starts playing on itself, and you have autoplay
speed, infinite loop, effects, as slide or
fade, animation speed, or direction in which it will play. All right. Those were the contents
options of the image carousel. Now we’ll move on to the style options. Here you have full control
over the navigation styles and the image styles. Under navigation styles, you
could set the arrow styles and the dot styles. Under the arrow styles
options, you could choose the arrow’s position, inside the carousel, or outside it, and you could choose the arrow size, and its color. Under the dot style options,
you have the same options of dot’s position, which
means outside the carousel or inside the carousel, and the dot’s size, and its color. Now for the image style options. You have a border type. Here you could choose the
type of border for your image, and its width, which gives a very cool
touch to your carousel, and its color, and the border radius. Let’s give it 20. As you can see, it’s rounded
the corners of the carousel. Those were the style options
of the image carousel. And now I’ll show you
how to set a carousel of three columns. First, let’s search for the widget again, and drag it into the page. Let’s insert those images, and set their size. Now for slides to show,
we’ll leave it at three, slides to scroll, we’ll give it one. For image stretch, we’ll leave it at no. And navigation, we’ll leave
both the arrows and the dots. Now I’ll show you how
to set a bigger space between the images. We’ll just go over to the style tab, image style options, and here you can see that the spacing option is added. Here you have the defaults, or customize. The customize always opens at 20, but you could set a bigger space, or a smaller one. And now I’ll just give them
a bit of border radius. Let’s put it in preview mode, and here we go. I hope you enjoyed this video. For more videos and tutorials, subscribe to our YouTube channel or visit us as docs.elementor.com.

Only registered users can comment.

  1. I think it would be useful to do a tutorial where at least one whole page is built using Elementor. Where sections , columns etc are explained in detail.

  2. amazing — I have thrown out the book and started all over again!!! – so easy to use – and fast design work turn around…..

  3. Thank you so much for the tutorial. I am unable to make the image carousel responsive. A part of the image gets cut off if I use a single image in full size. Can you let me know what I am doing wrong or how it can be resolved. @elementor

  4. I'd like to also have my carousel rotating on mobile, but I can't seem to get them to show up the proper size. Instead, they're appearing really really small. 🙁 Can you create a tutorial for that?

  5. Great instructional demo. Is there a lightbox feature in elementor pro? I have thrown out Essential Grid because of it's heavy processor requirements. You put more than 50 images in a grid and it will totally bog down your dashboard. But I did like the lightbox popup with arrows where the user could peruse the larger images without having to go back and view each image one at a time.

  6. Is there a way to make same height justified with width variations? Also it would be nice to have a slider bard on bottom instead of dots.

  7. Hi, i cant seem to solve the problem with lightbox in carrousel, it always shows the same image…i´m doing something wrong or is a issue you need to fix?

  8. I have images of all different sizes that I am trying to display correctly in a slideshow. I've tried doing a custom sized image slideshow and resizing all the photos to a similar image size as the slideshow custom setting. For some reason, the photos are still not displaying or resizing correctly. Is there a better way for me to do it?

  9. i can´t see the images in lightbox,. In Elementor Page Builder, i dont have any errors, all images show and go in and out ok, but not in page main view.

  10. East or west elementor is best. Nice tut.
    Please share some seminar booking and user resgistar and login system in wordpress..

  11. I just wish there was an option to show the images Title & Caption.. and either on or BELOW! the images in a text area.

  12. Very good tutorial, however can you add the carousel to an existing web page with images already there, or do you have to start from fresh

  13. Good grief, all you're doing is showing the options with very little explanation. You might want to take time to actually explain the options..like for example, Automation Speed and Animation Speed. I didn't find this particularly helpful.

  14. Noah thank you so much. You are wonderful! In fact you’re the only reason why I’m in love with elementor because you are always there to help . Thank you so much. Keep giving us useful hints . You are truly appreciated. I’ve subscribed to your channel. Thank you !

  15. Thank you so much. I must say Elementor is one of the most amazing plugins ever and I am so loving it. Thanks again for this vid, it was exactly what I was looking for.

  16. i want to know that how to remove the grayish effect from the carousel….My images have the grayish color and when i hover it shows its orignal colors….i want to show its orignal colors…thanks

  17. can you set image slide with width fix? So, assume that the width template can contain 2 and half image. Bcoz for me it's important that the visitor know the image was slider. i think your plugin cant do that, need custom css?

  18. Hey how can I set the image to "cover" the whole slider? When at a certain width (like widescreen) it cuts off the image. How to make it more responsive?
    aka
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

  19. You guys really get on my nerves Its bad enough None of you answer questions in the comment section Its bad enough you hide from taking responsibility of your product behind a ticket system instead of a phone callor at least email If you guys dont help t/s the free stuff ill be damned if i pay for anything Most of yall ASSume people know how to do stuff instead of starting from basics I do not see that on my screen I have had a horrible time trying to add my own pages for vids, blogs etc I wont recommend this to anyone in fact I'll be sure to blog about how worthless elementor is

  20. I want a simple scroll box I can add widgets to. Page stays static, only my widgets move vertically in rolodex fashion. Is there a remedy?

  21. the arrows' positions are always not synmetric in my website, maybe there is something wrong with size adjustment(the problem does not appear in this video) and i don't know how to fix that

Leave a Reply

Your email address will not be published. Required fields are marked *