Table Of Contents

Elementor Event List Widget

How to Use Elementor Event List Widget

Whether it is an online event or an offline event, we need to organize the events. If so, you’ll find our Elementor Event List Widget very helpful. I’ll include step-by-step instructions and detailed pictures to help you get started.

Step-1: Since the Event List Widget has been developed based on a 3rd party event organizer plugin. At first, you have to install and activate The Events Calendar plugin. As you can see in the screenshot above.

Elementor Event List Widget

To install and activate the plugin, simply go to the WordPress Dashboard > Plugins> Add New > then hit the Install Now, and after that Activate the WordPress event calendar widget.

N.B: In the box marked, the message is not showing because of being installed and activated earlier.

Elementor Event List Widget events

Step-2: In this step, you’ve to create events that will be shown using our widget.

To make the events, go to WordPress Dashboard > Events > Add New. See the example above.

event list widget

Step-3: Insert Event List Widget, inserting it is just a matter of drag and dropping.

As you see in the screenshot above.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the event grid.


event grid layout

In this section, you can select your desire controls and can also enable the switcher button(Yes/No) following the design you want for the Elementor Event List Widget.

You’ll be able to show your events vertically(default) and horizontally. When you’ll activate the Horizontal Layout switcher button, there will arrive Column, Column Gap, and Row Gap.

Go to the Content tab > Layout and check all the controls.


event list images

With the default size and width, this section will allow you to set the Image Size and width manually.


This section works for setting the source location of data that you need to display by the reference like Author, Categories, Tags, and Formats. The references can be different following the source location. Read more 

eventlist widget 4 - BdThemes

For example, 

A.  Go to Source ➤ next select data location( as posts, pages, etc.) 

B. Then, write the author’s name in the Author field. Similarly, in the Categories and Tags field.

C. On the other hand, select categories from the Categories field.

D. Set Start Date, End Date, and Limit.

D. Order By and Order controls are here to arrange the data you want to display through Random, Title, Event Date, or Menu order wise and also with ascending or descending order.

Style Tab

It is time to work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design. 

Styling the Elementor Event List Widget with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


Elementor Event List Widget items

This section will let you set the Background, Image, Border Box Shadow, Border Radius.

In this section in terms of the mode of Normal, you’ll get able to set Background, Image, Border Box Shadow, Border Radius. On the contrary, in the mode of hover, you’ll be able to get Background, Box Shadow.

Simply, go to the Style tab > Items.


eventlist widget 6 - BdThemes

This section will allow you to put background color with an image used in the carousel and also Padding, Margin, and Image Radius. More importantly, you have a chance to set the opacity of the image in normal mode and hover mode. Read more about padding, margin, etc. for the Elementor Event List Widget.

Just go to the Style tab > Image > and check all the controls.

Title, Date, Excerpt & Meta

eventlist widget 7 - BdThemes

In these sections, you’ll be able to set normal and hover text color, spacing, alignment, and typography. Read more about Typography.

i. Go to the Style tab > Title.
ii. Go to the Style tab > Date.
iii. Go to the Style tab > Excerpt.
iv. Go to the Style tab > Meta.

Video Assist

In conclusion, it seems that you’ve read this article and found it very useful. If you want to know more about the widget, you can watch the video on the Elementor Event List Widget by Element Pack and also go to our demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.