Event Slider

Introduction

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

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 an Event Slider widget ?

To activate the Event Slider widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Event Slider widget in the list.
3. Toggle it on to enable the widget.

This will activate the Event Slider widget for you 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

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

Here’s the interface where you can configure the settings and customize the Event Slider Widget across various tabs. 

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.

I’m just adjusting all of them according to my preferences. You can do the same according to yours. 

Similarly, apply the same adjustments to the other items, and feel free to add more items if needed.

Button

• Let’s recreate the button for our design. I have selected the underline style, set the text, added an icon, and adjusted the icon’s position. 

• Didn’t use the direction as it doesn’t seem necessary for my design and I also set the icon space. That’s all!

Slider Option

I made a small adjustment as it suits my design better. There are plenty of settings available for customization. Move forward with these changes and see how they enhance the design!

I have designed my layout using the selected tools for the Event Slider. You can make all the necessary adjustments and apply the same changes to see how they affect the design.

Style Settings

Now, it’s time to enhance your Event Images, Title, Description, Button, and Navigation by styling them according to your design preferences, creating an engaging and smooth user experience.

Image

I’ve made all the necessary changes to my design’s image, and you can easily make adjustments yourself using the other settings.

Content

• I have made slight adjustments to my content section, including padding and margin changes. 

• I made similar adjustments to the button section as well. 

Slider Navigation and Pagination

• I didn’t make any changes to these two options as I felt they weren’t needed for my design. However, feel free to proceed with your adjustments, check all the sections, and notice any changes you want to make.

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!