How to Edit in Squarespace 7.1 with Fluid Engine - Best Practices & Tips

Big Cat Creative - Squarespace Tips & Templates

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

Просмотров 8 тыс.

50% 1

⚡️ FREE TRAINING⚡️ DIY Your Dream Site: 5 key steps to a stress free + beautiful website - Join instantly here: bigcatcreative.com/free-train...
Today, we're jumping into how to edit in Squarespace's new Fluid Engine Editor. We show you all the fundamentals of actually designing in the Fluid Engine, including some best practice tips. We discuss which sections are affected by Fluid Engine, and all updated Block settings, including images, buttons, alignment, spacing, and overlapping.
TIMESTAMPS:
0:00 Intro
2:40 Section Info
5:00 Upgrade your Sections to Fluid Engine
6:00 Adding Blocks
6:40 Showing The Grid
7:00 Resizing & Moving Blocks
7:15 Block Settings
9:40 Grid Settings
13:20 Block Alignment & Order
17:10 Text Block Settings
18:05 Image Block Settings
20:13 Button Block Settings
22:47 Best Practice: Full Width Images
25:00 Best Practice: Intentional Overlapping
27:08 Best Practice: Rows & Block Height
29:05 Separate Mobile Editing
31:18 Fluid Engine Templates
MENTIONED IN THE VIDEO:
👉🏼 Read the written post on this topic: www.bigcatcreative.com/blog/squarespace-fluid-engine-tutorial
👉🏼 Squarespace: squarespace.syuh.net/bigcatcr... *
👉🏼 The main differences between Squarespace’s new Fluid Engine and the Classic Editor: • The Biggest Difference...
👉🏼 What is The New Fluid Engine Editor in Squarespace, and should I use it?: • What is the NEW Fluid ...
💻 Ready to up your Squarespace Website Design? Check out our Squarespace Templates: bigcatcreative.com/templates-yt
📣 Want Squarespace Tips straight to your inbox every week? Sign up here: bigcatcreative.com/tips
MORE GOODIES:
👉🏼 Visit our blog full of Squarespace Tips & Tricks: bigcatcreative.com/blog
👉🏼 Follow us on Instagram: / bigcatcreative

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

7 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@adarnoult 16 дней назад

Excellent training video! Thank you!

@paulhenry4207 2 года назад

I'm just starting out, been watching many different tutorials. This is by far the clearest and most comprehensive. Thank You.

@never.lukewarm 5 месяцев назад

honestly solid review, super simple clear explanation, got me stoked to build my first website and keen to check out your other content and paid offerings too!

@alexiusargos9450 Год назад

Great run down. Nice pace. Your voice is calming. Thanks!

@inkfly 11 месяцев назад

Wonderful, exactly the video I was looking for. Thank you!

@tonicabrandstudio 2 года назад

Such a great breakdown!! Thank you so much

@phillipbernal6946 Год назад

Thank you, very helpful information and well presented!

@katievandyck4420 2 года назад

Superb video. Thank you so much.

@andreafine439 Год назад

Fantastic job of sharing this info

@dnartworksusa6648 Год назад

Thank you so much ! 😊

@karlbratby4349 Год назад

Awesome 😎

@dlo6416 Год назад

I haven't had a Squarespace website in years but I'm considering doing a new one. Your video really helped me out, so big thanks! (And I came here specifically wanting to know about block animations!)

@BigCatCreative Год назад

It's definitely a lot different now than it was a few years ago, so this is a great video to start with! We have lots of other tutorials too on our blog bigcatcreative.com/blog, hopefully those can help you. Good luck with your new site!

@lloydvprice 2 года назад

Very nice, in-depth video, thank you. I'm finding some fundamental limitations to the fluid engine which aren't the case in the classic editor, but maybe I'm missing something. It seems that there's no way to have a section that flexes with the full viewport height when the window is scaled. I want to have an image that is at the very bottom edge of the section and the screen, regardless of window size. I've been able to kind of achieve this with some fairly unsatisfactory CSS, but I'm really surprised that there's no way to have sections that flex with the viewport any more.

@BigCatCreative Год назад

Thanks for your comment! You should still be able to do this In you Section Settings, under SECTION select "Fill Screen" then you can select Height 'L' - these settings are like the old section settings for setting height. As far as I'm aware, L is like setting the height to 100% of the screen size. This seems to work for me but might depend how much content/rows you have in that section, I haven't tinkered with this too much. Also if you just want an image and no content, then you could use a Gallery section instead of a Fluid section. Let me know how you go!

@paulhenry4207 Год назад

Thank you for excellent, clear tutorial. I have a similar problem as above. When I add a section I get a different list of options under “Add Section”. The last option is a link that says “The above sections use the new fluid engine editor. Looking for sections built with our Classic editor? “. If I click that link I get the list that you describe. Not sure what is going on here? Thanks for your help.

@BigCatCreative Год назад

Hey Paul. Squarespace is rolling out Fluid Engine and slowly limiting access to Classic Editor. I'm not sure exactly what you're asking. When you go to add a new section, you have options to use Fluid Engine section layouts. Currently, you can also access Classic Editor sections from the extra classic editor button at the bottom. Eventually they will remove this extra classic editor option at the bottom. But for now you can work with both section types on one page.

@thomasmiller4365 Год назад

Really appreciate this video. When you say image blocks only to the edge, past the grid, does that also apply to videos? I'm trying to put three videos across in full bleed, and running into trouble with them resizing. Can this be done, or should I just go with images that link to the videos, or simply keep the videos within the grid?

@BigCatCreative Год назад

Videos could span to the edge! Without looking at your site though I'm not sure what you mean by the resizing issue. It could definitely be done, but maybe you need some custom css to make them resize how you are wanting them to. If you want help with that you can email our extra support bigcatcreative.com/extra-support

@hillarymcmahan531 Год назад

Thanks for this helpful introduction. I do have one question about text blocks. On my homepage, I have several H2 subheaders followed by short P1 paragraphs. Do you recommend creating a new text block every time I switch type styles? That seems unnecessary to me, unless the text is going to move around to different places on the page. But I'm finding that it's sometimes difficult to *select* all the text within a text block that contains multiple type styles. Sometimes the editor won't let me select the first letter of a new line.

@BigCatCreative Год назад

Hey! You're right, it's unnecessary unless you want to move them separately on mobile VS desktop or something like that. That sounds really weird about the selection thing, I haven't had that issue, it sounds like a glitch! I would recommend reporting it to Squarespace support so they know about it and can fix it squarespace.com/support

@prov31vw Год назад

Awesome! Thank you. I am having issues with the padding around my text block taking up an extra row on the grid above and below it and I am not able to adjust it. There is an uncomfortable looking space between it and the text block directly below it. Any suggestions? I see that's not the case when you're editing. I would appreciate any help.

@BigCatCreative Год назад

Hey Melinda! This is definitely one of the things that is common in Fluid Engine, I know exactly what you're referring to. Depending on how big the font is/how much room it takes up/how many lines of text you have there can be some extra spacing left at the top and bottom which is a little fiddly. I think generally this would be unnoticeable but because you can see the grid it looks a bit odd. What I like to do to combat any weird spacing is adjust the Vertical Alignment of the text to either Top, Bottom or Middle depending on what looks better and what I'm trying to align it to. This is particularly hard though when you have multiple text blocks on-top of each other and the spacing is different between them all. The spacing also changes when the screen size changes. Sorry to say this is something I haven't found a solution for yet but have just been trying to design around it. Sorry I can't help more with this!

@prov31vw Год назад

@@BigCatCreative thanks for taking time to respond. It’s a tad frustrating for sure but I’ll try your tip 👍🏼In the meantime, I’ll be happy with all the updates that comes with Fluid because they are awesome!

@BigCatCreative Год назад

@@prov31vw Yes I find it frustrating too! Fingers crossed it gets resolved. Make sure you submit a ticket to Squarespace so they keep hearing about the problem and prioritize fixing it :)

@gabrielleyuen9736 Год назад

Thanks for the video! I'm just wondering if we can still get animations/transition effects with these image blocks in Fluid Engine?

@BigCatCreative Год назад

Unfortunately Squarespace has removed individual block animations in Fluid Engine 😭 I saw somewhere that they responded saying that this was something they plan to bring back - but make sure to message them via support and ask as the more requests they get, the more they will prioritize!

@gabrielleyuen9736 Год назад

@@BigCatCreative Thanks so much for your response, how devastating that we can't animate them easily! Will definitely put in a ticket. Cheers.

@aglimpseofgood50 2 года назад

Thanks so much for this one💖I have your gigi template. 1/ is there an update for it or do I have to go I. And separate all the photos in Canva so I can move them where I want now? 2/ I can t update to fluid engine on my blog page-what am I doing wrong here? 🤪

@BigCatCreative 2 года назад

Hey Andrea! Reach out to support@bigcatcreative.com and our support team will help you with the steps to update if you want to. Blogs don't have access to FE yet! So weird, I know, but they are still in Classic Editor. I imagine they will be able to upgrade soon as it's really weird that they are still in CE!

@aglimpseofgood50 2 года назад

@@BigCatCreative GREAT! Thank you.

@kennyhunte4833 Год назад

Hi! I noticed that as soon as you changed from Classic Editor to Fluid Engine, that your grid extends to the full width of your screen. Now matter how much I try to make adjustments in the section editor, my grid remains in the the center. I can't get it to expand to the full width of the screen. What am I doing wrong?

@BigCatCreative Год назад

It probably just appears that way because I’m using a smaller screen size. If I use my larger monitor my grid stays the same size and it doesn’t span the full width, as the grid has a fixed maximum width (this is common in web design). You can pull some elements outside of the grid though and they will span the entire browser. Try to bring your browser window in and you should see the same thing 😊

@sidalirahim8500 Год назад

can i know how to get the 183 days trail like you? thank you

@BigCatCreative Год назад

If you are a Squarespace Circle member you get 6 month trails instead of 2 weeks on new websites. If you're not a member you can message Squarespace and ask for them to extend your trial if you need more time, they're usually happy to do so :)

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

I'm working on moving from 7.0 to 7.1 and find the new button behavior to be really annoying and challenging. In 7.0, buttons stay static to the size you specify without being influenced by responsive browser width behaviors. With 7.0, I find that using Fit rather than Fill works best, but even with Fit, the button size changes based on browser width changes. Does anyone know of a way to keep button static? I hope Squarespace adds "Static" to "Fit" and "Fill" options. But, I doubt it since everything is based on the Fluid Engine. I could be missing something. Let me know if if there's anything else that can be done. Thanks.

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

If you are using 7.1 FIT then they shouldn't change UNLESS you have made the block container (blue container around all blocks that you can resize) too small. For buttons I recommend pulling the container fully out left and right to give it lots of space. If you set it to FIT then the button wont actually expand this far, it will just look like empty space. But as you decrease the screen size (and grid size), this will give the button lots of room and it won't "squish" the button down as the grid gets smaller. Let me know how you go with that

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

@@BigCatCreative Thank you. That was helpful.

@cluckcluckitycluck Год назад

I'm having trouble with elements overlapping. I'll design for desktop, but when I size down my browser, items will overlap. Like my button will end up on top of a text box. Mobile and desktop are fine, but in between is not. Are you aware of any solutions to fix that?

@BigCatCreative Год назад

Yes, and we talk about it in this video. Make sure that your block containers are not overlapping. See from 25:00 :)

@cluckcluckitycluck Год назад

@@BigCatCreative Thank you so much for creating this video. It helped a lot!

@gratefulgrows 2 года назад

List section is not available when I Add Section

@BigCatCreative 2 года назад

I recommend reaching out to Squarespace if you think that something is missing from your site. But also make sure you look under all of the sections as they may not necessarily be listed as "List Section"