Table of Contents
Opening Hours block allows you to display business opening hours sufficiently. It is part of the Citadela Blocks plugin. This block can be used altogether with Cluster block which gives you even more customization ways. Please see some Opening Hours examples in our blog post.
Where do can you place this block?
Pages and Posts. Thanks to the Gutenberg editor, you can add information to any Page or Post.
What is possible to custom?
There are many options like colours, layouts, box size, alignment, font type. You can add a link on a day title or day hours. You can decide to hide empty days or left them visible. There are two main layouts: List and Box. If you choose Box layout, then it is possible to set up the box width.
Colours
Choose from presets or custom colors. For List and Box layout, you can set up the color’s appearance on this:
- Day title
- Day hour
- Line
Highlights
Use link connection to describe more information that is relevant to some specific day or hours.
Where do you find settings?
In Block Toolbar
- Layout type: List or Box
- Text alignment (left, center, right)
- Font type Bold, Italic, Strikethrough, Subscript, Superscript
- Font colour – changes fond colour only for a specific day
- Link connection
In Sidebar Inspector
- Hide empty days option
- Colour settings for Day title, Day hours, Lines
- Box width (only for Box layout)
To obtain more customization, please use this Opening Hours block altogetgher with Cluster block.
Example from Barber Layout
This layout is of the one-page website type. We used the Opening Hours block section on it, which we designed together with another area. In this case, we showed all the branches that run the barbershop under one brand. We created individual shops via “listing” functionality. Then, through the Listing Item List block, we displayed them here. And with the help of the Cluster block, we inserted an image into the background. We set the overlay and colour.
Newbie user tip
Instal on some subdomain a clean WordPress for testing purposes. Then install the Citadela theme, plugins and, import any Citadela Layout you like on your test installation and play around to learn how it works.
