![]() ![]() In all of our experience with different website structures and platforms – from hand-coded websites, to Wordpress, Shopify, Adobe Business Catalyst, Wix, Adobe Muse, and more – Squarespace stands out for one simple reason: the chances of them returning is well…not great.We've said it before and we'll say it again: we love Squarespace. (Because once your visitor bails on a page asking them to sign-up, opt-in, buy, enroll, etc. ![]() This could be a course enrollment page, a freebie opt-in page, a donation page – basically anywhere you have one specific outcome or action you want them to take before they leave page! That’s right! There is one veryyy specific instance where it 100% makes sense to take away your visitor’s site-roaming freedom… So we’ve already touched on the importance of easy-to-use site navigation (you do not want customers getting lost on or distracted on their way to that “buy” button!)īut did you know that there are certain pages it’s considered best practice to actually hide your navigation links? Remove the header & footer or site navigation from a single page in Squarespace using CSS Method of CSS injection used: Universal Here’s an example of what that could look like (but honestly, the little back-to-top image/button could be literally anything, so go wild! )Ĩ. Heather Tovey is taking us through the step-by-step tutorial you need to create and add a custom back-to-top button to your Squarespace site. It’s super easy to get sucked into a site when you can just scroll and scroll through non-stop gorgeous content, so as long as it’s done well, it really is a great way to keep people on your site! ( Majorrrr SEO brownie points there!)īut just like we ran into in the previous example, there’s a slight problem…when you have a long-scrolling page, your main navigation (full of all the call-to-actions responsible for turning clicks into customers) is suddenly miles away.Īnd you know what’s easier than scrolling all the the way back to the top?Ĭlunky navigation can kill a site’s vibe prettyyy dang quick, so if you want your visitor/reader to be able to jump right back up to the top of your page at a moment’s notice, a custom back-to-top button is for you! The long-scrolling format mimics some of our fav binge-able apps and softwares! (And not just because they are pretty, or that they can fit a whole lot more useful info a visitor might need about your biz!) Long-scrolling pages are super on-trend at the mo! Add a custom back-to-top button or image in Squarespace using CSS Method of CSS injection used: Universal & inline Oh, and excuse the total fan-girl moment, but not only does she show you the super in-depth steps to making this bit of CSS magic happen, she also gives a mini education on why CSS sometimes doesn’t work (and 2 options for fixing it!)Ħ. In this tutorial, she is showing you exactly how to take the custom fonts you’re currently drooling over (but aren’t native to Squarespace) and put them to work in your Squarespace site’s main navigation! The lovely Beatriz over at Thiry Eight Visuals has done it again! How to add custom font to your navigation menu items in Squarespace using CSS Method of CSS injection used: Universal So without further ado, let me introduce some uber-talented designers currently killing it in custom CSS land! 10 Squarespace CSS tutorials for your site navigation 1. Playing around with CSS for the purposes of building this post was next-level therapeutic!Īnd while I don’t often reach for CSS myself ( you can find my reasons for not getting too CSS-happy in this post ) I’m happy knowing that there’s a solution to just about every Squarespace design quandary out there should I really want it! That being said, I recently did a round-up on the blog of all the most useful ( free!) tutorials for using CSS to style your Squarespace site’s fonts & text blocks, and let me just say… (You can peep some of my student’s recent work here, btw). Now, students of my Square Secrets Course will tell you that I’m all about learning to use Squarespace to create completely custom, nothing-like-the-template websites without having to learn to code. ![]() Īll done with your homework (* ahem* suggested reading)?įab! You now have some solid context for all the CSS goodness that is about to go down in this post! Squarespace CSS: how to target specific pages, sections, or blocks on your site. Squarespace CSS: what you need to know before you get started Just joining us for the Intro to Squarespace CSS series? Cool beans! Here’s where I might start before diving into the meat and potatoes of this post!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |