CONVERTING
A PDF DOCUMENT
TO A QWILR PAGE
So you have a PDF document that you want to turn into a Qwilr Page. This guide will show you how.
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:
We also have these instructions in text form.
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 PDF file
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 PDF.
- In the page-layout software that was used to build your document, you can right-click on an image 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. It will be different than the layout of your PDF document.
That's because Qwilr is built for responsive layout.
PDF Document | Qwilr Page | |
The size of each page is always the same. | A Qwilr Page might be viewed on a large desktop monitor or a phone screen. It has to be flexible. | |
A PDF document has definite page breaks. | A Qwilr Page is a single page made up of blocks. Each idea flows into the next. | |
Whether your PDF is in portrait or landscape format, that's the only way it will be viewed. | Your Qwilr Page might be seen in either a horizontal or vertical format, like a mobile device. |
...So you won't be making an exact duplicate
of your PDF here.
You'll be capturing its essence, and making it into a Qwilr Page.
Tip: Working with a 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.)
Let's see these ideas in action!
Below is a sample PDF document. scroll through it, and then see how we used the same elements to build a Qwilr Page.
Now take a look at the Qwilr Page.
...And notice how we used the responsive layout.
- We used blocks to break up the important ideas. Blocks are different than the pages of a PDF. Each block can contain as much or as little content as you need.
- We added a navigation bar to the page as a Table of Contents.
- We incorporated more images than the PDF had, and even added some subtle video and animations to certain blocks.
- We used one of the brand colors as a background in key blocks.
- We presented the pricing in an interactive quote.
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.
💡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:
