• Home
  • Add-ons
  • Templates
  • Docs
    • Get Started
    • Quick Setup
    • Style Editor
    • Resources
    • Updates
    • Tutorials
  • Blog
     
  • Home
  • Add-ons
  • Templates
  • Docs
    • Get Started
    • Quick Setup
    • Style Editor
    • Resources
    • Updates
    • Tutorials
  • Blog
  1. Add-ons

 

Easy-to-Use & Customizable 

Business Hours Widget 

 

bg-tertiary hs-fullwidth has-no-gutter

style01

  • Monday

    09:00 - 20:00

  • Tuesday

    09:00 - 20:00

  • Wednesday

    09:00 - 20:00

  • Thursday

    09:00 - 20:00

  • Friday

    09:00 - 20:00

  • Saturday

    09:00 - 12:30

  • Sunday

    Closed



<!-- *** Matrix add-ons Business hours *** -->
<ul class="hours">
    <li>
        <span>Monday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>
    <li>
        <span>Tuesday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>
    <li>
        <span>Wednesday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>
    <li>
        <span>Thursday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>
    <li>
        <span>Friday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>
    <li>
        <span>Saturday</span>
        <p>
            09:00 - 12:30
        </p>
    </li>
    <li>
        <span>Sunday</span>
        <p>
            Closed
        </p>
    </li>
</ul>

style02

  • Monday

    09:00 - 20:00

  • Tuesday

    09:00 - 20:00

  • Wednesday

    09:00 - 20:00

  • Thursday

    09:00 - 20:00

  • Friday

    09:00 - 20:00

  • Saturday

    09:00 - 12:30

  • Sunday

    Closed



<!-- *** Matrix add-ons Business hours *** -->
<ul class="hours bg-primary mid-round color-white add-10" style="background:#002fdc;">
    <li>
        <span>Monday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Tuesday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Wednesday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Thursday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Friday</span>
        <p>
            09:00 - 20:00
        </p>
    </li>

    <li>
        <span>Saturday</span>
        <p>
            09:00 - 12:30
        </p>
    </li>

    <li>
        <span>Sunday</span>
        <p>
            Closed
        </p>
    </li>
</ul>

style03

  • Business hours
  • Monday - Friday

    08:00 - 17:00

  • Saturday

    08:00 - 12:30

  • Sunday

    closed



<!-- *** Matrix add-ons Business hours *** -->
<ul class="hours add-20 mid-round" style="border:1px solid #f0f0f0;">
    <li style="font-size:20px; padding:15px 0;">Business hours
    </li>

    <li>
        <span>Monday - Friday</span>
        <p>
            08:00 - 17:00
        </p>
    </li>

    <li>
        <span>Saturday</span>
        <p>
            08:00 - 12:30
        </p>
    </li>

    <li>
        <span style="color:red;">Sunday</span>
        <p style="color:red;">
            closed
        </p>
    </li>
</ul>

style04

Working hours

  • Monday - Friday

    08:00 - 17:00

  • Saturday

    08:00 - 12:30

  • Sunday

    closed



<!-- *** Matrix add-ons Business hours *** -->
<div class="hs-description color-white cc-clearover add-20 bg-dark">
    <div class="left-align">
        
            <p class="size-16 weight-500">
                Working hours
            </p>
       
    </div>
</div>

<ul class="hours add-20" style="border:1px solid #f0f0f0;border-top:none;">
    <li>
        <span>Monday - Friday</span>
        <p>
            08:00 - 17:00
        </p>
    </li>

    <li>
        <span>Saturday</span>
        <p>
            08:00 - 12:30
        </p>
    </li>

    <li>
        <span style="color:red;">Sunday</span>
        <p style="color:red;">
            closed
        </p>
    </li>
</ul>

style05

Working hours

  • Monday - Friday

    08:00 - 17:00

  • Saturday

    08:00 - 12:30

  • Sunday

    closed



<!-- *** Matrix add-ons Business hours *** -->
<div class="hs-description color-white cc-clearover add-20 bg-wisteria" style="border-radius:5px 5px 0 0;">
    <div class="left-align">
        
            <p class="size-16 weight-500">
                Working hours
            </p>
      
    </div>
</div>

<ul class="hours add-20 has-shadow" style="border:1px solid #f0f0f0;border-top:none; border-radius:0 0 5px 5px;">
    <li>
        <span>Monday - Friday</span>
        <p>
            08:00 - 17:00
        </p>
    </li>

    <li>
        <span>Saturday</span>
        <p>
            08:00 - 12:30
        </p>
    </li>

    <li>
        <span style="color:red;">Sunday</span>
        <p style="color:red;">
            closed
        </p>
    </li>
</ul>

How to Add a Custom Widget to Your Jimdo Website


In Matrix Themes admin menu select the Shortcodes section.

Choose a custom widget and click the Copy button.

Paste the widget code into your website using the Widget/HTML module.

Customize the widget by adding your own text and images.

hs-fullwidth bg-secondary-dark color-white

Make your own website

with built-in tools to grow your business online.

Select a template
bg-dark color-white hs-fullwidth has-mobile-fullwidth-btn

Matrix Themes


Stand out with professional Jimdo website

Premium 24/7 Support · Lifetime Updates




has-right-col-border

Resources

  • Templates
  • Pre-made Templates
  • Matrix Builder
  • Add-ons
  • Pricing
  • Marketplace

Documentation

  • Get Started
  • Quick Setup
  • Style Editor
  • Tutorials
  • Updates

Quick links

  • Made with Matrix
  • Style Guide
  • Shortcodes
  • Jimdo Creator
  • Small Business websites
  • Feedback

Try Matrix Builder
draggable-logo

Global colors
  bg-primary
  bg-primary-light
  bg-primary-dark
  bg-secondary
  bg-secondary-dark
Template colors
  body
  top-header
  top-header-inner
  header
  header-inner
  navigation-inner
  navigation color
  dropdown background color
  content
Footer Styles
  background
  text color
  link color
  horizontal line
Buttons
  style 1
  style 2
  style 3
  text color
Mobile navigation
  background color
  navigation color
Other elements
  social icons
  top header border
  header border
  nav inner border
Template configurations
 
has-center-nav has-sticky-logo has-large-header g-font no-shopping-cart
 
Top header inner
 
 
 
Header inner
 
 
 
Navigation inner
 
 
 
Navigation styles
 
snip-nav --line01
 
Sub-menu (breadcrumbs) styles
 
size-15
 
Mobile Navigation styles
 
size-30
 
Content styles
 
form-white
 
Footer styles
 
o-form color-white white-outline-btn
 
Footer background image
 
 

 

Typography

Heading H1
weight-400
 
Heading H2
weight-400
 
Heading H3
weight-400
 
Buttons
weight-400
 
 
Advanced settings
 
Custom CSS

 

#cc-inner .my-class {

  color:#f0f0f0;

}

 


Note:
All changes made here will be applied to your entire website.
is-switcher

About | Privacy Policy | Cookie Policy | Sitemap
Created with Jimdo
Log in Log out | Edit
  • Scroll to top
Close