Stories by Cris on Medium

Building website templates for Web3 projects with Pazly

Cris — Thu, 07 Jul 2022 12:59:51 GMT

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 tag is a

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
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.

https://medium.com/media/e2732541493466bca4c303b4357ec2d4/href

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

in the Pazly component section and save it.

https://medium.com/media/7aa4f23d0bf5c06568ed3209dd5b3cc6/href

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.)

You set your own prices, your own item description. Please add a demo video on how your customers should use the template you make with Pazly.

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

The Pazly color system

Cris — Mon, 16 Aug 2021 21:46:22 GMT

Getting Started

Pazly https://pazly.dev 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.

Color System

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, I opted to implement a standalone coloring system which is served through CDN. Check the guide below for the class names and color codes. You will notice they match the coloring in the TailwindCSS documentation. Setting the colors is exactly like in TailwindCSS: set the corresponding CSS class on your element. Same codes apply to text and border, so for example

Setting a bluegray 200 background means adding the bg-p-bluegray-200 class
Setting a bluegray 200 text means adding the text-p-bluegray-200 class
Setting a bluegray 200 border means adding the border-p-bluegray-200 class

Grays

Colors

Github Starter Kit

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 index.html with dummy elements and the structure that allows Pazly to read and understand the template.

The benefits of making templates for Pazly:

✅ You set your price for your work

✅ You keep 100% 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.

Pazly Template Developer Guide

Cris — Mon, 16 Aug 2021 21:36:54 GMT

Getting Started

Benefits of making templates for Pazly:

✅ You set your price for your work

✅ You keep 100% 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.

Examples

Github Starter Kit

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 index.html with dummy elements and the structure that allows Pazly to read and understand the template.

Color System

Setting a bluegray 200 background means adding the bg-p-bluegray-200 class
Setting a bluegray 200 text means adding the text-p-bluegray-200 class
Setting a bluegray 200 border means adding the border-p-bluegray-200 class

Grays

Colors

Template structure

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

Editable 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 neighbouring blocs. Blocks can be cloned by default. It is a good practice to color blocks one by one.

Making Elements Editable

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:

 pazly-editable=”innerHtml bg href” class=”….

IMPORTANT: Please add these markers at leaf nodes in your HTML tree structure

Editing text

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

innerHTML” class=”….

Editing background

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.

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.

Editing links

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=”….

Clone-able links

To enable element cloning, simply add the ‘clone’ to the pazly-editable attribute. In the image above, the link is part of a row, which can contain multiple such links. So the code becomes

<a href=”” pazly-editable=”innerHTML bg href clone” class=”….

Editing images

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 videos

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=”….

Editing embeddables

To enable embeddings, please construct a wrapper element. Attache the pazly-editable attribute containing the “iframe” value. You can attach other edibles like ‘bg’.

<div pazly-editable=”bg iframe” class=”…

div>

Editing forms

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=”…

Selling Online (Gumroad, Lemon Squeezy, etc.)

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/

Getting Featured in Pazly Pro

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…

Landing pages for the undecided

Cris — Mon, 10 May 2021 16:45:48 GMT

Helping early stage startups with their online presence.

Building landing pages is almost an exact science nowadays. As a freelancer, it is in your advantage to adapt your client’s content to proven successful patterns and deliver fast. Let’s explore how you can do this efficiently for early stage startups.

In the very early stages, startup companies have great pitches and even greater ambitions but not a very clear focus on building a compelling landing page that clearly describes their services. This method will help you achieve a great landing page in minutes.

Warning: this is as difficult as making a sandwich

Prepare

There’s no winning combination but I found out that these tools help me achieve great results in almost no time. It takes literally minutes to prepare:

Images: great websites need even greater images. unsplash.com and pexels.com are perfect places for high quality copyright free images

Illustrations: undraw.co and blush.design are my favourite, but there’s a lot of free to use illustration projects on the web

Image composition: it doesn’t have to be complicated, just use a presentation software. Google Slides, PowerPoint or Keynote work just fine for now. You can make more refined graphics with a photo editing app after the first review with your client.

Website builder: you could code but there’s a faster, better way. I built Pazly https://pazly.dev to help you achieve great results, in no time, without even coding. It’s the fastest way to put images and text together into amazing landing pages, which you own and can sell to your clients.

Review tool: Dropbox works best for this because it renders the HTML generated from Pazly. Your clients can review and add comments.

Build

Start from your clients pitch. It describes the value proposition in a clear way and you also get hints into what’s the problem they tackle, what’s their solution & who are the founders. It can be that, at this point, they don’t have a good marketing strategy or some extended copy that you can use for the websites.

Go to pazly.dev and sign up for the pro account. This will give you access to 80+ editable web blocks that you can mix into a great looking landing page template.

A screenshot from the Pro version of pazly.dev used on a laptop

Drag and drop web blocks. Fill in the headings with the pieces of text from the startup pitch.

Search for a compelling image or open up a presentation and compose a visual slide that describes the text in the heading.

https://medium.com/media/88c01978041d6a1c3e1fefc0e5b1039b/href

If you don’t have an extended copy brief, leave out the extra text as a placeholder and make sure to ask your clients on review time what you should replace it with. This will get them thinking.

Deliver

Download your website from Pazly and upload it to Dropbox. Share the link with your clients and ask for a review.

About Pazly

Pazly is a visual development tool for landing pages and websites. It allows users to quickly build and iterate through multiple versions of their website.

Everything you build belongs to you and there’s no strings attached. Ideally you are a freelancer who builds presentations and landing pages for your clients and wants to achieve high quality results in little time. Sign up to Pazly today https://pazly.dev/