Download a free workbook to help you design your site with confidence.
The email you entered is invalid.
Thank you for subscribing.
By entering your email, you indicate that you have read and understood our Privacy Policy and agree to receive marketing from Squarespace.
Are you thinking about freshening up your website and making some adjustments to its design, but feel like you’ve already thoroughly explored every option, every style tweak, every block type and feature?
Squarespace is always updating and adding to its robust set of tools to offer new options for customizing and personalizing your website. This article will highlight a few options that you may not yet have encountered, but could be just the tools you’re looking for to fine-tune your site’s appearance.
These tools are also great access points to start exploring the platform's deeper features and lead you down a brand new creative road.
Changing page sections
Page sections are the different pieces that make up the content on a website page, like an introduction or your list of services. Let’s take a look at some of the design options available for updating your page sections.
1. Section dividers
Section dividers add more visible breaks between page sections. You can choose to add an actual line in different styles, like a wave or diagonal, or crop a section background or background image to mark the break.
These can help to visually separate content, allowing each section to have its own space without the need to create a new page, producing a more dynamic design. You can use section dividers to break up page layouts in a variety of ways, such as:
Creating a break between About and Our Team sections on a single page, consolidating two potential pages into one
Making a more organized one-page website
Adding separation between your main page content and your website footer
2. Section background images and videos
Add unique backgrounds to page sections to really catch a visitor’s eye once they arrive at your site. Use these as an alternative to a background video, as a way to differentiate sections, or as a visual introduction to any page of your site.
For example, you can add a background video to the first section of your site’s homepage to give an overview of your product, service, or body of work. You can also use section background images to help give specific sections on a page their own look.
Pro tip: Depending on connection speed and browser version, background videos may not load for every visitor. It's helpful to add a mobile fallback image to display when the video can’t.
3. Auto layouts
If you’re looking for a hand getting started on designing a page section or like to have a template to work from, auto layouts are a great starting point. Auto layouts present sets of content in curated designs. The designs include layouts for different purposes, such as columns and rows, carousels, or slideshows.
These are perfect for maintaining simple pages with content that needs to be updated regularly, such as featured product images, recent projects, and current team members. While this content starts in preset layouts, you can create additional sections to make the design yours.
4. Background art
While section background images are a great way to draw in visitors’ attention, you can also add background art to a page section for another level of personalization. Background art allows you to create a unique look using colors, patterns, and shapes generated in the Squarespace platform.
This is a great option for creating themed sections on a single page, such as dividing a school site into sections by grade level, or enhancing the look of a text-heavy FAQ.
Blocks
Blocks are design elements that can be placed on Squarespace page sections, like a text block, form block, or image block. Below are some types of block types and features that you may not have had the chance to try out just yet.
5. Scrolling blocks
Scrolling blocks are a unique block type that allows you to display text that scrolls horizontally across the page. This is similar in function to a theater marquee or news ticker. You can control the speed and shape of the scroll.
This is a great way to bring more life to your site’s design and draw visitors’ focus to key information.
You can use scrolling blocks to:
Highlight sales, launches, or popular products
Create a ticker of upcoming events
Display customer reviews and testimonials
Add scrolling blocks to your site
6. Shape blocks
Shape blocks allow you to add different shapes with solid fill to your page sections. This enables you to vary page layouts and create more diverse designs.
You can also overlap shape blocks with other types of blocks to create even more visually striking layouts. Shapes can be placed behind images on your site to make them pop out from the page or stand apart from other content in a gallery.
A few ways someone might use shape blocks include:
Adding a star shape block behind a customer testimonial to emphasize their 5-star experience
Adding shape blocks of varying color around a page section detailing your birthday cake baking services for an extra-festive feel
Learn more about using shape blocks
7. Accordion blocks
Accordion blocks display text in collapsible, clickable sections. This helps to keep page length minimal and reduces scrolling for your visitors. Accordion blocks can help you to create a more structured design for text-heavy pages like FAQs or product listings.
For example, use an accordion block to display important information about a service that your business provides with clearly divided sections that customers can click to read more. A wedding photographer might use an accordion block to break up the process of working with them, with accordion sections like: Meet & Greet, Choose a Package, Engagement Shoot, Pre-Wedding Meet, Wedding Day, After the Big Day.
Add accordion blocks to your site
8. Block Pinning
You can pin any type of block on a page section. This keeps them stationary while visitors scroll through the rest of the content in the same section.
It also helps to ensure that important information and content is visible no matter where you're scrolling. For example, you can:
Pin your business location and hours of operation while visitors scroll through products
Keep your image front and center while presenting accomplishments or services
Highlight a disclaimer when necessary
Keep your contact form or newsletter sign up within view at all times
Text formatting
How you style the text on your website can impact what site visitors pay attention to and what they remember. Here are some text formatting options and features to allow you to get the most out of your words.
9. Text highlights
To make certain text stand out, try using the text highlighting feature. This can really help accentuate key information on a page, or make it more skimmable when necessary.
Text highlighting has the following style options:
Animation: Animate your highlight shape to add movement that draws extra attention to your text.
Bring to front: This allows your highlight to overlap your text, making it look more like a real-life highlight.
Color: Change the color of your highlight to make it pop or better match your site’s design.
End caps: Adjust the shape for the ends of the highlight to rounded or squared-off.
Thickness: Adjust the thickness of the highlight line.
This is a great option for:
Spotlighting customer reviews
Accentuating key portions of a blog post
Drawing attention to certain elements of an About page
10. Scale text
Text scaling allows you to fit your text to the width of a block. It’s a quick way to size your text without line breaks, regardless of browser size. We recommend this feature for short titles or headlines. It's also great for:
Breaking content into sections using headings
Creating concise lists
Featuring important quotes from larger portions of text
Image formatting
The way you style and format your images can also add personality and visual interest to your site design.
11. Image block animations and effects
You can add effects to image blocks to give images a more stylized and unique look. Some options add an animation, like a subtle wave or static effect to emphasize your site’s visual style. Other effects only appear as the visitor scrolls through that section of your site.
This is a great way to:
Bring more life to an otherwise static area of a site
Add motion to still images without the use of video
Ensure that key images are always able to draw attention
Add animations and effects to image blocks
12. Image shapes and masks
Image blocks can also be shaped to change the look and feel of each image on a page. Available options for shaping images include:
Using corner radius settings to round the corners of an image
Set a full shape, such as a circle or triangle
The full shape setting appears over the image, like a mask, giving it a new shape. Turn your photo gallery into a series of interesting shapes or your product offerings into something beyond standard images to really draw attention.