The Portfolio As Your Front Page
To set up a custom front page featuring your portfolio projects, create and activate a static front page and select the “Portfolio Page” template from the Page Attributes box.
Create your Portfolio Projects
Onigiri takes advantage of the portfolio feature, offering unique layouts for portfolio projects. Learn how to enable and set up portfolio projects.
Portfolio Featured Images
Featured images for portfolio projects are visible on the portfolio overview page and on portfolio archive pages, but not on the single portfolio project. If you like to include the same image for your single portfolio projects, just add it as the first image to the project content.
It’s important that you upload each featured image at the exact size that you want it to appear in the grid layout on the portfolio front page. If you like, you can add the same image in a larger size within the post editor for it to appear on the single project page.
Create Your About Page
Onigiri also offers a beautiful About page template. To use it, create a new page and choose the “About Page” template in the Page Attributes template dropdown menu. The Onigiri About page has a special content width of 900 pixels, a light pink background color by default, and also features special text styles with a bigger font size.
The Ongiri About Page template.
CSS Styles – For Advanced Users
To style your About page individually, you can use extra CSS text styles in your page text/HTML editor. Here is the code example used in the Onigiri live demo:
<p class="intro">Your intro text in a bigger font size here...</p> Include your About image with an image caption text here... <div class="two-columns-one"> <h4>Headline</h4> Text in the first left-aligned column <h4>Headline</h4> Text in the second left-aligned column </div> <div class="two-columns-one last"> <h4>Headline</h4> Text in the first right-aligned column <h4>Headline</h4> Text in the second right-aligned column </div>
Theme Options & Customizations
Under Appearance → Customize, you will find the theme’s customization options. With the Customizer, you can see a live preview of your changes, so you can decide if you like your tweaks before you save and publish them.
In the Theme section, you can choose to hide the search form or keep the site title fixed at the top of the browser at screen sizes above 11150px. You can also add some Header intro text (basic HTML is allowed), a phone number, and a contact email, which will be made clickable automatically. These elements will be displayed when the Portfolio Front page template is selected for your static front page.
Onigiri theme options in the Customizer.
Premium Customization Options: With Custom Design, you can customize Onigiri even further, such as change the About page background and text color, change link color, or make changes to font styles.
Onigiri includes one Custom Menu in the footer, which can be configured under Appearance → Menus. The menu can display links to items like pages, categories, tags, or custom links like a Twitter or Facebook profile, or portfolio project types.
Onigiri offers a two-column footer widget area. You can include your widgets in the “Footer Widget Area 1” and “Footer Widget Area 2” under Appearance → Widgets, or you can use the Customizer to add your widgets under Appearance → Customize → Widgets.
Onigiri widget areas in the Customizer.
Special Typography Styles
You can use a number of typography styles to design more interesting content for your portfolio projects, pages, and posts. You will need to use the Text/HTML Editor to create your special styles. To see the text styles in action, visit the Onigiri demo site.
Intro Text – To highlight a paragraph (e.g. the first paragraph of your text) in a bigger font size, you can wrap the paragraph in a p tag with the CSS class of “intro”.
<p class="intro">Your intro text here...</p>
Wide Content – To include content with a wider content area of 1280 pixels – instead of the default 580px content width on posts, pages, and portfolio projects – wrap the content in a div container with the CSS class of “wide-content”:
<div class="wide-content"> Your content here... </div>
The image in this example is included in a wide-content div container.