The folks at Beaver Builder have rolled out some pretty incredible features for the page builder, including integration with The Events Calendar and Event Tickets.
If you’d like to make use of Events Calendar Pro shortcodes with Beaver Builder Page Builder, check out our article to ensure compatibility.
Default Event, Organizer, and Venue Layouts
To get a fast start on layouts, you can use the default layouts created by Beaver Builder. Go to Beaver Builder → Themer Layouts → Add New. Select a Singular type with Event for the location and All Events. Then Launch Beaver Builder.
From there, you can delete all the content that displays and add a template layout by going to + → Templates → General → Event.
This same method will work to quickly create layouts for Venues and Organizers as well. You can use these as a way to layout most of the content for these templates, and customize specific content from there.
Customizing Single Events
Do you want to rearrange and customize the look of each event listing? For that, we’ll use a singular event layout as well but add each element manually.
The Event Calendar widgets (in Appearance → Widgets) can be added within single event layouts. Use the Beaver Builder’s WordPress Widgets group to drag and drop widgets such as the Events Countdown to your event.
Themer Events Modules
To lay out each element on the remainder of your single events post, switch over to Themer Modules and Scroll down to The Events Calendar. Add rows and columns, then start adding in elements for the look you want. If you’ve activated Event Tickets, unique modules for displaying Tickets and RSVPs will display as well.
Customizing the Events Page
Let’s say you want to customize what displays on the main Events page. For that, you’ll still want to select your default view. After that, create a new Themer Layout that is an Archive with a location of Event Archive.
From there, use the Event Calendar module and style as needed. Beaver Builder has additional information on adding the Event Calendar module to your custom archive.
You can also add other modules as you’d like. In this example, we’ve added a slider previewing upcoming events above the month view.
Custom Events Layouts
This is where the more advanced power comes into play.
By using the Posts module with a Masonry layout, you can customize the content to display Event previews. This will work with a variety of layouts and custom content queries.
Want to get even more advanced? You can edit the custom layout much further. Add in additional parameters and toggle to the CSS view to style the event post preview as thoroughly as you’d like. See Beaver Builder’s knowledgebase for more resources about field connections and parameters.
We hope you found this walkthrough useful for getting the most out of The Events Calendar when creating events and pages with Beaver Builder.
Have you created a layout with this integration that you’re especially proud of? Drop us a note to share! We’re always interested in what people are building and would love to see what you’ve made.