The style and features of the 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 and the section they appear under in the Site Styles panel are bold.

Supported pages

Ishimoto supports these page types:

• Album Pages
• Blog Pages - List
• Cover Pages
• Events Pages
• Gallery Pages - Carousel
• Layout Pages
• Store Pages - Classic

Header

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

Style the header with these Site Header tweaks:

• Set the position of the branding and tagline 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 tagline.

Page width

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

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

Background and border

In the General section of site styles:

• 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.

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 with the Site Footer tweaks. To hide them, check Hide Social Icons.

Blog Pages

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

On the landing page:

• Dates and categories display above each post; other metadata displays below. Author names don't display.
• Promoted Image, Gallery, and Video Blocks always display above the post title.
• Post featured images display below the title for posts that have excerpts, but don't contain a Promoted Block.
• Excerpts have "Read More" links.
• The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

• Dates and categories display above the post; other metadata displays below. Author names don't display.
• Promoted Image, Gallery, and Video Blocks always display above the post title.
• Navigation for newer and older posts displays above the comments on posts.

Style Blog Pages with these Blog Style tweaks:

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

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 of site styles:

• 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 with these Gallery Styles tweaks:

• 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.

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 the Gallery Styles section of site 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 with these Main Content tweaks:

• 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 under 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.
• Dropdown links follow the Body text color tweak under Main Content. They have a + icon.

Keep in mind:

• Back To Top link displays above the footer.
• Gallery Page images stack.
• The blog sidebar is hidden on mobile.
• You can disable mobile styles, but we don't recommend it.

Troubleshooting Ishimoto

Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1. You can move your version 7.0 site to version 7.1 using our update tool.

Change the color filter on gallery images

In Ishimoto gallery pages, you can create the effect of a color filter on non-active images. This helps the active image stand out.

To set the color:

1. In the Home menu, click Website, click Design, then Site styles.
2. Scroll down to Gallery styles.
3. Set the transparency of the non-active images with Gallery slide opacity.
4. Change the color that shows through with Gallery background.
5. If Gallery background color is partially transparent, the site background also shows through. Change this with Site background in the General section.

Gallery page is stacked

Ishimoto's responsive design stacks gallery page images on mobile devices or browsers that are 800 pixels or narrower. This makes the images more visible in smaller browsers.

Navigation is lower on some pages

In Ishimoto, content centers vertically on the page. Pages without much content have more padding at the top and bottom than longer pages.

To make navigation appear at the same height across all pages, there are a few options:

• Add spacer blocks to the bottom of layout pages to make them all the same length.
• Experiment with increasing the height of the content on each page. For example, if the navigation on your gallery page is lower than your other pages, increase the height of your gallery using the Gallery height (max) tweak in the Gallery styles section of site styles. This moves the navigation higher on those pages.

Slideshow gallery doesn't scroll when clicked

All the images in the Ishimoto gallery must load before you can move between images. If the gallery has many very large images, it may take longer before you can advance through the gallery. We recommend a maximum width of 2500 pixels per image.

Sometimes it's unclear if the gallery has scrolled as you navigate through. In general, the active image within the gallery center-aligns. However, this isn't the case for images at the beginning and end of the gallery slideshow, and may be less apparent depending on your image width and orientation. To make it clear which image is active, you can:

• Add titles or captions to your images
• Change the Gallery slide opacity in the Gallery styles section of site styles.