Business hours Elementor helps you to get office hours to your site in a decent way. Luckily, this widget comes with a lot of highly customizable options. Without any hassle, one can easily alter it customize it as per his/her demand.
Today, I’m going to make an overall discussion on the mighty topic ‘How to Add Business Hours Elementor’. Literally, It’s as easy as a piece of cake. Here you’ll get Content Tab, Styling Tab, Advanced Tabs to use several options excellently.
Let's Start The Tutorial Then!
First of all, you have to drag your mouse into the Elementor page and select MA Business Hour. Now, you will see demo contents by default like this:
Thinking about presetting the design?
Right on the option of edit MA Business Hour, you will see the Design Preset option. There are some filtering options that you can set. Just under the design preset button, you will get a ‘Business Timing Button’.
In the “Business Timings” option, you will get two opinions as well. The following are ‘Default’ and ‘Custom Table’ respectively. However, in the default option, you really can’t customize all of the options given below. On the other hand, in the custom table, you are able to customize as per your requirements. For instance, if you want to change the date or day in your language you can make it easy with the custom table button.
After this is done, there is a title text to show. Here’s it is written as OPENING HOURS. You can name it whatever you like.
Plus if you want to add an icon inside the days you can select the icon button. Luckily for you, there are several icons. You can select anyone from the given list.
As this is done, let’s move into Show Button (Right at the bottom of the page). Once you have enabled this, you will see the ‘Book Now’ button.
Design Preset Changes
Next, click for short details and for removing some days from the list. Now, let’s select an image. Thus, the short details system works. ( You can disable the button ).
Now Try Other Design Preset yourself and see how it look.
Okay then, move to know our next variation ‘Booking Reservation One’. To customize it, you can change the image and remove some days. Let see how cool it looks!
Let’s move forward to ‘Booking Reservation Two’. The almost the same procedure you can set it.
Navigate to Style Tab
Now get into the Styling Tab. There are a lot of handy color choices. You can pick any background color from here. Plus, if you want to set a hover color then you can set a color. While you are clicking anywhere you can see that color. (I set it green for eye ease).
You can change the color of both of them. For a better understanding, I’ve set the day color white and for an hour the color is a lighter one.
Besides, you can even change their fonts. What’s more, there is some great color presets ready for the Call to action button. You can choose this.
Moreover, as you want to give the press button a decent look, you have to set an excellent button color as well.
Thanks for reaching this far!
I’ve tried my best as you can know everything about adding Business Hours Elementor widget to your site.
If you still have any questions or if you are having trouble using this widget, please feel free to Contact here. We are ready to solve your problem at once.
