How To Use DeCarousel

Table of contents


There are several types of carousels that can be used with DeCarousel. These types include Horizontal, Vertical, and Tab. We recommend using the Hello Elementor theme for optimal results. The plugins used in this tutorial are:

  • DethemeKit for Elementor
  • Elementor
  • Elementor Pro (optional)

Creating Carousel Content Templates

Before starting to create a DeCarousel, you need to create or provide some carousel templates as carousel content.

  1. Go to Templates > Saved Templates, click Add New button 
  2. Select Section for the template type, then give the template name, for example, Carousel 1, Carousel 2, etc, and click Create Template 
  3. You can choose a template from the library or create a new template yourself (by clicking on the "X" icon in the top right corner) 

How to Make a Horizontal DeCarousel

  1. Go to the page where the DeCarousel will be created, then add a new Section
  2. Choose the column structure you need, in the example below, three columns are used because there are 3 carousel content templates. These columns can also function like vertical tabs later 
  3. Then add one more new section

  4. Then select the single column structure where the Carousel will be displayed

  5.  Then set DeCarousel's name to "DeCarousel 1", then select the carousel content template to display

  6.  Disable Dots and Arrows if not needed (optional)

  7.  Edit the top section, then go to the Advanced tab, then go to the DeCarousel Navigation Wrapper section, then select DeCarousel 1 on the DeCarousel Target, and then activate the Cursor to Pointer

  8.  Then select the first column in the top section, then open the Advanced tab, then go to the DeCarousel Navigation Item section, then set DeCarousel Target, Active Tab, etc.

  9.  We recommend using the Icon Box widget in each column at the top for better results. But you can also use other widgets as needed.

  10. Edit the Icon Box according to your needs, DeCarousel should work 


How to Make a Vertical DeCarousel

  1. Since multiple DeCarousel widgets can be run simultaneously on one page (up to 4), then next, a Vertical DeCarousel will be created. Click Add New Section

  2.  Then choose a two-column structure

  3.  Then add the DeCarousel widget in the first column

  4. Then set DeCarousel's name to "DeCarousel 2", then select the carousel content template to display. Disable Dots and Arrows if not needed

  5.  Unlike the Horizontal DeCarousel, the Vertical DeCarousel needs an inner section to work. Add an Inner Section in the second column

  6.  Since we only need one column in one inner section, then the second column should be deleted

  7.  Then set the target of the Inner Section to "DeCarousel 2"

  8. Duplicate the inner column according to the number of carousel content templates 

  9.  Then add an Icon Box to each Inner Column

  10. Then set Default Active Tab 2 at the top Inner Section, and then add the desired style, DeCarousel should work. (Note: the preview in the editor sometimes doesn't work, to see the styles work you need to look from the frontend)