About

Features

This one page portfolio template was built for graphic designers, photographers, illustrators, artists and other creative freelance pros who want a simple, elegant and effective way to showcase projects and promote services.

The first things the visitor sees are your name and your work. The gallery is filterable, paginated and lightbox-enabled (with descriptions) so you can create a truly robust portfolio site. Clicking the menu zips the user down to information about you, your services, testimonials and contact details. The contact section has social media icons, an optional map and PHP-powered form. Light and dark styles are included to suit your taste.

  • Full-featured portfolio
    • Category filters with Quicksand transitions
    • Items can belong to multiple categories
    • Pagination (no running out of space)
    • Show images, videos (YouTube, Vimeo, Quicktime) and Flash
    • Lightbox with title, description and prev/next
    • Preloading with scrolling page load effect
    • Hover thumbnail titles
  • Minimalist design
    • HTML5 and CSS3
    • Single page with smooth section scrolling
    • Fixed menu (always in view)
    • Custom heading font (Lato Black)
    • Light and dark styles
  • About with photo, skills and experiences
  • Services section
  • jQuery Masonry Testimonials
  • Optional Google Map
  • Social media icons
  • PHP Contact Form
  • Includes support, documentation and well-commented code

Files

HTML, CSS, JS, PHP

These files are in the template folder:

HTML Structure

Header, Sections, Footer

HTML5 Code

First, it should be noted that this template uses HTML5 code. HTML5 is not all that different from what everybody is used to. Mainly, it adds some new tags such as <header>, <footer>, <nav> and <section> for better semantics. Browse HTML5 Doctor if you need to brush up.

Basic Structure

The template's HTML structure is fairly simple. There is a header with navigation, content sections (Portfolio, About, Services, etc.) and footer for your copyright notice.

Read the guides below for how you add your logo, configure the portfolio and change section content.

Color Schemes

Light or Dark

Zipfolio includes two styles — light and dark.

Switch styles by changing this line in <head>.

<link href="css/color-schemes/light.css" rel="stylesheet">

You can create a new color scheme by copying and renaming one of these stylesheets then modifying it.

Fonts

@font-face

Lato Black

Lato Black (SIL Open Font License) is a font by Lukasz Dziedzic that Zipfolio uses mainly for headings. It is embedded using @font-face in css/style.css. The font files are stored in the fonts/lato directory.

Georgia

Georgia is used mainly for body text and is considered a web-safe font.

Navigation

Menu, Section Linking

This is a one page template so it's useful to know how to link to the different sections from within your document.

Section ID's

The first thing to note is that each section container has a unique ID.

<section id="about">

Linking to a Section

To link to a section, simply create a link that uses the section's ID as a hash (# before section ID).

<a href="#about">About</a>

Top Menu

The menu works in the same way. Here is the HTML code used for the menu in the header.

<nav id="nav">

	<ul>
		<li><a href="#portfolio">Portfolio</a></li>
		<li><a href="#about">About</a></li>
		<li><a href="#services">Services</a></li>
		<li><a href="#testimonials">Testimonials</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul>

</nav>

Portfolio

Filters, Pagination, Lightbox

The portfolio section lets you showcase images, videos (YouTube, Vimeo or Quicktime) and Flash. Full-sized images open in a lightbox with optional descriptions. Thumbnails can be filtered by category and are paginated.

Configuring Categories

This block of code defines your categories. The highlighted items below are category ID's. Each image in the gallery can be associated with multiple categories.

<ul id="portfolio-filters" class="box">
	<li><a href="#" class="portfolio-filter-selected">All</a></li>
	<li><a href="#" data-category="web-design">Web Design</a></li>
	<li><a href="#" data-category="photography">Photography</a></li>
	<li><a href="#" data-category="illustrations">Illustrations</a></li>
	<li><a href="#" data-category="videos">Videos</a></li>
</ul>

If you don't want to use category filters, just remove this block of code altogether.

Adding Images & Videos

First, prepare the images you want to use. A thumbnail image is required for every item, including videos and Flash. Full-size images are auto-scaled in the lightbox. Make them as big as you want them to appear on large monitors.

  • Thumbnails should be exactly 210x140 and can go in img/portfolio/thumbs
  • Full-size images can be any size (1200x900 is a decent max.) and go in img/portfolio

HTML Code

Each image (or video) along with its title and optional description go into an unordered list using this code. Take note of the comments. Both the full-size and thumbnail images are specified along with one or more category ID's (separated by spaces). The lightbox description is optional so you can remove the whole <p> tag that holds it.

<ul id="portfolio-list" class="portfolio-thumbs">

	<!-- Item 1 -->

	<li data-categories="web-design illustrations"> <!-- filter categories -->
	
		<a href="img/portfolio/end-of-the-day.jpg"> <!-- full-size image URL -->
		
			<div class="portfolio-thumb-overlay">
				<h2>Title Here</h2>
			</div>
			
			<!-- thumbnail image -->
			<img src="img/portfolio/thumbs/end-of-the-day.jpg" alt=""> 
			
		</a>
		
		<p class="portfolio-description">
			Description Here
		</p>
		
	</li>
	
	<!-- Item 2 and so on... -->

</ul>

Videos from YouTube and Vimeo

To show a video from YouTube or Vimeo, supply the URL to the page that shows the video, instead of a full-size image URL.

<a href="http://www.youtube.com/watch?v=mmRPSoDrrFU">

<a href="http://vimeo.com/28323716">

Quicktime Movies

To show a Quicktime movie, supply the URL to the .mov file appended with ?width=640&height=480 (use the actual size of the movie).

<a href="movie.mov?width=640&height=480">

Flash Content

To show a Flash content, supply the URL to the .swf file appended with ?width=640&height=480 (use actual size).

<a href="flash.swf?width=640&height=480">

About prettyPhoto

prettyPhoto is the jQuery plugin that provides lighbox functionality for Zipfolio. The version used in Zipfolio has been modified to fix a couple issues (see the top of js/jquery.prettyPhoto.modified.js for details).

About Quicksand

Quicksand is a jQuery plugin that assists with category filtering (those nifty transitions).

Testimonials

jQuery Masonry

The testimonials section uses jQuery Masonry to arrange entries. You can add new entries with this code.

<div id="testimonials">

	<div class="box testimonial">
		
		<p>
			"The quality of work literally knocked my tube socks off."
		</p>
		
		<p class="testimonial-name">
			<b>George Smith</b><br>
			Sockmaster Industries
		</p>

	</div>
	
	<!-- repeat additional boxes here -->
	
</div>

Adding Sections

More Content

Zipfolio comes with preformatted portfolio, about, services, testimonial and contact sections. If you need to, you can add more sections with additional content. Here is basic code to show you how to do this.

<div id="sections">

	<!-- Pretend existing sections are here -->

	<!-- New Section Start -->
	
	<section id="section-id-here">

		<header>
			<h1>New Section</h1>
		</header>

		<div class="content">
			
			<p>
				New Content
			</p>
			
		</div>
			
	</section>
	
	<!-- New Section End -->
	
</div>

If you wanted to link to this new section from within your document, you'd use this code.

<a href="#section-id-here">New Section</a>

Note: As of writing, it is considered acceptable to use H1 tags in HTML5 sections.

Google Map

Configuration, Removal

The contact section can show your location on a map.

Configuration

API Key

Google Maps version 3 will work without an API Key. However, you can use one if you want. Add your API key to this line in <head>.

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&sensor=false"></script>

Location Coordinates

In order to show your location, you will need to know your latitude and longitude coordinates. You can enter your address and receive this information by using a tool like http://www.getlatlon.com. Edit this part of the initMap() function in js/main.js to add your coordinates.

// Location Latitude / Longitude
var latlng = new google.maps.LatLng(32.843331,-117.279379);

Optional Configuration

You may also want to adjust the zoom level (0 - 22) and map type (ROADMAP, SATELLITE or HYBRID).

// Load the Map
var map = new google.maps.Map(document.getElementById('google-map'), {
	zoom: 18,
	mapTypeId: google.maps.MapTypeId.HYBRID, // ROADMAP, SATELLITE or HYBRID
	disableDefaultUI: true, // remove map controls
	...	

Removal

If you don't want to show the map, remove this code.

<div id="map-container">
	<div id="google-map"></div>
</div>

Also remove this line from <head>.

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&sensor=false"></script>

Contact Form

PHP Script

The contact section has a contact form that interfaces with a PHP script using AJAX. This one won't work locally — you'll have to upload it to your web host for it to work.

Configuration

Open up contact-submit.php in your favorite text editor and you'll see this near the top.

// "From" e-mail address
$from_email = "you@yourname.com";
$from_name = "Your Name";

// "To" e-mail address
$send_to = "you@yourname.com";

Set your from address, from name and to address — and you're done.

Demo Code Removal

Color Switcher

This template comes with a few bits of code that make previewing it a better experience. Once you finish making your site, you may want to remove these bits of code, however.

demo.js

js/demo.js enables the live color scheme switcher that appears fixed to the left side of the browser viewport. You can remove this line from <head> and remove the js/demo.js file itself.

<script src="js/demo.js"></script>

You can also remove the highlighted portion of this code from <head>. It is related to the color scheme switcher.

<link href="css/color-schemes/light.css" rel="stylesheet" id="color-scheme">

Demo Styles

css/style.css contains styling for the color switcher. Look at the DEMO section at the very bottom to remove these.

Support

I'm Here to Help

If you have a question that is not answered in this documentation or if you discover a problem, you can submit a request via my Support Forum. I use a forum because it is searchable (Envato's current comment system is not). My goal is to answer questions within 24 hours on weekdays (excluding US holidays and the rare period of travel).

Please Note: Support is limited to questions regarding product features or problems with the product. Customizations are not included with product support.

Please Rate Zipfolio

Ratings & Testimonials

I hope you are finding Zipfolio to be a good solution. If that's the case, please share your experience with others by rating it or by providing a testimonial. Also know that if you have encountered a problem or need some help, you can Ask for Support. It's my pleasure to help my customers.

Rate It on ThemeForest

You can give Zipfolio a rating up to five stars by logging into ThemeForest then going to the Downloads area in your account. Thank you for doing this.

Write a Testimonial

I like to share what others have said about my themes and templates by posting their testimonials on ThemeForest. If you would like to submit one, please use the contact form on my Profile Page (must be logged in to see form). Here's are some example testimonials from one of Zipfolio's users.

"The Zipfolio site template was exactly what I was looking for. It's an excellent format, and very easy to use." DewDee
"You basically hit the nail on the head when you designed a very simple theme without any frills for artists and photographers who just want to put their work out there. Excellent Support." sl1ng5h0t

Sources & Credits

Thank You

Appreciation is given to the people behind these helpful projects and resources used in this template.

JavaScript

CSS

Fonts

Graphics

Preview Photos

  • Paul Bica provided many of the photos seen in Zipfolio's live preview (not included with template). He has generously shared his work on Flickr under the CC BY 2.0 license.
  • PhotoDune is the source of About and Services photos.

Changelog

Improvements

v1.0.6 (February 26, 2013)

  • Fix issue in Chrome 25 with first portfolio and service thumbnail being elevated.

Files Modified: css/style.css

v1.0.5 (September 10, 2012)

  • Updated jQuery Smooth Scroll to fix issue with Safari 6 on Mountain Lion and iOS.
  • Added frame breaker to demo.js.

Files Modified: js/jquery.smooth-scroll.min.js, js/demo.js

v1.0.4 (March 12, 2012)

  • Image preloader can now handle pages with no images to preload
  • Improved e-mail address validation
  • Prevented issue with scroll in on load when viewing one section site at unusually high resolutions
  • Fixed issue with document being moved to top after closing lightbox when portfolio is not first section

Files Modified: js/main.js, contact-submit.php

v1.0.3 (January 11, 2012)

  • Sections can now be linked to externally (yoursite.com/#section-id)
  • jQuery now served locally (Internet Explorer Tracking Protection / InPrivate Filtering blocks Google CDN)
  • Now compatible with jQuery no conflict mode (in preparation for WordPress theme)
  • Fixed issue with inconsistent font sizes in Mobile Safari
  • Fixed issue with gray box backgrounds in Mobile Safari (light color scheme)

Files Modified: index.html, js/main.js, js/demo.js, css/style.css, img/color-schemes/light/box-bg.png
Files Added: js/jquery-1.7.1.min.js

v1.0.2 (December 28, 2011)

  • Now works when portfolio section is removed
  • Improved image preloader error handling
  • Improved compatibility with mobile browsers

Files Modified: js/main.js, css/style.css, index.html

v1.0.1 (December 24, 2011)

  • Headings now scroll under header/menu bar

Files Modified: css/style.css

v1.0 (December 22, 2011)

  • First release