{"id":1965814,"date":"2025-07-29T07:14:34","date_gmt":"2025-07-29T11:14:34","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1965814"},"modified":"2025-07-29T07:14:36","modified_gmt":"2025-07-29T11:14:36","slug":"styling-the-events-calendar-in-divi","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/styling-the-events-calendar-in-divi\/","title":{"rendered":"Styling The Events Calendar in Divi"},"content":{"rendered":"\n<p>By default, <a href=\"https:\/\/theeventscalendar.com\/products\/wordpress-events-calendar\/\">The Events Calendar<\/a> outputs standard <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/shortcodes\/\">shortcodes<\/a> or embeds, with styling controlled in the Customizer\u2014not in Divi. To integrate fully, use the third-party <a href=\"https:\/\/www.peeayecreative.com\/product\/divi-events-calendar\/\" rel=\"nofollow\"><strong>Divi Events Calendar<\/strong> plugin by Pee\u2011Aye Creative<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-divi-events-calendar-offers\">What Divi Events Calendar offers?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Custom Divi modules: Calendar, feed, carousel, filters, and single event pages, each with robust design controls.<\/li>\n\n\n\n<li>Hundreds of styling options: Borders, spacing, typography, colors, and layout.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-get-started\">How to Get Started<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install and activate Divi Events Calendar after The Events Calendar.<\/li>\n\n\n\n<li>Open the Divi Builder and add the desired modules (e.g., Events Calendar, Events Feed).<\/li>\n\n\n\n<li>Configure <strong>Content<\/strong>: filter by category, date range, thumbnails, virtual events, etc.<\/li>\n\n\n\n<li>Go to <strong>Design tab<\/strong>: tweak typography, borders, tooltips, hover effects, spacing, and more.<\/li>\n<\/ol>\n\n\n\n<p>For single-event page control, use the <strong>Events Page module<\/strong> and Divi Theme Builder templates. Each event populates dynamically using that layout.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-custom-styling-beyond-builder-defaults\">Custom Styling Beyond Builder Defaults<\/h2>\n\n\n\n<p>Whether you&#8217;re using builder modules or default TEC pages, fine-tune appearance with CSS.<\/p>\n\n\n\n<p>Review <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/customizing-css\/\">Customizing&nbsp;CSS<\/a> and <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/working-with-view-classes\/\">Calendar View&nbsp;CSS&nbsp;Classes<\/a> to learn about working with CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>By default, The Events Calendar outputs standard shortcodes or embeds, with styling controlled in the Customizer\u2014not in Divi. To integrate fully, use the third-party Divi Events Calendar plugin by Pee\u2011Aye Creative. What Divi Events Calendar offers? How to Get Started For single-event page control, use the Events Page module and Divi Theme Builder templates. Each&#8230;<\/p>\n","protected":false},"author":60,"featured_media":1955565,"comment_status":"open","ping_status":"open","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,84],"tags":[47],"stellar-product-taxonomy":[161],"class_list":["post-1965814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","category-theming-overview","tag-integrations","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":46,"label":"Integrations"},{"value":84,"label":"Templating &amp; Layout"}],"post_tag":[{"value":47,"label":"Integrations"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Atousa","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/atousa\/"},"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},{"term_id":84,"name":"Templating &amp; Layout","slug":"theming-overview","term_group":0,"term_taxonomy_id":84,"taxonomy":"category","description":"","parent":24,"count":59,"filter":"raw","term_order":"0","cat_ID":84,"category_count":59,"category_description":"","cat_name":"Templating &amp; Layout","category_nicename":"theming-overview","category_parent":24}],"tag_info":[{"term_id":47,"name":"Integrations","slug":"integrations","term_group":0,"term_taxonomy_id":47,"taxonomy":"post_tag","description":"","parent":0,"count":23,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965814","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\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1965814"}],"version-history":[{"count":4,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965814\/revisions"}],"predecessor-version":[{"id":1966256,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965814\/revisions\/1966256"}],"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=1965814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1965814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1965814"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1965814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}