Using the Proposal Builder

The Proposal Builder is a drag and drop page editor. You build the page by dragging things onto the canvas and dropping them where you want them, then setting each one up.

It is the same editor whether you are building a template you will reuse or editing a single proposal for one customer.

What you can drag onto the canvas

Click the plus icon in the hovering side menu to open the element drawer.

The elements menu holds the individual pieces such as headings, text, images, quotes and buttons. The block menu holds ready made sections that arrive with their layout already built.

Drag whichever you want onto the canvas and drop it into position. The page updates as you go, so what you are looking at while you build is what the customer will see.

The layout hierarchy

The page is built from four levels that sit inside each other.

Blocks are the top level and divide the page into its main sections. Each block contains rows. Each row can be split into columns. Each column holds the elements themselves.

So a block might be your introduction section, containing one row split into two columns, with an image in the left column and a heading and some text in the right.

Why the hierarchy matters

It is what makes the page work on every screen size.

Columns that sit side by side on a desktop have somewhere sensible to go on a phone, because the builder knows they belong to the same row and can stack them. Without that relationship it would have no way of telling which things are meant to sit together and which are just near each other.

Work with the structure rather than around it. If two things belong side by side, put them in two columns of the same row. If a section should stay together as a unit, keep it in one block.

Working with rows

Click a row inside a block and you get the row menu.

From here you can add further rows to the block, and set how many columns each row is split into. A row can hold between one and five columns.

Column spacing controls the gutter, which is the gap between the columns in that row. Wider gutters give a section room to breathe, and tighter ones make things read as belonging together.

The row menu also lets you delete the row, move it up or down within the block, or duplicate it.

Duplicating a row is the quickest way to repeat a layout you have already got right, since the new row arrives with the same column structure and spacing.

Working with columns

Click a column and its menu appears in the top left.

Columns carry a lot of the visual detail. You can set spacing, borders and border radius, and style the column with a background colour, a background image or a gradient.

There are also layer and alignment settings, including the vertical alignment of the elements inside the column. That last one solves the most common layout annoyance in any page builder, which is two columns of different heights sitting next to each other with the content stuck at the top of both.

You can move a column left or right within its row, which reorders the columns without touching what is inside them.

Working with blocks and elements

Blocks and elements each have their own menus as well. Clicking a block opens its menu in the top right, and clicking an element opens the menu for that element.

Both are covered in their own articles, since there is more to say about each than fits here.

Checking your work on smaller screens

Most customers will open the proposal on a phone, so check it on one before you send it.

You are looking for columns that have stacked in an awkward order, headings that have become too long for the width, images that have lost their impact at a smaller size, and anything that needs scrolling past before the customer reaches the quote.