squarespace reduce space between text blocks

Designing In Style Editor PanelĪlright, now the fun begins! Once your page is saved, head on over to the Style Editor Panel to the left (Design > Site Styles). No need to worry about the image layouts or summary block. Once the background image is uploaded, you are going to repeat Step 2 above with inserting the Squarespace Essential Elements (i.e. I suggest uploading an image of a coloured background, or an image that’s not busy at all so that you can see the different elements on top. This is where you will be adding a background image to this section. So click on that section, and instead of clicking on Edit on the black bar right away, click on Banner. Okay, halfway there! Remember that “Preview with Background” Section that we added at the very beginning? That’s where we are working on next. Once that’s completed, add one spacer across, and then insert each one of the summary blocks options. Remember to upload a photo with each of these blocks, as well as fill out the title & subtitle components. Then, under each spacer block, add one image layout block underneath. Once that’s completed, add three spacer blocks underneath your line. Make sure to set each text block to the relevant heading by using the black bar.Īs for the buttons, please adjust the size accordingly so we can capture all styles later on. To start, here is a list of items you should add to this page: The next part will take awhile to set-up, but I promise you, it’s worth it in the end! To make navigation easier, I have split this into four parts. Click on the indicator, and the content block window will pop up. To do so, click edit on the page, and you will see a line with an indicator appear.

With your preview page created, you will need to begin adding content blocks onto the page.

It’s important to use an Index page rather than a blank page for the purpose of this exercise. You can name them “Preview” and “Preview with a background”. Once that has been created, click on “add a section” and add two pages. Name your page along the lines of “Style Edit Preview”. This way, it won’t show up on your navigation areas. You want to head on over to your Page Panel and add an Index page under the “ Not Linked” section. Roll up the sleeves and let’s get down to it! This hack alone has saved me hours of playing around - so I want to share it with you today! It’s definitely a feature I appreciate but being the planner that I am, I do prefer setting everything up from the get-go to reduce further back and forth edits between pages. Since there are so many features under one template, Squarespace hides some of the style features until the user has “activated” them (aka added it onto their site) to prevent further confusion.

For 7.1 Squarespace users, no need to worry about picking a template with the most features as they all have the same features.Īs a new Squarespace user, the Style Editor Panel can get overwhelming to customize.

For 7.0 Squarespace users, I suggest using the Brine Family templates as it has the most flexibility and capabilities within a template.

You will have the option of making “tweaks” to them, based on the features available with each template. While a Squarespace template is the structure of your website, the Style Editor is the place where it houses the interior design elements - meaning the colours, fonts, sizes, and spacing of every Squarespace element. But as mentioned, each platform has its own limitations and it truly depends on your business’ needs and comfort level with technology.Īnyway, I can go on and on. In comparison to Showit, however, I will admit Squarespace is lacking in the design flexibility realm and is a web designer’s dream. It’s also a one-stop-shop, meaning hosting, newsletters, e-commerce, blogging is under one platform and works seamlessly together. Squarespace users have the option of keeping their website simply using the drag and drop features, or using a little bit of CSS or code to further their design more. I love using Squarespace because it’s intuitive and simple to design on, compared to Wix and WordPress. Don’t be too hard on yourself as learning a new platform always comes with a learning curve. If you recently made the switch to Squarespace for your website, you are probably getting familiar with the platform. Today’s hack is a life-saver if you ask me and will definitely save you quite a bit of time if you are just learning to design on Squarespace using the Style Editor Panel.

Squarespace reduce space between text blocks