Design elements showcase
This page showcases the design elements and layouts available for your website. Explore the sections to see how different styles, blocks, and features can be used to create an engaging and dynamic site.
Duplicate this page to use for experimenting and playing with Squarespace features.
Section Color Theme: Lightest 1
Typography Showcase
Below, you’ll find examples of different text styles available for your site. These include:
Headers 1–4: Used for titles and section headings, each progressively smaller in size.
Paragraph Sizes 1–3: Options for body text, ranging from large (easiest to read) to small (compact for dense content).
Monospace: A fixed-width font style, perfect for code snippets or unique design elements.
These styles ensure consistency across your site while allowing flexibility for various content needs.
This is Header 1
(A bold, prominent style for main titles or important headings.)
This is Header 2
(A slightly smaller style, ideal for subheadings or section titles.)
This is Header 3
(A medium-sized header for organizing content within sections.)
This is Header 4
(A smaller header for subtle emphasis or detailed sub-sections.)
This is Paragraph 1
(A larger body text for maximum readability in prominent areas.)
This is Paragraph 2
(A standard body text size for general content.)
This is Paragraph 3
(A smaller body text for compact or secondary information.)
This is Monospace
(A fixed-width font style, often used for code or unique visual effects.)Available text formatting
Text can be bolded and italicized or both.
Text can be aligned left, centered, right, or justified.
Text can have custom colors.
Unordered and ordered lists can be created and nested and indented.
A variety of highlights are available in various colors and animations: underline, freehand, double, marker, wavy, circle, over and underline, scribble, jagged, cross, diagonal, strikethrough and strikethrough as format.
You can choose to scale text to fit.
Quoted text and be chosen through the formatting menu.
“The quote block has its own unique style.”
Annoying scrolling is available
〰️
Annoying scrolling is available 〰️
-
Accordion blocks in Squarespace are a versatile way to organize content into collapsible sections, helping keep pages clean and focused while providing detailed information. They’re great for FAQs, service details, staff bios, lesson plans, or interactive storytelling. Each section has a customizable title and content area, supporting text, images, or embeds like videos. Design options include font styles, color themes, and spacing, with functionality settings like single or multi-expand modes. You can customize indicators (e.g., arrows or “+” icons) and enable scroll-to-open for a seamless user experience. To use them effectively, keep titles concise, group related content, and ensure consistent styling that aligns with your site’s design. Perfect for creating an organized, user-friendly layout!
-
The accordion was first patented in Vienna, Austria, in 1829 by Cyril Demian. Its design quickly gained popularity across Europe for its portability and versatility.
Accordions are used in a wide variety of music genres worldwide, from traditional polka and folk music in Europe to tango in Argentina, zydeco in Louisiana, and even classical compositions.
-
The accordion has been used in church settings worldwide, especially in regions where traditional pipe organs were unavailable or impractical. Its portability and ability to mimic the sound of an organ made it a popular choice for accompanying hymns in rural or missionary churches, particularly in Europe, South America, and parts of Africa. Today, it continues to be used in some congregations for folk-inspired worship or outdoor services.
Section color theme: Light 1
In Squarespace, section color themes allow you to customize the visual appearance of individual sections on a page by applying pre-set color palettes. These themes include options like Lightest 1 and 2, Light 1 and 2, Bright 1 and 2, Dark 1 and 2, and Darkest 1 and 2, offering a range from minimal and airy to bold and dramatic.
Section color theme: Lightest 2
Each theme affects background colors, text, buttons, and other elements within the section, ensuring consistent design across the site while allowing for visual variety. Color themes are particularly useful for creating contrast between sections, guiding user focus, and enhancing readability or engagement. They can be adjusted globally in your site’s design settings or individually for specific sections to align with your brand’s aesthetic.
Automatic formatting of headers
For example, all headers in this color theme are different than the the “lightest 1” color theme.
Header 3
Smallest paragraph 3 text.
Image shapes allow you to add a unique flair to images by applying custom cropping styles or masks. Squarespace offers options like circles, rounded corners, or angular cuts that can be applied directly to images through design settings or specific blocks. These shapes help maintain a modern and cohesive look, making images stand out or blend seamlessly with other design elements. Together, section dividers and image shapes provide creative ways to add personality and structure to your site.
Section color theme: Light 2
In Squarespace, section dividers (below) are design elements that visually separate sections on a page, adding style and enhancing the flow of your content. Dividers can be simple (like straight lines) or dynamic (such as waves, angles, or curves) and can be customized in terms of style, size, and orientation to complement your site's aesthetic. They help create transitions between sections, breaking up long pages and drawing attention to key areas. Dividers are added in the section settings and can be styled with colors that match your site’s color themes for consistency.
In Squarespace, sections can be sized to fill the entire screen by enabling the "Stretch" option in the section settings. This adjusts the section’s height to match the screen size, creating a full-screen effect. You can also fine-tune the height using the Section Height slider, selecting options like "Small," "Medium," "Large," or "Full." This is ideal for hero sections, immersive visuals, or impactful call-to-action areas. Ensure the content within the section is optimized for both desktop and mobile views.
— Section Color Theme: Dark 2
Newsletter block in “Darkest 2” section color theme.
The newsletter block in Squarespace makes it easy to keep everyone informed. With a simple signup form, visitors can subscribe to your updates. Connect it to email services like Squarespace Campaigns for seamless communication. Blocks adapt and change colors with section color themes.
Form block example in “Bright 1” section color theme.
The form block in Squarespace allows you to collect information effortlessly. Customize fields for contact forms, event registrations, or surveys, and connect submissions to email, Google Sheets, or other tools.
RSVP
RSVP
Audio block in “Dark 1” section color theme.
The Squarespace audio block allows you to upload audio files directly or link to external audio content, such as podcasts or music hosted elsewhere. Use the block to provide an engaging, customizable player or add a simple hyperlink to external platforms like Spotify or SoundCloud for seamless access. It’s an easy way to share sound with your audience.
Video blocks
“Darkest 1” section color theme
The video block in Squarespace makes it simple to embed videos directly onto your website. Instead of uploading large files, you can link to videos hosted on platforms like YouTube or Vimeo. For your church, this is a great way to share sermons, event highlights, or special messages. Simply paste the URL from your YouTube channel, and the video will display seamlessly on your site, keeping visitors engaged and informed.
Calendar and Event Blocks
The calendar and event blocks in Squarespace are powerful tools for keeping your community informed.
Monthly Calendar View: Display a full calendar that allows visitors to see all upcoming events at a glance, perfect for highlighting worship schedules, community gatherings, and volunteer opportunities.
Upcoming Events Summary: Showcase key events in a concise, scrollable list. Visitors can quickly access details like dates, times, and locations, helping them stay connected to what’s happening.
These blocks make it easy to organize and promote church activities directly on your site.
Give today
⁎
Give today ⁎
Donation block
“Bright 2” Section color theme
The donation block in Squarespace allows you to securely accept contributions directly through your website. It’s a simple and effective way for your church to support its mission and make giving easy for your community.
With the donation block, you can:
Customize Donation Amounts: Offer preset amounts or allow users to choose their own.
Enable Recurring Donations: Supporters can set up repeating gifts on a weekly, monthly, or yearly basis, ensuring consistent contributions.
Add Personalized Messaging: Include thank-you notes or specific causes donors can support.
Integrated payment options ensure a secure and user-friendly experience, helping your church nurture generosity and sustain its ministry.
Adding Commerce to Your Site
Squarespace makes it easy to add commerce functionality, allowing your church to sell items like books, merchandise, or event tickets. With built-in tools, you can create a professional online store, manage inventory, and accept secure payments. It’s a great way to support your mission and engage your community.
Flexible Sections in Squarespace (below)
Squarespace sections allow you to quickly add content like text, images, videos, or forms with pre-designed layouts. You can easily switch between layouts—such as grids, columns, or full-width designs—without manually rearranging elements. This flexibility lets you experiment with different styles and create a professional-looking site in minutes, all while keeping your content organized and visually appealing.
Flexible Sections in Squarespace
-
![]()
Dream it.
-
![]()
Build it.
-
![]()
Grow it.
-
![]()
Sell it.
Various blocks
Social Media Blocks: Link to your Facebook, Instagram, and more with icons, or display live feeds for dynamic updates.
Map Block: Embed an interactive map to showcase your church’s location and make finding you easy.
Divider Block: Add solid, dotted, or dashed lines to separate sections and enhance visual flow.
Chart Block: Display data visually with customizable charts for stats, reports, or trends.
Menu Block: Showcase menus in an organized layout.
