How To Use Custom CSS in a Squarespace Website

Поділитися
Вставка
  • Опубліковано 31 гру 2024

КОМЕНТАРІ • 37

  • @thetrustedbrush
    @thetrustedbrush 9 місяців тому +3

    dang girl, that was thorough! Your video and teaching style is super engaging and I can tell that you have done the work!

    • @jenwebbcreates
      @jenwebbcreates  9 місяців тому

      thank you for saying that, I appreciate it 🥹

  • @moon_spilling
    @moon_spilling Місяць тому

    the color scheme in this video was perfect

  • @qristavitavian8797
    @qristavitavian8797 9 місяців тому

    So much goes into making a website even the smallest details!

  • @tanyagl5776
    @tanyagl5776 9 місяців тому +1

    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

    • @jenwebbcreates
      @jenwebbcreates  9 місяців тому

      that makes me so happy, I'm glad you found it helpful 😊

  • @journeybrown
    @journeybrown 6 місяців тому +1

    I’m a new a freelance web designer and I love your videos!

    • @jenwebbcreates
      @jenwebbcreates  6 місяців тому

      I'm so happy to hear that! let me know what other kinds of videos you'd be interested in 😊

  • @dre6289
    @dre6289 9 місяців тому +1

    That was very good. Keep going deep on squarespace!

  • @HH-zb5ul
    @HH-zb5ul 2 місяці тому

    Oh ! l love css but it need practice , Awesome video 😊 love that ❤

  • @ashleyk3745
    @ashleyk3745 9 місяців тому +1

    You can make a whole video based on the lightening round. I'm hooked! Subscribed! Would like to know more about animations :)

    • @jenwebbcreates
      @jenwebbcreates  9 місяців тому

      ah thank you! I'll add animations to the list of videos to make, thanks for the suggestion 😊

  • @RevelynMaeOnrejas
    @RevelynMaeOnrejas 4 місяці тому

    Thank you! I love how you explain everything more power to you!

  • @MelisaMerine
    @MelisaMerine 6 місяців тому

    Wow! This video and your clear instructions were very impressive! It was extremely helpful!! Thank you so much!!! I'm now a subscriber!

    • @jenwebbcreates
      @jenwebbcreates  6 місяців тому

      Glad it was helpful! 😊 thank you for subscribing!

  • @andreamolinares7341
    @andreamolinares7341 8 місяців тому

    I loved the way you explained it!

  • @gouravjoshi953
    @gouravjoshi953 9 місяців тому +1

    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?

    • @jenwebbcreates
      @jenwebbcreates  9 місяців тому

      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.

  • @noemiesa8076
    @noemiesa8076 3 місяці тому

    Hi Jen! Thanks for this tutorial.
    I searched for a long time for a list of all the other text types like quotes, forms, button types, ... and classes but couldn't find it.
    Maybe you have a link to share about this?

    • @jenwebbcreates
      @jenwebbcreates  2 місяці тому

      hi! are you talking about the classes squarespace uses for each of the text elements? I don't have a list of classes that I use, I usually just look for it in the inspector panel in the web browser (around 6:45 in this video). It's a little bit of work to find the right class, you have to play around with the css to make sure you're using the right one. Or sometimes you can just google it for specific elements, like if you're trying to find the selector to use for quote elements you can google "squarespace quote css selector"

  • @phm.ththytrang
    @phm.ththytrang 9 місяців тому

    finally, thanks so much.

  • @grainvisions
    @grainvisions 8 місяців тому

    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!

    • @jenwebbcreates
      @jenwebbcreates  8 місяців тому

      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 😊

    • @grainvisions
      @grainvisions 8 місяців тому

      @@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?

    • @taunado
      @taunado 7 місяців тому

      @@jenwebbcreates Many teachers selling courses aren't really teachers, they're entrepreneurs. If the content is good then you're good.

    • @jenwebbcreates
      @jenwebbcreates  7 місяців тому

      @@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 😊

  • @CharlesNwankwo-hn1ff
    @CharlesNwankwo-hn1ff 9 місяців тому

    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.

    • @jenwebbcreates
      @jenwebbcreates  9 місяців тому

      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.

    • @CharlesNwankwo-hn1ff
      @CharlesNwankwo-hn1ff 9 місяців тому

      @@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!

  • @salauddin3693
    @salauddin3693 6 місяців тому

    can we this custom css in squarespace devloper mode?

  • @CharlesNwankwo-hn1ff
    @CharlesNwankwo-hn1ff 9 місяців тому

    Have you tried using code generated from figma into squarespace?

    • @jenwebbcreates
      @jenwebbcreates  9 місяців тому

      I haven't tried this! but that's a good tip for figuring out which CSS properties to use

    • @CharlesNwankwo-hn1ff
      @CharlesNwankwo-hn1ff 9 місяців тому

      @@jenwebbcreates I tried using code generated for CSS and HTML, but had difficulty placing them correctly on Squarespace. Despite searching on UA-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 🥺🥺

  • @randomyogi
    @randomyogi 9 місяців тому

    CSS seems so daunting but it’s now starting to make sense 😅

  • @PeterTrainer
    @PeterTrainer 3 місяці тому

    🫶 thanks 😘