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.
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.
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.
Step-3: Insert Event List Widget, inserting it is just a matter of drag and dropping.
As you see in the screenshot above.
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.
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.
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
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.
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.
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.
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
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.
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.