Illustratr

Illustratr

Illustratr is a minimalist portfolio theme that helps you create a strong — yet beautiful — online presence. Primarily crafted for designers and photographers, it is a simple, powerful, and flexible theme.

 

Responsive Design

Illustratr is responsive, from desktop to mobile, and everything in between. The theme adapts to any screen without sacrificing usability or design integrity.

Illustratr: Responsive design

 

Portfolio

Illustratr takes advantage of the Portfolio feature on WordPress.com, offering unique layouts and organization for your portfolio projects.

With a dedicated Portfolio section in your dashboard, adding portfolio items is simple. Check out our guide for full details on how to set up your portfolio.

Illustratr: Portfolio admin

People love full-size images of your work, so make sure the images you include are at least 1100px wide. Illustratr displays these images at full width on larger screens.

Illustratr: Portfolio single

Featured Images

Featured Images are important in Illustratr. They work best when they are at least 800px wide and will appear in several places, including archive pages, portfolio page template, and portfolio shortcodes, so, don’t forget to add one!

Illustratr: Portfolio Featured Image example
Illustratr: Portfolio Shortcode example

Portfolio Shortcodes

Once you create a project, you can use the portfolio shortcode to display it anywhere on your site. Adding the [portfolio] shortcode to any post or page will insert your project. Learn more about working with the portfolio shortcode.

 

Portfolio Page Template

This template will display your portfolio and allow you to set your portfolio as your site’s home page.

When you first activate Illustratr, your posts will display in a traditional blog format. If you would like to show your portfolio projects on the front page of your site (like Illustratr‘s demo site), just follow these instructions:

  1. Create or edit a page, and assign it to the “Portfolio Page Template” from the “Page Attributes” module.
  2. Go to Settings → Reading and set “Front page displays” to “A static page.”
  3. Select your portfolio page as the “Front page,” and then choose another page as the “Posts page,” (to display your blog posts).

By default, page title and content will appear. You can hide them if you prefer by going to Appearance → Customize → Theme Options and check “Hide title and content on Portfolio Page Template” option.

Illustratr: Portfolio

Where is the portfolio archive page?

Along with the Portfolio Page Template, your projects will be displayed on portfolio archive pages.

If your blog’s URL is http://yourgroovysite.wordpress.com/, you’ll find your portfolio archive page at http://yourgroovysite.wordpress.com/portfolio/.

If you’d like to add your portfolio archive page to your a Custom Menu, create a custom link using the portfolio archive URL.

 

Featured Images

Want to highlight your visual content? Consider adding a Featured Image to your post (standard format) or page. Featured images appear above the title on the blog index and archive pages. For an optimal result provide an image at least 1100px wide and 500px high.

Illustratr: Post Featured Image example

illustratr-primary-menu-example

 

Custom Menu

Illustratr allows you to have a custom menu in the theme’s header. It can be set up by going to Appearance → Menus. Don’t forget to tick “Primary Menu” in the Menu Settings; if the option isn’t ticked, Illustratr won’t display any menu in its header.

 

Social Icons

Illustratr allows you display links to your social media profiles, like Twitter and Facebook, as icons using a custom menu.

Illustratr: Social Links front-end

Set up the menu

Illustratr: Social Links back-endTo automatically apply icons to your links, simply create a new custom menu. Next, add each of your social links to this menu. Each menu item should be added as a custom link.

Once your menu is created and your social links added, you need to select “Social Menu” in the Menu Settings; if the option isn’t selected, Illustratr will not display the menu in its footer.

Illustratr will automatically apply an icon if it’s available.

Available icons

Linking to any of the following sites will automatically display its icon in your menu.

  • Codepen
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Email (mailto: links)
  • Pinterest
  • Pocket
  • PollDaddy
  • Reddit
  • RSS Feed (urls with /feed/)
  • StumbleUpon
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Widgets

Illustratr offers a widget area that appears above the footer in a hidden panel. Click on the link to expand and view the widgets. This keeps the design sleek and helps Illustratr creating a clean reading experience for everyone.

Illustratr: Widget area

 

Quick Specs (all measurements in pixels)

  1. The main column width is 840.
  2. A widget in the widget area is 340.
  3. Featured Images for posts and pages are 1100 wide by 500 high.
  4. Featured Images for projects are 800 wide by unlimited high.