Qwilr Guide

Designing a Qwilr Page

Brand fonts and colors

Page design starts with your account's brand settings.
If you haven't already set that up, here's how.

(Want to know how we made this block folded? Here's how.)

Think of your page like a story...

What are the important points you need to make?
What would you like your client to do at the end?

If you’re not sure...

It can help to grab some Post-It notes, and jot down the main ideas of your page on them. Move them around and find the best order.

...And now you have a nice framework for your page.

When you know what sections you need in your page, it’s time to start thinking about Blocks.

In Qwilr, the sections of your page are called Blocks. Qwilr has different kinds of Blocks that do different jobs.

The Text Block

Add headings, paragraphs, images, and more

The Splash Block

Add background images

The Video Block

Add videos

The Embed Block

Embed maps, forms, calendars, and other kinds of content

The Quote Block

Add customizable price quotes

The Accept Block

Add an Accept button, plus E-signature and payments

Think of your page as a stack of blocks. You can use as many or as few blocks as you need. You can move them around, delete them, and add more.

Let's get Visual.

A printed document might be all text, but with documents on the web, it’s good to add plenty of visuals.

Visuals also create cool little “rest stops” for the eyes. That encourages your clients to keep reading.

Splash Blocks (like the ones above and below) are particularly great for separating key topics in your page.

Splash blocks can even contain videos.

What a great way to add a dash of fun to your page!

You can insert visuals into any block.

Here are some more great examples:

Another examples are:

You can also add 2-column segments, like this one.
They let you present text alongside an image.
Or, two images side by side.
Or, two columns of text!

Need to send your client to an external web page? Add a button and give it a link.

To add these visuals, click on the plus symbol

You'll see one anywhere there's a blank line in a text block.

Tricks with Text

Make your page easy to scan

You want your client to get to the most important points easily.

There are lots of tricks for making your content scannable:

Use headings to make the important points
Keep paragraphs of text short
Use lists (Hey, like this one!)
Change background color when you change topics (Like we did here!)

Blank space is also a key design feature. Qwilr is designed to help give everything on your page some “breathing room.”

Let's get Styling

Qwilr offers lots of ways to customize colors, font sizes, and other kinds of styling.

This video shows you all your styling options.

Now for some final touches

To help your clients move around your page, why not add a navigation bar, like you see at the left?

(Or, you can place it at the top of the page.)
Try opening the nav bar and clicking on a few sections.

Have you been enjoying the subtle movements as you scrolled through this page?

You can add animations to any block in your page - it’s a nice way to add emphasis to key points.

Save it & Reuse it

Like your design? You can save any block to your library to use again later. You can also just save the styling to use in future pages.

Want to learn more design tips from our in-house Digital Designers?

Questions?

Feel free to email us at [email protected], or click the ? Help button in Qwilr.