{"id":1947390,"date":"2020-06-22T11:29:16","date_gmt":"2020-06-22T15:29:16","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&p=1947390"},"modified":"2026-04-23T14:55:06","modified_gmt":"2026-04-23T18:55:06","slug":"beaver-builder-theme","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/beaver-builder-theme\/","title":{"rendered":"Using Beaver Builder with The Events Calendar"},"content":{"rendered":"\n

The folks at Beaver Builder have rolled out some pretty incredible features for the page builder, including integration<\/a> with The Events Calendar and Event Tickets. <\/p>\n\n\n\n

For these features, you’ll need to use The Events Calendar<\/a>, Beaver Builder Plugin<\/a>, and Beaver Themer<\/a>. <\/p>\n\n\n\n

If you’d like to make use of Events Calendar Pro shortcodes with Beaver Builder Page Builder, check out our article to ensure compatibility.<\/a><\/p>\n\n\n\n

Default Event, Organizer, and Venue Layouts<\/h2>\n\n\n\n

To get a fast start on layouts, you can use the default layouts created by Beaver Builder. Go to Beaver Builder \u2192 Themer Layouts \u2192 Add New<\/strong>. Select a Singular<\/strong> type with Event for the location and All Events<\/strong>. Then Launch Beaver Builder<\/strong>. <\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

From there, you can delete all the content that displays and add a template layout by going to + \u2192 Templates \u2192 General \u2192 Event<\/strong>.<\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Customizing Single Events<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

Events Widgets<\/h3>\n\n\n\n

The Event Calendar widgets (in Appearance \u2192<\/strong> Widgets) can be added within single event layouts. Use the Beaver Builder’s WordPress Widgets<\/strong> group to drag and drop widgets such as the Events Countdown<\/strong> to your event.<\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

Themer Events Modules<\/h3>\n\n\n\n

To lay out each element on the remainder of your single events post, switch over to Themer Modules<\/strong> and Scroll down to The Events Calendar<\/strong>. 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. <\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

Customizing the Events Page<\/h2>\n\n\n\n

Let’s say you want to customize what displays on the main Events <\/strong>page. For that, you’ll still want to select your default view<\/a>. After that, create a new Themer Layout that is an Archive<\/strong> with a location of Event Archive<\/strong>. <\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

From there, use the Event Calendar<\/strong> module and style as needed. Beaver Builder has additional information on adding the Event Calendar module<\/a> to your custom archive. <\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

Custom Events Layouts<\/h2>\n\n\n\n

This is where the more advanced power comes into play. <\/p>\n\n\n\n

By using the Posts<\/strong> module with a Masonry <\/strong>layout, you can customize the content to display Event<\/strong> previews. This will work with a variety of layouts and custom content queries. <\/p>\n\n\n\n

\"Beaver<\/figure>\n\n\n\n

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<\/a>.<\/p>\n\n\n\n

\"Custom<\/figure>\n\n\n\n
\n\n\n\n

Additional Fields<\/h2>\n\n\n\n

You can add additional fields to any custom area within the single event page using Beaver Builder and The Events Calendar. Note that you will need both the Beaver Builder and Themer in order for this setup to work properly. Here’s how to do this:<\/p>\n\n\n\n

    \n
  1. Make sure you have a defined Additional Field<\/a> in the backend.
    \"\"<\/li>\n\n\n\n
  2. Drag a Text Editor Beaver Block in the event.
    \"\"<\/li>\n\n\n\n
  3. Click on the + sign, find the Event Field, and click on “Connect”.
    \"\"<\/li>\n\n\n\n
  4. Copy and paste the name of the custom field and hit Save.
    \"\"<\/li>\n<\/ol>\n\n\n\n

    You should now see the Additional Field appearing on the single event page.<\/p>\n\n\n\n

    We hope you found this walkthrough useful for getting the most out of The Events Calendar when creating events and pages with Beaver Builder.<\/p>\n\n\n\n

    Using Events Shortcodes with Beaver Builder<\/h2>\n\n\n\n

    If you’re using Beaver Builder with Events Calendar Pro and want to integrate shortcodes<\/a>, you may need a snippet to render the page as expected. Page builders often optimize the loading experience by prerendering code, and then render it again to display the code.  However, [tribe_events]<\/a> can only load once per page.<\/p>\n\n\n\n

    A way to work around this is to use the snippet below. Add this snippet to either your child theme\u2019s functions.php file or use the My Custom Functions<\/a> plugin.<\/p>\n\n\n\n

    Please check out our guides:<\/p>\n\n\n\n