Getting Started
Adding business hours in Divi can enhance your brand credibility, and creating a stylish one is not difficult anymore. Using the business hours module for divi brings all the drag & drop features to present business working time elegantly. The most exciting feature of the module is the child item, general setting, title, start & end times, separator, and custom spacing. Moreover, the child item carries a lot more customizers that impact only a single item. In contrast, the global feature of the module applies to the entire module at once.
Child Item
Before jumping into the deep discussion of the business hours module global features, let’s get to know the Child Item first. Child Item written as Add New Item in the module has attractive features that only polish the specific item. The design attributes of the child item are separated into three categories as like as global features-
+ Content Option
+ Design Option
+ Advanced Option
Child Item Content Tab
The Content tab of the child item is an integration of all the initial features. You get each of the features required to define the day name, time structure, start & end times, separator, background, and others to decorate them. Don’t get puzzled; today, we will have a deep discussion about all the features in detail.
Content
The content feature plays a vital role in building the initial structure of the child item. This feature lets you determine the day name, time structure, start & end times, and time separator. Even more, you get the opportunity to indicate the off day by activating the Enable Off Day attribute.
Note: the time structure has two different systems to input the start & end working time.
Background
The background setting of the child item has multiple features to make a better impression among visitors, such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background impacts a particular item of the module.
Admin Label
Admin Label of the child item provides the opportunity to modify the item name as you wanted. Remember, the title is taken as the item default name, and the admin label only works when there is no title.
Child Item Design Tab
The design tab of the child item is an innovative invention to decorate every single ingredient applied previously. The item, day, time, start time, end time, time separator, custom spacing are the renowned customizer options in the design tab. So, without further ado, let’s learn how these features help embellish the business working hours section.
Item
The item feature is devoted to playing with the border of a child item. You can modify the border style, color & width over a gripping corner rounded & box-shadow effect.
Day
The day feature is responsible for polishing the day background, font-weight, style & alignment, text color, letter spacing & line-height with a gripping text-shadow. Further, you can change the border width, style & color over a corner rounding, and box-shadow effect.
Time
All the customizing options are applied in the Day feature, also available for the Time feature. Remember, the time feature can impact the start & end time at once.
Start Time
You get the privilege to modify the start time background, font style, width & color, and others related to the text color, size, letter spacing & line-height. However, the border width, color, & style get adorned with a corner rounding & box-shadow effect.
End Time
All the attributes are applied in the Start Time feature also available for the End Time feature.
Time Separator
The time separator is an excellent way to give the separator a covetable look. This feature focus on changing the separator background color, font style, text alignment, size, color, letter spacing & line-height for alluring text-shadow effects. Also, all the necessary features are available to polish the border with excellent corner rounding & box-shadow effect.
Custom Spacing
The custom spacing is divided into two categories, the wrapper & content spacing system.
- Wrapper
The wrapper spacing option provides the wrapper margin padding around the entire child item.
- Content
The content spacing option can set a balanced gap around the day, time, start & end time, and separator. Also, you have the item padding option here.
Sizing
You can control the alignment, width, and height of a child item under the sizing feature. Moreover, the sizing feature stands in your favor to increase or decrease your container’s width and height. Even you can set a min or max-height & width of the item.
Child Item Advanced Tab
As a designer, you can go beyond to achieve complex and gripping design under the content & design tab. However, the advanced tab bestows several unique features to have complete control over the module. This has CSS ID & Classes and Custom CSS for developers to play with the module precisely. In addition, however, the visibility, transitions, position, and scroll effects settings are included here to work fluently.
Global Feature Of the Divi Business Hours Module
Now, it’s time to discover how the global features of the Divi business hours module work. One thing you should remember, the global feature of the module impacts the entire module at once. However, if you set a value for the individual item, the global feature can not override that. The design procedure of the Divi business hours global features is split into three groups of features,
+ Content Tab
+ Design Tab
+ Advanced Tab
Divi Business Hours Module Content Tab
The Global content tab provides a few basic features to add a title for the business hours module. Also, the background and admin label features are included under this tab to give the module a desired look.
General Setting
The General setting brings the opportunity to provide a custom title for the Divi business hours module.
Background
The background setting of the content tab has multiple facilities to implement for a better layout. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire.
Admin Label
Admin Label of the business hours module provides the opportunity to modify the module name as you want. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Divi Business Hours Module Design Tab
The design tab is considered the most crucial among other tabs in the module. This tab is dedicated to adorning the entire module bit by bit. Under this tab, you get outstanding features like the title, item, day, time, start & end time, separator, custom spacing, and more. So, let’s begin with a detailed demonstration of all these features.
Title
You get the privilege to apply a gripping background, alignment, font style, width, text color, tag, size, letter spacing, and so on with a text-shadow effect. Nevertheless, a designer can precisely play with the border with a corner rounding & box-shadow effect.
Items
Playing with the item feature is all about applying a clean edge border of your desired color along with a corner rounding & box-shadow effect.
Day
The customizing possibility you have in the title is also available in the day option to decorate faultlessly. In addition, the day feature brings a width controller for a better outcome considering the look.
Time
Each feature you receive in the title option is also achievable under the time feature.
Start Time
As a designer, you get the facility to change the background, font style, width & color of the start time under this feature. In addition, you are also allowed to modify the text size, letter spacing & line-height over a covetable border, and box-shadow effect.
End Time
The design & customizing procedure is entirely the same for the start time & end time feature. So, whatever you can achieve in the start time is also possible for the end time.
Time Separator
The time separator is an extraordinary way to provide the separator with an alluring view. This feature emphasizes changing the separator background color, font style, text alignment, size, color, letter spacing & line-height with a text-shadow effect. Also, all the required features are available to furnish the border with excellent corner rounding & box-shadow effect.
Custom Spacing
The custom spacing of the global feature is broken down into two different categories, the wrapper & content margin padding system.
- Wrapper
The wrapper spacing option provides the main wrapper margin & padding around the entire Divi business hours module. Besides that, you can implement the wrapper margin & padding over the item and title under this option.
- Content
The content spacing allows you to provide margin & padding around the title, day, time, start & end time, and time separator.
Sizing
As a designer, you would love to control the business hours module’s alignment, width, and height. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. Even you can set a min or max-height & width of the module.
Spacing
Divi makes the spacing setting a default feature for the whole module. Therefore, this function will find two common margins and padding settings that work the same for all Divi modules.
Border
The Border feature of the business hours module can provide you with a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see it’s easier than you thought.
Box-Shadow
This Box shadow affects the entire Divi business hours module and has six distinct shadow effect styles. Picking up one of these shadows brings a couple of attributes to amplify its beauty.
Filter
The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for the entire module. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to the container. So, increase or decrease the value of these effects as you want them to your design.
Transform
The transform feature of the Divi business hours module provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on the module will give you better control.
Animation
Animation effect setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.
Divi Business Hour Module Advanced Tab
Giving the Divi business hours module a gorgeous look is just a matter of playing with the feature situated under the content & design tab. However, the advanced has some next-level capabilities that bring extraordinary effects to the module. For example, the advanced tab has CSS ID & Classes and a Custom CSS field for developers to play precisely with each element. Also, the Visibility, Transitions, Position, and Scroll effects settings are included here to work fluently.
CSS ID & Classes
- CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or to style the module.
- CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.
Custom CSS
There are three different custom CSS areas in the Divi business hours module you can target and set your custom CSS code there. A sign “?” in each CSS input box will tell you which class has been targeted.
Visibility
The advanced setting’s visibility option allows designers to hide the Divi business hours module for a particular device.
Transitions
You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting.
Position
Here you have complete control over the relative, absolute, and fixed positions. This option is also available in every Divi module and works almost the same for all.
Scroll Effects
If you wish to give a scroll effect to your Divi business hours module, here you have the opportunity to achieve it with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, enable vertical motion, and motion effect trigger functions.
NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
