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?

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?

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?

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

  • 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

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

Need more info? Check out Pazly’s developer onboarding page https://pazly.dev/developers.html

Selling Online (Gumroad, Envato, Open Sea, etc.)

Please also mention they can reach Pazly at https://pazly.dev/

--

--

Building Pazly https://pazly.dev Web enthusiast. Experience driven.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store