{"id":1959857,"date":"2024-05-02T00:14:47","date_gmt":"2024-05-02T04:14:47","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1959857"},"modified":"2024-09-06T11:58:13","modified_gmt":"2024-09-06T15:58:13","slug":"elementor-single-event-template","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/elementor-single-event-template\/","title":{"rendered":"Elementor Single Event Template"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/uADAq0PJxx4?si=NQEbek83ap7rzGml\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<p>This guide will walk you through how to use an Elementor template for a single event page with the free versions of Elementor and The Events Calendar. All you need is the Elementor and The Events Calendar plugins and the Hello Elementor theme, though you have more options to add Elementor Pro if you want to have more control over dynamic templating.<\/p>\n\n\n\n<p class=\"has-theme-palette-8-background-color has-background\">If you are looking for dynamic <strong>Theme Builder<\/strong> templates, please check this <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/event-single-template-with-elementor-theme-builder\/\">article about how to set it up for Single Event<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-adjust-elementor-settings\">Adjust Elementor Settings<\/h2>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>The first thing you need to do is go to Elementor &gt; Settings and make sure &#8220;Events&#8221; are checked for post types. This will make the &#8220;Edit with Elementor&#8221; button appear on the &#8220;Edit Event&#8221; page. <\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"846\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Screen-Shot-2024-05-01-at-3.08.37-PM-1024x846.png\" alt=\"\" class=\"wp-image-1959895\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Screen-Shot-2024-05-01-at-3.08.37-PM-1024x846.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Screen-Shot-2024-05-01-at-3.08.37-PM-300x248.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Screen-Shot-2024-05-01-at-3.08.37-PM-768x635.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Screen-Shot-2024-05-01-at-3.08.37-PM-1536x1269.png 1536w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Screen-Shot-2024-05-01-at-3.08.37-PM-2048x1692.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-create-event\">Create Event<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Next, add a new event like usual. The event <em>content<\/em> still comes from the Classic Editor page, but the <em>style<\/em> is what is edited in Elementor.<\/p>\n\n\n\n<p>Once all the event content is added, save the event as a draft and then open the Elementor editor to apply the template to this event.<\/p>\n\n\n\n<p>For technical reasons, &#8220;under the hood&#8221; only the classic editor works with Elementor for events. If you create an event using the block editor, it will be &#8220;forced&#8221; to the classic editor once the &#8220;Edit with Elementor&#8221; button is clicked. You don&#8217;t have to worry too much about this, but it&#8217;s something to keep in mind if you decide to switch back from using the Elementor template later. <\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Screen-Recording-2024-05-06-at-3.26.09-PM.mov\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-apply-the-starter-event-template-with-elementor\">Apply the starter event template with Elementor<\/h2>\n\n\n\n<p>Once the Elementor editor opens up, click on the folder icon to apply the &#8220;Single Event Starter Template&#8221; that is automatically added to &#8220;My Templates&#8221; when The Events Calendar and Elementor are activated together.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Elementor-Demo.mov\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>If you would like to bypass the new Single Event Starter Template, we have added a filter to do just that. You just need to add this to your theme&#8217;s <code>function.php<\/code> or using a snippet plugin:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nadd_filter( &#039;tec_events_integration_elementor_bypass_template_override&#039;, &#039;bypass_template_override&#039;, 10, 2 );\n\nfunction bypass_template_override( $bypass, $post_id ) {\n\treturn true;\n}\n<\/pre><\/div>\n\n\n<p>You can also conditionally bypass the template for certain events using the <code>$post_id<\/code> variable. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-style-the-event\">Style the Event<\/h2>\n\n\n\n<p>From here you can edit your single event just like you would any other Elementor page! It&#8217;s important to note that The Events Calendar Starter Template is <strong>static<\/strong> for Elementor&#8217;s free users. It acts as a \u201csnapshot\u201d that can be applied to a specific event at a specific time. The starter template can be tweaked, but those changes will <strong>not<\/strong> automatically affect existing events. Only new events where you apply the updated template will inherit the tweaks.<\/p>\n\n\n\n<p>You may notice that the template has <em>all<\/em> event widgets automatically added. If you did not add any content to that part of the event, even though it is showing in the editor it will not appear on the frontend.<\/p>\n\n\n\n<p>To apply your single event template to an existing event, the process is almost the same. From the &#8220;Edit Event&#8221; page, click the &#8220;Edit in Elementor&#8221; button, and apply the template as you did for a new event. Just keep in mind that any previous styling changes you had made will be overridden once the template is applied. <\/p>\n\n\n\n<p class=\"has-text-color has-background\" style=\"color:#141827;background-color:var(--global-palette8)\">\ud83d\udc4b Due to the way default templates work, you&#8217;ll notice that the description of the event gets bumped to the top of the page. To fix this, all you have to do is copy that element, paste it where you want it on the event, and then delete the original element.<\/p>\n\n\n\n<p>You can make any adjustments you like to the single event now, just like any other Elementor page! Just note that these changes will NOT be applied to the starter template, they will only affect that specific single event.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-events-with-tickets\">Events with Tickets<\/h2>\n\n\n\n<p>If you have an event with tickets, you may notice that the starter template does not automatically include the Elementor Event Ticket widget. We have plans to dynamically add this to the template in the near future, but for now, if you have Event Tickets Plus all you have to do is add the ticket widget yourself. <\/p>\n\n\n\n<p>To reiterate, the <em>content<\/em> comes from the &#8220;Edit Event&#8221; page and then the <em>styling<\/em> comes from the Elementor editor, so you should add the ticket first and then make sure to add the widget to the page so the tickets show on the frontend.<\/p>\n\n\n\n<p>This is what this process looks like all together:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/05\/Elementor-Ticket-Widget-2.mov\"><\/video><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guide will walk you through how to use an Elementor template for a single event page with the free versions of Elementor and The Events Calendar. All you need is the Elementor and The Events Calendar plugins and the Hello Elementor theme, though you have more options to add Elementor Pro if you want&#8230;<\/p>\n","protected":false},"author":44,"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],"tags":[238,239],"stellar-product-taxonomy":[158,161],"class_list":["post-1959857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","tag-elementor","tag-theme","stellar-product-taxonomy-events-calendar-pro","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":46,"label":"Integrations"}],"post_tag":[{"value":238,"label":"Elementor"},{"value":239,"label":"Theme"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"},{"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":"Sam Dokus","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/sam-dokus\/"},"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":[{"term_id":238,"name":"Elementor","slug":"elementor","term_group":0,"term_taxonomy_id":238,"taxonomy":"post_tag","description":"Helpful Links related to Elementor:\r\n<ul>\r\n \t<li><a href=\"https:\/\/elementor.com\/help\/\" target=\"_blank\" rel=\"noopener\"><strong>Help Center<\/strong><\/a><\/li>\r\n \t<li><a href=\"https:\/\/elementor.com\/academy\/\" target=\"_blank\" rel=\"noopener\"><strong>Tutorials &amp; Courses<\/strong><\/a><\/li>\r\n \t<li><strong><a href=\"https:\/\/developers.elementor.com\/\" target=\"_blank\" rel=\"noopener\">Developer Hub<\/a><\/strong><\/li>\r\n<\/ul>","parent":0,"count":12,"filter":"raw","term_order":"0"},{"term_id":239,"name":"Theme","slug":"theme","term_group":0,"term_taxonomy_id":239,"taxonomy":"post_tag","description":"","parent":0,"count":11,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1959857","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\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1959857"}],"version-history":[{"count":18,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1959857\/revisions"}],"predecessor-version":[{"id":1962790,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1959857\/revisions\/1962790"}],"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=1959857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1959857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1959857"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1959857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}