{"id":1965183,"date":"2025-07-14T06:12:03","date_gmt":"2025-07-14T10:12:03","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1965183"},"modified":"2025-07-14T06:12:04","modified_gmt":"2025-07-14T10:12:04","slug":"integrating-event-tickets-with-elementor-crafting-custom-ticket-layouts","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/integrating-event-tickets-with-elementor-crafting-custom-ticket-layouts\/","title":{"rendered":"Integrating Event Tickets with Elementor: Crafting Custom Ticket Layouts"},"content":{"rendered":"\n<p>Enhancing your WordPress event pages with custom ticket layouts can significantly improve user experience and boost ticket sales. By integrating Event Tickets Plus plugin with Elementor, you can design visually appealing and functional ticket sections without delving into code. This guide will walk you through the process of creating custom ticket layouts using Elementor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prerequisites\">Prerequisites<\/h2>\n\n\n\n<p>Before you begin, ensure you have the following plugins activated:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Events Calendar<\/strong><\/li>\n\n\n\n<li><strong>Event Tickets<\/strong><\/li>\n\n\n\n<li><strong>Event Tickets Plus<\/strong><\/li>\n\n\n\n<li><strong>Elementor<\/strong> or <strong>Elementor Pro<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-1-create-an-event-and-add-tickets\">1. <strong>Create an Event and Add Tickets<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to your WordPress dashboard.<\/li>\n\n\n\n<li>Go to <strong>Events &gt; Add New<\/strong> to create a new event.<\/li>\n\n\n\n<li>Fill in the event details such as title, description, date, and time.<\/li>\n\n\n\n<li>Scroll down to the <strong>Tickets<\/strong> section and click on <strong>+ New Ticket<\/strong>.<\/li>\n\n\n\n<li>Enter ticket details like name, price, stock, and sale dates.<\/li>\n\n\n\n<li>Click <strong>Save Ticket<\/strong> to add it to your event.<\/li>\n<\/ul>\n\n\n\n<p>Review <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/making-tickets\/\" target=\"_blank\" rel=\"noreferrer noopener\">Creating Tickets<\/a> article for further information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-2-enable-elementor-for-events\">2. <strong>Enable Elementor for Events<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Elementor &gt; Settings<\/strong>.<\/li>\n\n\n\n<li>Under the <strong>General<\/strong> tab, check the box for <strong>Events<\/strong> to enable Elementor editing for event post types.<\/li>\n\n\n\n<li>Click <strong>Save Changes<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1884\" height=\"806\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/05\/Image-2025-07-09-at-4.02.31-PM.png\" alt=\"\" class=\"wp-image-1965989\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/05\/Image-2025-07-09-at-4.02.31-PM.png 1884w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/05\/Image-2025-07-09-at-4.02.31-PM-300x128.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/05\/Image-2025-07-09-at-4.02.31-PM-1024x438.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/05\/Image-2025-07-09-at-4.02.31-PM-768x329.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/05\/Image-2025-07-09-at-4.02.31-PM-1536x657.png 1536w\" sizes=\"auto, (max-width: 1884px) 100vw, 1884px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-design-the-event-page-with-elementor\">3. <strong>Design the Event Page with Elementor<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to <strong>Events &gt; All Events<\/strong> and select the event you created.<\/li>\n\n\n\n<li>Click on <strong>Edit with Elementor<\/strong> to open the Elementor editor.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1402\" height=\"807\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/07\/Image-2025-07-09-at-4.10.46-PM.png\" alt=\"\" class=\"wp-image-1965991\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/07\/Image-2025-07-09-at-4.10.46-PM.png 1402w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/07\/Image-2025-07-09-at-4.10.46-PM-300x173.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/07\/Image-2025-07-09-at-4.10.46-PM-1024x589.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/07\/Image-2025-07-09-at-4.10.46-PM-768x442.png 768w\" sizes=\"auto, (max-width: 1402px) 100vw, 1402px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use Elementor widgets to design your event page layout, including headings, images, and descriptions.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-4-add-the-event-tickets-widget\">4. <strong>Add the Event Tickets Widget<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the Elementor editor, search for the <span style=\"text-decoration: underline;\"><a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/native-elementor-widgets-for-event-tickets-plus\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Event Tickets<\/strong> widget<\/a><\/span> in the sidebar.<\/li>\n\n\n\n<li>Drag and drop the widget into your desired section on the page.<\/li>\n\n\n\n<li>Configure the widget settings to display the ticket form appropriately.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1626\" height=\"720\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/07\/Screen-Recording-2025-07-09-at-04.07.36.42-PM.gif\" alt=\"\" class=\"wp-image-1965990\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-5-customize-the-ticket-layout\">5. <strong>Customize the Ticket Layout<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use Elementor&#8217;s styling options to customize the appearance of the ticket section. Extend the customization by using <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/customizing-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">custom CSS<\/a>.<\/li>\n\n\n\n<li>Adjust typography, colors, spacing, and other design elements to match your site&#8217;s branding.<\/li>\n\n\n\n<li>Preview the changes to ensure the ticket layout is visually appealing and functional.<\/li>\n\n\n\n<li>Once satisfied with the design, click <strong>Publish<\/strong> to make the event page live with your custom ticket layout.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Enhancing your WordPress event pages with custom ticket layouts can significantly improve user experience and boost ticket sales. By integrating Event Tickets Plus plugin with Elementor, you can design visually appealing and functional ticket sections without delving into code. This guide will walk you through the process of creating custom ticket layouts using Elementor. Prerequisites&#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],"tags":[238,47,216],"stellar-product-taxonomy":[155],"class_list":["post-1965183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations","tag-elementor","tag-integrations","tag-ticketing","stellar-product-taxonomy-event-tickets"],"acf":[],"taxonomy_info":{"category":[{"value":46,"label":"Integrations"}],"post_tag":[{"value":238,"label":"Elementor"},{"value":47,"label":"Integrations"},{"value":216,"label":"ticketing"}],"stellar-product-taxonomy":[{"value":155,"label":"Event Tickets"}]},"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}],"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":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"},{"term_id":216,"name":"ticketing","slug":"ticketing","term_group":0,"term_taxonomy_id":216,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965183","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=1965183"}],"version-history":[{"count":4,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965183\/revisions"}],"predecessor-version":[{"id":1965993,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1965183\/revisions\/1965993"}],"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=1965183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1965183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1965183"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1965183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}