Custom style examples

Once you've created a custom style, you can use the options in the Appearance Editor to edit the fonts, layout, colors, padding, and more.

This guide shows examples of different style changes you can make.

Before you begin

  • For a general overview, visit Creating a custom style.
  • It's important to save your changes after every change. Otherwise, the change you made will revert to the previous setting.
  • Custom style changes affect every page on your site. For page-specific changes, create a style override.

Add a banner image 

Banner images display above your site navigation, adding a visual element that can set the tone for your site. They're also a good way to add your logo image to your site. 

Before you begin, keep these tips in mind:

  • Images must be .jpg, .png, or .gif format only, and the filename can't contain special characters. For more help, visit formatting images for the web.
  • Adding a banner image replaces any header text.
  • Unlike our current platform, Squarespace 7, there isn't a way to add a text overlay to your banner. Instead, use third-party software to add text to the image file itself.
  • Ensure the image you'll be using is the size and shape you want it to display on your site. For banner images, it's usually best to have a wide, short, landscape-oriented image.
  • The banner will display on all pages of your site. To add a page-specific banner, add a style override.

To add a banner image:

  1. Enter Style Mode.
  2. Click Banner & Navigation. (If you haven't already, you'll be prompted to create a custom style.)
  3. Add an image URL in the URL field, or click File to use an image from file storage or upload one from your computer. The pixel size listed below the URL field is the recommended width for your image.
  4. Click Save Changes in the bottom-left corner. 

banner-image.png

You can see what this process looks like in this video:

Set the site width

To set the width of your main content area:

  1. Enter Style Mode.
  2. Click Banner & Navigation. (If you haven't already, you'll be prompted to create a custom style.)
  3. Click Change Widths.
  4. Use the slider or Current Value field to set the width for Content Width.
  5. Click Save Changes.

save-changes.png

Create a minimalist style

A minimalist design creates a calm and open layout, and helps to emphasize your content. Minimalist web design usually involves blank areas (“white space” or “negative space”), limited fonts and colors, and well-curated content. The following tutorial has tips for creating a minimalist design on Squarespace 5.

Style your site's icons

You can style the default icons that display on your site, such as the share and comment icons that can display with your blog posts

To style all the icons on your site: 

  1. Enter Style Mode.
  2. Click Settings. (If you haven't already, you'll be prompted to create a custom style.)
  3. In the Icon Set section, use the Style drop-down menu to choose a style.
  4. Use the Opacity slider to set how transparent or opaque the icons appear. 0 is completely transparent, and 1 is completely opaque. 
  5. Click Save Changes

style-icons.png

Change your fonts

  1. Enter Style Mode.
  2. Click Fonts, Colors & Sizes. (If you haven't already, you'll be prompted to create a custom style.)
  3. Click an element on your site, or select one from the drop-down menu. For example, you could click your blog post title, or choose Journal > Post Title from the drop-down menu.
  4. Use the options to style your text. For example, click Font, then choose a new font.

For more help, visit Changing fonts.

change-fonts.png

Add a background image

To add a background image:

  1. Enter Style Mode.
  2. Click Fonts, Colors & Sizes. (If you haven't already, you'll be prompted to create a custom style.)
  3. Click the background area in the site preview.
  4. Click Background Image.
  5. Add an image URL, or click Select to choose an image from your file storage or computer.
  6. Click Save, then click Save Changes.

For more help, visit Adding a background image or color.

Was this article helpful?
0 out of 2 found this helpful