An Elementor Carousel widget allows multiple pieces of content ( such as text, image, video, etc.) on large or small viewports to occupy a single, coveted space.
The guideline below about Carousel Slider Widget will get you to walk in the right way to use the widget developed by Element Pack.
Moreover, I’ll guide you in different phases of how you can insert & use the widgets to design layout for the content (text, image, and video, etc.) you want to work with and style as well.
Content Tab
The Content Tab having some handy sections for making an attractive web page will genuinely get you to have a structure of the web content (text, image, video, etc.).
Layout
This section will permit you to set different skins like Ramble, Alice, vertical with default skin. In addition, you’ll be able to determine column numbers, limits, and item gaps between every single item or the carousel images.
Go to the Layout section > Skin and choose any one > Columns > Limit > Item Gap.
Image
Using this section, if you have an image carousel, you can set an image thumbnail from the control Thumbnail Show and size from the Image Size ( such as thumbnail, full, etc. ) control as well as Image Ratio.
Not to enable Thumbnail Show, you’ll find a carousel without an image as you see in the second screenshot. It’s up to you.
Title, Meta & Excerpt
In the Title section, you’ll be able to show titles from h1 to h6 for the WordPress carousel plugin and also you can set div, span, and p tag.
Now, if I talk about the Meta Section, this section will permit you to show the author name, category, date, time, and comments as you see. You should remember meta is very important for SEO.
From the Excerpt section, what you can do is to set word length only for the Elementor Carousel Widget.
Readmore Button
This section here normally works to send visitors to other pages for information details. As well as you can add an icon or image with the button and button text, size.
For example, go to the Read More Button section and set an icon as you see from the icon library along with icon position and spacing of the carousel slider.
Query
This section works for setting the source location of data that you need to display by the reference like Author, Categories, Tags, and Formats. The references can be different in accordance with the source location. Read more
For example,
A. Go to Source ➤ next select data location( as posts, pages, etc.)
B. Then, write the author’s name in the Author field. Similarly, in the Categories and Tags field.
C. On the other hand, select categories from the Categories field.
D. Order By and Order controls are here to arrange the data you want to display through Random, Title, Date, or Menu order wisely and also with ascending or descending order.
Navigation
This section is a field used to control the movement of things from one place to another place for the Elementor Carousel Widget. To work with the section, just go to the controls under Navigation.
For example, Go to Navigation ( as such Arrows and Dots) ➤ Arrows Position (as such center). If you need to hide navigation symbols in mobile mode, it’s a matter of one click on the switcher.
Carousel Settings
This section will allow you to set the carousel behavior. From here, you should work mainly with Autoplay, Autoplay Speed, Pause on Hover, Center Slide, Loop, and Animation Speed.
Style Tab
It is time to work with Style Tab of the Elementor Carousel Widget. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design.
Items
In this section in Normal mode to design content, you can set the background color, box-shadow, border type with width and color, as well as border-radius and padding of the carousel slider.
Simply, go to Style > Items.
Moreover, here in Hover mode, you’ll be able to background and border color, box-shadow, and match padding to the carousel slider.
Just, come to Style > Items > Hover
Image
This section will allow you to put background color with an image used in the carousel and also padding, margin, and border-radius also. More importantly, you have a chance to set the opacity of the image background color in normal mode and hover mode.
Title, Excerpt
In these sections, you’ll be able to set normal and hover text color, spacing, alignment, and typography of the Elementor Carousel Widget.
Meta
This section will let you add Color, Hover Color, Divider Color, Spacing, Typography, and Alignment. Take a look at the image above.
Button
This section here works to design the read more button that sends visitors to other pages for information details. To design the button just go to Button to Normal and use all the controls you see there.
Similarly, go for the Hover and you can also add Animation to the carousel slider.
For adding a hover effect with animation to the button, go to Hover > Animation (like Grow, Shrink, Push, etc.).
Navigation
Using this section, with the demonstration showing in the screenshot, you can mainly design the arrows and dots. Simply go to Navigation to Arrows Size > Dots Size > Arrows Offset > Dots Offset.
Video Assist
To sum up, hopefully, you have seen what things our Elementor Carousel Widget includes. And the things will help you get started all you want. You’ll admit all are easy to handle. See the video inserted above and to get more design knowledge, hook yourself with the demo page here.
