Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Ishimoto template

Designed especially for portfolios, Ishimoto is a striking choice for photographers and other artists. With its horizontally scrolling Gallery Page and adjustable layout elements, you can create a distinctive portfolio.

This guide covers the features and design options for the Ishimoto template. Site Styles tweaks are bold, and link to the list of all Ishimoto tweaks to help you navigate the panel.

Tip: Ishimoto's Live Preview page shows real customer sites using this template.

Supported pages

Ishimoto supports these page types:

Header

Visitors use the header at the top to navigate your site. In Ishimoto, the header has the site title or logo, tag line, and Main Navigation links.

Style the header in the Site Header section:

  • Set the position of the branding and tag line with Header Alignment.
  • When the branding is centered, the navigation displays below it. When it's set to left or right, use Header Navigation to choose if the navigation is next to, opposite, or below it.
  • To choose if the header displays at browser width or site width, use Constrain Header Width. This also affects the footer.
  • Site Subtitle tweaks affect the tag line.

ishimoto-header-example.png

Page width

Set the width of your content area with Site Width in General.

  • If you've checked Constrain Header Width in Site Header, this affects the header and footer as well.
  • Galleries always display full-bleed.
  • Align the page content with Page Alignment in General.

Background and border

In the General section:

  • Change the site background color with Site Background. This affects the header and footer as well.
  • Add a border at the top and bottom of your content with Page Border Color and Page Border Width.

ishimoto-background-and-border.png

Footer

The site-wide footer has a customizable content area and built-in social icons.

  • The content area is on the right, and the social icons are on the left.
  • The width matches the header.
  • Style the social icons in Site Footer. To hide them, check Hide Social Icons.

ishimoto-footer.png

Blog Pages

Ishimoto Blog Pages display as a list of vertically-stacked posts.

  • Dates and categories display above the post. The other metadata displays below. Author names don't display.
  • Promoted Image, Gallery, and Video Blocks display above the post title. 
  • Excerpts display Read More links and post thumbnails below the title. If there's a Promoted Block, it displays above the title instead of the thumbnail.
  • Navigation for newer and older posts displays above the comments on posts.

Style Blog Pages in the Blog Style section:

  • Set the metadata color with Blog Meta Data.
  • Change the space between posts with Blog Post Spacing.

ishimoto-blog.png

Sidebar

A sidebar displays on blog landing pages and posts. Customize it with blocks. If you have multiple blogs on your site, the same sidebar displays on all of them.

  • The sidebar scrolls up with the page.
  • It's hidden on mobile.

In the Blog Style section:

  • Place it on the right or left with Blog Sidebar.
  • Hide it with Blog Sidebar: Hidden.
  • Set its size with Sidebar Width.
  • Change the space between the sidebar and the blog with Blog Sidebar Padding.

Gallery Pages

Ishimoto's striking Gallery Page is popular with photographers and other artists. Images and videos display in a full-bleed carousel that scrolls horizontally. To see this in action, visit Ishimoto's demo site.

Style all galleries on your site in Gallery Styles.

  • Set the maximum height with Gallery Height.
  • Set the opacity for non-active images with Gallery Slide Opacity. The Gallery Background color shows through, creating a filter effect.
  • Choose if image titles and descriptions display with Hide Gallery Descriptions. Captions display in the bottom-left corner of active photos. They don't display for videos.

ishimoto-gallery.png

Image navigation

Visitors navigate through the gallery by clicking images (without clickthrough URLs), or using navigation arrows or text. When the gallery reaches the end, it scrolls back to the first image. 

In Gallery Styles:

  • Style the navigation as arrows or text with Gallery Controls. Choose Gallery Controls: None to hide them.
  • Set the gallery to automatically scroll horizontally with Gallery Auto Play

More help with galleries

  • The site border displays flush with the top and bottom of the images.
  • Use clickthrough URLs to turn images into links.
  • Customize deeplink URLs to send visitors directly to any image in a gallery.
  • On browsers 800 pixels or narrower, images are stacked. Image titles and descriptions display below the images.
  • To create a different layout, use a Layout Page with a Gallery Block.

Sidebar

Blog Pages have a sidebar. The sidebar is hidden on mobile.

Fonts

Style the fonts on your site in the Main Content section.

  • Headings Size affects Heading 1 and Heading 2.
  • Text Size affects Heading 3 and body text.

Style all Quote Blocks on your site with the Quote tweaks in Blog Style.

Mobile

With Squarespace's built-in responsive design, your site adjusts to look great on any device.

Navigation collapses to a Menu link in the top-center.

  • The link color is automatically set to black or white based on the site background color.
  • The menu background color matches the site background.
  • Folder links follow the Body Text Color in Main Content. They have a + icon.

Keep these tips in mind:

ishimoto-mobile.png

Was this article helpful?
13 out of 17 found this helpful