Hyaliteby Cedaro

Hyalite is designed with the creatives in mind: photographers, designers, artists, writers, and others. If you want to highlight your most relevant content and elegantly display your portfolio, Hyalite is for you.

Getting Started

After activating Hyalite, you can begin setting it up from the Customizer, where you’ll find tools to add a logocustomize colorscreate menusset up the front-page, and more.

Detailed instructions for working with Hyalite’s unique features are included below. If you run into any issues or have a question, you can find additional help by:

 

Hyalite - Logo

Your site’s title and tagline will be displayed in the header area by default, but you can easily replace the text with your own logo or custom image in the Customizer:

  1. Go to the Customizer.
  2. Open the Site Identity panel.
  3. Upload a new image in the Logo field.

You may also customize the site title and tagline text in this section, or hide them to display the logo by itself.

The site logo should be a square image and will display at 120px by 120px. The recommended upload size of the logo is 240px by 240px; this will make it display nicely on retina devices.

Homepage Setup

Your homepage is typically one of the first pages most visitors see when browsing your site. While it shows a list of your latest posts by default, Hyalite includes options to customize the layout and information displayed in order to highlight your most relevant content.

Read the instructions for Setting up a Static Front Page if you’d prefer to use a page for your homepage. You’ll also want to create a page for displaying your latest posts, as outlined in the guide.

Homepage Portfolio

The Portfolio items displayed on the homepage uses a static front page with the Portfolio Archive page template. Learn more about setting up a Portfolio and the Portfolio Archive page template.

Custom Menus provide granular control over the links that appear in the various navigation areas on your site. Hyalite supports four menu locations: Primary, Social Links, Post Archives, and Portfolio Archives.

You can create and assign menus by going to Customize → Menus.

Hyalite: Social Links

The Social Menu allows you to display links to your social media profiles, like Twitter and Facebook, as icons. Each menu item should be added as a Custom Link. Hyalite will automatically display the correct icon based on the link URL. For example, a link like http://twitter.com/audiotheme will display a Twitter icon because it’s a Twitter URL.

The following icons are bundled in Hyalite for use in your Social Menu: CodePen, Digg, Dribbble, Dropbox, Facebook, Feed, Flickr, GitHub, Google+, Instagram, LinkedIn, Path, Pinterest, Pocket, Polldaddy, Reddit, Skype, Spotify, Stumbleupon, Tumblr, Twitch, Twitter, Vimeo, WordPress, and YouTube.

Hyalite: Archive Menu

Hyalite provides two submenu navigations for Posts and Portfolio archives. Each menu, when assigned, will display on the archive pages for each type of content. An example of each can be seen in the Hyalite demo. The Post Archive Menu currently displays Post Format links while the Portfolio Archive Menu displays links to the different Portfolio categories.

Widgets

Hyalite features one widget area in the footer.

Portfolio

hyalite-feature-portfolio

Creating a beautiful portfolio just got much easier with Hyalite. Refer to the documentation for adding Portfolio items.

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

Portfolio Archive

After creating a few portfolio items, the archive can be found by adding “/portfolio/” to the end of your home url: e.g. http://your-site.com/portfolio/.

Alternatively, you can also use the Portfolio Archive page template:

  1. Create a new page.
  2. Give the page a title (“Projects” works well).
  3. Set the page template to “Portfolio Archive.”
  4. Click the Publish button to create and save the page.

When a page is set to use the Portfolio Archive page template, the theme will showcase your portfolio items.

Portfolio Archive Thumbnails

Thumbnail sizes on the portfolio archive page can be changed to display to be either landscape (default), portrait, or square. The image sizes have a max width of 530px wide are are displayed with an aspect ration of 4:3, 4:4, and 4:5 respectively.

Features / Grid Template

Hyalite includes a special feature that allows you to add a grid page to your site that displays child pages in a visually appealing grid layout. Here’s how they look in the demo.

The Grid Page template is a page template that displays child pages in a visually appealing grid showcasing a featured image and page title.

Before adding grid page items (child pages), you need to set up the Grid page to act as an “Archive” page:

  1. Create a new page.
  2. Give the page a title.
  3. Find the Page Options box and select the “Grid Page” option in the Template field.
  4. Click the Publish button to create and save the page.

You can also enter a short introduction in the main content area of the page. Now that your archive is set up, you can start adding grid page items:

  1. Create a new page.
  2. Give the page a title.
  3. Set a grid thumbnail as the Featured Image. Thumbnails are cropped to a 16:9 aspect ratio.
  4. Add page content in the content area.
  5. Find the Page Options box and change the Parent to the page you created as the Grid Page archive (this is important).
  6. Click the Publish button to create and save the page.

Now when you visit your Grid page, you should see the first grid item listed. Continue adding grid items by following the same steps above; always be sure to set the Parent page as the Grid Page.

Custom Headers

Give your site header a little extra personality by adding a site header image. How about individual Posts, Pages, or Portfolio items? Yep, a custom header image can be set for these page types, too. See an example here.

Hyalite - Custom Header Example

Site-Wide Custom Header

Learn how to set up a site-wide custom header image.

Individual Header Images

A unique custom header image can be set for single posts, pages, and portfolio items that have a featured image set.

 

  1. Go to the Customizer.
  2. Navigate to the page you want to set the featured image as the header image.
  3. Click the Theme Options section to expand it.
  4. Check the setting to Show featured image in header setting.
  5. Click the Save button.

The Show featured image in header setting will only display in the Theme Options section of the Customizer if the individual page you are viewing has a featured image set. After checking this option, you should see the featured image displayed at the top of the page.

Other Options

Hyalite offers additional appearance settings, which can be found in the Theme Options section of the Customizer.

Archive View

The archive view setting offers more control over how the archive type pages of your site appear. By default, the archive page will display a list view, with excerpts and content hidden. If a post has a custom excerpt set, it will always be displayed.

The “Full Text” option will display the post content in full. The post content can still be minimized by using the WordPress more tag.

The “Summary” setting will display an excerpt of the content. By default, WordPress will create an excerpt from the post content. Alternatively, you can create a custom excerpt.

The following post formats will always display full text: aside, audio, quote, and status.

Portfolio Columns

This setting allows you to change the number of columns (2-4) in which portfolio items are displayed.

Front Page Portfolio Count

This setting allows you to display a certain number of Portfolio items on the homepage when using a static front page. A link to the Portfolio archive will also be added below the Portfolio items.

Author Grofile

Hyalite: Author Profile (Grofile)

When checked, this setting will display the author’s Gravatar profile (a.k.a Grofile) on single Post pages.