No video :(

Create Vertical Line Designs in Squarespace

Подписаться 7 тыс.

Просмотров 4,7 тыс.

50% 1

Create Vertical Line Designs in Squarespace - In this video I show you the best way to create lined designs in Squarespace by using CSS to create our own vertical line block!
Get the CSS:
schwartz-edmisten.com/blog/cr...
Sign up for my free Squarespace CSS for beginners eCourse:
schwartz-edmisten.com/learn-c...
Get my giant library of CSS and Code Snippets for 7.1!
schwartz-edmisten.com/css-too...
My goal is to help you create more custom Squarespace websites so that you can charge more for your services.
If you need help designing, updating, or implementing custom code on your Squarespace website, you can hire me to do so through my contact page:
schwartz-edmisten.com/contact
If my content has helped you out I would really appreciate a small donation to allow me to keep making tutorials:
schwartz-edmisten.com/donate
Save 10% off your first subscription of a Squarespace website or domain by using code PARTNER10. (This is an affiliate link, so if you end up setting your website live I will receive a small commission!)
squarespace.syuh.net/sewebdesign
Music: / justin-kolas

Опубликовано:

7 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 49

@ilzebrand9785 6 месяцев назад

This is genius! Been struggling with finding a proper solution to vertical lines for years (on and off!). This is by far the best one I've found. Thank you so much!

@SEWebDesign 6 месяцев назад

That is great to hear! You are welcome!

@kupotenshi 2 месяца назад

Super helpful, thank you!

@SEWebDesign 2 месяца назад

I’m so glad! You are welcome!

@Annastasia13 7 месяцев назад

Thank you so much! Your code is always so clean and thorough.

@SEWebDesign 7 месяцев назад

I'm glad it was helpful! Thank you!

@dougcrossley 8 месяцев назад

Amazing. I'd been searching for this ALL day. Thank you!

@SEWebDesign 8 месяцев назад

I'm glad it was helpful! You are welcome!

@thedesignorder Год назад

BRILLIANT Chris! Thanks for this!

@SEWebDesign Год назад

Glad you enjoyed it!

@thaliasmusings 6 месяцев назад

This is awesome! Thank you!

@SEWebDesign 6 месяцев назад

You're very welcome!

@dylansneed4974 Год назад

chris, you rule. this is so useful! i really appreciate it!

@SEWebDesign Год назад

I'm so glad! You are welcome!

@sayreambrosio Год назад

Amazing tutorial! I was not looking forward to bringing somebody over from a different platform that has blocked out sections with lines all over their site. Just makes it so much easier

@SEWebDesign Год назад

I'm so glad this will be helpful! It is a pretty manageable system I think.

@sfphotogirl Год назад

This is great! I love this look.

@SEWebDesign Год назад

I'm so glad!

@khawk247 6 месяцев назад

absolutely amazing tutorial! thank you for sharing this with us.

@SEWebDesign 6 месяцев назад

You're very welcome! I’m glad you enjoyed it!

@michaelalala 4 месяца назад

Yesss just what I needed, thank you!

@SEWebDesign 4 месяца назад

Awesome to hear! I’m glad it was helpful!

@OrincyWhyteDesigns 5 месяцев назад

I LOVE THIS!!! Css finally has variables??? And I call myself a css stan 😩 time to learn all the stuff I’m missing out on! Great videos

@SEWebDesign 5 месяцев назад

Yes! Officially called custom properties if you want to look into it more!

@tastyparts Год назад

Awesome thanks for this one!

@SEWebDesign Год назад

Glad you like it!

@hermessybun 4 месяца назад

Great video! The website mockup looks like "ETHEREAL" " FUNCTIONAL" and "JOANE" would be expandable. Similar to an accordion.

@SEWebDesign 4 месяца назад

Thank you!

@JaiSequoia Год назад

Wow whew! That was some heavier css lifting Chris! Bunch of stuff there I had no idea about. Might come in handy in my near future. Thanks!

@SEWebDesign Год назад

No problem Jai!

@gullable 9 месяцев назад

Implemented to the letter, but no luck. Tried debuging as well. Could be my custom CSS, but I saw nothing in there that should interfere. Bummer, I'd love to use this on my current project. It's very smart and clever!

@SEWebDesign 9 месяцев назад

Try copying and pasting the CSS from the blog post in the video description. And copy and paste the HTML for the line into the code block. That will ensure it is correct.

@gullable 9 месяцев назад

Thanks for the reply, Chris. I did that initially based on your updates. Added to my footer, and to the code block. It must be something to do with my CSS - there's a fair amount. I may poke around, but you know how these things can guzzle our time lol! ;D @@SEWebDesign

@SEWebDesign 9 месяцев назад

@@gullable you said you added it to the footer and to your code block? The CSS should be placed in the custom CSS window not the footer code injection. Maybe that is it?

@gullable 9 месяцев назад

🤦‍♂That was a great call, my bad. It (almost) did the trick. Everything looks perfect in the SQSP editor. But rendering in Chrome, all I get is the 10px high line top-aligned. I cheecked my syntax 3 times. It's accurate and in the right place (now). I'm stumped. SO CLOSE! @@SEWebDesign

@elleharrison.design Год назад

Thanks for this tutorial. Is the paper textured background of the sections just an image background you have added?

@SEWebDesign Год назад

Yes, exactly!

@jess30p 6 месяцев назад

Thank you so much, this is exactly what I was looking for and it works perfectly! Quick question: On your example page, you have some vertical text: HEALTHCARE and APOTHECARY. I know how to rotate text so that it looks like "healthcare" but cannot for the life of me figure out how to point it in the other direction. Is this a quick fix?

@SEWebDesign 6 месяцев назад

For vertical text you can use: writing-mode: vertical-rl; text-orientation: mixed; If you want it the other way, add a transform: writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);

@lisadesignstudio 4 месяца назад

Hey! in edit mode (mobile view) the full code block fills with the color of the line. is there a way to remove this to just the line, not the full block as it's confusing for my clients, that the full block will show up coloured. Thanks Lisa

@alexlee9562 Год назад

Thank you SO much for this! mainly the responsiveness of the height of the vertical line, which no one else tutorials seem to mention! Quick question- are you have issues with how a 1px line displays when ad=ing with the inbuilt section divider line? I think it looks pixilated compared to when it's added via code, line block or at the bottom of the header.

@SEWebDesign Год назад

I'm glad this was helpful! I personally haven't seen the pixelation problem with the divider but I have a high res 4k monitor so that could be part of it

@komaldhobe135 Год назад

hey Chris, thank you so much for another excellent tutorial. hugely appreciate it! I have got one question though, I tried this code out but it doesn't seem to work on Firefox for some reason. my Firefox version is 112.0.2. there is no before class being added.

@SEWebDesign Год назад

I included CSS in the blog post that should work for all browsers. Firefox doesn't support :has() yet which is why the video CSS wasn't working, but Chrome and Safari do.

@harvestnhome Год назад

Hi! How do you add the horizontal line under the header?

@SEWebDesign Год назад

When editing the header there is a border oprion!

@jacobbrooks9414 7 месяцев назад

How are you getting your grid to span the full width of your page? My grid seems to force me to only design within a narrow area relative to yours. Feels like I'm working within a blog. Any help would be appreciative. Thanks.

@jacobbrooks9414 7 месяцев назад

Scratch that. Looks like I found it under the "Site Style" under "Spacing." Hope this helps other who may have missed it.

@SEWebDesign 7 месяцев назад

Glad you found it!