How To Add an Attractive PDF Download to Your Squarespace Post
One thing I see a lot of people struggle with is how to add an attractive link to a PDF on their website. Maybe you want to offer a free worksheet to go with a blog post, you need to share your PR company’s case studies, or you’ve written an ebook or magazine and want to create a page for your email subscribers to download it.
The issue people run into is how to make the link look substantial. Linking to the content is relatively simple once you know the steps, but you still end up with just a plain old text link, which A) doesn’t take up much room on the page, and B) is the total opposite of exciting.
So how do you make your link large, enticing, and clickable? Luckily Squarespace gives us a couple of super simple methods. Both of these can be added to either blog posts or static website pages.
The Button Method (AKA Call To Action)
This method is my personal favorite. It’s fabulous for adding a worksheet in the middle of a long blog post without the link getting visually lost. It makes a great call to action because the button text can actually invite a visitor to click it. And it’s the easiest of the two methods to set up.
Add a Button content block inside your page.
Change the button title to something descriptive and enticing like “Click here to download your FREE website checklist!”.
Click the Clickthrough URL box (shown above) and then click Files. If your PDF is already uploaded you should see it here under Existing File. If not you can upload it here. I suggest choosing Open in New Window for PDF files.
Choose your button size based on how obvious you want it to be. The button below is set to Large.
Click Apply and revel in your newfound tech savvyness.
Unlike images, when you upload a file Squarespace stores it for future use. This is awesome if you have a worksheet or ebook you need to link to from multiple pages, just upload it once and add your buttons where they’re needed.
The Image Method
Sometimes a button just won’t get the job done. Maybe you need something more visual or you’d like to offer a preview of the PDF first. One place this can come in handy is if you need to link to a simple map, say for a festival or campground. You can display an image of the map on your page, and if someone wants a closer look or a downloaded version to use they can click to open the full document. You could also use this method to show only the cover or first page of a multi-page document like a workbook.
The main difference here is you’re going to use a screenshot of your PDF instead of a button for the link. There’s free software out there for snapping screenshots, but most computers have a built in program or set of keyboard shortcuts. Here’s everything I know about that:
Taking a screenshot of a specific window on a Mac
Open the document you want to take a picture of.
Press Command + Shift + 4. The pointer will change to a crosshair.
Use the mouse or trackpad to drag a box around the area you want to screenshot, then release to save.
Your screenshot will save as a .PNG file on your desktop.
Screenshotting from a PC tends to be different depending on the operating system. Use this article to help you figure out what works best for you.
Now that you have your image, go ahead and do a few things to help you out later. First, change the name from whatever gibberish your computer named it to something more descriptive. This will help with SEO. You can also edit your image at this point if need be, or add branding using Photoshop or Canva. It’s also smart to check your image dimensions and resize it to no wider than 800-1000px. This will keep you from slowing your page down with a big bulky image.
Now you’re ready to create your link.
Add an Image content block inside your page, uploading the image you just finished creating.
Set the caption dropdown to Do Not Display Caption.
Make sure Stretch and Lightbox are unchecked.
Scroll to the bottom of the image settings box and click on Clickthrough URL, then either select a previously uploaded file or upload a new one just as you did in the previous tutorial.
Click Apply. Give yourself a pat on the back.
Click the image below to download your very own PDF version of this tutorial!
That’s it! You can move your image around within your page and play with text alignment and size until you’re happy with how it looks. If you’re using the image method make sure readers are aware that they can download the full size PDF by clicking on the image, either by adding a line of text above or below it, adding text onto the image itself, or getting fancy with some cool arrows.
Have you tried either of these methods? Or do you have your own favorite?
Thinking about DIYing your site? Stuck in an endless loop of Google searches and trial and error? Let me help! I'll walk you through the exact process I use when building sites for my own clients! Click here to learn more.