Event Slider

Before setting up the Event Slider, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Event Slider—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Event Slider widget in Elementor displays events in a dynamic slider with customizable design, showing dates, descriptions, and images.

Key Use Cases for the Event Slider in Elementor:

• Use the Event Slider widget to showcase upcoming events in a dynamic, sliding format.
• Customize the design, transitions, and content to display event details like dates, descriptions, and images, ensuring an engaging and interactive user experience.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Event Slider Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Event Slider Widget in the list.
• Toggle it on to enable the widget.
• Now, the Event Slider Widget is ready to use!

How to Add Event Slider Widget in Elementor

1. Open the page where you want to add the Event Slider.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Event Slider.“
4. Drag the Event Slider widget to your desired section.
5. The Event Slider widget will now be available for customization.

How to Configure the Event Slider Widget

• In the Elementor panel, search for the “Event Slider Widget.”
• Drag and drop the widget into the desired section.
• Customize the event slider settings using the available options in the Elementor panel.

Your Event Slider Widget is now ready to use! Here’s the interface where you can configure the settings and personalize the slider for a dynamic and engaging event showcase.

Configuring Event Slider Widget : A Step-by-Step Guide

Once the Event Slider widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

You will find only three options there – Event Slider, Button and Slider Option.

Event Slider

• The Slider Option settings include – Event Style,Events item, choose image,name,date and description.

• The Slider Option settings provide various customization options to enhance your design. For the Event Style settings, follow these steps:

1. Event Item: Choose the event or item you want to customize. Each event will have its own unique settings.
2. Choose Image: Select an image for the event that visually represents it.
3. Name: Add the name or title of the event to make it easily identifiable.
4. Date: Set the date of the event to inform your audience about when it will occur.
5. Description: Provide a brief description of the event so users understand the details and what to expect.

Button

• The Button Section offers a variety of customization options to help you design visually appealing and interactive buttons. Below is a detailed explanation of each setting:

1. Style

Defines the default appearance of the button. You can customize:

• Background color
• Text color
• Border style
• Typography
• Padding & Margin

This allows you to align the button design with your website’s branding.

2. Hover Style

Controls the button’s appearance when a user hovers over it. You can configure:

Hover Style Categories

Within the Hover Style option, you’ll find a variety of pre-designed hover animation categories to enhance user interaction and visual appeal. These styles provide dynamic effects when users hover over the button.

Here are some of the available hover style categories:

• Divided – Splits the button visually during hover for a modern effect.
• Cross – Displays a cross-patterned hover animation.
• Cropping – Creates a crop-like visual transition on hover.
• Rollover Top – Applies a slide effect from the top of the button.
• Rollover Left – Slides the hover effect in from the left side.
• Parallel Border – Highlights the button with animated parallel borders.
• Rollover Cross – Combines rollover motion with a cross-direction animation.

These options are designed to give your buttons a unique and interactive feel. You can experiment with each style to find the one that best suits your design needs.

3. Text

Specifies the label displayed on the button. It should be clear and action-oriented (e.g., “Read More”, “Buy Now”).

4. Icon

Enables you to add an icon to the button from a predefined icon library. Icons enhance visual context and user comprehension.

5. Icon Position

Determines where the icon will appear in relation to the text. You can choose:

• Before the text
• After the text

This ensures better alignment based on design preferences.

6. Direction

Controls the layout direction of the icon and text. Options include:

• Row (default) – icon and text appear side-by-side.
• Column – icon appears above or below the text.

This is useful for different layout styles, especially in vertical designs.

7. Icon Spacing

Adjusts the space between the icon and the button text. You can define precise spacing to maintain visual balance and clarity.

Slider Option

The Slider Options panel provides comprehensive control over the behavior, design, and navigation of your slider. Below is a detailed explanation of each setting available:

1. Slider Styles

Choose from 10 unique slider styles to control the overall look and layout of your slider. Each style comes with a predefined design configuration that can be further customized.

2. Autoplay Button

Enables a play/pause button for the slider, allowing users to manually control autoplay functionality.

3. Autoplay Delay

Specifies the time interval (in milliseconds) between automatic slide transitions.
Example: Setting it to 3000ms results in a 3-second delay between slides.

4. Autoplay Interaction

Determines whether autoplay will pause on user interaction (e.g., mouse hover or touch).

• Enabled: Autoplay pauses when the user interacts.
• Disabled: Autoplay continues regardless of user interaction.
  

5. Allow Touch Move

Enables swipe functionality on touch devices.

• Useful for enhancing mobile responsiveness and user experience.

6. Loop

Allows the slider to loop continuously from the last slide back to the first, creating a seamless carousel effect.

7. Mousewheel Control

Enables users to navigate through slides using the mouse wheel — particularly useful for full-page slider experiences.

8. Animation Speed

Controls the transition speed (in milliseconds) between slides.
Example: A setting of 500ms results in a half-second slide animation.

9. Space Between

Sets the amount of spacing (in pixels) between each slide. This helps manage layout density and visual clarity.

10. Navigation

Enables or disables navigation arrows (previous and next) on the slider.

• Enabled: Users can manually switch slides using arrows.
• Disabled: Arrows are hidden.

11. Previous Arrow Icon

Select a custom icon for the previous navigation arrow, allowing alignment with your site’s theme or style.

12. Next Arrow Icon

Select a custom icon for the next navigation arrow, similar to the previous arrow setting.

13. Pagination

Displays pagination indicators (e.g., dots or progress bars) to show the current slide position within the total slides.

14. Pagination Type

Choose the style of pagination, such as:

• Bullets
• Fraction
• Progress Bar Each type offers a different visual representation of the slider’s progress.

15. Direction

Defines the slide transition direction:

• Left to Right (default for horizontal sliders)
• Right to Left (ideal for RTL languages or custom flows)

Style Settings

Once your Event Slider Widget is added and configured, the next step is to enhance the visual presentation of your content. 

Images

This section lets you style the event image for a polished and responsive visual display.

• Size: Adjust the image dimensions to maintain consistency across all event slides.
• Border Type: Select a border style (solid, dashed, dotted, etc.) to enhance the image frame.
• Border Radius: Define the roundness of the image corners for a smooth or sharp look, depending on your design needs.

These settings allow you to present your event images in a visually consistent and attractive manner.

Content

Customize the container that holds the title, description, and other event information.

• Background Type: Choose a solid color, gradient, or image background to enhance visual depth.
• Padding: Control the inner spacing between the content and the container’s edges for better alignment and spacing.
• Margin: Adjust the outer spacing around the content area to create breathing space from other elements.

Individual Text Elements within Content:

• Title
  
  • Color: Set the text color to match your brand or design palette.
  • Typography: Customize font family, size, weight, line height, and letter spacing.
  • Margin: Fine-tune spacing above and below the title for visual balance.
    
• Date
  
  • Color: Define the date’s text color for clarity and emphasis.
  • Typography: Adjust typography settings to match your style guide.
  • Margin: Set spacing to separate the date from surrounding elements.

• Description
  
  • Color: Control the description text color for optimal readability.
  • Typography: Modify font details to ensure legibility and aesthetic harmony.
  • Margin: Adjust spacing around the description to maintain layout consistency.

Button

Customize the action button within the slider for a compelling call-to-action.

• Adjust text styling, padding, border, colors, hover effects, icon settings, and spacing to create a visually engaging and functional button.

 Slider Navigation

This section lets you personalize the Previous and Next arrows.

• Customize icon styles, size, color, background, positioning, and hover effects to align with your design aesthetic.

Pagination

Configure the look of pagination elements such as dots or progress bars.

• Control shape, size, color, spacing, and active/hover states to ensure intuitive navigation across slides.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Event Slider widget in Elementor to create dynamic and engaging event displays on your website.

For any further assistance or inquiries, feel free to contact our support team!