Annatto website template setup guide

Table of Contents

Introduction

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

Our Demo Settings

The Design tab
The Setup tab
Demo Images/logo sizes

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
Select a Homepage
Adding Video

Navigation buttons

Main Navigation Buttons
Sub Navigation Buttons

Music

Adding Music

Fonts & Branding

Selecting a Font
Branding Your Site

Other Links

Steps to SEO your website

 

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 used in our demo are listed in the sections below.


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. 

 

 

Our Demo Settings

The Design tab (Advanced Tab)
The design tab allows you to set the sizes and aspect rations for each type of page. The following outlines the settings we have in our demo. 

  • Site minimum: 900 x 500

 

The Setup Tab
The setup tab will allow you to turn on/off different settings such as letter boxing. The following outlines the settings we have in our demo. 

  • Server side re-sampling =True
  • Re-sampling quality 90%
  • Turn image letter boxing off = False
  • Use Image Magick Library = True
  • Automatically Sharpen Resampled Images = True


Demo Image/Logo Sizes
The following are the image sizes and logo sizes that we use in our demo. 

  • Album 1600 x 900 px
  • Info Page 600 x 900 px
  • Info list: Info list page: 1600 x 900
  • Gallery list page: 1600x900  -  (Hint: You can make them as small as 533x300. This number is based on the Album aspect ratio which is set to 1600x900.  Since there are 9 boxes in our 3x3 grid you divide the 1600 by 3 and the 900 by 3 to get a ration of 5.3:3)
  • Main site Logo: 130 x 50 px
  • Splash Page logo size: 300 x 150 px

Need to learn how to crop an image or save it for web?

 


Setup Pages

Setup an Album page (ie: portfolio page) - watch a video
Image Size: Our demo images are sized to 1600x900 

  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

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 "Upload" button
  3. Click "Add files from your computer" , select your images from your computer
  4. Click "Done" once all of the images 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 (Setup tab), select "True".
  5. Click "Save"

 

Setup an Info Page - watch a video

Image Size: Our demo images are sized to 600x900 pixels 

  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. 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: Our demo images are sized to 1600 x 900 pixels 

  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 Sizes: Our demo is set to 1600x900 px  (Hint: below)

  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.

Hint: Under the design tab, you will see that we set our Album page ratio to be a 16:9 ratio.  The Album page helps define the size of the body of the site.  Our demo's images for Gallery list page are sized to 1600x900 px. You can make them as small as 533x300.  This is a ratio based on the ratio of the Album page 16:9 divided by the 3x3 grid = 5.3:3.  If this is too much math for you, don’t worry about it.  Our demo sizes work really well.

 

Setup a Contact Form  - watch a video

  1. Click "Contact"
  2. Click the "Settings" tab
  3. Add a title for this page (i.e.: contact us)
  4. Description: Write something about contacting you like hours of operation, address, phone number, etc.
  5. Your Website URL (http://...): In the first field, you can add your website address. In the second field, add how the link should read.
  6. Your Email: In the first field, add your email address. In the second field is what they will see when receiving an email from this system (i.e.: from your name or company name).
  7. 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.
  8. Click "Save"

Form Fields Tab

  • The form fields tab will allow you to edit what the fields of the contact form say. 

Advanced Tab

  • The advanced tab will provide you with the ability to change some of the responses like when a message fails to send. 
  • The "Email Message Body" is an advanced feature.  It structures how the information collected is displayed in your email.  

 

 

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: ie: enter my weddings site, enter my portrait site, etc.  Some splash pages come with images, some are just links. 

  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. Enter an SEO blurb.  The is a description for search engines about what the site is. 
  5. 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 "Link 1" tab
  2. Enter a title for the link (ie: enter site)
  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.

Hint: To remove the Splash page, you must delete all of the content. To do this, click the "Splash" tab and click "Revert to Default". This will delete everything in that section. Please make sure you read the "Select a Homepage" section below.

 

Select a Homepage - watch a video
Any page you create can be your homepage. If you have a Splash Page setup, it will be the first page you see. If you do not have a Splash page, you can select which page will be the first that your clients see by doing the following:

  1. Click "Content"
  2. Click on the page you want tpo set as your homepage
  3. Click "Edit"
  4. Click "Set as Homepage"
  5. Click "Save Changes"

Hint: You will now see a green dot next to the page that was selected as your homepage. 

 

Adding Video - watch a video
To add video to a Album or Info page, please do the following:

  1. Click on "Content"
  2. Click on the page
  3. Under the "Image" tab, click the "Upload" button
  4. Paste the Youtube URL in the sideload field
  5. Click "Sideload"
  6. Once you get the green check, Click Done
  7. Find your video in the list and click the icon in the bottom right corner of the image
  8. Click on the blue timeline to select a frame to use as the screenshot
  9. Click "Save Screenshot of current frame" below the timeline
  10. once it reaches 100%, click "Close"

 

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"

 

Music

Set up your music - watch a video
You can upload MP3 files to play on your website.  Please be aware, that you can also upload specific MP3 files for Album pages when you set up that page.  In addition, under the "Setup tab" you can set the music to mute on the splash page.  

Track Listing Panel

  1. Click "Soundtrack"
  2. At the bottom of that panel, click the "Upload" button
  3. Click "Add files from your computer" , select your images from your computer
  4. 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. )

Setting Panel

  1. Enable: Select "True".  This will allow your songs to be played.
  2. Volume: You can increase the number to increase the volume. (Hint: 50 is a good number)
  3. Loop: Decide if you want the song list to loop when done playing.  If so, select "True"
  4. Click "Save"


Fonts & Branding 

Selecting a font  
This template has a Flash layer. Therefore, we have provided a fonts that can be used in the backend dropdown. 

  1. Click on the "Design" tab
  2. Click the "Fonts' tab
  3. Under "Font Style" select your font from the dropdown list
  4. Click "Save"

 

Branding your 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

Have more questions? Submit a request

Comments

  • B2753883779a58f0496f953468546920?default=https%3a%2f%2fassets.zendesk.com%2fimages%2fframe_user
    Tim

    Very helpful in helping me get up and running. Thanks!

Please sign in to leave a comment.