# Welcome to Pazly!

## The easiest [website builder](https://pazly.dev/) you've used. Drag and drop UI blocks and build beautiful responsive websites for your NFT domain.

Everyone is online these days. Whether business or freelancer, we all need a compelling website that best describes us and our work. Pazly is an online tool that helps you make beautiful, compelling websites by combining and customizing a set of growing components.

<figure><img src="/files/nwhH2mQ9heNxmLiqorKb" alt=""><figcaption></figcaption></figure>

*"Pazly is a play on the word puzzle, because it is as easy and fun to use as your childhood puzzle game. Everyone should be able to use Pazly for building their website" Cris- founder of Pazly*


# Vision

[Pazly](https://pazly.dev/) is meant for all level of expertise in website building. Ideally you will not use any kind of code, or any kind of extra IT knowledge to achieve basic results: one webpage that contains all information you want to present online.&#x20;

{% hint style="info" %}
**Good to know:** You always own what you build with Pazly. This is the main reason Pazly is only offering to save your webpages on your computer and allows you to open Pazly made webpages from your computer. Pazly is not a platform, it is a website building tool.
{% endhint %}

There are many website builders out there, Pazly is unique in certain ways. Many other website builders are trying to offer an 'all you need' platform which include all features you might want, need, or did not even know exist. Pazly is built with a different view:&#x20;

**Empowers the user first - targeting consumer and product use cases**&#x20;

**No platform lock-in. It's better to offer many connectivity options than built in solutions**

**You own what you build**

## **Decentralized website building**

Think of it this way: Most website builders collect your information: text, images, layout and color choices and send then to a 'central kitchen' where your website is assembled. \
\
[Pazly](https://pazly.dev/) works the opposite: it meets you in your browser window. Instead of collecting your information, it keeps it temporarily in your browser (no network transfer). When you edit a text, or image, Pazly brings you the corresponding editor, so all changes are done on your browser, much like a 'catering service at your home'. This is why you always save your website on your computer.

{% hint style="info" %}
**Good to know:** The information you add to your websites is considered public, due to the nature of the website. However, Pazly **does not store** any information you add to your website during building time. It is highly recommended to save your website on your computer as often as possible during building time.&#x20;
{% endhint %}


# Creating your first website

## The basics

If you can make a sandwich, you can make a website with [Pazly](https://pazly.dev/). There's some things you need to keep in mind.&#x20;

a) a Pazly website is made out of **blocks**

b) every block is made out of **elements**

Building a website happens by repeating these steps:&#x20;

**1. Drag and drop blocks from the left list**

**2. Preview in the middle canvas and select a component**&#x20;

**3. Edit the selected component properties on the right panel**

{% embed url="<https://youtu.be/1uBNXUdrAKM>" %}


# Creating your first website from a template

## The basics

I't even easier than starting from a blank canvas.&#x20;

1. First thing: download a template from the template list
2. Select the elements inside the templates and change the text color, image, etc.
3. Add more blocks from the left list, combine and remix as you wish

{% embed url="<https://youtu.be/xM9aEqrBRmY>" %}


# Editing Text

Editing text is super easy. On the left hand side menu, there are text editing tools such as the one presented here.

These components suggest editing text elements, such as the generic 'EDIT TEXT' but also 'EDIT LINK' and 'EDIT HEADER'

As with every editing tool, the garbage bad icon on the left delete the associated element. The 'Text color' button collapses a color picker which allows you to select from a growing set of colors. Next to it there are the text alignment buttons that do exactly what they depict: align text to left, center, right or justify.

![](/files/RfVPy06BZRdWlrljuXcs)

The last part is the text input area where you can copy paste, or type your text. If you make mitakes press Ctrl + Z on Windows, or Cmd + Z on Mac which undo your last character input.


# Using Colors

On the right hand side menu, there are colors editing tools which help you change both background colors as well as text colors. Some components have elements with own backgrounds already set. These will not be changed when you change the component background color.&#x20;

![](/files/V9HfVkJKoz2BsvMbPnci)

Clicking on the Component Background button on the right hand side of the screen will reveal a color panel from where you can choose a color. Click on the color to apply it as a background for all the components.

## Coloring text

All associated editors have a Text Color button with a similar behaviour to the Component Background. When clicking on the Text Color button, the same color panel appears. Clicking on a color will change the selected text color in the preview window. Reminder: The selected element is the element shown in the preview window, in the middle of the screen, with a red outline.

![](/files/4GFSnk8bAXKQlyvJ8kJx)

## Color List

![](/files/hmEJ53ILQcXPdk7yhI44)


# Adding Images

There are 2 ways to include images in your websites: adding a link or opening an image from your computer.

1. Adding and image that is already online is extremely easy. In a new tab, go to the website that is hosting your chosen image. Right click on it and a menu will appear. Choose the 'Copy image address'. Paste the image in the SRC field of the EDIT IMAGE tool. To help you find images online, try unsplash.com, or pexels.com
2. Adding an image from your computer is even easier.In the EDIT IMAGE tool, choose the Open tab. Then, click on the choose file button and choose your image file. It is advised not to use large images. Pictures of over 500Kb will make your website slow. Use the sqoosh.app to reduce your image size without loosing quality. Pazly does not record images online.

<div align="left"><img src="/files/avZyOuiVbK8lCUxCS3Dj" alt=""></div>


# Adding NFTs

Looking at image NFTs, the best way to integrate them to your Pazly website is through the gateway link. In this case the steps are no different than adding an image via the URL

Simply Copy-Paste your NFT IPFS Gateway link to the Pazly editor's Image URL. That's it.<br>

{% embed url="<https://www.youtube.com/watch?v=B_oOnIDWPv4>" %}


# Linking to content

With Pazly you can do one page websites, but this does not mean links are irrelevant. \
Most users are used to navigating your one page website between sections. To direct your user to a specific section you'll need to add 2 things:

1. Add an **id attribute** to your destination section. It should contain the name you choose for the section. For example, if you are building a contact section, add the **id=contact** to it (and press the green plus button).&#x20;

   <figure><img src="/files/cXuSpKIgoacHYXTr51rE" alt=""><figcaption></figcaption></figure>
2. Link the **navigation link with a #** followed by the section name. In the example above a navigation link will get **#contact**

   <figure><img src="/files/7NcJl2sbOMfnlG1bim65" alt=""><figcaption></figcaption></figure>

Watch the demo below, to see how easy it is to set all this up.&#x20;

{% embed url="<https://youtu.be/vzercKTt6SE>" %}


# Collecting subscriptions

There are many ways to collect subscriptions with Pazly. The following pages will teach you how to use very simple services to achieve this.&#x20;


# Subscriptions & Contact Info with Tally Forms

Tally Forms is a visual form development platform, which is built with the non technical use in mind. They made it easy for everyone to create and use forms. Let's learn how to collect email subscribers on your Pazly website.&#x20;

Make an account with Tally <https://tally.so/> They have a very generous free offer which might be enough for your one page website. Once you've signed up and logged in, create a new form or clone of their templates. In the example below, I cloned the **Subscribe template.**\
**Make sure to publish the form.**

![The default Tally Forms subscribe Template](/files/csY7K0FtLeQG9mYY6A8c)

**Pazly allows you to embed \<iframes> in every text element.** Simply build your website and choose the text element that will carry this subscription form. **On the Tally Forms page**, click share, then scroll until the Embed Form. Click on Standard, then Get the Code. \
Copy the Embed Code of your Tally Form, Paste it in your Pazly website text content field. Try it out in Pazly by clicking the Preview button<br>

{% embed url="<https://www.youtube.com/watch?v=IwDF6P2Vp34>" %}


# Make your image pop

Only available in Pazly Pro ( requires pro or lifetime subscription )

Using this technique you will be able to turn every image on your website into a pop-up for bette visibility. There are 2 things you need to do for this.&#x20;

\
1\. Add `open-modal=true` as a custom image attribute, like in the video below. Add this to **all images** you want to be displayed in a pop-up

{% embed url="<https://www.youtube.com/watch?v=PRoiZk6grRg>" %}

2\. Copy-Paste the code below in the scripts area of your website. This is only doable in Pazly Pro, so you will need a **pro** or **lifetime** subscription for this

```

<div id="modal" class="fixed hidden z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full px-4">
    <div class="relative w-10/12 md:w-4/6 top-20 mx-auto">
        <img src="" class="w-full h-full object-center object-cover shadow-lg rounded-md " alt="Image Modal">
    </div>
</div>

<script>
// all images inside the image modal content class
const lightboxImages = document.querySelectorAll('img[open-modal="true"]');
console.log(lightboxImages);

const modalElement = element =>
  document.querySelector(`#modal ${element}`);

const body = document.querySelector('body');
// closes modal on clicking anywhere and adds overflow back
document.addEventListener('click', () => {
  body.style.overflow = 'auto';
  modalPopup.style.display = 'none';
});

const modalPopup = document.querySelector('#modal');

// loops over each modal content img and adds click event functionality
lightboxImages.forEach(img => {
  const data = img.dataset;
  img.addEventListener('click', e => {
    body.style.overflow = 'hidden';
    e.stopPropagation();
    modalPopup.style.display = 'block';
    modalElement('img').src = img.src;
  });
});
</script>
```

&#x20;Here is a small demo on how to do this

{% embed url="<https://www.youtube.com/watch?v=FXTo-eCWRds>" %}


# Core Concepts

### Domain name

A domain name or website name is a name fo your website. Browsers will use a Domain Name Service to lookup your website's name and understand where your website files are located (this could be on a server or on blockchain) \
Example: **mywebsite.com** or **mywebsite.crypto**

### &#x20;Hosting

Hosting is nothing else then a publicly viewable folder which contains your website files. This has a unique address on the internet. When a visitor types your website name in their browser, the browser calls a Domain Name Service (think Yellow Pages for the Internet) which points it to the technical address of this folder. This is how a browser finds your website and can display to page you made with Pazly to your visitors.


# On Blockchain

Using the core concept definitions, we will identify what is a domain and what type of hosting we need to publish a Pazly website on blockchain

### Domain

If you have to choose a domain for your website that better make it an Unstoppable Domain. Pazly affiliated with them not so long ago. Here's our affiliate link where you can purchase you blockchain domain <https://unstoppabledomains.com/?ref=911ecdbda5f246e>&#x20;

Blockchain domains act as regular domains with the added functionality that they can be used in crypto currency transactions, much like Paypal with email. So having an Unstoppable Domain makes your website able to receive payments. Pretty handy for a freelancer, artist, or NFT collector.

### Hosting

Hosting on blockchain is not so straightforward. Since blockchain is peer-to-peer network, there is no server that can host your website files permanently. Instead, your website visitors (aka your peers) will carry your website content securely and make it available throughout the blockchain network. IPFS is the technology we will use for this. It is able to create gateways that contain your website content and its ownership securely and with full privacy. So, your website basically uses the same technology that NFTs use. Piniata is the best service for this. They are the like Dropbox, but running on IPFS. As soon as you put some content in your Pinata space, this will be marked with you ownership and distributed to gateways along the IPFS network, making it available to everyone.&#x20;


# Hosting on IPFS (Pinata)

IPFS stands for InterPlanetary File System and it is simply fantastic. The concept behind is that of a decentralised Content Delivery Network. I'm not going to bore you with technical details so let's show you how to put your Pazly website on IPFS. \
\
Step 1:  Sign up to [Pinata](https://www.pinata.cloud)

Step 2:  Build your website with [Pazly](https://pazly.dev/) and save it on your computer with the default name **index.html**, then place it in a folder

Step 3: Upload the folder to your Pinata

{% embed url="<https://www.youtube.com/watch?v=8NIz2XO33zw>" %}

{% hint style="info" %}
Pinata changed their file management policies for the **free accounts**. \
Please use the [https://ipfs.io/ipfs/](https://ipfs.io/ipfs/CID)**yourCID** to browse your website instead of the Pinata Gateway\
\
Example: \
This is broken: [https://gateway.pinata.cloud/ipfs/**QmPT9G1Rs9ftfgwftaH2CJtBGsH6vV8ZunyERsxwuUFj3u**](https://gateway.pinata.cloud/ipfs/QmPT9G1Rs9ftfgwftaH2CJtBGsH6vV8ZunyERsxwuUFj3u)\
\
This is working: [https://ipfs.io/ipfs/**QmPT9G1Rs9ftfgwftaH2CJtBGsH6vV8ZunyERsxwuUFj3u**](https://ipfs.io/ipfs/QmPT9G1Rs9ftfgwftaH2CJtBGsH6vV8ZunyERsxwuUFj3u)\ <br>
{% endhint %}


# Connecting a Crypto Domain (Unstoppable Domains)

### **The direct way**

Step 1: build you website with [Pazly](https://pazly.dev/)

Step 2: save your work on your computer in a new folder.&#x20;

Step 3: Once you've acquired and [Unstoppable Domain](https://unstoppabledomains.com/?ref=911ecdbda5f246e):&#x20;

Upload your own website files to **Unstoppable Domains IPFS Uploader**:\
Go to **My Domains** and select **Manage** next to the domain you want to use.

* Select Upload Website Files
* Make sure your files include the main file named index.html
* Click "Upload" for selecting or dragging the files.

![Screenshot of Unstoppable Domains IPFS Uploader UI](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48168843383/original/TQOsbFlsZJFeBLZayECPri9oW2b5e5WxSw.png?1639004833)

* Select "Launch Website"
* Sign with your wallet.

### The IPFS Connection way (Pinata + Unstoppable Domains)

Step 1: build you website with [Pazly](https://pazly.dev/)

Step 2: save your work on your computer in a new folder.&#x20;

Step 3: [Upload the folder to your Pinata (see how)](/publishing-your-website/on-blockchain/hosting-on-ipfs-pinata)

Step 4: Once you've acquired and [Unstoppable Domain](https://unstoppabledomains.com/?ref=911ecdbda5f246e):&#x20;

Link your own IPFS website files to **Unstoppable Domains**:\
Go to **My Domains** and select **Manage** next to the domain you want to use.\
Use Custom website linking where you can add the IPFS hash.

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48192790901/original/piL89pvreq2hLBei-5bjL8BIqCVQ7_Odow.png?1645481660)

After adding your IPFS hash, you can click "Launch Website" and sign with your wallet.

<br>


# On the traditional web

On the traditional web, you'll have to find a **hosting provider** and buy a **domain name.** In many cases these 2 things can be done with the same company. In all cases the workflow is similar:&#x20;

Step 1: Build your website with Pazly

Step 2: Save it on your computer and place it in a folder.

Step 3: Archive the folder and upload the archive to the hosting server. (in some cases you will have to extract the files from the archive on the hosting server)

&#x20;\
Next you will learn how easy it is to publish your website with Netlify Drop.


# Hosting with Netlify Drop

### Publish the first time

Just follow these 3 easy steps to publish your website on Netlfiy, using their Drop service. Watch this short demo video and follow the steps below&#x20;

1\. Build your awesome website with [https://pazly.dev](https://pazly.dev/)&#x20;

2\. Download the file, rename it to index.html and place it in a folder&#x20;

3\. Drag and drop your folder in the Netlify Drop service <https://app.netlify.com/drop>&#x20;

{% hint style="info" %}
Tip: If the Netlify service fails to publish your website for the first time, open the Neltify Drop link in an incognito window and try dropping the folder in the drop zone area again.
{% endhint %}

{% embed url="<https://youtu.be/ABc09c9nIcQ>" %}

### Update your website on Netlify Drop

Just follow these easy steps to update your website on Netlfiy. Watch this short demo video and follow the steps below&#x20;

1\. Go to [https://pazly.dev](https://pazly.dev/) PRO and login (or signup if you don't have an account yet)&#x20;

2\. Open the index.html file you've previously made with Pazly, or download a template from the marketplace.&#x20;

3\. Make the necessary changes and download your new website. Important: Keep the same name index.html and place it in the same folder you used to publish your website on Netlify Drop for the first time.&#x20;

4\. Go to <https://app.netlify.com/> and login to your Netlify account.&#x20;

5\. Once logged in to Netlify, go to Sites, then choose the site you want to update. (Netlify lets you publish multiple sites)&#x20;

6\. Go to Deploys tab. You will see a list of deploys. Scroll down until you notice a drop zone with the text "Need to update your site? Drag and drop your site folder here"&#x20;

7\. Drag and drop your folder with the updated index.html in the drop zone area. That's it. You just updated your website.

{% embed url="<https://youtu.be/tH0yVomzUPM>" %}


# Hosting with Static.app

Easy steps to publish with this awesome hosting service

Step 1: Sign up to [Static.app](https://static.app/)

Step 2: Build your awesome website with [Pazly](https://pazly.dev/)

Step 3: Download your website and place it into a new folder (call it as you wish)

Step 4: Archive the folder with Zip

Step 5: Upload the .zip archive to your Static.app

Watch this quick demo video.&#x20;

{% embed url="<https://youtu.be/JGU0JEfV6WI>" %}


# Changing your password

Pazly only requires a user account for its payed versions. Using Pazly free does not require a user account. If you've signed up to Pro or Lifetime account, here is how to manage your password:

**Step 1**: click on the user profile icon on the top right of the screen

<figure><img src="/files/k7sfzNRjBUJ5dHq68xhI" alt=""><figcaption></figcaption></figure>

**Step 2**: In the resulting popup, chance your password, email and name associated with your account.&#x20;

<figure><img src="/files/ihPKofYX3LLo7s7aIji7" alt=""><figcaption></figcaption></figure>


# Getting your invoice

Pazly uses Stripe as its merchant of record, for processing payments and subscriptions. At signup, Stripe automatically sends an invoice email.  Some email providers may automatically add it to your spam folder.&#x20;

In case you do not receive an invoice email, no worries. All invoices are available in your Pazly user account. To access them please follow these 2 easy steps:

**Step 1**: click on the user profile icon on the top right of the screen

<figure><img src="/files/k7sfzNRjBUJ5dHq68xhI" alt=""><figcaption></figcaption></figure>

**Step 2**: on the resulting popup, go to the Membership tab. You will be able to manage your billing information and see the history of your billing. Click on the **View** button in your billing history to receive your invoice.&#x20;

<figure><img src="/files/zyw0qERlzjeh9spX0SOE" alt=""><figcaption></figcaption></figure>


# Questions about billing

For any questions about billing, please feel free to fill in the form below.&#x20;

{% embed url="<https://tally.so/embed/w44Rz5?alignLeft=1&hideTitle=1&transparentBackground=1>" %}