1. Home
  2. Docs
  3. Marketing Elements
  4. Business Hours

Business Hours EA Element

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Business Hours Element

»Content

 

Business Hours

: Set the business timings either predefined or custom.

Adding the days:

⇒Day: Select the day.

: Mark the day as closed or not. If select Yes, add a custom close text.

: Set the opening hours.

: Set the closing hours.

⇒Highlight: Do you want to highlight the day? Enable highlight and add custom background and text color.

⇒Add Item: Use the ‘+Add Item’ button to add more days to the business hours.

⇒24 Hours Format?: Enable/disable 24 hours format.

⇒Days Format: Set the days format either short or long.

 


»Style

 

Rows Style

⇒Background Color: Add a custom color to the background of the business hours rows for both normal and hover mode.

⇒Striped Rows: Enable the striped rows and define particular rows either even or odd. And then add the background and text color of the striped rows.

⇒Padding: Set the padding value for the top, right, bottom and left around the rows for different dimensions. You can link the values together or customize them individually.

⇒Margin Bottom: Set the bottom margin of the rows for different dimensions.

⇒Closed Row:

→Background Color: Add a custom background color to the closed row.

→Day Color: Add a custom color to the day of closed row.

→Text Color: Add the custom color to the text of the closed row.

⇒Rows Divider:

→Divider Style: Select a divider style from the list according to your preference. And then set the divider width for different dimensions.

Divider Color: Add a custom color to the rows divider.

 

Business Hours

⇒Day

→Alignment: Set the alignment of the business days.

→Color: Customize the business days’ color for both normal and hover view.

→Typography: Set the typography options for the day.

⇒Hours

→Alignment: Set the alignment of the business hours.

→Color: Customize the business hours’ color for both normal and hover view.

→Typography: Set the typography options for the hours.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Business Hours Element.


Was this article helpful to you? Yes No

How can we help?