![]() (You can feel free to mess with the things like image height, font spacing, etc. You will need to edit a few basic things to make this work for your site/content: (See Squarespace CSS: what you need to know before you get started if you are currently doing the deer in the headlights stare and have no idea what I’m talking about.) This gets added universally in the CSS injector. This get’s added inline in a code block on the page where you want the content to live. Pro-tip since it’s not super clear from their directory:Ī little snippet of HTML (the language you use to write the actual content you’re styling into existence). Here’s as a little mockup of a full-width image card block: To CSS away those margins on a single card image block, check out Ghost Plugin’s free CSS snippet here! You could use your site style settings to remove that extra white space or padding, but any changes you make there are site wide and will affect every bit of content you add. It’s the fastest way to make your site look DIY (and not in a good way)…so in this case, less is definitely more.īut there are some cases where full-width page design could be used to make one specific section really stand out, like if you are using a card style image block to showcase your page’s main CTA (call-to-action: what it is you want your visitor to do on that page!) Wall-to-wall content on every last inch of your site, with zero breathing room between design elements = major visual overwhelm for your visitor (making them less likely to take the next steps you are hoping they will on your site.) There is always a bit of a padding around your image block, because Squarespace knows how important “white space” is as a basic design principle. You may have noticed that when you use any of Squarespace’s pre-built blocks, that the content doesn’t quite reach wall to wall. Make image card full width on Squarespace using CSS Method of CSS injection used: Universal Here’s a peek at what that could look like:Ħ. So while you can’t go changing the actual logo to the platform, custom branding is 100% welcome and encouraged. It can also be used to swap out Squarespace’s generic built-in icons slightly more stylized, on-brand versions of the old standbys! Thankfully, Rebecca of Rebecca Grace Designs (* ahem* talented past student of my Square Secrets & Square Secrets Business courses) has got us covered with this tutorial, showing us how to import and use those lesser known icons! □Īnd also not very useful to site visitors. If you try to linking to your account on a software that isn’t natively supported in Squarespace, the default icon that appears will be an image of link. (Think: Esty, AirBnb, LikeToKnowIt, etc.) When you go to link up your business’s social accounts, most the common icons you need will automatically populate the moment you start typing their name.īUT, what about those slightly lesser known platforms/apps that Squarespace doesn’t have a ready-made icon on hand for? Adding custom social icons to Squarespace 7.1 using CSS Method of CSS injection used: Universal Here’s a little demo of what that bit of CSS can do. So while you can’t just go swapping out the logos to mega-famous platforms all willy nilly, there are a few tweaks and customizations you can do to spice up what you’re already working with!Īdding a colored drop-shadow to your social icons is a fun way to bring a little branding to this otherwise (intentionally) plain little corner of your site!Īnd Erica from Big Cat Creative is here to show you how to do it in this post! These tiny little logos have become pretty universally recognizable, meaning * almost* anyone who comes across them instantly knows exactly what they stand for and exactly what to expect when they click on it. ![]() ![]() This is one-hundo-percent on purpose, btw. Īs much as I’m Squarespace fangirl #1, I can and will admit that their built-in social icons are a bit boring. ![]() Wondering what all this “method of CSS injection” business is about in each example? You might want to circle back around to Squarespace CSS: what you need to know before you get started. How to add a drop-shadow to social icons in Squarespace using CSS Method of CSS injection used: Universal ![]() Squarespace CSS for your site’s images & IConsġ. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |