> For the complete documentation index, see [llms.txt](https://docs.harnessgiving.cc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.harnessgiving.cc/getting-started/quick-start.md).

# Quick Start

## How to build a page from scratch with **Harness**?

Every site has a unique structure and set of elements, with Harness you're in control, so feel free to add elements and choose a layout that represents your organization. This can be fun so lets unleash your creative self and get this party started! 

## Layout

Harness website pages have a common set layout with a **Header**, **Body** and a **Footer**.

![Layout Overview](https://cdn.elev.io/file/uploads/EcKRWXIc3kc3e4UKHhZJWLdEGVZF3yInSCV30t5Jr8A/Rn3tcNraO0aK8CMYOAOER86PVlSwAlexqj7DoeHFFTQ/FromScratch-Footer,header-F_g.gif)

The  left panel is where you will find:

* the option to Preview how you website currently looks to your audience,
* Blocks section, which enables adding designer blocks to your website,
* a wide range of site Elements,
* Colors tool, to help you make your website more colorful and eye-capturing
* a set of Effects, to visually enhance your website along with the
* progress bar, that aims at figuring out the steps you should take to make your website more professional and practical.

![Left Panel (Control Tower)](https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/NIm0-4CejCscp16KtpAWm2nUhmXy5R64SNDJypXKiqc/1552600269988-YsY.png)

{% hint style="info" %}
Make sure to check all of the steps from the Progress tab when creating your website ☝😊
{% endhint %}

<br>

## **Building your own template**

As you know, **Subbly's** website builder is based on drag and drop feature, which means you can simply choose the desired element from the *Elements* section and drop it wherever you want. Just the same, you can undo the changes made by hitting *Ctrl+Z*  if on Windows or *Command+Z* if you are a Mac user.

{% hint style="warning" %}
All changes you make to your site are automcaticallyaved once made and so you don't need to save them manually.
{% endhint %}

When we say that you can drop your elements wherever you want on blank canvas, we mean that. 😊It's as simple as hovering over the preferable block and checking the grey line indicating the space the elements can be placed.&#x20;

![Play around with positioning](https://cdn.elev.io/file/uploads/0jZO9cmYO99mbKBgKeabyvTJyUjP6NbN4nr9gpPJdi8/zyeLRd9YJ_jsLAgzCqnTo1P7DKViRkcsV8aVrj_CHDc/1-Grey%20Lines-Xhs.gif)

The elements can be set both in full width or grid width, that is to say occupy the whole screen or just the central part of your page respectively. &#x20;

![Drag and Drop Elements](https://cdn.elev.io/file/uploads/-vXVt4BrNU3vzTbxGkyoap4M17Y-dtJK8cJ9QPxTeno/dB4UspY6b-s-EgCcocjKly7PlARlrUxxCYLlL0acTd8/2-Whole%20or%20Central-zns.gif)

You can also drag the element in the grid width position to full width and back using the pointer.

![Look a the lines for assitance with placing objects.](https://cdn.elev.io/file/uploads/3OCSq7fklWus5WAmQ7Izmpux1siy1ahPS6aM-N7e_3M/2IoHO-U56LHFe8L7_Gm-CkBYcefHb-O2Lk6zJTWmcoA/3-From%20grid%20to%20full-8x8.gif)

Once you’ve picked the element, move it throughout the canvas area and hold for a while to notice the lines.&#x20;

{% hint style="warning" %}
You are allowed to place a maximum of 4 elements in a row. 👇&#x20;
{% endhint %}

![](https://cdn.elev.io/file/uploads/5ITBZui15WWBscAWcxCsCpKkFdt6_O0hLetrPPeOC7M/F69XELkx0g1oyThmJlJszykVB3X0WcpXVKutK3VmW8o/4-Elemnts%20drop%204%20row-Ah4.gif)

To have the elements in the center of your block, in other words in grid width, just move them to the central part and you’ll notice a grey line indicating where you can place them.

If you want a particular element to stand in full width, drop the desired element to the very right ➡ or left ⬅ side. &#x20;

![](https://cdn.elev.io/file/uploads/MSG7qP-_jrc3BT6O8lJfJC0YV5mvIuCuFvku2LhD-Ew/43_frm3w91Fqa5K5L7FOs0rKiG7D3mPOX8A557KT0Mg/5-Full%20widht-Hnw.gif)

## **Header & Footer**&#x20;

Let us have a closer look at headers and footers, that play significant roles in the visual impact your website leaves on your site's visitors.

Wisely chosen and arranged blocks are not only eye-capturing, but are also pretty functional. For instance, you can place such important elements like your website logo or your site navigation in your *Header* or add your contact info, subscription form along with social icons to the *Footer*.&#x20;

![](https://cdn.elev.io/file/uploads/-CQru9HNg4DchxCer_j12wMVOUCNCjfw7MSzOcBmat0/4ToZYpxkjiWfUG3VI7beIJQ7Ruaflle86gg03sSO8zg/fh-iX0.png)

{% hint style="danger" %}
Please note, that both blocks are fixed for all the pages on your site and there’s only single *Header* and single *Footer* available.
{% endhint %}

Alternatively, you can also add pre-designed blocks from *Blocks* section. Just choose the *Block* type and drag and drop it on your *Header* or *Footer* area. &#x20;

![Pre-Built Blocks speed things Up!](https://cdn.elev.io/file/uploads/bktLiImNwdzlPNLO-iqpE2CdonyyBqwokoblXGLAWV0/WXKh1kL1zp_y4X6JF45M7sI1epySDfDGZsmGvUfRG0Q/!Blocks-GIF%202-yt0.gif)

The width for the given blocks is fixed but once you’ve used a certain block, you can change its width just the way you prefer using the pointer.

{% hint style="info" %}
**Pages** element, mainly used for setting the site's navigation bar in the header, automatically reverts to the burger layout on mobile view, but **only if it's included in the site's header**&#x20;
{% endhint %}