Using proposal elements

Elements are the individual pieces you build a proposal page from. A heading, a paragraph, an image, a quote, a button.

They sit at the bottom of the layout hierarchy. Blocks hold rows, rows hold columns, and columns hold the elements.

Adding an element

Click the plus icon to expand the elements menu, then drag the element you want onto the canvas and drop it into the column where it should sit.

Set each element up as you place it rather than dropping everything on the page and configuring it afterwards. It is easier to judge whether the page is working when the elements on it are finished.

What elements are available?

There are elements for building the page itself. Headings, text, images, icons, buttons, spacers and video cover most of the layout and content work.

There are elements that pull in your own data. Quotes put the pricing in front of the customer, upsells offer extras alongside it, and the accept button is what they click to say yes. Services, products and staff bring through the relevant records rather than making you describe everything by hand.

There are elements that build confidence. Reviews show what previous customers have said, socials link out to your profiles, and maps show a location.

Then there are the specialist ones. Countdowns add a visible deadline, and custom code lets you drop in anything the standard elements do not cover.

The two elements you cannot leave out

A proposal needs a quote and it needs an accept button.

Everything else on the page is there to get the customer to those two things. If you are ever unsure whether a section is earning its place, ask whether it is helping someone reach the accept button or delaying them on the way.

Element settings

Click an element and you get its menu.

The settings differ by element type, because the options that make sense for an image are not the options that make sense for a quote. A text element gives you typography and spacing controls, while a countdown gives you a date to count towards.

Animations

The element menu also handles animations. You can set an entrance effect such as a fade or a bounce, and add a delay so elements arrive in a deliberate order rather than all at once.

Be sparing with these. A little movement as a section comes into view looks considered, and a page where everything bounces looks like a page nobody proofread.

Delays are the more useful half of it. Staggering two or three elements by a fraction of a second guides the eye down the page in the order you want it read.

Moving and duplicating elements

The element menu lets you move an element up or down within its column.

You can also duplicate it, which puts a copy in your clipboard so you can reuse it elsewhere on the page. That saves rebuilding an element you have already styled the way you want it, and it keeps your styling consistent between sections, since a duplicate carries its settings with it.

Getting the order right

Customers read down the page and most of them are on a phone, so the order of your elements matters more than their styling.

Lead with enough to make them want to read on, get to the quote before their attention goes, and keep the accept button reachable rather than buried at the bottom of a long page.

If a section only exists because the page looked empty without it, take it out.