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

    Access your files securely from anywhere

        Zoho Developer Community




                                  Zoho Desk Resources

                                  • Desk Community Learning Series


                                  • Digest


                                  • Functions


                                  • Meetups


                                  • Kbase


                                  • Resources


                                  • Glossary


                                  • Desk Marketplace


                                  • MVP Corner


                                  • Word of the Day



                                      Zoho Marketing Automation
                                              • 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/


                                              Manage your brands on social media



                                                    Zoho TeamInbox Resources

                                                      Zoho DataPrep Resources



                                                        Zoho CRM Plus Resources

                                                          Zoho Books Resources


                                                            Zoho Subscriptions Resources

                                                              Zoho Projects Resources


                                                                Zoho Sprints Resources


                                                                  Qntrl Resources


                                                                    Zoho Creator Resources



                                                                        Zoho Campaigns Resources


                                                                          Zoho CRM Resources

                                                                          • CRM Community Learning Series

                                                                            CRM Community Learning Series


                                                                          • Kaizen

                                                                            Kaizen

                                                                          • Functions

                                                                            Functions

                                                                          • Meetups

                                                                            Meetups

                                                                          • Kbase

                                                                            Kbase

                                                                          • Resources

                                                                            Resources

                                                                          • Digest

                                                                            Digest

                                                                          • CRM Marketplace

                                                                            CRM Marketplace

                                                                          • MVP Corner

                                                                            MVP Corner





                                                                              Design. Discuss. Deliver.

                                                                              Create visually engaging stories with Zoho Show.

                                                                              Get Started Now