Viewing entries tagged
Squarespace How-to

1 Comment

How to Create a Custom Instagram Landing Page on Squarespace

Bold & Pop : How to Create a Custom Instagram Landing Page on Squarespace

As a business owner or blogger on Instagram you learn really fast that the "link in your bio" is prime real estate. Whether you're directing your followers to your services or products, leading them to your blog, or to read more of an article, your Instagram bio is where they're headed for more info! Back in the olden days i.e. a year or so ago, we only had the option to direct our followers to one link and we had to swap them every time we wanted to direct people somewhere else. Then services popped up that allowed you to create landing pages that highlighted multiple links and it was a GAME CHANGER! Suddenly, we didn't have to remember to swap out the link and options really opened up.

Enter today, and we're going to take that option a step further by building a custom landing page right inside your website. While these services are great, a lot of them don't allow too much customization and since we're in the branding industry, you know what we're going to say about brand consistency... it's important! So today, we're going to teach you how to build your own using Squarespace, because you know that is our thang! Helloooo customization and creativity options! So read on or scroll a little bit further down to watch the screenshare video.

Step 1:

Create a new page under the "Not Linked" section and give your page a title.

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. You can see this step in the video below.

Step 4:

If you used stacked buttons on your landing page and would like to make the widths even, 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, 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!

You can also watch this full process below:

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 us a comment below or shoot us a note and we're happy to help!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

1 Comment

2 Comments

How to Create a Layered Slideshow on Squarespace

Bold & Pop : DIY How to Create a Layered Slideshow on Squarespace

A feature we have been having a lot of fun with lately are layered slideshows! It's a design element we implemented in our website refresh project for Santa Barbara Wedding DJs and needless to say we totally dig it. It's such a cool way to switch up the standard feature on Squarespace so today we're teaching how you can create one too!

Bold & Pop : DIY How to Create a Layered Slideshow on Squarespace

For this tutorial, we will be using Photoshop to create the images for the slideshow (bonus we have a template as a content upgrade below). You can also create your own layouts in other software though or online design programs like Canva. The program doesn't matter as much as how you create the graphics.

Step 1: Select Your Images & Create Your Template

Select the photos you'd like to incorporate into your design. Because you'll be using layered photos you'll want around 9-12 images -- depending on how long you want your slideshow to go. If you create your own template you'll want to make sure the width is 2500px across for ideal resolution (the height is flexible). There aren't any hard rules for this so feel free to layer as you please. We like to have the photos layer a little on the corners to add dimension, but again, you have the complete flexibility. If you'd like, you can also add text or other graphic elements into your design like we did with the gold border in the example above. Just make sure you don't put all of you copy in your images so your SEO doesn't take a hit.

Step 3: Add Images

Now that you have the template made, it's time to input your images. Start by entering your first four images as clipping masks (if you use the PSD file provided) and save the image as a png. If you are putting the image on a colored website make sure that you save the image with a transparent background. The key to this slideshow is only changing one photo at a time. So for your second image just update one image and keep the others the same. So you’ll end up with a bunch of different images like this.

Photo 1

Bold & Pop : DIY How to Create a Layered Slideshow on Squarespace

Photo 2 (switched 2nd photo)

Bold & Pop : DIY How to Create a Layered Slideshow on Squarespace

Photo 3 (switched 3rd photo)

Bold & Pop : DIY How to Create a Layered Slideshow on Squarespace

Photo 4 (switched 1st photo)

Bold & Pop : DIY How to Create a Layered Slideshow on Squarespace

On the example we used we rotated one picture from left to right each time but you can really do in whatever order you would like. You can also do as many slides as you want, the process is the same. It's also really important that you update the image without moving any of the boxes so that everything lines up perfectly. This will make the transition seamless on the slideshow.

Step 4: Add to Website

Once you have created all your images, it's time to add to your website! To enter, use the Slideshow Gallery Block. All you need to do is upload your images in the order you would like and then adjust the settings on the slideshow to the selections below.

Bold & Pop : DIY How to Create a Layered Slideshow on Squarespace

And that's it! We hope you love this feature as much as we do! Make sure you sign up below to get access to our free PSD layered banner template too!

Bold & Pop : DIY How to Create a Layered Slideshow on Squarespace

If you have any questions or need help with updating your Squarespace website hit us up in the comments or shoot us an email. 

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

2 Comments