Suidobashiby Elmastudio

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.

Suidobashi Static Page

If you also want a blog, publish a separate page and select it as your “Posts Page” under Appearance → Customize → Static Front Page.

Create Portfolio Projects

Suidobashi takes advantage of the portfolio feature, offering unique layouts for portfolio projects. Learn how to enable and set up portfolio projects.

Suidobashi portfolio management

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.

Create Your About Page

Suidobashi 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 Suidobashi About page has a light gray background color and offers special text styles with a bigger font size.

Suidobashi About Page
The Suidobashi 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 that we used in the Suidobashi 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="three-columns-one">
<h2>Headline 1</h2>
<h2>Headline 2</h2>
</div>

<div class="three-columns-one">
<p class="justify">Text in the center column...</p>
</div>

<div class="three-columns-one last">
<p class="justify">Text in the right-aligned column...</p>
</div>

<div class="divider-border"></div>
<div class="three-columns-one">
<h4>Headline</h4>
Text in the left-aligned column...
</div>

<div class="three-columns-one">
<h4>Headline</h4>
Text in the center column...
</div>

<div class="three-columns-one last">
<h4>Headline</h4>
Text in the 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.

Under “Theme,” you can hide the search form and add your header intro text. You may also add a contact email and phone number and some footer slogan text. Basic HTML is allowed in these text fields. If you add an email address, it becomes automatically clickable.

Suidobashi Theme Options

With Custom Design, you can customize Suidobashi even further. For example, you can change the About page background and text color, tweak the link color, or choose different fonts.

Custom Menu

Suidobashi includes one custom menu in the header, which can be configured under Appearance → Menus. The menu can display links to pages, categories, tags, custom links – for example, to link to your Twitter or Facebook profile – or portfolio types.

Widgets

Suidobashi offers a three-column widget area in the footer. You can include widgets in the three footer widget areas under Appearance → Widgets or by using the Customizer under Appearance → Customize → Widgets.

Suidobashi Footer Widgets Areas
The three footer 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 add your special styles. To see the text styles in action, visit the Suidobashi 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>

Suidobashi Intro Text
You can add intro text to any posts, pages, or portfolio projects.

Pull Quotes – You can use pull quotes on your text by wrapping a sentence or short text in a p tag with the CSS class “pull-left” or “pull-right” for left- or right-aligned pull quotes:

<p class="pull-left">This is a left-aligned pull quote text.</p>

Suidobashi Pull Quotes
An example of pull quotes in the Suidobahsi theme.

Wide-Content – To include content with a wider content area of 840px, instead of the default 640px content width on posts, wrap the content in a div container with the CSS class of “wide-content”:

<div class="wide-content">
Your content here...
</div>

suidobashi-widecontent
The image in this example is wrapped in a wide-content div container.