Ampersand

$75

Ampersand is clean and professional portfolio theme for creatives. Featuring a minimal, responsive layout, Ampersand looks just as good on your mobile device as it does your desktop.

ampersand

Ampersand powers websites for photographers, teachers, creative directors, startups, bloggers and everyone in between. Simple to setup, simple to use.


Viewport Friendly

ampersand-mobile

Ampersand is responsive, from desktop to mobile and everything in between. Because of the percentage-based layout, the design will adapt to any screen without sacrificing usability or design integrity. All aspects of Ampersand have been optimized for web and mobile visitors.


Publish Your Portfolio

ampersand-portfolio

You can easily use Ampersand as a dedicated portfolio for your images, galleries and videos. Utilizing the unique homepage and portfolio templates, you can create an impressive collection of mixed media to show off your skills.

View the Portfolio


Typography Guide

ampersand-type

Ampersand ships with Roboto, a geometric sans-serif font that features friendly, open curves. This makes for a more natural reading rhythm. Everything from titles to paragraph text has been optimized for a comfortable reading experience.

View the Style Guide


Unique Custom Headers

ampersand-header

Ampersand will (optionally) utilize your Featured Image to display it as a transparent, full-width image as the background of your header. This gives each page a unique depth and texture. View this effect on a few of the Portfolio items.

Quick Specs (all measurements in pixels)

  1. The main column width is 770 except in the full-width layout where it’s 1050.

				

Getting Started

First off, thanks for your interest in Ampersand! We truly appreciate the opportunity to share our themes with you. If you have any questions or run into any trouble, please visit us on the Ampersand Support Forum. We’ll get you fixed up!

Upon activating your theme, you should visit Appearance → Customize to setup the basic theme settings such as your logo, header, background and social links. Detailed instructions and tips can be found below.


Ampersand Setup Video

The video below runs through the general setup and use of Ampersand. It covers all the features shown in the demo, so be sure to give it a watch!


Ampersand Options

The following options can be found at Appearance → Customize. See the video →

  • Add Your Logo: The first option in the Theme Options menu will be Logo Upload. Click the Logo select box to drag and drop or select an image from your computer. One you’ve uploaded and selected an image, a thumbnail preview will display and your logo will update live in the browser.
  • Header Background Effect: By default, Ampersand will use any featured image or header image you set as a transparent header background. I think this effect is really awesome, but maybe you don’t. You can disable this effect here.
  • Homepage Header CTA Button: Add a call-to-action button to the homepage header. Add your text for the button and the full URL to the page you want the button to link to.
  • Social Media Icons: To add social media icons to the header of Ampersand, simply visit Appearance → Customize → Theme Options and add your links. Be sure to enter the full URL to your sites. Only the links you add will show up in the header.

Homepage Setup

Ampersand includes a custom homepage template that shows your latest portfolio items and blog posts.

  • Go to Pages → Add New to create a new page to use as the homepage.
  • Add a title to this page, which will become the main title on your homepage. For example, I named my homepage “Rules are made for breaking.”
  • Using the Page Attributes window, set the template to Homepage.
  • Publish the page when finished. (Note: Don’t worry about adding text content to this page, since it won’t output anywhere. The homepage template only brings in portfolio items and blog posts.)
  • Go to Settings → Reading and click A static front page. In the Front page dropdown, choose the homepage you created above.
  • When finished, click Save Changes. Your homepage should now be using the homepage template! Once you’ve added some blog posts and portfolio items they will show up on the homep

Blog Page Setup

If you chose to setup your homepage to use the homepage template above, you’ll need to also tell WordPress which page will display your posts.

  • Go to Pages → Add New to create a new page to use as the blog page.
  • Add a title to this page, which will become the main title on your blog page.
  • Publish the page when finished. (Note: Don’t worry about adding text content to this page, since it won’t output anywhere.)
  • Go to Settings → Reading and click A static front page. In the Posts page dropdown, choose the blog page you created above.
  • When finished, click Save Changes. Your blog page should now be displaying your blog posts!

Portfolio Page Setup

Ampersand includes a custom portfolio template that shows off your latest works.

  • Go to Pages → Add New to create a new page to use as the portfolio page.
  • Using the Page Attributes window, set the template to Portfolio.
  • Publish the page when finished. (Note: Don’t worry about adding text content to this page, since it won’t output anywhere.)
  • Now that you have the portfolio page in place, you can start adding some portfolio items! See below.

Adding Portfolio Items

Ampersand utilizes a custom page template for portfolio items. Each page that uses the Portfolio Item template will be shown on the Portfolio page you created above. See the video →

  • Go to Pages → Add New to create a new portfolio item.
  • Using the Page Attributes window, set the Parent dropdown to your Portfolio main page (setup above) and set the Template to Portfolio Item.
  • Add a title and your portfolio item’s text in the editor. The text you enter in the editor will show up on the left of your image or gallery.
  • To add a gallery, click Add Media → Create Gallery. Choose images from your media library or upload new images. Once finished adding photos and arranging your images, click Insert Gallery.
  • If you’d like to add a video, you can do this a few ways. The simplest way is just adding the URL to your video into the WordPress editor. WordPress will convert the link into a video embed for YouTube, Vimeo, etc. You can also add media by going to Add Media → Insert from URL. See the Add Media support page for more details on how to add media.
  • When you are finished adding your content, set a Featured Image which will be used for the portfolio item thumbnail and transparent header background image. Even if you added a gallery to your post, you have to specify which image for the post to use.
  • Publish the page when finished.

Contact Page Setup

Ampersand utilizes WP.com’s contact form module for adding contact forms to your pages.

  • Go to Pages → Add New to create a new page to use as the contact page.
  • To create a contact form, click the contact form icon above the post editor. Visit the Jetpack Contact Form page for more information on how to create a contact form.
  • Publish the page when finished.

Custom Header Background Images

Ampersand utilizes Featured Images as transparent image backgrounds for the header area of each post or page. All you have to do is set a Featured Image and each page will get a unique header image.

If you’d like to set one image for all posts and pages, you can do so by adding a Header Image in Appearance → Header.

Select an image from your library or upload a new image. For the best looking header, do not crop the image when WordPress prompts you to. You can simply click Skip Cropping, Publish Image As Is. Learn more about custom headers.


Adding Widgets to the Sidebar and Footer

Ampersand has two widgetized locations, the sidebar and the footer.

To add widgets, visit Appearance → Widgets. Drag any of the available widgets onto the sidebar or footer and arrange them however you’d like.


Adding Images To Your Posts

Images can be added directly into your post content, or added via the Featured Image. Ampersand uses the Featured Image for various aspects of the post, so be sure to set one if you can.


Full-Width Page Template

Ampersand comes with a full-width page template, which displays your post content without a sidebar. To use the full-width template, select Full Width from the Templates section of the Page Attributes module.


Extra Styles Via CSS Classes

Ampersand comes with a few extra typography styles that can be used by simply applying a class to your content. They are entirely optional, but can add a nice touch to your content! To add classes, you will need to use the Text tab.

Pull Quotes

Pull quotes are similar to block quotes, but are reserved for less text. See Ampersand‘s Style Guide to see our suggested usage.

To use pull quotes you can add a class of pull-left or pull-right to your content. See an example below.

<span class="pull-right">This text will be pulled right.</span>

Text Highlight

Text highlight simply adds a yellow background to your text, useful for in-paragraph emphasis. To use the highlight style, you can add a class of highlight to your content. See an example below.

<span class="highlight">This text will be highlighted.</span>

Intro Text

Intro text styling simply makes your text lighter and larger, creating a nice light title effect. This is useful for introducing a post or page with a brief description. To use the intro text style, you can add a class of intro-text to your content. See an example below.

<span class="intro-text">This text will be intro text.</span>

A Note About Content Design

When you look through the Ampersand demo, you’ll notice it’s very thoughtfully constructed. All of the posts have a brief, descriptive excerpt, images are cropped nicely, and embedded video and audio are neatly aligned. As you can see, with little effort, Ampersand does an impressive job of making your content shine.

We encourage you to take the same time and consideration when crafting your latest post. When possible, use high quality Featured Images that really highlight your content and underscore your message. Use interesting bits of text for block quotes and pull quotes. Be expressive and creative with your type treatment and styling. In doing so, you’re creating a beautiful, content-rich experience for your readers.

Visit the Style Guide to see layout and styling examples that you can use in your own site.