The Worker(called “Business Hours” in the Selection pack) is a business hours widget for the Elementor Builder. The widget displays the schedule of the company in real-time, shows the current status (open or closed), and also shows information about the holidays. All this can be flexibly configured directly from the Elementor’s interface and does not require additional code knowledge.
For further work, you need the Elementor to be installed on your site. You can download from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
On the Content tab of the Worker Elementor widget, you can manage everything related to the content of the page, change the contents of the section, description, and more.
Header content
This section contains settings related to the contents of the widget header:
Content-Type
Nothing
In the “nothing” mode, the header will retain its size but will not have content.
Current Date
Displays the {time} and (or) {date} in the format that you set in the General WordPress settings. Use curled brackets to display date/time values and HTML tags to set the style and size of the text. Below you see one example for this setting:
<h2 data-size="large">{time}</h2>
<span data-size="small">{date}</span>
this entry looks something like this:
To prevent caching of date and time data add non-cache classes for date and time tag:
<h2 class="non-cache-time">{time}</h2>
<span class="non-cache-time">{date}</span>
Current Status
When choosing to display the current status, it is possible to set the text for two types of messages:
- Open Message
- Closed Message
Depending on the working hours, these messages will alternate.
Icon
This setting sets any icon using the standard Elementor picker for Icons.
Image
This setting sets any pictures using the standard Elementor image manager.
Custom Message
This setting displays any custom message regardless of business hours. You can use HTML markup inside this setting.
Position
This setting sets the location of the content of the header relative to the header:
- Top Left
- Top Center
- Top Right
- Center Left
- Center Center
- Center Right
- Bottom Left
- Bottom Center
- Bottom Right
Business Hours
In the working hour’s section, you can configure the work schedule for each day of the week. For each day, it is possible to set several options:
Day label
The widget is configured with default names for each day. But, you can change the name of any day in the week.
Closed All Day
This setting turns on the non-working day of any day of the week. After selecting this setting, you can set a text message that will be displayed when this mode is activated.
Open 24 Hours
This toggle turns on the operation 24 hours a day. After selecting this setting, you can set a text message that will be displayed when this mode is activated.
Business Hours
The widget allows you to adjust the working time very flexible. It is possible to choose any time interval with an accuracy of up to one minute. Besides, you can create several time intervals in one day.
Holidays and Special Days
You can set up special workdays for the whole year. For such days, a special holiday message will be shown.
Hold the shift and click on the day to select several days in the calendar.
Recurring
Activate the switch for repeating holidays if you want holidays to be repeated from year to year.
Footer content
This section contains settings related to the contents of the widget footer:
Content-Type
Nothing
In the “nothing” mode, the widget footer will retain its size but will not have content.
Current Date
Displays the {time} and (or) {date} in the format that you set in the General WordPress settings. Use curled brackets to display date/time values and HTML tags to set the style and size of the text. See one of the examples below:
<h2 data-size="large">{time}</h2>
<span data-size="small">{date}</span>
this entry looks something like this:
Current Status
When choosing to display the current status, it is possible to set the text for two types of messages:
- Open Message
- Closed Message
Depending on the working hours, these messages will alternate.
Icon
This setting sets any Font Awesome icon using the standard Elementor picker for Icons.
Image
This setting sets any pictures using the standard Elementor image manager.
Custom Message
This setting displays any custom message regardless of business hours. You can use HTML markup inside this setting.
Position
This setting sets the location of the content of the footer relative to the header:
- Top Left
- Top Center
- Top Right
- Center Left
- Center Center
- Center Right
- Bottom Left
- Bottom Center
- Bottom Right
Style Tab
On the styles tab, you can configure everything related to the visual style of elements: colors, backgrounds, gradients, padding, margins, borders, and more.
Header
The header section includes settings regarding header styles and elements within the header.
Show header
This setting enables or disables the display of the widget header and all header settings.
Height
This setting sets the height of the widget header. Please note that the height can be adjusted so that there is less content.
Padding
This setting sets the paddings inside the header.
Please note that this setting does not control the header height. To change the block height, use the Height setting.
Border radius
This setting is set the border-radius for the header section.
Background type
This setting changes the background color of the header. You can choose a color, gradient, or background image.
Text Color
Changes font color settings. The font color of your theme will choose by default.
Typography
This group of settings controls everything about typography: font-size, font-weight, and other parameters.
Text shadow
This setting creates a shadow from the text.
Business Hours
The business hours section includes settings regarding styles and elements within the core section of the widget.
Show business hours
This setting enables or disables the display of the business hours’ section.
Margin
This setting sets the margin for the business hours section.
Padding
This setting sets the paddings inside the business hours section.
Border radius
This setting is set the border-radius for the business hours section.
Background type
This setting changes the background color of the business hours section. You can choose a color, gradient, or background image.
Text Color
Changes font color settings. The font color of your theme will choose by default.
Typography
This group of settings controls everything about typography: font-size, font-weight, and other parameters.
Text shadow
This setting creates a shadow from the text.
Space between
This setting changes the distance between each day.
Footer
The footer section includes settings regarding footer styles and elements within the footer.
Show Footer
This setting enables or disables the display of the widget footer and all footer settings.
Height
This setting sets the height of the widget footer. Please note that the height can be adjusted so that there is less content.
Padding
This setting sets the paddings inside the footer.
Please note that this setting does not control the footer height. To change the block height, use the Height setting.
Border radius
This setting is set the border-radius for the footer section.
Background type
This setting changes the background color of the footer. You can choose a color, gradient, or background image.
Text Color
Changes font color settings. The font color of your theme will choose by default.
Typography
This group of settings controls everything about typography: font-size, font-weight, and other parameters.
Text shadow
This setting creates a shadow from the text.
Advanced Tab
The settings in the advanced tab Worker Elementor widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.