Events Grid Widget

Use the widget to add events in a grid.

Content

Layout

events grid widget layout

Event Template: Choose between Default and Custom event template.

Custom template allows to choose the needed Entry template.

Events: Set the number of events that should be displayed.

Columns: Set the number of columns for widescreen, desktop, tablet portrait and mobile portrait views.

Masonry: Slide to ON to enable masonry layout.

Query

events grid widget query

Source: Choose between Events, Venues, Organizers and Current query.

You can Include or Exclude events.

Include option settings.

Terms: Terms are items in a taxonomy. The available taxonomies are: Categories, Tags, Formats and custom taxonomies.

Order By: You can order events by Date, Title, Popularity, Rating, Reviews number, Random and Menu order.

You can also choose Ascending or Descending order.

Exclude option settings.

All options are the same to Include but Exclude also provides an ability for Manual Selection so that you can search & select entries to exclude from query.

Pagination

events grid widget pagination

Pagination: Slide to SHOW to enable pagination.

Type: Choose a pagination type from the dropdown. (Pagination, Infinite scroll or ‘Load more’ button)

Pagination Type

View: Choose between Numbers+Previous/Next buttons, only Numbers or only Previous/Next buttons.

Page Range: Choose how many pages should be shown on the start and the end of pagination and to either side of current pages.

Load via AJAX: Slide to YES to load events without page reloading.

Save Page Number: Slide to YES to save page number in URL.

Scroll into View: Slide to YES to scroll events into the visible area of the browser window.

Enable Icon: Slide to YES to enable icon.

Choose Previous and Next Icons and add a Text to them if needed.

events grid widget infinite scroll type

Infinite Scroll Type

Preview Infinite Preloader: Click to see how a preloader functions.

Text: Add a needed  text.

Enable Icon: Slide to YES to enable icon.

Icon: Choose the icon from Icon library or upload desired SVG.

Load More Button Type

Button Text: Add Button Text for Normal and Loading modes.

Enable Icon: Slide to YES to enable icon and then choose the icon from Icon library or upload desired SVG.

Style

Layout

Columns Gap: Set Columns Gap for widescreen, desktop, tablet portrait and mobile portrait views.

Rows Gap: Set Rows Gap for widescreen, desktop, tablet portrait and mobile portrait views.

Type: Choose a separator type between events from the dropdown and set it.

Event

events grid widget style event

Alignment: Choose between Left, Center or Right event alignment for widescreen, desktop, tablet portrait and mobile portrait views.

Background Color: Choose the Event Background color (for Normal and Hover modes).

Border Color: Choose the Event Border color (for Normal and Hover modes).

Border Radius: Set the event  border radius for widescreen, desktop, tablet portrait and mobile portrait views (for Normal and Hover modes).

Box Shadow: Choose desired settings from the dropdown (for Normal and Hover modes).

Padding: Set paddings for widescreen, desktop, tablet portrait and mobile portrait views.

Border Type: Choose a border type from the dropdown and set it.

Customize

events grid style customize

Choose the event sections you want to customize from the dropdown and set them using corresponding settings.

Customize: Image

events grid style customize image

Show: Slide to YES to enable event image.

Gap: Set a gap between Image and content for widescreen, desktop, tablet portrait and mobile portrait views.

Border Radius: Set the Image border radius for widescreen, desktop, tablet portrait and mobile portrait views.

Border Type: Choose a border type from the dropdown and set it.

Border Width: Choose the Image border width for widescreen, desktop, tablet portrait and mobile portrait views.

Border Color: Set the Image border color.

Customize: Date

events grid style customize date

Show: Slide to YES to enable event date.

Alignment: Choose between Left, Center or Right date alignment for widescreen, desktop, tablet portrait and mobile portrait views.

Typography: Set Typography using settings from the dropdown.

Color: Choose a date color.

Background Color: Choose a date background color.

Border Color: Choose a date border color.

Side Gap: Set a side gap for widescreen, desktop, tablet portrait and mobile portrait views.

Top Gap: Set a top gap for widescreen, desktop, tablet portrait and mobile portrait views.

Border Radius: Set a date border radius.

Border Type: Choose border type from the dropdown.

Customize: Meta

events grid widget customize meta

Category

Show: Slide to YES to enable event category.

Typography: Set Typography using settings from the dropdown.

Color: Choose category color.

Link Color: Choose category link color.

Link Hover Color: Choose category link hover color.

Cost

Show: Slide to YES to enable event cost.

Typography: Set Typography using settings from the dropdown.

Color: Choose a cost color.

Stroke Width: Set a stroke width.

Customize: Title

Typography: Set Typography using settings from the dropdown.

Color: Choose a title color.

Hover Color: Choose a title hover color.

Gap: Set a gap between title and content for widescreen, desktop, tablet portrait and mobile portrait views.

Stroke Width: Set a stroke width.

Customize: Venue

events grid style customize venue

Show: Slide to YES to enable event venue.

Alignment: Choose between Left, Center or Right venue alignment for widescreen, desktop, tablet portrait and mobile portrait views.

Typography: Set Typography using settings from the dropdown.

Color: Choose venue color.

Link Color: Choose venue link color.

Hover Color: Choose venue hover color.

Space Between: Set a space between venue information for widescreen, desktop, tablet portrait and mobile portrait views.

Gap: Set a space between venue and content for widescreen, desktop, tablet portrait and mobile portrait views.

Icon

Color: Choose an icon color.

Size: Set an icon size for widescreen, desktop, tablet portrait and mobile portrait views.

Gap: Set a gap between icon and venue information for widescreen, desktop, tablet portrait and mobile portrait views.

Customize: Excerpt

events grid style customize excerpt

Show: Slide to YES to enable event excerpt.

Alignment: Choose between Left, Center or Right excerpt alignment for widescreen, desktop, tablet portrait and mobile portrait views.

Typography: Set Typography using settings from the dropdown.

Color: Choose excerpt color.

Gap: Set a gap between excerpt and button for widescreen, desktop, tablet portrait and mobile portrait views.

Customize: Button

events grid style customize button

Show: Slide to YES to enable button.

Typography: Set Typography using settings from the dropdown.

Color: Choose the button color (for Normal and Hover modes).

Background Type: Choose between Color and Gradient type and set it.

Background Color: Choose the button background color (for Normal and Hover modes).

Border Color: Choose the button border color (for Normal and Hover modes).

Border Radius: Set the button border radius for widescreen, desktop, tablet portrait and mobile portrait views (for Normal and Hover modes).

Text Shadow: Choose desired settings from the dropdown (for Normal and Hover modes).

Box Shadow: Choose desired settings from the dropdown (for Normal and Hover modes).

Padding: Set paddings for widescreen, desktop, tablet portrait and mobile portrait views.

Border Type: Choose a border type from the dropdown and set it. 

Pagination

events grid style pagination

Layout Type: Choose between Left, Center, Right and Justified types. 

Typography: Set Typography using settings from the dropdown.

Background Color: Choose pagination background color.

Border Type: Choose a border type from the dropdown and set it. 

Border Radius: Set border radius for widescreen, desktop, tablet portrait and mobile portrait views.

Top Gap: Set pagination top gap for widescreen, desktop, tablet portrait and mobile portrait views.

Padding: Set paddings for widescreen, desktop, tablet portrait and mobile portrait views.

Pagination: Numbers

events grid style pagination numbers

Min Size: Set the numbers min size for widescreen, desktop, tablet portrait and mobile portrait views.

Text Color: Choose the numbers text color (for Normal, Hover and Active modes).

Background Color: Choose the numbers background color (for Normal, Hover and Active modes).

Text Decoration: Choose desired setting from the dropdown (for Normal, Hover and Active modes).

Box Shadow: Choose desired settings from the dropdown (for Normal, Hover and Active modes).

Text Shadow: Choose desired settings from the dropdown (for Normal, Hover and Active modes).

Space Between: Set a space between numbers for widescreen, desktop, tablet portrait and mobile portrait views.

Border Type: Choose a border type from the dropdown and set it. 

Border Radius: Set border radius for widescreen, desktop, tablet portrait and mobile portrait views.

Padding: Set paddings for widescreen, desktop, tablet portrait and mobile portrait views.