The Business Hours module is needed for all businesses who wish to display the day and time of when they’ll be available for their users and customers. UABB version 1.9.0 brings in the Business Hours module that will help you display stylish business hours table on your website. Take a look at a few Business Hours demonstrations here.
Let us take a walkthrough to help you understand the settings of this module.
Like all the other modules of Beaver Builder, or the Ultimate Addons for Beaver Builder, the Business Hours module can simply be dragged and dropped on your page and customized as required. Here are a few settings that you can manage with the setting tabs of this module.
Adding Days and Time using the Content Tab
The Content tab allows you to add the day with their respective working hours. It lets you add multiple timings as well as change the font color, background color for time and day individually. Just click on the Edit Day option to edit the respective day and its attributes.
You can choose to add a day and manage things further as you wish to display.
Presets
While working with UABB modules, you can simply choose any style from a list of professionally designed, sleek, and classic presets. Presets will help you quickly create great designs. You can select the preset of your choice here. But before changing presets, save the content, you added to the module. Otherwise, your content will be overwritten with the default one.
Styling the display of days and time with options like Alignment, Spacing, etc.
Within the style tab of the Business hours settings, you can change the day and timing style like alignment, spacing, divider and decide whether you want to display it as striped. You can provide a background color, border type and border-radius for the box.
Managing the Typography of the Days and Time being displayed
The Typography tab allows you to change the typography of the day and timing. You’ll be able to select a Font family, size, line height, color, text transform, decoration and letter spacing.
Additional settings such as margins, animations and custom coding
The Advanced tab allows you to manage some additional settings like the margins, responsiveness, animation and visibility to users. It also lets you add some additional HTML code if required.
