Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Wexley structure and style

This guide walks you through the options for adjusting the look and feel of your site. These options are available in the Style Editor.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Tips: In the Home Menu, click Design, then Style Editor. To access tweaks specific to a page, navigate to the Style Editor when on that specific page.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

Wexley supports these page types with template-specific features:

  • Gallery - Create an adaptive mosaic of images and videos
  • Blog - The list-style Blog Page stacks posts vertically

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Events - Create a calendar or list of events
  • Products (Classic) - Sell goods and services with our integrated Commerce features
  • Cover Page - A unique landing page styled separately from your template
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

Header

The header contains your Main Navigation links, site title, and tag line. Use the Site Title & Logo panel to adjust the site title, add a tag line, or replace the site title with a logo.

Style the header layout with these Style Editor tweaks:

  • The Site Alignment tweak determines whether the site title and tag line displays on the left, right, or center. This tweak also affects the layout of the rest of your site.
  • Use the Header Navigation tweak to determine if the navigation links display next to the site title, below it, or opposite it. Header Navigation is only available when Site Alignment is set to Right or Left.

Style the header elements with these tweaks:

  • Style the site title's font and color with the Site Title tweaks.
  • Style the tag line's font, size and color with the Site Subtitle tweaks.
  • Adjust the logo size with the Logo Image Size (Max) tweak.

Adjust the navigation style with the tweaks in the Navigation section. 

  • Add drop-down menus to the navigation with folders.

Layout

  • Use the Site Alignment tweak to set your site content as left-justified, right-justified, or centered. This affects the site title and tagline, main content area, and footer content.
  • Use the Padding tweaks to adjust the space around your header and page content.
Tip: Gallery Pages and Blog Pages have their own layout options.

Background

The background color for Wexley displays behind the header, main content area, and footer.

Adjust the background color with the Site Background tweak.

Page headers

Wexley supports per-page headers on the following page types:

  • Regular Pages
  • Album
  • Blog
  • Events
  • Gallery
  • Products

The per-page header also displays above any collection items within a collection page, such as blog posts, products, and individual events.

To add content to the header with blocks, hover above the page content until the Header Content annotation appears, then click Edit.

Footer and social icons

Wexley supports a site-wide footer. This means the same content displays on the bottom of every page.

Footer content area

Add content to the footer using blocks. When viewing the page, hover over the footer and click Edit to open the editor. To learn more, visit Editing footers. 

The footer supports one column of blocks and content displays at the same width of the site. Like the header, the footer follows the Site Alignment tweak. For example, if you choose Site Alignment: Right, the footer will be right-justified.

Social icons

Social icons for all your connected accounts display below the footer content area. They always display in the bottom-left corner.

  • Use the Social Icons tweaks in the Footer section of the Style Editor to choose their style, size, and color.
  • Hide them with the Hide Social Icons tweak.

Fonts

Use the tweaks in the Main Content section of the Style Editor to style the text in your main content area and footer.

  • Use the Headings Font and Headings Color tweaks to set font and color for all heading text.
  • You can style the Quote Block font using the Quote Font tweak.

To adjust the size of the fonts:

  • Headings Font adjusts the size for Heading 1 and Heading 2.
  • Body Text Font adjusts the size for Heading 3 and body text.

Use the tweaks in the Site Header and Navigation sections to style the fonts and colors for the header elements. 

Sidebar

Wexley supports a sidebar on Blog Pages.

Mobile

Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device. For general information, visit How will my site appear on a mobile device?

Note: Device View doesn't always accurately show Wexley's mobile Gallery Page. On mobile, gallery images stack vertically.

On a mobile device, a Menu link displays at the top of the page.

  • When you tap the menu link, the navigation links appear above.
  • Use the Mobile Nav Background tweak to give your mobile navigation a unique background color.

The navigation links, title or logo, and tag line are all centered.

Note: You can disable mobile styles in the Advanced panel.

Next step

Set up your portfolio with a Gallery Page.

Was this article helpful?
4 out of 7 found this helpful
Wexley structure and style