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.
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.
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 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.
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.
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
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
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.
If you want to set event starting or ending dates routinely then you can use Start & End Date controls.
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.
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 the second image with the first one.
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.
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.