Erisby Themes Kingdom

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.

The slider has a scrolling effect – it stays put in place and fades to white the more you scroll down. To make sure this effect works, please:

  1. Go to Customizer → Site Title, Tagline, and Logo
  2. Make sure that your Site Logo image is no taller than 90px
  3. Uncheck the “Display Site Title and Tagline” checkbox. (If you are not using a logo image in step 2, feel free to check this box)

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

The layout settings allow you to set the number of columns you would like your content to be displayed in.

The three-column and four-column layouts take advantage of wide screens to display more content. But, they reduce the number of columns on narrower screens, even when set to display more columns. For example, the four-column layout changes down to a three-column layout on a smaller screen (under 1600px) or even down to a two-column layout (screens under 1300px). This intelligent downscaling happens so your content always looks crisp and neat on any screen size. This is especially true for phone screens, where the layout it always served in a single column, regardless of your selected setting.

  • 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”, then two paragraph elements with the class “half-width” around your content in the HTML Editor:

<div class="twocolumn">
<p class="half-width">Your text goes here</p>
<p class="half-width">Your text goes here</p>
</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.