Eris

$69

Eris is a clean and elegant portfolio theme that works best when you fill it with a lot of different projects. This allows you to seamlessly display a variety of projects within a cohesive design.

A Great First Impression

Make an impact with featured images using an image slider, or promote your content with text. Or do both! The text will automatically shift below the slider.

eris-slideeris-ftext

Two, Three, Four, Dance!

Easily switch between a standard three- or four-column layout. Not into tight grids? Shuffle your work! Pick the the two-column layout and Eris will turn your content into organized chaos. It’s great when you want to break the blogging mold.

 

Portfolio Layouts

Pick between three portfolio layouts: The split, classic, or curtain layout. The Split layout puts your text on one side and images on the other, which can be useful for storytelling.

eris-split

 

The Classic layout is timeless, with the main image at the top and your text in the center.

eris-classic

 

The Curtain layout adds an excerpt — something short and sweet about your project — that shows up at the top of the page. As you scroll, you’ll see a smooth animation that pulls the page up towards you.

eris-curtain

Choose Between Two Menu Styles

Use the hidden menu to hide navigation links behind a button in case you want a cleaner layout, or, if your website relies heavily on navigation, use the standard menu and show all the links.

You can attach both menus to the top, so they stick to the screen when you scroll.

Hidden Sidebar

Eris hides the sidebar behind the screen’s right edge. This way people can focus on your work without any distractions.

This easily accessible area is tucked away under a “three-dot menu” button.

eris-sidebar

Beautiful in Portrait or Landscape

Eris recognizes the images you upload to posts. If it’s a portrait image, you’ll automatically get a post formatted perfectly for portrait dimensions. The same goes for landscape images.

eris-portaiteris-landscape

 

Responsive by Design

Thanks to Eris’ responsive design, your site will look great on all devices, from small phones to large screens.

eris-responsive

Quick Specs (all measurements in pixels):

  1. Page / Post content width: 760.
  2. Sidebar width: 300.
  3. Grid area width: 1380.
  4. Single-column width (three-columns grid): 406.
  5. Single-column width (four-columns grid): 300.

Create a Portfolio Page

First, go to Portfolio → Add and publish some portfolio projects. Be sure to add a featured image to each one.

To create a portfolio page:

  1. Go to Pages → Add and create a new page.
  2. Select the Portfolio page template under Page Attributes.
  3. Press Publish when you are done.

Set up the Featured Content Slider

To set up the Featured Content slider for your front page:

  1. Create some posts with optional Featured Images, and give them all the same Tag, for example: featured.
  2. Go to Customize → Featured Content, and enter the tag you selected in the previous step. Click Save & Publish. The slider will automatically appear on the front page.

You can turn any page into the front page, and the slider will appear at the top. To change your front page:

  1. Create a new page.
  2. Go to Customize → Static Front Page. Select “A static page” as your front page, and then choose the page you created in the previous step. Hit Save changes.

eris-slide-sup

Theme Options

To access Eris‘ theme settings, go to Customize → Theme Options.

Header Settings

eris-header-s

  • Hide the header menu behind a button places the horizontal navigation menu behind a “Menu” button on large screens. This is also the default behavior for small screens.

eris-menu-h

  • Enable sticky header will “stick” the horizontal navigation menu to the top of the screen, so it’s readily available as your readers scroll down.

Portfolio Layout Settings

  • Two-column will sort your posts in a loose grid, so the layout looks a little like organized chaos. It’s great when you want to break away from the symmetrical look of traditional sites.

eris-shuffle-sup

  • Three-column sorts your posts into a three-column grid.

eris-3col-sup

  • Four-column sorts your posts into a four-column grid.

eris-4col-sup

  • Display single project in Split Layout will put your text on one side and images on the other. The Split view is recommended for storytelling purposes, for example when you have a lot of beautiful images and your article text references them a lot. That way you won’t have to scroll long until your content is visible. Once selected, the split layout will be applied to all posts.

Portfolio Single Layout Options

You can display content in the single portfolio page in two ways — standard and curtain view.

Standard View

In Standard view, the featured image is displayed at the top of the page, above the content.

Curtain View

You can display text or a portion of it before the featured image, by entering the text in the Excerpt field in the Portfolio edit mode. If you leave the excerpt field blank, the page will use the standard view instead.

eris-ex

See a live demo of Curtain view here.

Custom Menus

Create Custom Menus under Customize → Menus. The Header menu can contain items including custom links, pages, categories, tags, projects, posts, and more.

The Social Menu is located on the left side of the screen, which is a great space for links that lead to your social media profiles.

eris-social-p

Widgets

Eris has a right-hand sidebar with two widget areas arranged in columns in the footer. Widgets are configured under Customize → Widgets.

The sidebar is always hidden and can be displayed by clicking on the “three-dots menu” button in the upper-right corner.

Quote Post Format

To create a quote:

  1. Add a new Post and choose Quote from the Post Format module.
  2. Select your desired text in the Visual Editor and click the Blockquote button.
  3. To cite the quote’s author, write his or her name below the quote text, then switch to the HTML Editor and add the author’s name.

eris-quote

Link Post Format

To create a link post:

  1. Add a new Post and select the Link post format under the Post Format module.
  2. After you add the link text, link it to the URL you want.

eris-link

Extra Styles

Two-Column Content

You can display content in two columns by wrapping a div element with the class “twocolumn” around your content in the HTML Editor:

<div class="twocolumn">Your text goes here.</div>

eris-2col

Drop Caps

Drop caps let you stylize the first letter in a post or page. To create a drop cap, switch to the HTML Editor and wrap the first letter in a span with “dropcap” as the class.

<span class="dropcap">T</span>he first letter of this paragraph will have a dropcap.

eris-drop

Blockquotes

Blockquotes are usually used to feature important sentences, or parts of a longer sentence. In the Visual Editor, select the text you’d like to feature and click the Blockquote button. Update your changes when you finish editing.

To cite the quote’s author, write their name below the quote text. Switch to the Text Editor and add around the author’s name.

eris-blockquote
You can also change the “blockquote” alignment, which is useful when you want to break the visual monotony of the page.

eris-right-q

<blockquote class="pull-right">This is a right-aligned block quote.</blockquote>

eris-left-q

<blockquote class="pull-left">This is a right-aligned block quote.</blockquote>

Highlighted Text

To highlight text, switch to the HTML Editor and wrap it with the “emphasis” class:

eris-emphasis

<p class="emphasis">Your highlighted text goes here.</p>

You can see a complete style guide in action here.