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.
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:
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: