OLD WEBSITE TEMPLATE SUPPORT PAGE

Table of Contents

Introduction

Backend/Admin
Quickstart Video Library Link
Prepare your images
Temporary Mode

Setup pages

Setup an Album page
Setup info page
Setup Infolist page
Setup a gallery List page
Setup Contact Form & Mailing list
Setup Splash Page
Setup Homepage
Setup a Video Page

Navigation buttons

Main Navigation Buttons
Sub Navigation Buttons

Fonts & Branding

Adding Fonts
Branding Your Site

Other Links

Steps to SEO your website
Settings, Watermarks & Social Networking

 

Introduction

Backend/Admin
For those of you that are SELF HOSTED, you can find the login page to your product at www.yoursite.com/?admin

(HINT: If you installed the website in a sub directory ie: “/sites”, then you will go to www.yoursite.com/site/?admin ) (If you are having issues, please refer to the email sent to you after installation. It will tell you where to login to your admin and where your site lives.)

 

Quick Start Video Library  -  Video library
Want to be up and running really fast? Follow these videos step by step and have your website up in the shortest amount of time.


Prepare your Images Watch Video Tutorial
All of your images should be cropped, optimized, and saved for the web before you upload them. This will help your product load images as fast as possible. Click the "Watch Video Tutorial" button to learn more about this. The image sizes are listed with each page in the setup section below. All  of the images in our demo are the same width as the body (currently 900 wide).

The Body/Site Width: The body of this website is box that contains all of the content (sits on top of the background). 
>>Go to the "Design" tab, the "Body" tab, find the "Body/Site Width"

Portrait images: If you have portrait images, you are going to want to turn on Letter boxing. This will fit the portrait images into the center of the album (see example page
>>Go to the "Setup" tab, the "Settings" tab and mark "Turn Image Letterboxing on" to "True"


Temporary Mode (Self hosted)
For our Self Hosted clients: if you want to install your website in a temporary folder on your server (Temporary Mode), it will allow you to work on the website before you make it live. 

 

Setup Pages

Setup an Album page (ie: portfolio page) -  watch a video
Image Sizes: Our demo is set to 9:6. Our horizontal images are cropped to 900x600 pixels and our vertical image are 600 pixels tall with Letterboxing turned on (see example page). Remember you have the option to set  the "Album Aspect Ratio" in your admin under the " Design " tab >>Settings>>Album aspect ratio.

  1. Crop all of your images and save them as webready JPGS.
  2. Click "Content"
  3. Click the "New" button
  4. Title the page (ie: portfolio or weddings or portraits or babies or work)
  5. Select "Album"
  6. Click "Create Page"

Now you will see the page in the list of the "All Pages" panel on the left. 

  1. Click on the page you just created
  2. On the right panel find the "Image List" tab
  3. At the bottom of that panel, click the "Upload" button
  4. Click "Add files from your computer" , select your images from your computer
  5. Click "Done" once all of the images have loaded

(You must wait for all of the images to finish loading before you close the window. Once you click "Done" your files will appear in the panel. )

Adding Mp3's

  1. Click on the "Tracks" tab if you want to add music to this specific album page.  
  2. At the bottom of that panel, click the "Add Media" button
  3. Click "Add files from your computer" , select your MP3's from your computer (HINT: Or you can add files that are alredy in your library)
  4. Click "Done" once all of the MP3s have loaded
  5. Click "Save"

Additional options

  1. Click on the "Settings" tab
  2. Show Image captions: Select "True" if you are going to add captions to each image.  You can do this by clicking on the image in the "Image List" tab and clicking "Edit" at the bottom. 
  3. Select "true" if you want to "Auto Start" the slideshow.  the will cause the slideshow to play automatically. 
  4. If you want to upload a watermark (in a later step), select "True".
  5. Click "Save"

 

Setup an Info Page -  watch a video
Image Size: Set the images to the same width as the body (any height you want). Our demo is set to 900 wide. Example (image on left) or (image on top).

  1. Crop your images and write your bio.  Remember the image sizes are all set to be the same 
  2. Click Content
  3. Click the "New" button
  4. Title the page (ie: about me)
  5. Select "Info Page"
  6. Click "Create Page"

Now you will see the page in the list of the "All Pages" panel on the left.

  1. Click on the page you just created
  2. On the right panel find the "Image List" tab
  3. At the bottom of that panel, click the "Upload" button
  4. Click "Add files from your computer" , select your images from your computer
  5. Click "Done" once all of the images have loaded. (You must wait for all of the images to finish loading before you close the window. Once you click "Done" your files will appear in the Image List panel. )

Now add a Description :

  1. Click on the "Settings" tab
  2. Type your bio in the "Description" section
  3. Image placement allows you to have your image show at the Top, Bottom, Left or Right of the page. 
  4. Select "False" if you do not want the watermark to appear on this page.  (you can set this up in a different step)
  5. Click "Save"
 

Setup an InfoList page (ie: FAQ,) -  watch a video
An InfoList page has a series of items that link together. For example, on an FAQ page, the questions link to the answers.  This page has many uses from frequently asked questions, to package descriptions. 

Image Size: Set the images to the same width as the body (any height you want). Our demo is set to 900 wide.  (see example of sizes)

  1. Crop all of your images and save them as webready JPGS.
  2. Click Content
  3. Click the "New" button
  4. Title the page (ie: FAQ or Frequently Asked Questions)
  5. Select "InfoList"
  6. Click "Create Page"

Now you will see the page in the list of the "All Pages" panel on the left.

  1. Click the "Entries" Tab
  2. Click "New" at the bottom of the panel
  3. Under "Page Title" enter the first question. (ie: what should I wear to a shoot?)
  4. Upload an image under "Assigned Image" that corresponds to that question (optional).
  5. In the "Description", enter the answer to the question
  6. Click "Save"

Repeat all of these steps to add more entries to this page. 

 

Setup a GalleryList page (ie: the page that looks like a grid of images) -  watch a video
This page is a grid of images.  Each image has a title and the ability to link to other pages or external URLs.  If you have 9 portfolio type pages, this is a great gateway page to use page to use. 

Image Size: Set the images to the same width as the body (any height you want). Our demo is set to 900 wide.   (see example of image sizes)

  1. Make sure to have all of your images sized and ready.
  2. Click Content
  3. Click the "New" button
  4. Title the page (ie: FAQ or Frequently Asked Questions) Hint: you can change it later. 
  5. Select "Gallery List"
  6. Click "Create Page"

Now you will see the page in the list of the "All Pages" panel on the left

  1. Click the "Entries" Tab
  2. Click "New" at the bottom of the panel
  3. Under "Page Title" enter the first title (this will be the top left box)
  4. Upload an image under "Assigned Image" that corresponds to that box 
  5. Determin if and where this image is going to link to: Click "Link to a Page you created" if you have already made that page or Type the URL for an external link in the field right below it. 
  6. Select "Open in the Same Window" if it is an internal page.  Select " Open in a New Window" if you are linking to an external page.  this will spawn a new browser window so that your site doesn't go away. 
  7. Click "Save"

Repeat all of these steps to add more entries to this page.

  1.  Click the "Settings" tab to set up your grid.
  2.  Grid Columns-   Here you can select the amount of columns you would like for your Gallery List page to have.
  3. Heading - here you can give your page a tile ( ie Weddings, Engagement, Families  )
  4. Description will allow you to write a short description of the gallery and can be used for SEO purposes.

 

Setup a Contact Form & Mailing Listwatch a video

  1. Click "Contact"
  2. Click the "Settings" tab
  3. Add a title for this page (ie: contact us)
  4. Description: Write something about contacting you like hours of operation, address, phone number, etc.
  5. Contact Form Recipients- be sure to put in the email address that you would like the contact forms to go to.
  6. Mailing List Provider - if you have a mailing list provider currently we support Mail Chimp, Mad MiMi and Campaign Monitor
  7. mailing List Account Api- this is something that you will get from your provider ie MadMimi
  8. Server Email: You can leave this blank unless you have a Yahoo email address. If you have a Yahoo email, they will give you an additional Server email address to put in the first field.
  9. Click "Save"

This is the quickest way to get your contact page up and running. For a more in depth look  at the contact form and mailing list please see this video here

 

Setup a Splash Page  -  watch a video
A splash page is a gateway page that links to different web entities.  It can link to your website, your blog, and other sites that you may have.  Many photographers link to different websites: ir: enter my weddings site, enter my portrait site, etc.  Some splash pages come with images, some are just links. 

Image Size: Set the images to the same width as the body (any height you want). Our demo is set to 900 wide. 

  1. Click "Splash"
  2. Click on the "Settings" tab
  3. Add a "Title" for the site. When people save your site as a favorite or bookmark... this is the name that will show in that list
  4. Show image captions: Select "True" if you want captions to show on the images.  (if available)
  5. Enter an SEO blurb.  The is a description for search engines about what the site is. 
  6. Click "Save"

Now you can add links on your splash page.  Not every template is going to be set up the same.  Some have images some are just text. 

  1. Click on the "Photo 1" tab
  2. Upload an image
  3. Enter a title for the link (ie: enter site)
  4. Choose the destination of the button: Either click "link to the page you create" and link to one of the pages that you created OR type the URL in the "Enter URL" field if you want it to link to an external site like your blog. Please make sure you enter in the whole address http://www.domain.com
  5. Choose Where this link opens:  Select same window if it is linking to an internal page.  Select a new window if you are linking to an external URL.
  6. Click "Save"
  7. Repeat these steps for the additional tabs if necessary.

 

Setup a Homepage  - watch a video
Image Size: Set the images to the same width as the body (any height you want). Our demo is set to 900 wide. (see example of image sizes)

  1. 1. Click on Content Tab
  2. 2. Click " New"
  3. 3. Give your new page a title ie Homepage
  4. 4. Select the " Homepage "  option
  5. 5. Click Save

You will now see the homepage under you All Pages to the left. Next you will be adding content to your Homepage

Image List

These are images that will be appearing in your header area of the Homepage

  1. Click on Homepage in the left All Pages column
  2. Select Image List and click " Add Files From Your Computer "
  3. Once all the images are uploaded click Done.

Entries

  1. Click new and give your page a title ie About, Contact Us
  2. Assigned Image - click upload new and select one of your pre-cropped web ready images
  3. Choose the destination of the button: Either click "link to the page you create" and link to one of the pages that you created OR type the URL in the "Enter URL" field if you want it to link to an external site like your blog. Please make sure you enter in the whole address http://www.domain.com
  4. Choose Where this link opens:  Select same window if it is linking to an internal page.  Select a new window if you are linking to an external URL.
  5. Click "Save"
  6. Repeat these steps for the additional tabs if necessary.

Settings

  1.  Click the "Settings" tab to set up your grid.
  2.  Grid Columns-   Here you can select the amount of columns you would like for your Gallery List page to have.
  3. Use Watermark- You can upload a water mark logo under the design tab, this can be used on all of your images throughout the site.
  4. Show Image Captions - this will allow you to show the names of the photos in your site.
  5. Auto Start Slideshow will start the slideshow once the page is pulled up.
  6. Slideshow timer allows you to select the amount of sections between each photo.
  7. Description here is where you can put content about the site for the homepage. This is also good for SEO

Tracks

This tab allows you to upload MP3's to your site

  1. At the bottom of that panel, click the "Upload" button
  2. Click "Add files from your computer"
  3. Select your files from your computer
  4. Click "Done" once all of the images have loaded.

 

Setup a Video Page -  watch a video

For the video page you have 2 options

  1. Use an embed code from Youtube, Vimeo or any iframe object embed code
  2. Host your own videos ( Advanced ) 

To embed a video: Youtube & Vimeo

  1. Pull up the video in your browser
  2. Click on the share button at the bottom of your video
  3.  Select the embed option and copy code
  4.  go over to your video page and paste the code into the embed code section

Self Host your own video?
The minimum requirement is mp4 but to cover all of your basis on all browsers please watch our video how to page here

 

Navigation Buttons

Main Navigation Buttons - watch a video
Most of your navigation buttons will link to an internal page that you create for your website (ie: about, portfolio, etc). It is important to make your pages before make the buttons. 

  1. Click on the "Sitemap" tab
  2. Click "New" on the bottom left
  3. Title the button (ie about, portfolio, etc)
  4. Click "Link to a page you created" to link to an internal page, or type the URL in the "Enter URL" field to link externally (ie: blog), or leave blank if you will have sub navigation under this button.
  5. Choose where the link opens: select "Same Window" if it is an internal page or "New Window" if it is an external page (ie: your blog)
  6. Click "Save"

 

Sub Navigation Buttons - watch a video
Sub navigation buttons appear under the main navigation buttons. For example, you might have a main button called "Portfolio" with sub buttons called "Weddings", "Portraits", etc. 

  1. Click on the main button that you wish to add sub navigation button under
  2. Click "New" on the bottom right panel
  3. Title the button (ie about, portfolio, etc)
  4. Click "Link to a page you created" to link to an internal page, or type the URL in the "Enter URL" field to link externally (ie: blog)
  5. Choose where the link opens: select "Same Window" if it is an internal page or "New Window" if it is an external page (ie: your blog)
  6. Click "Save"

 

Fonts & Branding

 

Adding a font 

  1. Go to http://www.fontsquirrel.com/
  2. find your font, click on it so it takes you to that font's page
  3. Click the "Download OTF or TTF" button
  4. Unzip the file
  5. Go back to Font Squirrel and click the "Web Generator" button
  6. Click the "Add Fonts" button and uplaod the font file (that you just unzipped)
  7. Check the Agreement box
  8. Click the "Downlaod your kit" button (this is the zip file that you will upload to your product)

HINT: if you are using Safari, the zip might automatically unpack once downloaded. This will not work. To change this setting
In Safari go to Preferences > General, and uncheck "Open SAFE files after downloading".

  1. If you are logged into the backend of your product,
  2. Click on the "Design tab"
  3. Click on the "Fonts" tab
  4. Click "Upload" (make sure you read below to understand how to prepare your font)
  5. Click "Save"

 

Branding your HTML5 Sarin website
This video steps you through the Design tab and shares all of the branding options available to you. Some of these options include Colors, logo, body size, Fonts, etc.

 

Other Helpful Links

 

Steps to SEO your website

Settings, Watermarks & Social Networking

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk