Opening times – Component and Tutorial

Our friends at ProteusThemes created an Opening time widget for Bootstrap. We turned it into a reusable Pinegrow component and recorded a step-by-step tutorial along the way.


Download the free Opening time component and use it on your websites or websites you create for your clients.

IMPORTANT: Using components requires that you open your website as a project (File -> Open project), not just opening a single file.

pt.openingtimes

See how we created the component and how it is used. After watching this you’ll be able to create powerful reusable components of your own.

Define the component

Use Define component action to turn an element into a reusable component:

 

Test and fix its layout

Make the Opening time component responsive & see how easy it is to work with Bootstrap in Pinegrow:

 

Define editable areas

Make texts editable, so that they are not lost when the component is updated:

 

Define editable classes

Even classes can be editable:

 

Add resources

Package CSS and JS files with the library:

 

Use the component in website projects

Add the component library into a new project and explore how it can be updated (or not) and duplicated into a new component definition:

 

A peek under the hood

See how component definitions are stored as HTML element attributes: