Event cards widget for Elementor

The Event cards widget allows you to display an events grid where you can specify the number of displayed items per page and columns in a row. It focuses the user’s attention on upcoming occasions by providing basic information about them. The widget offers to use the Events post type of a certain category or custom events. The custom layout helps to display all the necessary card information in the required order.

For further work, you need Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

• Content
• Style
• Advanced

Content Tab

In the Content section, you can manage basic settings of the Event cards widget such as time period and format, event types, layouts and a lot of other settings.

General

TIME FORMAT

Select the time format that will be displayed on the calendar and also in the event tooltip: AM/PM or 24 Hour. The option is not available when the “Custom events” toggle is enabled.

Columns

Specify the number of columns to be displayed in one row for different devices(desktops, tablets, mobiles).

Events per page

Specify the number of event cards to be displayed on the page.

Card content alignment

Specify the content alignment in the event card: Left, Right, Center.

INCLUDE EVENT TYPES

Select the categories of events you want to display on the calendar. To create new categories go to Dashboard>Bookinger>Category. The option is not available when the “Custom events” toggle is enabled.

Include speaker

Select the speaker name you want to display on the card. To create a new speaker go to Dashboard>Bookinger>Speakers. The option is not available when the “Custom events” toggle is enabled.

Custom events

The option allows you to create custom events instead of using already created posts through the dashboard. When the toggle is enabled a new “Custom events” section with settings appears where contents can be created.

Show button

The toggle to enable/disable the button below the calendar. When the option is enabled a new “Button” section appears for the advanced settings.

Speaker layout

The Section for managing speaker layout elements. Add, remove or copy each element and customize it to suit your needs.

Click “Add Item” button and manage each of the fields.

Speaker layout – select one of the available elements to display in the layout: Avatar, Name, Specialities, Email, Phone, Social link 1, Social link 2, Social link 3, Additional information.
Inline block – the toggle to make the element inline.
Layout caption – enter the caption for the item.
Show icon – the toggle to enable/disable an icon for the item. When the icon is enabled you can choose the icon from the library and set icon spacing, size and position.

Event layout

Section for managing event layout elements. Add, remove or copy each element and customize it to suit your needs.

Click “Add Item” button and manage each of the fields.

• Event layout – select one of the available elements to display in the layout: Title, Image, Description, Start date, End date, Type, Website, Event price, Event price currency.
• Inline block – the toggle to make the element inline.
• Layout caption – enter the caption for the item.
• Show icon – the toggle to enable/disable an icon for the item. When the icon is enabled you can choose the icon from the library and set icon spacing, size and position.

Button

• Button link text – enter the text for the next button.
• Link – paste the link for the button
• Button link alignment – manage the current button alignment (left, center, right). It can be specified for different devices.
• Button icon – select the icon for the button from the library or upload your own icon in SVG format.
• Icon position – select the icon position of the button: Before, After, Above left, Above center, Above right, Under left, Under center, Under right.

Custom events

The section allows you to create custom events and speakers from the widget settings. It is available when the Custom events toggle in the General section is enabled.

Event

Click “Add Item” button and fill in each of the fields to create a new event.

• Event name – text field for entering the name of the event.
• Choose event image – select an event image from the media library or upload a new one.
• With speaker – the toggle to enable/disable the Speaker for the event. When the option is enabled a new Speaker tab with settings is added.
• Event type – text field for entering the event type.
• Repeated event – the toggle to enable/disable repeat period for the event. The option allows you to set the repeat Every day, Every month, Every year
• Event start date – specify the start date of the event.
• Event end date – specify the end date of the event.
• Paid event – the toggle to make the event payable and set the price.
• Event description – the field with a visual and text editor for entering an event description.

speaker

• Speaker name – text field for entering the name of the speaker.
• Choose avatar – select an image for the speaker avatar from the media library or upload a new one.
• Speaker email – enter the email address of the current speaker.
• Speaker speciality – enter the email address of the current speaker.
• Speaker phone – enter the phone of the current speaker.
• Social link name – enter the name of the social network, the link to which will be entered below
• Social link – enter the social network link whose name is entered above.
• Speaker additional information – the field with a visual and text editor for entering information about the speaker.

Style tab

On the Custom fields widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

Button link

• Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
• Icon size – specify the icon size of the button via slider for desktops, tablets, or phones.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.

NORMAL/HOVER

The element settings for different states.

• Color– specify the font color and opacity for the text of the current block using the color picker.
• Icon Color – specify the icon color and opacity using the color picker.
• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Card

• Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
• Space between cards – the setting allows managing the spacing between the event cards in different units(px, em, %) for desktops, tablets, or phones.

NORMAL/HOVER

The element settings for different states.

• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Card event name/Card event type/Card event description/Card event start date/Card event end date/Card event website/Card event price/Card event currency/Card event speaker email/Card event speaker name/Card event speaker phone/Card event speaker additional information/Card event speaker specialities/Card event speaker social link

• Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.

NORMAL/HOVER

The element settings for different states.

• Color– specify the font color and opacity for the text of the current block using the color picker.
• Icon Color – specify the icon color and opacity using the color picker.
• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Card event image/Card event speaker avatar

• Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
• Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
• Image height – specify the height of the image in different units(px, %) using the slider.
• Image width – specify the width of the image in different units(px, %) using the slider.

NORMAL/HOVER

The element settings for different states.

• Icon Color – specify the icon color and opacity using the color picker.
• Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
• Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
• Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
• Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Advanced Tab

The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.