Designing Your Site

Responsive Templates: A Getting Started Guide

1. Add Your Content

Whether you're new to PhotoShelter or already have your full image library archived with us, it's important to note that you’ll need a few public galleries to work with in order to really get a feel for what your new site will look like. The galleries you upload may be represented differently depending on the template you are using, but in all cases we will display your most recently updated work within your portfolio by default. You can always change this by selecting specific galleries to showcase using the Site Builder, our tool for live-editing your site.

NOTE: The Site Builder will also allow you to create new galleries and upload images. If you already have your Site Builder engaged, just click the blue edit icon titled "Featured Work" (may be slightly different depending on the template you have chosen), and you're on your way!

 

Element

Element’s left-hand navigation will link directly to the specific galleries/collections you’ve chosen to feature in your portfolio. By default, the homepage will display a large preview image --  a randomly selected cover image chosen from one of your featured portfolio galleries.

 

Downtown

Downtown's homepage will showcase a full-bleed image, either the cover of one of your featured or recently updated portfolio galleries, or a specific image you choose. Here you must feature individual galleries - and not collections - within your portfolio. 

 

Pivot

Pivot offers two options for the placement of your site's navigation. If you choose top placement, your featured portfolio galleries will be nested in a "Portfolio" drop down. If you choose left side placement, each featured gallery will be listed out as its own nav item. Either way, the homepage will showcase images from the first gallery in the list by default - with a vertical scroll. You may only feature individual galleries (and not collections) in your portfolio. 

 

East

East will showcase your most recently updated galleries -- or those you specifically choose to feature in your portfolio -- in the left-hand navigation. The default "overview" category will display thumbnails from all of your portfolio galleries on your homepage, while clicking one of the gallery titles automatically filters the images to show you just that gallery’s content. You may only feature individual galleries (and not collections) in your portfolio. 

 

Horizon

Horizon will nest all of your featured galleries in a "Portfolio" drop down in the navigation bar. By default, the homepage will showcase images from the first gallery in the list - with a horizontal scroll. You may only feature individual galleries (and not collections) in your portfolio. 

 

Shuffle

With Shuffle, it is the categories above the photo wall that represent galleries you’ve created on the back-end. Similar to East, clicking a category automatically filters the images to show you just that gallery’s content. You may only feature individual galleries (and not collections) in your portfolio. 

 

Sonnet

You must explicitly select an image for Sonnet's full-bleed introductory page, but your featured galleries will be listed within the collapsible navigation via the menu button at the top. Sonnet does not currently support collections in the portfolio view.

 

Promenade

Similar to Downtown, Promenade’s homepage will showcase a full-bleed image, either the cover of one of your featured or recently updated portfolio galleries, or a specific image you choose. You must feature individual galleries - and not collections - within your portfolio.

 

Marquee

The tabs on the right-hand side of Marquee’s homepage represent galleries and/or collections you’ve created in your Image Browser -- again, either those you’ve most recently updated, or those you’ve chosen specifically to display here using the Site Builder. The image you see upon hovering over one of these tabs is that gallery or collection’s "cover image," also specified from within the Image Browser. 

 

2. Enter Your Site Builder

Just click Website from the navigation in your account's Admin Area, and there you'll find the ENTER SITE BUILDER button. Upon clicking this button, your site will open up into Edit Mode. On the left side of the page you will find the Site Builder. This tool allows you to see your edits as you make them and save/push live what you like as you go along.

 

Edit Mode

configurator---basic.jpg

  

NOTE: If you are currently using one of our "classic" templates (previous generation), you will need to specifically opt into the new platform to access these designs. To do this, click Website from the navigation in your account’s Admin Area. You’ll see a banner above the classic template options which will allow you to switch over to the new platform.

 

 

 

3. Choose Your Template

The first thing we'd recommend you do is choose the template you feel best suits you and your work by using our Template Picker. You’ll have the chance to live-preview each design, as well as look over a quick breakdown of features, before making your choice. 

With the Site Builder open, you’ll find the “Template” tab at the very top of the panel. Expand that tab and click “Change” to begin your live-previewing experience. 

Note the “Admin Bar” at the very top of your site (see below image). This bar will allow you to toggle in and out of Edit Mode, return to the Admin Area of your account, or simply log out altogether. This will only display to you when you are logged in -- never to your site's visitors.

 

Admin Bar

adminbar.png

 

4. Edit Your Site

The Site Builder will present you with global editing options straight away (e.g., colors and fonts). Look to the blue edit icons you see on the right to begin modifying other individual items. Just click the icon that corresponds to the area you’d like to edit to make changes to that particular element. 

Depending upon the edit icon on which you click, the Site Builder will display a new set of options for that corresponding element.

 

Site Builder options for your site's navigation 

config-nav.jpg

In the above image we are changing or editing navigation items. Here you may reorder, rename, or hide existing items, as well as create an unlimited number of new and totally custom pages, menus, or links.

 

Site Builder options for featuring content on your site's homepage 

featuring-galleries.jpg

In this example using Marquee, we have clicked the edit icon that sits atop the tabs on the right-hand side of the page, which correspond to the galleries/collections created on the back-end. This site was set to feature specific work, but the dropdown provided will also allow a choice of “Recently updated galleries."

 

5.  Edit Additional Pages

To start working with the individual pages of your site, click the links for those pages just as you would if you were outside of Edit Mode. Once you have accessed a page other than your homepage, you’ll find the edit icons that pertain to those specific editing options.

 

Editable options for the About page 

about-page.jpg

 

Completed About page (example using Marquee)

about-page-finished.jpg

Here is that same About page after copy, a background image, and a portrait have been added.

 

6.  Save and See Your Work

As you are editing your site, be sure to save, save, save -- *anytime* you make a change you wish to keep. It will appear as though things are changing as you tinker with the Site Builder, but this is simply part of the live previewing feature. Until you actually click save for that particular element, nothing will be committed to your live site.

 

Still have questions? Contact us.

Comments

Powered by Zendesk