Hampton Website Template Guide

CREATE PAGES?

This page shows you options that you have with this specific template. if you would like to learn how to create pages, click the link below.

CLICK HERE TO LEARN HOW TO CREATE PAGES

 

IMAGES

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. 

All of the images in our demo are 1600x1200. In order for your website to load as fast as possible - save all of your images web ready (see video link above). You want to try to get your images under 500KB each (Note: 500 KB is not going to be possible for all images, but some of our demo images are under 300kb).

IMPORTANT: This is an edge-to-edge website which means that the tops, sides, and bottoms of your images might be trimmed depending on the size of the users browser. Since there are almost infinite browser sizes, the amount of trimming is going to vary. The best strategy is to select images where the main content is in the center of the photo.

Take a look at the image below. The viewing window could be a browser window for a laptop. Notice that the top, sides & bottom of the image could be trimmed to fit the browser. The content in the center of the image will read really well on the majority of browsers. Keep this in mind when selecting your images. 

 

PORTRAIT IMAGES

Our recommendation for portrait image. This template looks better if a image is taking up most or the space. Therefore, we recommend putting 2 images side-by-side in Photoshop like the image below (see the video link at the top of this section to learn how to do this).

Option 2: 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. However, this template will no longer become edge to edge. 

>>Go to the "Setup" tab, the "Settings" tab and mark "Turn Image Letterboxing on" to "True"

 

ALBUM PAGE: Our demo images are cropped to 1600x1200 pixels. 

 

INFO PAGE: Our demo has images that are 1600x1200. Please note: if the image is on the side, make sure the main content is in the center of the image. See example below. 

 

INFOLIST PAGE: Our demo has images that are 1600x1200. 

GALLERY LIST PAGE: Our demo has images that are 1600x1200.  

SPLASH PAGE: Our demo has images that are 1600x1200. 

CONTACT PAGE: Our demo has images that are 1600x1200 (with a Google embed code map). 

 

 

DESIGN >> SETTINGS / LOGO / BODY / BACKGROUNDS TABS

The video below shares the options in this tab.  

 

 

DESIGN>> FONTS TAB

The following explains how to upload fonts into your template. 

  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"
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk