Table Of Contents

Event Grid Widget

How to Use Event Grid Widget

The guideline below about the Event Grid Widget will get you to walk in the right way to use the widget developed by Element Pack

An event is an activity for a special purpose and generally involving a lot of people, for example, a meeting, party, trade show, or conference. Using the widget I’m talking about here, you’ll be able to run your event on the online world.

Moreover, I’ll guide you in different phases of how you can insert & use the widgets to design layout for the content (text, image, and video, etc.) you want to work with and style as well.

Content Tab

To design the content layout of the Event Grid Widget, you’ve to mainly work with the Content Tab. The tab having some handy sections for making an attractive web page will genuinely get you to have a structure of the web content (text, image, video, etc.).


From this section, you’ll be allowed to edit or select all the controls and can also enable the switcher button(Yes/No) in accordance with the design you think.

Event Grid Widget lauout

Go to the Layout section. With the default functions, if you need to use another function, you have to activate them.

event calendar widget switchers

If you want to have an event calendar design without an image, possible to just go to Layout > and deactivate the Show Image switcher button, thus go for other switchers such as Show Title, Date, Excerpt, Length, Meta, Cost, Website, Location.

skins settings of the Elementor grid widget

From the skin controls, if you want to use alternative options for the Event Grid Widget rather than the default value, you can do so.

For instance, Skin > Acara or Annal. It is an important thing that you’ll be able to set the column number and along with the gap between the columns and rows simply going to the Columns, Column Gap, and Row Gap control.


eventgrid widget shot 4 - BdThemes

This section is all about image. Through this section here you’ll be able to set the size of the images and along the width.

Just come to Image > Image Size > Image Width


Event Grid Widget query

Go to the Query section. The 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 in accordance with the source location for the Event Grid Widget. Read more


eventgrid widget shot 7 - BdThemes

With the default options, if you are to use others, you have to just select them. For example, here is Source control to select any specific options such as Manual Selection. Thus, you can go for other controls like Categories, Start Date, End Date, Limit, Order by, Order.

Order By and Order controls are here to arrange the data you wanna display through Title, Event Date, Category, or Random wise and also with ascending or descending order for the event calendar.

eventgrid widget shot 6 - BdThemes

If you want to set event starting or ending dates routinely then you can use Start & End Date controls.

Style Tab

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

Let’s have a look.


elementor grid items

Through this section, you can set the background and border types with width and color, more importantly, border radius, and content padding in Normal mode. So, simply keep your eyes on the screenshot above.

eventgrid widget shot 9 - BdThemes

On the contrary in the Hover mode, you’ll be able to put background color and box-shadow.


eventgrid style shot 3 - BdThemes

In this section, there is nothing else about padding, margin, image -radius, opacity, and hover opacity. It’s super easy. Just follow the instructions as seen on the screenshot and compare the second image with the first one.

eventgrid widget style shot 2 - BdThemes

See, PX, %, EM will permit you to set the font size in the various unit like PX, %, and EM.

Title, Date, Excerpt, Meta Price & Address

These five sections’ style is the same. So, keep your eyes on the Title section of the Event Grid Widget.

eventgrid widget style shot 4 - BdThemes

Go to the color palette and select color for each item through the controls existing in the sections like Date, Excerpt, Meta Price and Address.

eventgrid widget style shot 5 - BdThemes

Moreover, you’ll be able to set typography, icon size, or anything else. Simply edit them. See the complete demo above.

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.