ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
How To Use Custom CSS in a Squarespace Website
ฝัง
- เผยแพร่เมื่อ 14 ส.ค. 2024
- In this video I explain how to use custom CSS in squarespace, and why you would want to. When I first started working in Squarespace, I already had years of experience with CSS. But I still struggled to figure out how to use it in Squarespace. After designing Squarespace websites for the past 5+ years, I feel like I've gained enough knowledge to pass on to you! I want to share some of the tips and tricks of using custom CSS in a squarespace website so you can learn faster than I did 😅
This is not meant to be a detailed and thorough tutorial of CSS but moreso an overview of how it works, particularly in a Squarespace website. Let me know if there are any topics you want me to cover in more detail in a future video!
✿✿✿
WHERE TO FIND ME
/ jenwebbcreates
/ jenwebbcreates
art website: jenwebbcreates...
web design portfolio: www.jenwebbdes...
✿✿✿
HOW I FILM
small tripod: amzn.to/3SeKVuN
big tripod: amzn.to/3Oiy5KF
camera: amzn.to/3Sv2zeN
microphone: amzn.to/3SsGX2K
editing software: Premiere Pro & After Effects
music: artlist.io/ref...
✿✿✿
All opinions are my own. Some links listed are affiliate links which means I earn a small commission if anyone decides to purchase through them. Thank you so much for your support!
#squarespacecss #squarespacewebdesign
Chapters
00:00 intro
00:27 when to use custom css
02:21 css basics
06:14 example using css in squarespace
14:08 pseudoclasses
14:34 animations
15:22 breakpoints/media queries
16:19 version history
Wow! This video and your clear instructions were very impressive! It was extremely helpful!! Thank you so much!!! I'm now a subscriber!
Glad it was helpful! 😊 thank you for subscribing!
dang girl, that was thorough! Your video and teaching style is super engaging and I can tell that you have done the work!
thank you for saying that, I appreciate it 🥹
I’m a new a freelance web designer and I love your videos!
I'm so happy to hear that! let me know what other kinds of videos you'd be interested in 😊
I loved the way you explained it!
thank you that's encouraging!
OMG I literally fell in love with the way u talk 🙌 Thank you so mush for explaining this hard thing in sooooooo easy and understandable way
that makes me so happy, I'm glad you found it helpful 😊
That was very good. Keep going deep on squarespace!
thank you I definitely will 😊
You can make a whole video based on the lightening round. I'm hooked! Subscribed! Would like to know more about animations :)
ah thank you! I'll add animations to the list of videos to make, thanks for the suggestion 😊
So much goes into making a website even the smallest details!
Is there any built-in support or workaround available within Squarespace to enable the use of SCSS (Sassy CSS) for more efficient CSS management and preprocessing?
I don't personally use scss, I think I played around with it once and it was very cool but I'm not too familiar with it. I googled it though and one of the top results says this: "Squarespace supports Less natively so if you're going to style with Sass, you can use something like Compass or Grunt to compile your code into a CSS file that Squarespace can use." or maybe if you use codepen, you can have it convert your scss into css to use in squarespace. not exactly the best solution, it'd be nice if you could just put the scss code directly in squarespace.
can we this custom css in squarespace devloper mode?
Youre a wizard, seriously. Would it be possible for you to make a course to Skillshare or even here, breaking down your own website? It looks great and as someone who has no idea how to code, i'd really need a deep dive. Appreciate you!
ah thank you that is so encouraging! I've always wanted to make courses on Skillshare, I love that platform and learned so much on it but I've always felt like I'm not enough of an expert to teach yet. But your comment is encouraging. I do want to make a video on here breaking down my website and some of the other websites I've worked on in more detail, so watch out for those videos in the future 😊
@@jenwebbcreates If you know more than another person, youre qualified to teach 😊 Clearly you know more than beginners like me who would benefit from someone who knows the basics. Another thing i was wondering, is there any websites from where to find copy paste - codes that could be used or do you have such file yourself where you keep some codes? Would it be possible to get that kind of file somewhere?
@@jenwebbcreates Many teachers selling courses aren't really teachers, they're entrepreneurs. If the content is good then you're good.
@@grainvisions there are plugin sites you can buy code snippets from, some of them are free. try searching for 'ghost plugins' or 'will myers plugins'. maybe in the future I will add some code snippets to my own website once I have time to get that set up 😊
Thank you, Jen Webb for your help! I have a question - is it possible to use the image block in a code block? My goal is to use a code block to create HTML, but I want to use the Squarespace image block to upload pictures and display them in the code block. I don't want to manually upload images to the files section in the CSS tab and attach the link manually to Squarespace every time.
Hi Charles, glad you found it helpful! I don't think you can add an image block within a code block, I suppose you could try to position the image block on top of the code block but I'm not sure if that's what you want. Whenever I want to add an image to a code block I upload them to the files section and then use an tag in the html. But I only do that when I have to, I'd try to use CSS and image blocks instead if possible.
@@jenwebbcreates Thank Youuuu, i guess ill just do it that way then,
On another note! a new feature just dropped, the Block pinning feature. it has a lot of potential for scroll effects. would love to see what creative ideas you come up with that feature!
finally, thanks so much.
CSS seems so daunting but it’s now starting to make sense 😅
Have you tried using code generated from figma into squarespace?
I haven't tried this! but that's a good tip for figuring out which CSS properties to use
@@jenwebbcreates I tried using code generated for CSS and HTML, but had difficulty placing them correctly on Squarespace. Despite searching on TH-cam, I couldn't find any tutorials on how to transfer designs from Figma to Squarespace using code plugins such as Anima or Figma to HTML.
is it possible if you could be the first to do something on that 🥺🥺