Image Carousel

Image Carousel is an effective tool for displaying information in an eye-catchy way on your website. With the Droit Elementor Addons, you can design creative images carousel and design stellar web pages. 

Video Instruction #

Using the Image Carousel  #

To use the Image Carousel and design your website creatively, follow the steps mentioned below.

Step 1 #

From the menu bar on the left-hand side, select the Image Carousel. Drag and drop the widget on the area you want it to be.

Image Carousel widget on Elementor page builder

Step 2 #

In the Content section there is a preset option. You can select the style of the slides you want to display within the carousel. You can choose from three different presets. 

You can add images to each of the slides and do basic customization from this option as well. 

Image Carousel widget's preset menu

Step 3 #

In the Content option, you can finalize the carousel type, add title, description, image and link to the slider.  

Image Carousel widget's content settings tab

Step 4 #

In this step, you can stylize the different options of the slides easily to make the presentation of your website more appealing. You can customize features such as autoplay, autoplay speed, infinite loop, slider space, slider item, MouseDrag feature and more. 

Image Carousel widget's slider option

Step 5  #

To modify the navigation settings of the image carousel, you can use this tool. You can toggle and select if you want the navigation view or not. Select the pagination from an arrow or a dot. Select carousel changing style, background color, border and more. 

Image Carousel widget's navigation settings

Step 6  #

From the Style option, you can customize and edit the general elements and content of the image carousel. 

Image Carousel widget's style menu

In the general section, you can customize the color of the shadow. Along with that, you can give input regarding how the shadow will appear. You can edit the shadow vertically or horizontally. Pick how blurriness of the shadow and duration. You can also pick if you want the shadow to be outlined or inset. 

Image Carousel widget's general style settings tab

In the content section, you can customize the typography of the content. Select font type, font size, style, decoration and more. 

Image Carousel widget's content style settings tab

Step 7  #

In the Advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more. 

Image Carousel widget's advanced settings tab

You will also get the chance to edit and customize the following options: Motion Effects, Background, Border, Positioning, Responsive, Attributes, Custom CSS. 

Motion Effects #

From the Motion Effects option, you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention-seeking motion, lightspeed, and more effects to make your widget look different. 

Image Carousel widget's motion effects settings tab

Background #

If you want to customize the background with specific color, gradient, or images, you can do that from the advanced settings as well. 

Image Carousel widget's background settings tab

Border  #

If you want to add any line, box, dots and other design variations as borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Image Carousel widget's border settings tab

Positioning #

This feature will allow you to fix the positioning of the widget. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings.


Image Carousel widget's positioning settings tab

Responsive #

You can check the responsiveness of the widget if you toggle through the available options. However, the change of the widget will be only visible on the live page or preview, not in the Elementor.

Image Carousel widget's responsive settings tab

Attributes #

With Attributes, you can add custom HTML attributes to any elements. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons.  

These are the different tools and options you can use to create an Image Carousel t on your website with Droit Elementor Addons.

Powered by BetterDocs