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! 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.Īnd also not very useful to site visitors. (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ġ. So it’s best not welcome disaster by CSS’ing the socks off every design element on your site…īut it can be fun to break the rules from time to time! And I’ve rounded up 10 helpful tutorials to help you do just that! Or maybe don’t… #toosoon) unfortunately Squarespace can’t offer any troubleshooting for designs created with the use of custom code. Oh, Squarespace can do pretty much anything you force it to…but since all it takes is one missed comma or squiggly bracket to break the internet (just ask my assistant. If you remember from the first post in this series, “ Squarespace CSS: what you need to know before you get started” custom coding (including CSS) is not * technically* supported. Ok, so I don’t mean to put a damper on all the excitement, but I wouldn’t be a true Squarespace Educator if I didn’t raise a quick red flag… ![]() Who’s stoked to get their hands on some free Squarespace CSS for your site’s images and icons!? ♀️ Welcome to post #5 in the Squarespace CSS series! So, the following is the complete snippet for the parent hexagon shape. You can generate hexagon vertices and edges values using this tool. The second important thing is the clip-path property, don’t worry if you don’t know enough about it. You can get the height value by multiplying the width value by 0.866. You can set the width according to your needs but the height values rely on the width value. In order to draw a perfect hexagon shape, you need to use width and height properties cleverly. Here the important thing is the width and height property that defines the size of the hexagon shape.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |