{"id":1949310,"date":"2021-03-02T09:33:18","date_gmt":"2021-03-02T14:33:18","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1949310"},"modified":"2024-08-13T10:29:51","modified_gmt":"2024-08-13T14:29:51","slug":"native-elementor-widgets-for-events-calendar-pro","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/native-elementor-widgets-for-events-calendar-pro\/","title":{"rendered":"Elementor Widgets for Events Calendar Pro"},"content":{"rendered":"\n<p class=\"has-kb-palette-0-background-color has-background\"><strong>\ud83d\udca1Important Notice:<\/strong> This article applies only to Events Calendar Pro 7.0 and above. If you are using a previous version, please refer to the <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/elementor-widgets-for-events-calendar-pro\/\">legacy article<\/a>.<br><br>\ud83d\udd0dLearn more about these changes in <a href=\"https:\/\/evnt.is\/1bdy\">this detailed blog post<\/a>.<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/gaAszBpkxpA\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>With <strong>The Events Calendar Pro<\/strong>, our premium users have access to four additional Elementor widgets for displaying on pages or posts. These widgets are included as part of our <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/events-calendar-widgets\/\">Pro Widgets<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-working-with-events\"><strong>Working with Events<\/strong><\/h2>\n\n\n\n<p>Using Elementor&#8217;s native widgets, you can display your events on any page or post. These widgets can display your events&#8217; content, however you&#8217;ll still want to create your events through our plugins on the Add Event page. Once you have your events created, you can easily add them with your Elementor widget options.<\/p>\n\n\n\n<p>Elementor automatically lists all WordPress widgets in one place (including our Pro widgets), so make sure you select the ones that do not have a WordPress icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-01-at-10.22.34-AM.png\" alt=\"Elementor widgets with The Events Calendar\" class=\"wp-image-1949313\"\/><\/figure>\n\n\n\n<p>For maximum flexibility, we recommend selecting the <a data-type=\"URL\" data-id=\"https:\/\/elementor.com\/help\/using-elementors-canvas-page-template\/\" href=\"https:\/\/elementor.com\/help\/using-elementors-canvas-page-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor Canvas Page Template<\/a> on the pages and posts you want to use the widgets on.  This is essentially a blank page that does not include your header, footer, and sidebar, so it allows for complete focus on the event elements.  From there, you can easily add the additional elements that you want on that page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-event-countdown-widget\"><strong>Event Countdown Widget<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/07\/Screen-Shot-2022-07-15-at-8.25.34-AM.png\" alt=\"Events Countdown widget with Elementor\" class=\"wp-image-1953623\"\/><\/figure><\/div>\n\n\n<p>The three Event Query tabs allow you to select which event you want to display a countdown timer for according to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Date ranges<\/li>\n\n\n\n<li>Types of events (all-day, multi-day, featured, geocoded, recurring)<\/li>\n\n\n\n<li>Event Categories<\/li>\n\n\n\n<li>Tags<\/li>\n\n\n\n<li>Keyword<\/li>\n\n\n\n<li>Slug<\/li>\n\n\n\n<li>ID<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/04\/Screen-Shot-2022-04-22-at-1.09.08-PM.png\" alt=\"Elementor Event Countdown content tab\" class=\"wp-image-1952579\"\/><\/figure>\n\n\n\n<p>Additionally, you can use the Content tab to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Display seconds on the countdown<\/li>\n\n\n\n<li>Define a custom completion message for the countdown timer<\/li>\n<\/ul>\n\n\n\n<p>From there, you can style the widget using the Style tab. The Advanced tab will additionally provide you with the same options as your other Elementor widgets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/04\/Screen-Shot-2022-04-22-at-12.22.19-PM.png\" alt=\"Elementor style tab for Event Countdown widget\" class=\"wp-image-1952580\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-events-list-widget\"><strong>Events List Widget<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/04\/Screen-Shot-2022-04-22-at-1.09.24-PM.png\" alt=\"Elementor Events List Widget content tab\" class=\"wp-image-1952581\"\/><\/figure>\n\n\n\n<p>This straightforward widget gives you granular control over the display of the Events list.<\/p>\n\n\n\n<p>You can choose the maximum number of events that display in the Events List widget on that first option in the Content tab.<\/p>\n\n\n\n<p>You can also decide which information gets displayed by toggling the tabs to Yes.  The information that you can toggle is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cost<\/li>\n\n\n\n<li>Organizer <\/li>\n\n\n\n<li>Venue<\/li>\n\n\n\n<li>Street<\/li>\n\n\n\n<li>Country<\/li>\n\n\n\n<li>City<\/li>\n\n\n\n<li>Region<\/li>\n\n\n\n<li>Zip<\/li>\n\n\n\n<li>Phone<\/li>\n<\/ul>\n\n\n\n<p>You can also filter the Event List using Event Categories and tags.  You can find this option under the Content &gt; Event Options tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/07\/Screen-Shot-2022-07-15-at-8.26.33-AM.png\" alt=\"Events List Elementor widget\" class=\"wp-image-1953625\"\/><\/figure>\n\n\n\n<p>As with the other widgets, you can style this one through Elementor&#8217;s built-in Advanced tab as well.<\/p>\n\n\n\n<p>You can also use the Style tab to add custom styles as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/04\/Screen-Shot-2022-04-22-at-12.23.01-PM.png\" alt=\"Elementor Events List style tab\" class=\"wp-image-1952582\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-event-widget\"><strong>Event Widget<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/07\/Screen-Shot-2022-07-15-at-8.27.44-AM.png\" alt=\"Event widget Elementor\" class=\"wp-image-1953626\"\/><\/figure>\n\n\n\n<p>This widget allows you to display a single event on a page or post.  The three Event Query tabs allow you to select which event you want to display dynamically using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Date ranges<\/li>\n\n\n\n<li>Types of events (all-day, multi-day, featured, geocoded, recurring)<\/li>\n\n\n\n<li>Event Categories<\/li>\n\n\n\n<li>Tags<\/li>\n\n\n\n<li>Keyword<\/li>\n\n\n\n<li>Slug<\/li>\n\n\n\n<li>ID<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/06\/Screen-Shot-2022-06-08-at-11.43.26-AM-443x1024.png\" alt=\"Event widget content\" class=\"wp-image-1953126\"\/><\/figure>\n\n\n\n<p>Additionally, you can  control the content of the widget by toggling your options which are: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Title<\/li>\n\n\n\n<li>Date\/time<\/li>\n\n\n\n<li>Cost<\/li>\n\n\n\n<li>Description<\/li>\n\n\n\n<li>Featured images<\/li>\n\n\n\n<li>Notices<\/li>\n\n\n\n<li>RSVP\/Tickets<\/li>\n\n\n\n<li>Event details (date, time, cost, categories, tags)<\/li>\n\n\n\n<li>Organizer (name, phone, email, website)<\/li>\n\n\n\n<li>Venue (name, location, phone, website, map)<\/li>\n<\/ul>\n\n\n\n<p><strong>Note:&nbsp;<\/strong>The RSVP\/Ticket toggle will not display anything in the preview window, but will work great on the actual page\/post.<\/p>\n\n\n\n<p>Under the Custom Content tab, you can opt to display your custom fields before or after HTML in each Event widget.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/06\/Screen-Shot-2022-06-08-at-11.43.53-AM.png\" alt=\"Custom content tab\" class=\"wp-image-1953127\"\/><\/figure>\n\n\n\n<p>We did say you get to control everything, didn&#8217;t we? You also have control over what navigation elements get displayed in each Event widget including: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All events link <\/li>\n\n\n\n<li>Calendar links<\/li>\n\n\n\n<li>Related events <\/li>\n\n\n\n<li>Footer<\/li>\n\n\n\n<li>Event navigation<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/06\/Screen-Shot-2022-06-08-at-11.44.15-AM.png\" alt=\"Event widget navigation\" class=\"wp-image-1953128\"\/><\/figure>\n\n\n\n<p>You can change the styling of the Event widget using the Style tab:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/06\/Screen-Shot-2022-06-08-at-11.44.49-AM.png\" alt=\"Event widget style tab for Elementor\" class=\"wp-image-1953129\"\/><\/figure>\n\n\n\n<p>Last but not least, if you are hosting virtual events, you can also get control over what content information gets displayed in each Event widget:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Video embed<\/li>\n\n\n\n<li>Watch button<\/li>\n\n\n\n<li>Zoom link<\/li>\n\n\n\n<li>Zoom dial-in info<\/li>\n<\/ul>\n\n\n\n<p>So it&#8217;ll look something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-01-at-10.16.02-AM-1024x544.png\" alt=\"\" class=\"wp-image-1949312\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-events-view-widget\"><strong>Events View Widget<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/08\/Screen-Shot-2022-08-04-at-1.34.08-PM.png\" alt=\"Events View Elementor widget\" class=\"wp-image-1953834\"\/><\/figure>\n\n\n\n<p>This is another straightforward widget that gives you granular control over the display of the Events Views.  This appears similarly to our standard main calendar view, with the ability to choose the following options under Event options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Events Bar <\/li>\n\n\n\n<li>Filter Bar (will only display if Filter Bar is active)<\/li>\n\n\n\n<li>Default view (List, Month, Week, Day, Photo, Map, Summary, Latest-past) <\/li>\n\n\n\n<li>Featured Events<\/li>\n\n\n\n<li>Organizer<\/li>\n\n\n\n<li>Venue<\/li>\n\n\n\n<li>Author<\/li>\n\n\n\n<li>Category<\/li>\n\n\n\n<li>Category Exclusion<\/li>\n\n\n\n<li>Tag<\/li>\n\n\n\n<li>Tag Exclusion<\/li>\n\n\n\n<li>Keyword<\/li>\n<\/ul>\n\n\n\n<p>The View Options tab gives you additional control over the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start Date<\/li>\n\n\n\n<li>Events per page (in list-style views)<\/li>\n\n\n\n<li>Month View Events Per Day<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/08\/Screen-Shot-2022-08-04-at-1.35.31-PM.png\" alt=\"Events View Elementor widget\" class=\"wp-image-1953835\"\/><\/figure>\n\n\n\n<p>And the Advanced and Style tabs will give you plenty of styling options, just like with all of your other Elementor and Events Calendar widgets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/08\/Screen-Shot-2022-08-04-at-1.37.36-PM.png\" alt=\"Style tab on Events View widget\" class=\"wp-image-1953837\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/08\/Screen-Shot-2022-08-04-at-1.36.31-PM.png\" alt=\"Events View widget\" class=\"wp-image-1953836\"\/><\/figure>\n\n\n\n<p><strong>Notes:&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you disable the Events Bar in the Events View widget, the Filter Bar cannot be enabled on its own.<\/li>\n\n\n\n<li>Elementor compatibility is only available with the updated The Events Calendar views<\/li>\n\n\n\n<li>It&#8217;s currently not possible to create templates for the single event page with the Elementor theme builder (but we are working on it!).<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udca1Important Notice: This article applies only to Events Calendar Pro 7.0 and above. If you are using a previous version, please refer to the legacy article. \ud83d\udd0dLearn more about these changes in this detailed blog post. With The Events Calendar Pro, our premium users have access to four additional Elementor widgets for displaying on pages&#8230;<\/p>\n","protected":false},"author":3,"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":[238,239,105],"stellar-product-taxonomy":[158],"class_list":["post-1949310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","tag-elementor","tag-theme","tag-widgets","stellar-product-taxonomy-events-calendar-pro"],"acf":[],"taxonomy_info":{"category":[{"value":46,"label":"Integrations"}],"post_tag":[{"value":238,"label":"Elementor"},{"value":239,"label":"Theme"},{"value":105,"label":"Widgets"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"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"},{"term_id":105,"name":"Widgets","slug":"widgets","term_group":0,"term_taxonomy_id":105,"taxonomy":"post_tag","description":"","parent":0,"count":16,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949310","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1949310"}],"version-history":[{"count":8,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949310\/revisions"}],"predecessor-version":[{"id":1962397,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1949310\/revisions\/1962397"}],"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=1949310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1949310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1949310"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1949310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}