How to make gallery images + email links open in a new window in Squarespace
Have you been wondering how to make gallery images or email links open in a new window in Squarespace? Lots of people have been asking me about this exact topic, and what better way to answer your questions than to create a blog post about it to help out everyone?! External links are good for many things, but Squarespace doesn't always make it easy to open them in a new window while allowing internal links to open in the same window. But there are some easy ways we can work around this little inconvenience without even adding code to your website!
However, before we dive into the details of how to make gallery images and email links open in new windows, we have a few other important matters to tend to first.
Why is it important to have external links open up in a new window?
There are three principal reasons as to why your internal and external links should open in different locations. But before we dive in, let’s make sure we know the difference between internal and external links!
Internal links: these are links to take people from one page of your website to another. When people click on an internal link, they are never leaving your website, just moving around within your online home.
External links: these links take people elsewhere on the Internet. Some examples of external links would be citations to other works in your blog posts, links to your social media profiles, and credits for your website designer, photographer, or copywriter.
Now here are all the reasons why it’s important to make sure that external links are opening up in a new window…
It is good for SEO! You want to keep people on your website for as long as possible to boost your rankings! To learn even more about SEO for your Squarespace website, click here.
Internal links encourage visitors to click around to different pages of your site, which is also great for SEO and tells Google your website is relevant and valuable.
Improves user experience instead of confusing people on where they're located on your site or someone else's website.
So now that we know the importance of linking external pages, let's talk about how you can do that for gallery images and email links!
How to make gallery images + email links open in a new window in Squarespace
Now Squarespace usually plays nice and will allow us to have the option of adding links and setting them to open in a new window, but unfortunately, there are a few places where this isn't an option.
First of which are gallery blocks. You do have the option to add in a URL, but not the option for it to open in a new window. So what do you do now?!
Well, the same goes for adding an ‘email’ link...
I'm here to save the day with a nifty little workaround that will allow you to open gallery images and emails in a new tab! Here’s a simple workaround for this…
For gallery images:
Gallery images are a special Squarespace 7.1 feature that allows you to add multiple images to your website in one fell swoop. This is a super helpful tool for photographers, designers, creative entrepreneurs, and stylists who have a portfolio on their website (there’s also a portfolio feature, but we’ll talk about that some other time).
Add the following term to the end of your URL for gallery image block links:
/"target="_blank
Your final URL should look similar to this: https://www.yoururlhere.com/"target="_blank
For email links:
An easy way to generate leads from your website is by adding in CTAs that invite people to get in touch with you when they want to inquire about working together, have a question, or just simply want to get in touch with you. Add these in on your contact page or in your footer!
Instead of using the ‘email’ option for adding your link, add the link as a web address link option instead.
Then, add ‘mailto:’ followed by your email address in the web address box:
mailto:hello@kurlycreative.com
Make sure open in new window is switched on, as seen in the image below:
Bonus: Squarespace code snippet for Removing Underlines from Links
So now that you know how to add links that open in a new tab for emails and image, maybe you're wondering how to get rid of that pesky line underneath the linked text on your website. Follow these steps to add this small code snippet to the CSS on your website and you'll be good to go!
Navigate to the backend of your website
Click on the Design tab in the left menu
Choose the "Custom CSS" option at the bottom of the menu
Copy and paste the following bit of code:
//remove line from links //
a {
background-image: none !important;
}
Remember to hit save and check it out yourself!
If you want to customise your website even more and add some custom code, click here to read my blog post all about free CSS code snippets that you can add to your website to stand out even more!
Squarespace 7.1 gallery blocks are now available on all pages for Squarespace Circle members!
If you’re a fellow Squarespace designer you may or may not know that Squarespace gallery blocks are now available on all content areas and pages in Squarespace 7.1 if you’re a Squarespace Circle member. I think you’ll agree when I say: woooooo! When Squarespace 7.1 was released, this was a big feature that was hugely missed from 7.0. Let’s hope it won’t be long until they’re made available for all Squarespace users too. If you’re not sure what Squarespace Circle is, you can check out more information right here. I would highly recommend it to all the Squarespace designers out there!
NEED A HAND WITH LEARNING CANVA + CREATING ON-BRAND DIY DESIGNS?
If you’re a new business owner who’s been suffering from a serious case of design overwhelm and need some help creating stand out designs that feel oh-so on brand and uniquely you - then check out my free Canva templates and training! 👇
Did you like this post? Then pin it to Pinterest! 👇
