How to Use Event Grid Widget

element pack

How to Use Event Grid Widget

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.

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

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, 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.

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

If you want to have a design without image, possible 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.

From the skin controls, if you want to use alternative options 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.


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

Just come to Image > Image Size > Image Width


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. Read more

With the default options, if you are to use others, you have to just select them. For example, here 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.

If you want to set event starting or ending date 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 (text, image, video, etc.) of the page you want to design.

Let’s have a look.


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.

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


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 second image with the first one.

See, PX, %, EM will permit you to set the font size in 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.

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.

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

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.