Custom template development using Patternlab

Custom template development using Patternlab

If you are not satisfied with the pre-made templates in Zoho Sites, I have done quite some work up to now to create a setup a web developer can use to offer you a custom template which you can upload to Zoho Sites.

For offline Zoho Sites Template Development, I eventually found https://patternlab.io. Patternlab provides all the support to develop your company design language, AKA your branding!

I created two starterkits:
* https://gitlab.com/ringods/starterkit-building-blocks: this one contains basic design elements like color scheme previews, font previews and previews for basic HTML building blocks.
* https://gitlab.com/ringods/starterkit-zoho-sites: this one contains patterns which render the exact HTML equivalent of the drag-and-drop elements in the Zoho Sites web editor. This allows for template development (styling/branding!) on your local laptop and with a setup a designer can put under source control

Using these two starterkits, you can get a headstart to create a custom template. To make a release of a custom template, Zoho Sites has documented on their site what the contents need to be. I have created an automated alternative in a reusable NPM package:

https://gitlab.com/ringods/neutrino-preset-zoho-sites-template

This project contains a reusable webpack configuration which compiles SASS files to CSS, adds the required face files and zips them up.

This is a lot of information to digest. If you want to see all of the above in action, here is a working setup:

https://gitlab.com/ringods/zoho-sites-elate-template

If you are a web developer, give it a try. Help me out by filing issues or submitting merge requests. The starterkit-zoho-sites still needs more of the custom sections to be implmented in here.

Ringo

      • Sticky Posts

      • Unveiling Zoho Sites 2.0 - A new dimension in website building

        Dear Zoho Sites Users, We are thrilled to announce the launch of Zoho Sites 2.0 today! This refresh represents a significant step forward in the capabilities of Zoho Sites and is crucial for creating a lasting and positive impact on our customers' businesses.
      • Website Accessibility

        I have two sites created in Zoho Sites which are both live. Some questions: 1. Are any of the template themes WCAG 2.1 AA compliant? 2. How do I change the format of a sub-heading in the header section? 3. Is there any way to add focus indication for
      • Visual Editor Webinar

        Join our FREE live webinar to learn how to use the Zoho Sites Visual Editor to easily design your website. Our product specialist will demonstrate how this tool will help you customize your website to suit your requirements.  Register here: https://www.zoho.com/sites/webinars/
      • SEO for your Zoho Sites Website

        Join our live webinar to learn how to use Zoho Sites' SEO tools to boost your website's ranking. Our product specialist will demonstrate everything you need to know about optimizing your web pages to make them search engine friendly. Register here for free: https://www.zoho.com/sites/webinars/
      • Zoho Sites Webinar | Integrations

        Join our FREE live webinar to learn how to integrate both Zoho and third-party products with your Zoho Sites website. Our product expert will demonstrate how to use these integrations to grow, manage, and retain the customers you bring in. Learn how to take your business forward and build stunningly robust and efficient websites. Register here: https://www.zoho.com/sites/webinars/