Template Operation Manual
MesaOS
We’ve developed a method of working in Squarespace that’s intuitive, functional, and more consistent across designs. Instead of trying to add custom elements to Squarespace, we modify the underlying structure — meaning, you don’t have to be able to code, just use the platform as intended. Let’s get started.
Split Sections
Squarespace still doesn’t offer native split sections, so we made our own. Here’s how it works in all templates:
1. Add a background image
2. Set the content width to custom
3. Align content to the left or right
4. Select the first of any section color
Section Colors
Any Section Color will work with Split Sections — this gives flexibility to create some interesting and useful combinations.
Content Spacing
Content within split sections are constrained by the site-wide max-width (must be set within the Custom CSS window). This is so text stays tidy even when someone views on a larger screen.
Section Rounding
Make sections “overlap” by setting Content Alignment to top. Note: You may need to increase the Section Height of the overlapped page if anything’s covered.
Centering Content
Want to make content centered instead of top-aligned? Pick one of the default Section Height settings to center the content. Works on any Content Alignment.
Custom CSS
While there is quite a bit of Custom CSS at work to make your template work and feel the way it does, you’ll never have to touch about 99% of it. But for that 1% you may want to change, start by going to “Design” > “Custom CSS”.
Add Site Colors
When you change the default site colors in the Site Styles, you must change them here in the Custom CSS. Simply get the HEX code for each color, and paste them into the corresponding space.
Site Max Width
Copy what you input in the Spacing panel here, and everything will automatically adjust. (Used for split sections primarily)
Site Fonts
Once you’ve found the font you’d like to use, go to typekit.com and search for the Adobe font you’re using. Click “Add to Web Project”, complete the prompts, and copy the text within the parenthesis. Paste it here and you’re golden!
Mega Font Size
Making any Header bold will change it to this font size (useful for keeping heading hierarchy, but with more style choices).
Hero Text Overlap
How much the main hero text (“Residential Architects”) overlaps.
Small Card
Select “Small” for Content Width.
Note: Most Section Cards will require extra spacing on the top and bottom, so either add Spacer Blocks to adjacent sections, or make “spacer” sections above and below to correct.
Medium Card
Select “Small” for Content Width.
Large Card
Select “Inset” in section background settings.