USING YOUR
WEBSITE TO
BUILD A
QWILR PAGE
If you'd like to use your company's website as the basis of a Qwilr Page, this guide has lots of tips and tricks.
If this is your first Qwilr Page, we also have a Getting Started Guide.
Step 1: Gather your branding elements
When you first set up your Qwilr account, we'll pull in your main brand colors and fonts from your email domain. But you might want to update those.
- You’ll need the hex color code for each of your brand colors. (You can add up to 7 in Qwilr.)
If you don’t know the hex codes, you can use a free online tool to find them.
- You’ll also need 1-3 fonts. Depending on your plan, you'll have access in Qwilr to Google Fonts, Adobe Fonts, or custom font uploads.
Here's how to add your brand elements to Qwilr:
Step 2: What visuals will you need?
Qwilr Pages hold all kinds of visuals - images, videos, maps, tables, and even embedded content from other websites.
It’s a good idea to collect all the visuals you want to use ahead of time - that will help you plan your Qwilr Page.
You’ll probably also want to include your logo, so make sure you have a .jpg or .png file handy.
Tip: Getting the images from your website
If you have the original image files, they’ll look best in your Qwilr Page. But if not, you can try pulling them from your website.
- In most cases, you can right-click on an image. A menu will appear where you can choose to save it to your computer.
- In Windows, you can also use the Snipping tool to take screen captures of images.
- On Mac, you can type Shift-Command-4 to capture sections of your screen.
Step 3: Let’s consider the layout
Now that you have the foundations, let's think about the layout of your new page.
Although your website and Qwilr Page both live on the web, they're a bit different. A Qwilr Page is like a web page that behaves more like a document.
Your Website | Qwilr Page | |
Generally has a number of different jobs to do. That's why it has multiple pages. | A single web-based document, usually communicating one overall idea | |
Publicly available | Private by default, so you can share them with individuals. But you can make Qwilr Pages public if you choose. |
Tip: Working with Qwilr's responsive layout
Some things to remember as you build your page:
(Incidentally, you can see all these ideas at work here in this very page.)
Putting your brand colors to work
as backgrounds
Since a Qwilr Page is a continuous document, it can be helpful to use a background color in certain blocks. This helps emphasize key points.
You can use your brand colors as the backgrounds for any block in your page. It's a great way to give your page a strong brand presence.
Click the paint roller icon in the top left corner of any block to add a background.
(Or, you can also add a custom background color!)
💡Tip: Splash images vs. inline images
Splash Blocks (like this one) are part of what makes Qwilr's layout responsive.
Splash images are backgrounds. They'll be cropped differently on different-sized screens.
Content near the edges of a Splash image may be cropped out on smaller screens.
If you need to see 100% of your image on all screens, it's best to add it as an inline image, like you see below:
Adding some fun to your page layout
Web-based pages allow you to do lots of interesting visual things. Try these features:
2-column widget
- Add a 2-column widget (like this one) so you can place text and images side by side.
(Or, two images side by side, or two columns of text.)
Accordion widget
Use accordion widgets to add expandable sections to your page. Try clicking the buttons to open and close the sample below!
Table
Try adding a table (like the one below) to your text. You can have as many rows and columns as you need. It's a great way to organize complex information.
Type | Primary Criteria | Is it Awesome? |
Chocolate Chip | Chips made of chocolate | Definitely |
Snickerdoodle | Cinnamon sugar | Yes indeed |
Oatmeal Raisin | Raisins | Sure |
Macaroon | Coconut | Absolutely |
Animations
You can add a little motion to any block in your page. Animations help to subtly focus your client's attention. You might have noticed some in this page.