{"id":1102,"date":"2024-06-25T18:04:57","date_gmt":"2024-06-25T18:04:57","guid":{"rendered":"https:\/\/tekomatik.com\/en\/?page_id=1102"},"modified":"2024-09-14T21:03:43","modified_gmt":"2024-09-14T21:03:43","slug":"english-hello-event-build-event-presentations-with-elementor","status":"publish","type":"page","link":"https:\/\/tekomatik.com\/en\/plugins\/hello-event-widgets-for-elementor\/","title":{"rendered":"Hello Event Widgets for Elementor"},"content":{"rendered":"
\n

\"\"<\/p>\n<\/div>\n

\n
\n
\n

<– Back to Hello Event<\/a><\/p>\n

Build event presentations with Elementor<\/h1>\n

The plugin Hello Event Widgets for Elementor<\/strong> is a companion plugin to the Hello Event<\/strong> plugin. \u00a0Using this plugin it is possible to build one (or more) customised presentation template(s) for events using the Elementor visual editor. Elementor exists as a free plugin and a pro-version. This plugin does not require the use of the pro-version of Elementor since the presentation templates are ordinary pages.<\/p>\n

If you decide to use (one or more) presentation template(s) this can be handled in two ways:<\/p>\n

    \n
  • The easy way: use the (new) setting in the Hello Event plugin settings to define a page to use as template for all events<\/li>\n
  • If you want to create several different presentation templates then use the (new) parameter in the shortcodes that are used to present lists of events<\/li>\n<\/ul>\n

    New parameter<\/strong> in the shortcodes to present list of events:<\/p>\n\n\n\n\n\t\n\n\t\n\t\n\t
    Shortcode<\/th>Parameters<\/th>Description<\/th>\n<\/tr>\n<\/thead>\n
    [hello-event-calendar]<\/td>event_page<\/td>Optional parameter: slug of a custom page to show the events<\/td>\n<\/tr>\n
    [hello-event-list]<\/td>event_page<\/td>same<\/td>\n<\/tr>\n
    [hello-event-tabs]<\/td>event_page<\/td>same<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n

    Building the presentation template with Elementor is quite straight forward using a set of dedicated widgets that appear in the editor’s widget panel in the section “Hello Event<\/strong>“:<\/p>\n

    \"\"<\/p>\n

    Hello Event Set Default<\/h3>\n

    Important: This the first widget to insert on the template page<\/strong>. Here you should fill in the slug or the ID of an existing event. When continuing editing and previewing the template page the data from this event will appear to help you see how a typical event will be presented. Later, when the template page is used to present other events, this default event is not used.<\/p>\n

    Hello Event Title<\/h3>\n

    This widget is used to add the event title on the template page. Here you can set the html tag to use (e.g. H1), and optionally set an additional CSS class on this tag. You can also use the Elementor style and advanced tabs to set styling, padding, rotation, border, backgrounds, etc.<\/p>\n

    Hello Event Thumbnail<\/h3>\n

    This widget is used to add the event thumbnail. Here you can set its width and optionally set an additional CSS class. You can also use the Elementor advanced tab to set padding, rotation, border, backgrounds, etc.<\/p>\n

    Hello Event Ticket<\/h3>\n

    Used to create a link to the shop page where tickets to the event can be purchased. You can choose to show this as a button or as a link. If you choose button, then the style panel allows you to style the button, and the advanced tab can be used to set padding, rotation, border, backgrounds, etc.<\/p>\n

    Hello Event Add to Calendar<\/h3>\n

    Used to create a button for adding the event to the visitor’s calendar (by downloading an iCal file). You can also use the Elementor style and advanced tabs to set styling, padding, rotation, border, backgrounds, etc.<\/p>\n

    Hello Event Map<\/h3>\n

    Used to add the event location map. You can add a CSS class to the div where the map is shown and the advanced tab can be used to set padding, rotation, border, backgrounds, etc.
    \nNotice<\/strong><\/em>: the actual map may not appear inside the editor; in this case it will be shown as a grey boxed area. When previewing the template page that real map will appear.<\/p>\n

    Hello Event Info<\/h3>\n

    This widget is used to add information from an attribute of the event to the template page. You select which information from a drop-down menu (date, location, excerpt, …) and you can also use the Elementor style and advanced tabs to set styling, padding, rotation, border, backgrounds, etc.<\/p>\n

     <\/p>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":451,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1102","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/pages\/1102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/comments?post=1102"}],"version-history":[{"count":22,"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/pages\/1102\/revisions"}],"predecessor-version":[{"id":1170,"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/pages\/1102\/revisions\/1170"}],"up":[{"embeddable":true,"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/pages\/451"}],"wp:attachment":[{"href":"https:\/\/tekomatik.com\/en\/wp-json\/wp\/v2\/media?parent=1102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}