To access Ippo‘s theme settings, go to Customize → Theme Options.
- Hide header menu behind a button will place the standard horizontal navigation menu behind a “Menu” button on large screens. This is also the default behavior for small screens.
- Sticky header will “stick” the navigation menu to the top of the screen, so it’s readily available as your readers scroll down.
- Text for blog header displays a bold headline on the blog page, under the slider (if enabled) or on the top of the page (if no slider). This field supports HTML, so you can add links or other text formatting with HTML.
Featured Content Slider
Choose how your Featured Content slider will appear: either at the full width of the screen, or in a carousel with next/previous posts on either side. You can also choose to align the slider text to the left, center, or right.
Setting up the Featured Content Slider
To set up the Featured Content slider:
- Create some posts with optional Featured Images and give them all the same Tag (hint: try “featured” or “slider” so it’s memorable).
- Go to Customize Featured Content, and enter the tag you selected in step 1.
- Press Save & Publish, and your slider will appear on the blog!
Posts are displayed in three or four columns on the blog and archives. If there are active widgets in the Sidebar, posts will be displayed in two or three columns instead, with the sidebar taking up the last column.
To add a list of post categories to the top of your blog for quick searching and filtering, select “Enable posts category filter on blog.”
Checking “Display author box under single post content” will display more information about the author underneath single posts.
These are the same as Layout settings, but for Portfolio projects. Read more about creating a Portfolio here.
As with Posts, you can choose to display your Projects in three or four columns. You can also choose to display available Portfolio Types at the top of the Portfolio archive, or display the Project’s author at the bottom of single projects.
Portfolio Page Template
Ippo includes a special template for Portfolio projects. To set this up:
- Go to Pages → Add New and create a new page.
- Select the Portfolio page template under Page Options.
- Press Publish when you are done.
Sticky posts are displayed larger than other posts, and are always displayed at the top of the blog, regardless of their chronological order.
Ippo has a right-hand sidebar, a full-width widget area just above the footer, and three widget areas arranged in columns in the footer. Widgets are configured under Customize → Widgets.
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 author, write their name below the quote text, then switch to the HTML Editor and add <cite></cite> around the author’s name.
Link Post Format
To create a link post:
- Add a new Post and select the Link post format under Post Format.
- After adding your link text, link it to the desired URL.
You can display content in two columns by wrapping a
div element with class “twocolumn” 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>
Dropcaps allow you to stylize the first letter in a post or page. To do so, 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 display important sentences, or parts of longer sentence. In Visual Editor select desired text, and click on Blockquote button. Update changes when done.
To cite the quote author, write their name below the quote text. Switch to the Text Editor and add <cite></cite> around the author’s name.
You can also change Blockquote alignment, making them outstand the content.
<blockquote class="pull-right">This is a right-aligned blockquote.</blockquote>
<blockquote class="pull-left">This is a right-aligned blockquote.</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.