Creating upcoming and recently added widgets is so smart, it’s not actually a traditional widget. Instead, we’ve designed the default Event Listings functionality to be fully compatible inside a text or Custom HTML widget.
That’s right, all that’s needed to create an upcoming/recently added widget is create a listing and paste its shortcode into either of those widgets!
This is where having a Pro license comes in handy because you’ll be able to create per listing layouts; which means if you want to include less content in a widget than you would on a full page (which is how you probably want to use it), all you do is create the custom layout using the VEM’s drag-and-drop layout editor.
Once your listing is set up, copy the Listing Shortcode:
Then paste that into a text or Custom HTML widget:
Design Tips
Although you have the full range of Listing features available, we do recommend a “less is more” approach when creating Listings for widget use. To that end, here’s a layout configuration we recommend:
- Thumbnail Image
- Pre-Title
- Title
- Post Title
- Occurrences
- Date and Time
- First Ticket URL
- Second Ticket URL
Tip: when used inside widgets, Listings have special default CSS that makes the content more attractive inside a sidebar setting such as smaller default font sizes for the title. But just like regular Listings, you can modify those using your own custom CSS.
For reference, here are the default styles:
/*WIDGET LISTING STYLES*/
.widget .vem-single-event-title {
font-size: 24px;
}
.widget .vem-calendar-thumbnail {
max-width: 120px;
}
.widget .vem-single-event-date-start {
margin: 10px 0;
}
.widget .vem-single-event-date-ticket-link {
margin: 10px 0;
}
.widget .vem-occurrence-status {
margin: 10px 0;
}
.widget .vem-single-event-field-set {
margin: 10px 0;
}
All other list styles besides those listed above share the same default styles between widget and in-page list content.