Pazly is a landing page building tool for both non technically skilled users and information technology specialists. It aims to allow users to quickly build high quality, high converting web pages which are completely owned by the users.
Pazly relies on TailwindCSS and has its own coloring system. If you are a fan of Tailwind CSS and want to help nocoders, freelancers and small businesses make great looking landing pages, this guide is for you.
Benefits of making templates for Pazly:
✅ You set your price for your work
✅ You keep all the revenue from your template sales. Pazly does not apply any sales commissions
✅ You get great discounts on Pazly Pro memberships
✅ You help a fast growing number of users who will benefit from your awesome work.
To test your work and make sure nocode users can use what you've build, please Sign Up to Pazly Pro account at https://pazly.dev/
As a developer, you can get a 40% discount forever. Use the 40OFF4DEVS coupon after the 10 free trial days. Limited to 1000 new signups.
The easiest way to start is to fork or download the starter kit from Github here https://github.com/pazlydev/template-kit
It contains a simple file with dummy elements and the structure that allows Pazly to read and understand the template.
Download the index.html and modify this to your linking
Pazly uses its own implementation of the coloring system proposed by the Tailwind CSS team. Since Tailwind uses a plugin system and Pazly targets non technical users, we opted to implement a standalone coloring system which is served through CDN.
Check the guide on Medium for the class names, rules and color codes.
A landing page for Pazly is formed from a set of blocks. Each block has within it editable elements. It is very important to understand the difference between blocks and the elements within the blocks
A block represents a full width section of a Pazly webpage. Blocks are relative to their container. Blocks can be moved before or after neighboring blocs. Blocks can be cloned by default. It is a good practice to color blocks one by one.
Editable elements should be marked with the pazly-editable attribute. This is a set of string values, similar to the class attribute and contains identifiers for the editors you want to enable for the selected element.
Example:
<button pazly-editable="innerHTML bg href" class="...
Add innerHTML to the pazly-editable attribute. This will enable a text editor for the element. Please make sure that the innerHTML contains only text
<a href="" pazly-editable="innerHTML bg href" class="....
Simply add bg to the pazly-editable attribute. This will enable the color picker.
Use the bg to enable element level background. Choose this editor for your buttons, links, cards, or areas that you want the user to color differently.
<a href="" pazly-editable="innerHTML bg href" class="...
IMPORTANT: The section background picker is assigned out of the box, please do not assign the pazly-editable attribute on the section block.
Add href to the pazly-editable attribute. This will enable the link input editor. Choose this editor for your buttons and links
<a href="" pazly-editable="innerHTML bg href" class="....
Editing images is as simple as setting the src value on the pazly-editable attribute of an image tag. This will enable the image editor which allows you to set an image link or open an image from your computer. The opened image is later transformed into a base64 string.
IMPORTANT: Do not use pazly-editable="src" on HTML elements that do not support the src attribute natively.
<img src="" pazly-editable="src" class="....
Editing video tags is as simple as setting the src value on the pazly-editable attribute of a video tag. This will enable the video editor which lets you set a video link. At the moment videos only support one video link, so please use a link that point to a .mp4 video
IMPORTANT: Do not use pazly-editable="src" on HTML elements that do not support the src attribute natively.
<video src="" pazly-editable="src" class="...
To enable embeddables, please construct a wrapper element. Attache the pazly-editable attribute containing the iframe value. You can attach other editables like bg.
<div pazly-editable="iframe bg" class="...
<iframe ...
Attache the form value to the pazly-editable attribute in the form tag, like in the example below.
<form pazly-editable="form" method="POST" action="" static-form="" class="...
You set your own prices, your own item description. Please add a video demo on how your customers should use the template you make with Pazly Pro. Please also mention they can reach Pazly Pro at https://pazly.dev/
This means that when Pazly Pro users open the Template panel, your template will show up with a quick link to purchase. This works only with Gumroad for now.
Instructions on how to submit coming soon...