How to Add an Elementor Loop Carousel to Your Website in 5 Easy Steps

What is Elementor's new loop carousel widget?

Elementor’s Loop Carousel Widget lets you display content in a dynamic and eye-catching way on your website.

Elementor’s new Loop Carousel Widget offers a dynamic and visually appealing way for website owners to showcase their content. This powerful tool allows for the continuous looping display of posts, custom posts, or products, providing a seamless scrolling experience for users without requiring navigation to different pages.

Key Benefits of the Loop Carousel Widget:

• Versatility: Whether it’s blog posts, product listings, portfolio pieces, or more, the Loop Carousel can handle a wide range of content. It supports various display formats such as grid, list, and slider, and allows for customization of layout, colours, and typography to align with your site’s branding.
• User-Friendly: The widget is designed for ease of use. With a simple drag-and-drop action in the Elementor interface, you can quickly set up your carousel without any need for coding. This is ideal for website owners who prefer a hands-on approach but lack technical skills.
• Enhanced User Engagement: By organizing content in an attractive, interactive carousel, you can improve the discoverability of your offerings, encouraging more user interaction. This can lead to higher engagement rates and increased conversions, from sales to newsletter sign-ups.

How to create and customize loop carousels in 5 Steps

Step 1: Install and activate Elementor

To begin creating and customizing a loop carousel with Elementor’s Loop Carousel widget, you’ll need to have Elementor and Elementor Pro installed and activated on your WordPress site. If you need a detailed guide, you check our article on how to install and activate Elementor.

Step 2: Add the loop carousel widget

After installing Elementor, you can add and customize the Loop Carousel widget on your WordPress page.

After installing and activating Elementor on your WordPress site, you can begin adding and customizing the Loop Carousel widget on your page.

Here’s how to add the Loop Carousel widget:

1. Open your page in Elementor:
   • Navigate to the page where you want to add the loop carousel and click on Edit with Elementor.
2. Locate the loop carousel widget:
   • In the Elementor editor, use the widget panel on the left-hand side to find the Loop Carousel widget. You can quickly locate it by typing “Loop Carousel” into the search bar or by browsing through the appropriate category, often found under Posts or Sliders.
3. Add the widget:
   • Drag the Loop Carousel widget from the panel and drop it onto the desired area of your page in the Elementor canvas.

Step 3: Adjust the loop carousel widget to match your needs

After adding the Loop Carousel widget to your Elementor page, the next step is to fine-tune the widget settings to match your specific requirements.

Adjusting the layout

Choose and edit the layout for your carousel by selecting ‘Edit Layout’ in the Loop Carousel settings.

• Start by choosing the layout for your carousel. You can edit the default layout or design a custom one by selecting the Edit Layout option in the Loop Carousel settings panel. In this blog, we will choose a default layout.
• This takes you to a customization screen where you can choose components like Title, Featured Image, Excerpt, and MetaData. Drag these elements onto the canvas to design your layout.

• Adjust the width, height, and spacing of each section to achieve the desired appearance for your carousel.

Setting the query criteria

Customize your carousel by setting the query criteria to fit your needs.

Here’s how you can tailor the query to meet your specific needs:

1. Access the query section:
   • Expand the Query section within the Loop Carousel settings to start customizing which items to display.
2. Choose content types:
   • Use the dropdown menu to select the type of content you want to loop through. Options include:
     • Posts
     • Pages
     • Landing Pages
     • Manual Selection: Handpick specific items.
     • Current Query: Use the current page query.
     • Related: Display items from the same category.
3. Filter by date:
   • You might want to display only recent items. Use the dropdown to filter content by:
     • Past Day
     • Past Week
     • Past Month
     • Past Quarter
     • Past Year
     • Custom Date Range: Specify a start and end date.
4. Order by:
   • Ordering your items can impact visibility and engagement. Choose how to sort the items:
     • Date
     • Title
     • Menu Order
     • Last Modified
     • Number of Comments
     • Random: Display items in a random order.
5. Set the order direction:
   • Decide whether items should be shown in descending or ascending order to further refine how visitors view your loop.
6. Ignore sticky posts:
   • If you don’t want sticky posts to be fixed at the top of your loop, toggle this setting to No. This option is effective only when you preview the page.
7. Assign a query ID:
   • Assigning an ID to your query allows for easier backend filtering and management. This can be especially useful for larger sites with multiple queries.

The content tab – settings

Adjust settings in the Content tab to customize how your Loop Carousel behaves.

Adjust your settings as detailed below to tailor the Loop Carousel’s behavior to your needs:

Expand the settings section:

1. Autoplay:
   • Toggle this setting to decide if the items in the carousel should move automatically or only when a visitor interacts with the navigation icons.
   • If autoplay is turned off, you’ll have additional options to:
     • Enable infinite scrolling for continuous loop movement.
     • Set the transition time between items, enhancing the fluidity of item scrolling.
     • Choose the scroll direction: left-to-right or right-to-left, which affects the navigation controls.
2. Scroll speed:
   • Adjust the speed at which your carousel moves when autoplay is enabled. Speed is measured in milliseconds.
3. Pause on hover:
   • Enable this feature to allow users to pause the carousel when they hover over it. This is useful for giving visitors a chance to engage with the content more interactively.
4. Pause on interaction:
   • Similar to pause on hover, this setting lets users stop the carousel movement when they interact with it, such as clicking or touching.
5. Infinite scroll:
   • Activate infinite scroll to allow the carousel to loop continuously without stopping, creating a seamless experience.
6. Transition duration (ms):
   • Specify how long it takes for the carousel to move from one item to the next. This is also measured in milliseconds and controls the speed of the transition.
7. Direction:
   • Set the direction of item movement in the carousel, either from left-to-right or right-to-left. This setting determines the navigation flow and can be tailored to fit the design and readability of your site.

The content tab – navigation

Adjust carousel navigation settings in Elementor by going to the Content tab and selecting Navigation.

To adjust navigation for the carousel in Elementor, follow these steps detailed below:

Expand the navigation section:

Here you can adjust how visitors interact with the carousel’s navigation elements.

1. Arrows:
   • Arrows are typically used for navigating to previous and next slides.
   • You have the option to disable arrows by toggling the corresponding button off if you prefer a cleaner look or different navigation style.
2. Previous Icon:
   • Default: An arrow icon is used to navigate to the previous slide.
   • Customization Options:
     • Choose to display no icon.
     • Upload a custom SVG file (ensure SVG support is enabled in your settings).
     • Select an icon from the built-in icon library to replace the default arrow.
   • Horizontal Orientation: Position the icon at the start, center, or end of the carousel.
   • Vertical Orientation: Position the icon at the top, middle, or bottom of the carousel.
   • Position Adjustment: Use a slider to fine-tune the placement of the icon.
3. Next Icon:
   • Similar to the previous icon, but for navigating to the next slide.
   • Customization Options:
     • Choose not to use any icon.
     • Upload an SVG file for a custom look.
     • Pick an icon from the icon library.
   • Position Adjustment: Utilize the slider to precisely position the next navigation icon according to your design needs.

The content tab – pagination

Configure pagination settings in Elementor’s Loop Carousel to improve user navigation by adjusting options in the Content tab.

To enhance user navigation within your Elementor Loop Carousel, configuring the pagination settings is essential. Here’s how to set up pagination to show users their progress through the carousel:

Configuring pagination options

1. Pagination Type: Choose the type of pagination that best fits the style and functionality of your carousel. You have three options:

• Dots: Each dot represents a different page within the carousel. This is visually minimalist and effective for carousels with fewer items.
• Fractions: Use numbers to indicate the current page relative to the total number of pages (e.g., 1/5). This method is straightforward and provides clear numeric feedback.
• Progress Bar: Displays a bar that fills as the user progresses through the carousel. This is visually engaging and provides a dynamic sense of completion as users navigate through the items.

The style tab – layout

Adjust spacing in Elementor’s Loop Carousel by editing the layout settings under the Style tab to optimize the design.

To optimize the spacing within your Elementor Loop Carousel, adjust the layout settings as follows:

Adjusting carousel layout

1. Gap Between Slides:
   • Setting the Gap: Specify the amount of space between each item in your carousel. This setting helps to visually separate the items, making the carousel easier to navigate and more aesthetically pleasing.

The style tab – navigation

To style navigation icons in your Loop Carousel, adjust the settings in the Style tab for a better look and integration.

To ensure your navigation icons are effectively integrated and visually appealing within your Loop Carousel, adjust their size, colour, and position as follows:

Configuring navigation icons

1. Expand the Navigation Section: Here you will find settings specifically tailored for adjusting the navigation icons of your carousel.

2.Size of Icons: Adjust the size of the navigation icons to ensure they are clearly visible but not overpowering. You can learn more about the different units of measurement (like px, em, %) to use the most appropriate one for consistent scaling across devices.

3.Normal/Hover States:

• Normal State: adjust how the icons look by default.
• Hover State: Define how the icons change when a user hovers over them with their mouse. This interaction can help to enhance user experience by providing visual feedback.

4. Colour of Icons: Set the colour of your navigation icons. You can choose a specific colour or utilize global settings to ensure consistency with your site’s branding.

5. Position of Icons:

• Inside: Placing the icons inside the carousel makes them integral to the loop elements, seamlessly blending them with the content.
• Outside: Setting the icons outside the carousel elements can help them stand out more and can be useful if the carousel is dense with content.

The style tab – pagination

To improve pagination in your Loop Carousel, adjust its appearance in the Style tab for better user navigation and interaction.

Optimizing the appearance of pagination in your Elementor Loop Carousel is crucial for enhancing user navigation and interaction. Here’s how to adjust pagination settings based on the style you choose:

Configuring Pagination Settings

1. Expand the Pagination Section: Access the pagination options by navigating to this section within the Elementor editor.

Pagination by Dots

• Size: Adjust the size of the pagination dots. Understanding units of measurement will help in making precise adjustments.
• Normal/Hover states:
  • Normal: Set the default appearance of the dots.
  • Hover: Define how dots change when hovered over with a mouse.
• Colour: Customize the colour of the dots to match your design theme.
• Position:
  • Inside: Integrates the dots within the loop carousel.
  • Outside: Place the dots outside the carousel, where you can adjust the spacing between the carousel and the dots.
• Spacing: Modify the space between the loop items and the pagination dots to avoid clutter and enhance readability.

Pagination by fraction

• Typography: Select the font style for the fraction numbers, enhancing readability and style.
• Colour: Choose a colour for the numbers to ensure they stand out or blend with your theme.
• Position:
  • Inside: Incorporates the fraction within the carousel.
  • Outside: Sets the fraction outside the carousel, with adjustable spacing.
• Spacing: Adjust the space between loop items and the fraction to maintain a balanced layout.

Progress Bar

• Control the distance: Set the space between the carousel content and the progress bar to avoid overlapping or crowding.
• Normal/Hover states:
  • Normal: Decide the default colour of the progress bar.
  • Hover: Change the colour of the progress bar when hovered over, providing visual feedback.

Step 4: Customize the loop carousel widget

Customize the Loop Carousel widget in Elementor to match your website’s design and branding after setting it up.

After setting up the Loop Carousel widget in Elementor, you can personalize it to align with your website’s design and branding. Here’s a detailed guide on the styling options you can do:

Layout customization

• Width and height: Adjust these to fit the carousel into your web page effectively.
• Alignment and position: Set how content is aligned within each slide, enhancing visual harmony.
• Spacing and padding: Modify the spacing between slides and the padding within sections to achieve a clean layout.
• Border radius: Round the corners of your carousel to match your design aesthetic.

Motion Effects

• Parallax and scrolling effects: Apply vertical or horizontal scrolling effects and parallax to make the carousel more interactive.
• Mouse move: This effect allows the carousel to react to mouse movements, adding a layer of engagement.

Transform options

• Rotate, scale, skew, translate: Utilize these tools to add dynamic shapes and movements to the carousel, giving it a distinctive appearance.

Background customization

• Colour, gradient, image, video: Choose a suitable background that complements the content. Adjust the opacity and blend mode for seamless integration.

Border settings

• Type, colour, width: Define the border’s appearance to distinguish the carousel or to tie it into the overall site design.

Mask application

• Shape, image, gradient: Masks can add creative visual effects to your carousel, drawing attention to the featured content.

Responsive settings

• Adjustments for tablet, mobile, and desktop: Ensure the carousel is visually appealing and functional across all devices by tweaking these settings.

Additional attributes

• Custom HTML and CSS: Enhance the functionality or aesthetic beyond Elementor’s default capabilities by adding custom code.

Custom CSS

• Further styling: For intricate styling that is not achievable through standard settings, apply custom CSS. This allows for precise control over the carousel’s design.

Step 5: Preview and publish

After customizing your Loop Carousel widget in Elementor, it’s important to preview your design to ensure it appears as expected across different devices.

Previewing your design:

Click the “Preview” button located at the bottom left of the Elementor editor. This action opens a new window allowing you to view how the Loop Carousel appears on desktop, tablet, and mobile devices.
This step is vital for confirming that all elements align correctly, function as intended, and provide a seamless user experience on all platforms.

Publishing your loop carousel:

• If the preview meets your expectations, you can proceed to publish your design. To do this, click the “Publish” button, also found at the bottom left of the Elementor editor.
• You’ll see several publishing options that allow you to control the visibility of your widget. Options include whether to make changes globally (across the entire site) or apply them to the current page only.
• After setting your preferences, click “Publish” to make your Loop Carousel widget live on your website.

Now you know how to add a loop carousel!

And there you have it—a straightforward, five-step process to adding a loop carousel to your Elementor website. This engaging feature not only enhances the visual appeal of your site but also provides an animated way to present multiple items in a seamless and interactive format. By following these easy steps, you can integrate a carousel that continually cycles through content, keeping your visitors engaged and interested.

Now that you know how to add a loop carousel to your Elementor website, do you find maintaining and optimizing your site can be time-consuming? If yes, this is where we can help! Let us take care of optimizing your website, allowing you to focus on the things you love—like creating content or growing your business.

Our team of experts will make sure that your website is not only visually appealing but also optimized for performance and user experience. Contact us today!