How to Create a Custom Instagram Landing Page on Squarespace
When you’re using Instagram for your blog or business you learn really fast that the link in your bio is prime real estate. Whether you’re sharing a blog, an article, an affiliate link or something else, chances are you’re going to be driving your audience there! Of course there are a number of services that allow you to have multiple links in your bio, but I’m here to share a better way. How to build an Instagram landing page right on your website!
The really great benefit to doing it this way is you’ll have a lot more customization options and hiiii you’re sending people directly to your website. Not only is this great for your brand consistency (there’s the branding and web designer in me!) but it will also allow you to better track conversions with your own metrics.
So let's get down to business on how to make it happen! Please note this tutorial is specifically for Squarespace websites, but if you’re on another platform I’m sure the process is somewhat similar.
How to Create a Custom Instagram Landing Page on Squarespace
Step 1:
Create a new page under the "Not Linked" section and give your page a title. I usually use “Instagram” so that is the URL slug.
Step 2:
Add your first block, whether that be a text intro or adding buttons. I suggest thinking of this landing page with the inverted pyramid style in mind, which means you have the most important info up top and continue down with less urgent info. While you have a lot more flexibility with your own custom landing page you also don't want your followers to have to scroll all the way to the bottom to find what they're looking for. Keep your user experience at top of mind!
Step 3:
Add spacers to each side. While this step isn't totally necessary because all templates are responsive, it is a little easier to visualize how the page will look by adding spacers and pushing the content to the center of the page.
Here’s how mine looks on the backend of my website
The awesome thing about building it on the backend of your website is you’re not just bound to buttons either. You can also add in photos, summary blocks, whatever you would like. Ohhh the options!
Step 4:
If you used stacked buttons on your landing page you may notice that the widths of the buttons will vary based on the copy you have in them. Personally, this bugs me so if you’d like them to all be even like I do then I have a code for you! You can copy and paste the code below into the advanced settings of your page. To do this, you need to hover over the name of your page in your website panel and click settings (the little wheel looking icon), then click advanced, and then paste the code in the Page Header Code Injection.
<style>
.sqs-block-button-element--small {width: 250px !important;}
</style>
The code above targets small-sized buttons so be sure to make sure the size correlates with the size you used on your page. So if you used small, use the code as is, or if you used medium or large swap out the text "small" in the code and add the applicable size. This is set for button widths of 250px, which I found worked well but you can also adjust if you'd like.
Step 5:
Once you have finished adding in blocks to your liking, publish your page! Then be sure to find out what your URL slug is, so that you can add the full url into your browser and then copy and paste that link into your Instagram profile!
Here’s how mine looks when you click on it in my Instagram bio
And that's it! A fully customized landing page for your Instagram account that you can edit any time you'd like. Have any questions? Drop a comment below or send me a message if you need help!
Anna Osgoodby
Founder of Going Bold Studio, Anna Osgoodby is an award-winning designer and social media marketing expert. With over a decade of experience, she specializes in helping small businesses with their social media, branding and Squarespace website design.
