{"id":1949842,"date":"2021-06-14T16:12:51","date_gmt":"2021-06-14T20:12:51","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1949842"},"modified":"2025-07-16T10:39:03","modified_gmt":"2025-07-16T14:39:03","slug":"divi-theme","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/divi-theme\/","title":{"rendered":"Divi Theme"},"content":{"rendered":"\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/O2wSqtVlkk0\" title=\"YouTube video player\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" width=\"560\" height=\"315\" frameborder=\"0\"><\/iframe>\n\n\n\n<p>Divi is a theme by the wonderful folks over at Elegant Themes. Its flexibility and page-building capabilities have made it one of the more popular WordPress themes and, yes, it works with The Events Calendar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-you-need\">What you need<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/the-events-calendar\/\"><strong>The Events Calendar<\/strong><\/a> (free): This is the base calendar plugin that allows you to publish event posts and display them in a calendar format.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/event-tickets\/\"><strong>Event Tickets<\/strong><\/a> (free, optional): This is the base ticketing plugin for The Events Calendar that adds ticket and RSVP functionality to events, pages, and posts.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\"><strong>Divi from Elegant Themes<\/strong><\/a>: This is the main theme.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.peeayecreative.com\/product\/divi-events-calendar\/\"><strong>Divi Events Calendar<\/strong><\/a> from Pee-Aye Creative: This is an Elegant Themes add-on the adds tighter integration between Divi and The Events Calendar, providing modules for event features.  <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-installation\">Installation<\/h2>\n\n\n\n<p>Using Divi with The Events Calendar is practically the same as integrating The Events Calendar with any other WordPress theme. <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/downloading-and-installing-the-plugin\/\">Install the theme and plugin<\/a> as you would any other WordPress theme or plugin and you get a nice-looking calendar right out of the box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/06\/divi-calendar-month-default.png\" alt=\"\" class=\"wp-image-1949844\"\/><figcaption class=\"wp-element-caption\">The default calendar is located at <code>\/events<\/code> which can be changed in the plugin settings.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-setup\">Setup<\/h2>\n\n\n\n<p>The next thing is to configure your calendar. The Events Calendar provides a lot of flexibility to <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/guide\/customization\/\">customize your views and events<\/a>, but Divi adds even more settings that help the calendar and theme work even more seamlessly together.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:var(--global-palette8)\"><strong>\ud83d\udca1<\/strong> <strong>Note:<\/strong> In order to make our plugins play nicely together, <strong>we recommend using the Classic Editor<\/strong>. You can enable this option under <em>Events \u2192 Settings \u2192 General<\/em> by making sure that the &#8220;Activate Block Editor for Events&#8221; option remains unchecked.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-theme-customizer\">Theme Customizer<\/h3>\n\n\n\n<p>The Events Calendar allows you to customize a number of display settings for the calendar and events <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/wordpress-customizer-2\/\">in the WordPress Customizer<\/a>.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/xqTX7e0mbq0\" title=\"YouTube video player\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" width=\"560\" height=\"315\" frameborder=\"0\"><\/iframe>\n\n\n\n<p>Divi also allows you to customize your entire site using the WordPress Customizer and some of the settings are applied to the calendar as well. This includes the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>General Settings \u2192 Layout: Enable Boxed Layout<\/li>\n\n\n\n<li>General Settings \u2192 Typography\n<ul class=\"wp-block-list\">\n<li>Header Text Size<\/li>\n\n\n\n<li>Header Font<\/li>\n\n\n\n<li>Body Link Color<\/li>\n\n\n\n<li>Body Text Color<\/li>\n\n\n\n<li>Header Text Color<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-additional-settings\">Additional settings<\/h3>\n\n\n\n<p>If you&#8217;re looking for even more ways to configure the way the calendar integrates with the theme, consider using the <a href=\"https:\/\/divieventscalendar.com\/modules\/events-page\/\">Divi Events Calendar add-on<\/a>. The Pee-Aye Creative team put it together and it provides additional features, including more <a href=\"https:\/\/divieventscalendar.com\/modules\/events-feed\/layouts\/\">layouts<\/a>, <a href=\"https:\/\/divieventscalendar.com\/modules\/events-feed\/details-display\/\">display options<\/a>, and <a href=\"https:\/\/www.peeayecreative.com\/docs\/divi-events-calendar\/modules\/events-page\/settings-list\/\">settings<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-color has-text-color has-background wp-element-button\" href=\"https:\/\/divieventscalendar.com\/modules\/events-page\/\" style=\"border-radius:50px;background-color:#334aff\" target=\"_blank\" rel=\"noreferrer noopener\">View demo<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-fixing-compatibility-issues\">Fixing compatibility issues<\/h2>\n\n\n\n<p>In order to make our plugins play nicely together, we&#8217;d recommend using only the Classic Editor. You can enable this option under <strong>Events \u2192<\/strong> <strong>Settings \u2192 General<\/strong> by making sure that the <em>Activate Block Editor<\/em> option remains unchecked.<\/p>\n\n\n\n<p>Lastly, you&#8217;ll want the <strong>Enqueue jQuery Compatibility Script<\/strong> under the Divi Performance tab to be <em>disabled<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/06\/image-3.png\" alt=\"Disable jQuery for Divi compatibility\" class=\"wp-image-1953061\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-fixing-layout-issues\">Fixing layout issues<\/h2>\n\n\n\n<p>If you are experiencing layout issues with Divi and your attendee&#8217;s registration page, it can be fixed by disabling the Dynamic CSS under <strong>Divi \u2192 Theme Options \u2192  Performance<\/strong>.<\/p>\n\n\n\n<p>In some cases, the calendar\u2019s default template may not load properly, causing events to appear like regular blog posts instead of displaying in the expected grid for Month view or the formatted List view. This can sometimes happen if Divi\u2019s templates haven\u2019t fully initialized.<\/p>\n\n\n\n<p>To help reset things, we recommend heading to <strong>Divi \u2192 Theme Builder<\/strong>, temporarily disabling all current templates, and then re-enabling them. This process effectively flushes Divi\u2019s template hierarchy and helps reinitialize both Divi\u2019s and The Events Calendar\u2019s templates correctly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creating-events\">Creating events<\/h2>\n\n\n\n<p>Currently, the best way to publish an event is to use the Classic Editor with events instead of the newer Block Editor. This preserves all of the available event post settings that become unavailable in the Block Editor when Divi is installed and active. You can enable the Classic Editor in The Events Calendar&#8217;s settings by navigating to Events \u2192 Settings and toggling the option in the General plugin settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/06\/tec-admin-settings-cgeneral-classic-editor.png\" alt=\"\" class=\"wp-image-1949855\"\/><\/figure>\n\n\n\n<p>But chances are that you are using Divi because you prefer using its page builder for creating content. The <a href=\"https:\/\/divieventscalendar.com\/modules\/events-page\/\">Divi Events Calendar add-on<\/a> by Pee-Aye Creative extends Divi Builder to include event modules and elements that can be used to create events. In that case, there is no need to enable the Classic Editor in The Events Calendar settings, and you can use Divi Builder to create events as you would any other page or post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Divi is a theme by the wonderful folks over at Elegant Themes. Its flexibility and page-building capabilities have made it one of the more popular WordPress themes and, yes, it works with The Events Calendar. What you need Installation Using Divi with The Events Calendar is practically the same as integrating The Events Calendar with&#8230;<\/p>\n","protected":false},"author":17,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[46],"tags":[],"stellar-product-taxonomy":[],"class_list":["post-1949842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations"],"acf":[],"taxonomy_info":{"category":[{"value":46,"label":"Integrations"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Andras Guseo","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/andras\/"},"comment_info":0,"category_info":[{"term_id":46,"name":"Integrations","slug":"integrations","term_group":0,"term_taxonomy_id":46,"taxonomy":"category","description":"","parent":0,"count":115,"filter":"raw","term_order":"0","cat_ID":46,"category_count":115,"category_description":"","cat_name":"Integrations","category_nicename":"integrations","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1949842"}],"version-history":[{"count":2,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949842\/revisions"}],"predecessor-version":[{"id":1966020,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949842\/revisions\/1966020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1949842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1949842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1949842"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1949842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}