Setting up website to look like demo
Eris demo can be set in a few steps:
- Go to Portfolio → Add and publish some portfolio projects. Be sure to add a featured image to each one. Give them all the same Tag, for example: featured.
- Create portfolio page: Go to Pages → Add and create a new page.
Select the Portfolio page template under Page Attributes.
- Create posts page: Go to Pages → Add and create a new page.
Select the Default page template under Page Attributes.
- Set previously created portfolio page as static home page, and page with default template as posts page.
- Go to Customize → Featured Content, and enter the tag you selected in the first step. Click Save & Publish. The slider will automatically appear on the front page.
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:
- Go to Pages → Add and create a new page.
- Select the Portfolio page template under Page Attributes.
- Press Publish when you are done.
Set up the Featured Content Slider
To set up the Featured Content slider for your front page:
- Create some posts with optional Featured Images, and give them all the same Tag, for example: featured.
- 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:
- Go to Customizer → Site Title, Tagline, and Logo
- Make sure that your Site Logo image is no taller than 90px
- 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:
- Create a new page.
- 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.
To access Eris‘ theme settings, go to Customize → Theme Options.
- 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.
- 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.
- Three-column sorts your posts into a three-column grid.
- Four-column sorts your posts into a four-column grid.
- 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.
In Standard view, the featured image is displayed at the top of the page, above the content.
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.
See a live demo of Curtain view here.
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 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:
- Add a new Post and choose Quote from the Post Format module.
- Select your desired text in the Visual Editor and click the Blockquote button.
- 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.
Link Post Format
To create a link post:
- Add a new Post and select the Link post format under the Post Format module.
- After you add the link text, link it to the URL you want.
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>
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.
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.
You can also change the “blockquote” alignment, which is useful when you want to break the visual monotony of the page.
<blockquote class="pull-right">This is a right-aligned block quote.</blockquote>
<blockquote class="pull-left">This is a right-aligned block quote.</blockquote>
To highlight text, switch to the HTML Editor and wrap it with the “emphasis” class:
<p class="emphasis">Your highlighted text goes here.</p>
You can see a complete style guide in action here.