![]() □□When it comes to adding pieces of code to your website, there’s only a few basics worth understanding about how coding works - and then its just a matter of changing a few minor things, like colour codes, or fonts, to customise your Squarespace website just that little bit more. Personally I really don’t recommend going hard on code and adding too much, because it can just make shit messy, BUT even the most simple snippets of code can totally change the whole vibe of your website. I get asked a friggen LOT about how to customise Squarespace websites so they don't look so templatey, or so obviously a Squarespace website, and well, this is it. Now you have a beautiful newsletter block that appears automatically at the bottom of each page of your website.If you can master these two things even in their most SIMPLE FORM, they’re a bloody game changer. (You may need to do this for alternate background color.) Click on our Newsletter block to pull up the relevant styles and we can change the background color and opacity here. If you are seeing a color block behind the newsletter block, update the background in Design > Site Styles. If that happens to you, edit your single quotes directly in the Custom CSS window. One thing I noticed is that some editors paste in the single quotes incorrectly and your background image will not show up. You’ll notice that the url is updated in your code and now you can save your Custom CSS. You’ll highlight the text in between the single quotes that says image-url-here, delete it but leave your cursor, then click the image filename you just uploaded. ![]() ![]() Next, there is a shortcut to add the image URL to our custom code. Before you upload your image, make sure to optimize the image for file size and file name to improve your SEO ranking and user experience. Our next step is adding our background image to Squarespace and we can do that in the Custom CSS panel by clicking Manage Custom Files. Start by adding a newsletter block to the top footer section (Footer Top Blocks) and save your work. Create a beautiful newsletter block that appears on every page of your Squarespace website to get email sign-ups. In this tutorial, we’ll be using the top footer section for our newsletter. And if you want to update it, you only have to update it in one place - the footer - and you’ll see the changes on every page.īrine family templates have footers split into 3 sections… top, middle, and bottom. ![]() ![]() With this trick, you’ll be able to have a beautiful newsletter sign-up at the bottom of each page of your site. We’ll be uploading a background image for our newsletter block and will use Custom CSS to hack our footer so it appears full width on every single page of our site. In the video walkthrough at the bottom of this post, I’ll be working in the Rally template.įor the Pacific template, the code is different (it’s a whole other ballgame), so read through the instructions here, but substitute the code at the end of this post. This tutorial is for the most popular template family, Brine, in Squarespace 7.0, so this hack will work with any Brine family templates like Basil, Burke, Foster, Impact, Mentor, Moksha, Rally, Wav, and a whole bunch more. ![]()
0 Comments
Leave a Reply. |