Using Business Hours Element with Elementor Page Builder

Adding Business Hours Element

Once Ultimate Elements – Elementor Page Builder plugin is installed on your site, you will get a new element in Elementor  called Business Hours in a new category called Ultimate Elements – Business as shown in the following screenshot

This element alllows you to add Opening and Closing hours of your company or business. You can drag the element into the Elementor page builder to get a screen similar to the following.

The above screenshot previews the default design with default opening and closing time for each day of the week. You can change the design by using the Design setting. 

The Ultimate Elements plugin contains 4 Business hours designs. Let’s take a look at the other 3 designs for this element.

Design 2

Design 3

Design 4

Once the design is selected, you can configure the business hours for each day of the week. You can click on any day to get the settings for the day as shown in the following screenshot.

Let’s take a look at the available settings.

  • Day – By default, each day of the week is set up. If you want the starting day of the week to anything other than Monday, use this setting to change the name of the Day. Then, you will have to change the names of the other days.
  • Closed? – This setting defines whether the business is open or closed on each day. By default this is set to No and hence all days will be considered business days. You can set it to Yes to display specific day as closed.
  • Opening Time – This setting defines the opening time of the business for the selected day. This setting will be disabled once you select Yes for Closed? setting.
  • Closing Time – This setting defines the closing time of the business for the selected day. This setting will be disabled once you select Yes for Closed? setting.

Once the settings are changed, the updated hours and status will be previewed instantly on the right hand section of the screen as shown in the following screenshot.

Then you can click the Style tab to load the design settings for the Business Hours element for Elementor as shown in the following screenshot.

You can adjust the style settings and create a custom design as shown in the previous screenshot.

Once the style settings are modified, you can click the preview icon or view the page on the frontend to view the business hours  inside a post or page. The following screenshot previews the site tagline.