Hey there! Are you're a web designer building websites with Squarespace for your clients? Have you been intrigued by all the talk about Webflow lately? In this new blog post series I talk about how Webflow compares to Squarespace and elaborate on some of the things that work a little differently in Webflow. This will hopefully help you find your way around Webflow quicker and/or answer the question of "How do I work with XXX (Squarespace feature) in Webflow?".
Hey there! Are you're a web designer building websites with Squarespace for your clients? Have you been intrigued by all the talk about Webflow lately? In this new blog post series I talk about how Webflow compares to Squarespace and elaborate on some of the things that work a little differently in Webflow. This will hopefully help you find your way around Webflow quicker and/or answer the question of "How do I work with XXX (Squarespace feature) in Webflow?". Alright...
Let's get started with a frequently used item in Squarespace called the spacer block. If you've worked with Squarespace extensively, you know what I'm talking about here, but just to be sure, I'll give you a quick rundown.
What's a spacer block in Squarespace?
Squarespace works with so called blocks of which there are many different ones. There is a button block to insert buttons on your page, a form block to insert a contact form, a line block to insert a horizontal line and many more. You basically use these blocks to design your site and - depending on the template you have chosen - can make style edits to the block you have chosen (like change certain colors). The spacer block lets you create blank space between other elements, for instance you could insert a spacer block in between to images to create a gap between them. Or you could use the spacer block to create vertical space between different sections of your page. A spacer block is basically just a Div block (one of the basic HTML elements) that you are giving height and/or width in your Editor (Squarespace is doing the actual CSS styling in the background).
So, how does Webflow handle spacing between elements?
While Webflow is a visual coding platform it hasn't abstracted code as much as a Squarespace has. This means that setting up your layout and amending your styling is still closely related how HTML and CSS code actually works. To create space between elements like images or other items on your page, you can use so called padding and margin settings around each of your elements. For instance if you want to create some space between an image and some text you could add a margin to either the text or the image (or both). Basically in Webflow you are not inserting a completely new item just to create space, but instead add space to the other elements (text images, videos etc.) on your page. Also, you don't need to insert empty elements (like Squarespace's spacer elements) to make other items on your page narrower - such as centering text on a page. Instead you simply change the alignment and intended width of the text directly. To learn more about spacing in Webflow, you can take a look at their short tutorial here:
What are the advantages of using margin/padding over Squarespace's spacer blocks?
You are not inserting empty, redundant Div elements into your code just to add space on your page, adding to bloated code
You have all the other styling options available to you and are not limited to what Squarespace's Editor allows you to do and don't have to use custom CSS code for basic styling (like changing the minimum height)
You can change the measurement you're using (such as pixels, percentages or ems)
When working in Webflow you don't actually need any kind of spacing element and have a lot more control over where and how you want to add space on your page. Keep in mind though that for more complex layouts things like Webflow's grid layout or flexbox (which I will talk about more in one of the upcoming blog articles), are sometimes more beneficial.
