Your Quick Guide to Understanding Squarespace.

 Each page is built using “Page Sections”

When you add a new page to your website, it’ll start with at least one pre-built section or blank page section. Each “Page Section” is stacked vertically on top of one another. You can add, delete, and move sections to arrange your content to your liking for endless possibilities.

Click here to Learn more

• Each “Page Section” has its own styling panel that controls section formatting, background image, and color theme

• You can duplicate, save and move sections fluidly within a page build.

Website Color Theme

• You can select up to 5 colors to create your website color palette.

• With this color pallet, Squarespace generates 10 color themes.

• Each of these color themes has its own styling for unlimited possibilities.

Website Fonts

• For Fonts, there are 4 Header font styles, 3 Body font styles, and 1 mono font style to select from.

• You can easily bold, italicize, underline, and color block text sections from the text styler.

URL Slugs

URL Slugs are the built-in URLs for each page.

• Keep URLs short, basic and easily memorable for visitors.

  • example: /home, /about, /shop, /blog, /portfolio, /services, /contact

• URL slugs are all lowercase.

• URL slugs can't include special characters other than dashes (-).

• To edit this URL, follow these steps:

  • Open the Pages panel.

  • Hover over the page and click the ⚙️ “gear icon“ to open page settings.

  • Update the URL in the URL slug field.

  • Click Save.

External links

Make sure all external links OPEN IN A NEW WINDOW -

• Click here to learn more

  • Click  ⚙️ “gear Icon“ in the URL field.

  • Click Web Address in the link editor.

  • Enter a site URL under Link.

  • Switch the Open in New Window toggle on to have the link open in a new tab.

  • Click Save, then click Apply or Save.

Website Buttons

There are 3 types of buttons variations - Primary, Secondary, and Tertiary

• You can style each button to be a different shape, color, size, and font from one another.

List Sections (Auto Layout Sections)

You can’t add blocks of content to a list section. List sections are an “automatic” collection of list items with predetermined layout parameters in the styling panel.

Click here to learn more

• ⓘ on the top right-hand corner of the section preview symbolizes the automatic formatting of these sections.

• List items can be displayed in one of three ways: simple list, banner slideshow, or carousel.

  • Simple list: Grid layout

    • Info display: Displays items and their elements in a row from left to right. Depending on your settings and the number of items, the layout may create more rows below the first.

    • List images can be cropped to a specific size and shape. All of the list images will have the same crop ratio, regardless of the size of the imported image.

  • Banner Slideshow: Full span image with info block

    • Info display: Displays one item at a time with elements overlaying the image, which acts as a background for the section. Visitors click the controls to scroll through the items.

    • Banner slideshow images are full span (edge to edge) of the screen size

  • Carousel:

    • Info display: Displays items and their elements in a row from left to right in a rotating carousel. Visitors click controls to scroll through more items.

    • Carousel images can be cropped to a specific size and shape. All of the carousel images will have the same crop ratio, regardless of the size of the imported image.

• Text in list sections: After selecting your list section layout, scroll down in the Design tab and click Style to choose a font size. You can select from preset sizes that change the title and the description all together, or click ... to set custom sizes for item titles and descriptions separately. Depending on your layout and its current settings, other options may appear.

Website Images

Images can be batched and uploaded to your Asset Library.

HIGHLY RECOMMENDED

• Re-title all photos prior to uploading.

• Use the Asset Library folders to manage files

Image Block - Learn more

• Fluid Engine: stand-alone no style variation

• Classic Editor: six design variations - inline, poster, card, overlap, collage, and stack

Gallery Block - Learn more

• Gallery blocks are used to add gallery images INSIDE a section. The gallery block can combine various block elements together within a section.

• There are four options for displaying the images in a gallery block: slideshow, carousel, grid, and stacked

Gallery Section - Learn More

• You can’t add blocks of content to a Gallery section. Gallery sections are limited to only displaying images.

• There are six options for displaying the images in a gallery: Grid: Simple, Grid: Strips, Grid: Masonry, Slideshow: Simple, Slideshow: Full, and Slideshow: Reel