Content Controls
Content
The controls in this section allow you to define and manage the days and corresponding hours of operation for your business, with an option to accentuate specific timings.
- Days – Define a list of the days for which you want to specify business hours.
- Day – Input the specific day of the week, such as “Monday” or “Tuesday”.
- Time – Enter the operating hours for the specified day, like “9:00 AM – 5:00 PM”.
- Accent Style – Toggle to give certain hours a distinct visual emphasis, making them stand out.
Design Controls
Rows
Shape the appearance of each row containing your business hours, playing with backgrounds, borders, and spacing for a harmonious display.
- Background A – Choose a primary background color for alternating rows or the main background.
- Background B – Select a secondary background color to use for contrast in alternating rows.
- Background Accent – Define a background color for rows with accented timings, drawing attention to them.
- Padding – Control the space within each row, making sure content inside doesn’t feel cramped.
- Padding – Fine-tune the inner space of each row for optimal readability and aesthetics.
- Border – Toggle to decide if you want borders around each row.
- Border Color – Set a color for the borders around the rows. (Note: This control is only available when the border toggle is set.)
Typography
Adjust text properties to enhance readability and aesthetics of the days and timings, allowing for color differentiation and accentuation.
- Day – Style the text for days, selecting suitable fonts, sizes, and weights.
- Time – Customize the typography of the timing text to align with your design.
- Day B – Define a color to be used for the text of certain days, potentially for contrast or highlighting.
- Time B – Set a color specifically for the timings text to differentiate or emphasize them.
- Day Accent – Adjust typography settings for days with accentuation, ensuring they’re noticeable.
- Time Accent – Style the accented timings, setting them apart from regular timings.
Container
Style the overall container that houses the business hours, making adjustments to its width, background, and borders to make it blend seamlessly into your website.
- Width – Control the width of the overall business hours container, ensuring it fits your layout.
- Background – Choose a background color for the entire container, potentially matching or contrasting with your site’s theme.
- Borders – Refine the container’s borders to match your site’s design aesthetic.
- Radius – Determine the roundedness of the container’s corners.
- Styling – Customize the container’s border style, thickness, and color for a polished look.
- Shadow – Apply a shadow effect to the container, providing depth and prominence on the page.
- Shadow – Adjust the shadow settings of the overall container to give it depth or lift it off the page.
- Padding – Decide on the internal spacing of the container, ensuring content inside has room to breathe.
- Padding – Modify the exact space within the container for a balanced presentation.
Spacing
Manage the spacing around the business hours container, positioning it ideally in relation to surrounding elements on your page.
- Margin Top – Set the space above the business hours container to achieve desired separation.
- Margin Bottom – Designate the space below the container, ensuring it doesn’t clash with subsequent elements.
