Mattigan Website template Guide


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.





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 below are the sizes use in our demo. 

ALBUM PAGE: Our demo is set to 16:9. Our horizontal images are cropped to 1600x900 pixels and our vertical image are 900 pixels tall with Letterboxing turned on

Remember you have the option to set  the "Album Aspect Ratio" in your admin under the " Design " tab >>Settings>>Album aspect ratio.


INFO PAGE: Our demo has an album aspect ratio of 1600 wide. The images on the side of the page are 800 wide (to leave room for the text). 

INFO LIST: Our demo has images that are 900 wide. You can make them any height.  

GALLERY LIST PAGE: Our demo images are 1600x900. However, you can make the images any height if you would like them to be taller. 

SPLASH PAGE: Our demo images are 1600x900. However, you can make the images any height if you would like them to be taller. 

CONTACT PAGE: This page does not have an image area. 





Click on the "Settings" tab under the "Design" section and you will find the following options. Please note: each color option will change multiple items. This is to make sure that all color changes are consistent throughout the site. The items listed below are the major items. 

  1. Button/link/Interface text color: Sub navigation text color. 
  2. Button/link/Interface Foreground color: The background color of the sub navigation button and the social icons. 
  3. Button/Link/Interface Highlight Color: The rollover color of text buttons on the Splash page and the Gallery List pages. 
  4. Image Background Color: Changes the color behind the images.
  5. Image Overlay Color: This is the transparent color that overlays the images on Album pages, the Splash page, and Gallery list pages. 
  6. Image Overlay Foreground Color: The text over the images on the Splash page, Album pages, and Gallery list pages. 
  7. Image Caption Background Color: This is the color behind the text on the caption.
  8. Image caption foreground Color: this is the caption text color.
  9. Image Caption opacity: This changes the opacity percentage of the caption background.
  10. Album Arrow colors: Next/previous arrows on the album pages
  11. Contact Form Background Color: The background color of the fields on the contact form. 
  12. Contact Form Stroke valid Color: The color of the line around the contact form fields. 
  13. Contact Form Background Invalid Color: The background color of the fields on the contact form if the field was not filled out properly.
  14. Contact Form Stroke Invalid Color: The color of the line around the contact form fields if the form was not filled out properly. 
  15. Contact Form Text Color: The color of the text typed in the form field. 
  16. Show Navigation Lines: These are the lines on the top and bottom of the main navigation buttons. 

Add your logo under the "Logo" tab.

  1. Logo font: you can upload a font for the navigation. (see FONT section above) 
  2. Logo Font Fallback: These are simple fonts to choose from just in case you do not upload a font. 
  3. Site logo: You can upload a logo graphic instead of using the text. 
  4. Logo Image is Retina: Mark this as True if you upload an image double the size for retina display. 
  5. Logo text: if you do not use an image, you can just type in your studio name.
  6. Logo text Color: this will change the color of the text if you type in your name. 
  7. Logo text Size: this changes the size of the text logo.
  8. Site logo Link: You can either "link to a page that you created" or "Enter the URL". then you can determine if it opens in the same browser window or a new browser window.
  9. Logo Position: Change the position of the logo to Left, Center, or Right.
  10. Logo Spacing: This determines the space between the logo and the navigation. 

Change your background under the "background" tab.

  1. Background gradient Top Color: Change the top color of the background. HINT: if you want an all white background, select white for the top and bottom gradient colors. 
  2. Background bottom Color: Change the bottom color of the background. 
  3. Background Image: Upload an image to the background. 
  4. Background tile mode: Choose if you want the image to Fill frame or Tile. 




The following explains how to upload fonts into your template. 

  1. Go to
  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


Article is closed for comments.
Powered by Zendesk