Building website templates for Web3 projects with Pazly

You will learn a simple way to create website templates for creative NFT projects and help countless artists stand out, while earning a side income.

Cool … but what’s Pazly?

Pazly is a static website builder that does not require you to have coding skills in order to make beautiful websites for your NFT and Web3 projects. The aim is to enable creative types to stand out from the vast set of NFT offerings in the most popular market places.

Ideally Pazly websites are published to NFT or Crypto domains and stand as a personal creator page where a person can present themselves and their work.

Ok, how is this different from all other website builders?

With Pazly you own everything you build. It does not matter if you are making your own website of freelancing for others. All you create with Pazly belongs to you.

Pazly websites are compatible with both the traditional web and Web3, so you can be sure that what you build will work on the most popular website hosting companies today, or the next generation Blockchain/IPFS hosting startups. So, in full spirit of Web3, individual ownership of the digital assets you create with Pazly belongs to the creator and there’s no platform lock-in whatsoever.

So, you said templates. How do I start?

You are reading this on a developer blog, chances are you are familiar, or at least not afraid to code. Let’s use this super power of yours for good … the good of helping all the artists and creators who will buy your template and customize it with Pazly.

All you need to know is basic HTML, basic Tailwind CSS 2.latest and a bit of UI/UX.

To start, go to https://pazly.dev and and click on START BUILDING YOUR WEBSITE

You will have to choose between FREE and PRO (lifetime is just PRO paid one time) I recommend you start with the FREE version. This has limited blocks, but all the editors and it’s important for your building process. You will build your template in code anyway.

The initial screen of Pazly FREE with a blank canvas in the middle

Hit the Save HTML button when the composition canvas is blank. This will download an empty template you can open in your favorite code editor. For this article I’m using VS Code (with a light theme, because nobody is perfect)

It’s important not to delete anything from this file, otherwise Pazly will not recognize it as compatible with its editor. The HTML structure is important when opening this in Pazly.

The first element within the <body> tag is a <section> that will contain all the HTML blocks of your template.

Let’s build some cool stuff

The best way to start is to commit to using semantic HTML tags wherever possible. Here are some core concepts:

A block is always a full width <section> with no positioning rules.
Inside a block you can define container elements and edge elements. All editable elements have to contain a pazly-editable attribute with various values, according to what editors you want to enable for these elements.

Will result into the block below

The pazly-editable attribute is essential for Pazly. Its presence marks the element as editable. Its value set tells Pazly which editors to enable for the specific elements. So, if you’d like to enable text editing for an element, you will have to set pazly-editable=”innerHTML”. A link that looks like a button, for example “GET STARTED” in the image above will need text, background color and URL editors enabled and maybe allow users to clone it. This will require pazly-editable=”innerHTML href bg clone”

💡 See the full list of editable options on Github at https://github.com/pazlydev/template-kit#making-elements-editable

Using colors

Always use colors as classes. Pazly has its own color system that is constantly updated, and a good rule of thumb is to follow the class naming convention below:

For text color use text-p-[color]-[number], for example text-p-indigo-800
For background color use bg-p-[color]-[number], for example bg-p-gray-100

Check out the full color reference at https://pazly.medium.com/the-pazly-color-system-fdc37ebb02c3

Putting the block inside the template

Simply copy paste the block <section> in the Pazly component section and save it.

Now, open Pazly FREE or PRO and open your HTML file with Pazly. After the file is validated, you should see the hero block in the canvas in the middle