Layers Showcase: Project Pages

Product Guides  Since: 1.0 Last Updated: Time to Read: 5 minutes

The Project post type added with Showcase can be displayed in three different ways, using traditional  category archives, a page template, or with the Project widget in a page you build with Layers.

This page displays all your project posts using the archive layout and is created automatically, but can be deleted or left unlinked if you prefer.

If you need to create a new page using this template at some point, go to PAGESADD NEW and select the Project page template. You only need one page linked to this template.

This template is identical to the Project Cateory archives and does not have a widget area. It will display all projects from all categories with pagination, so is optional if you prefer to build a custom Layout using widgets, described in a minute.

The Project page and category views can be customized just like your single Project Posts in the Customizer.

The Showcase options for your Projects archive give you control over the colors, text alignment and detail visibility of Projects as they appear in category archives or Project page template.

Post Elements & Lightbox

These options allow you to customize the layout and display of elements in your Projects pages in a similar way to the Project widget.

  1. View one of your Project categories, or the page using the Project page template.
  2. Click Customize in the Admin toolbar at the top of the page.
  3. Click on SHOWCASE to expand the options panel
  4. Click on Archive PAGE
  5. Choose a Layout. 
  6. Choose a List Style.
    • Grid will align all posts in a uniform grid with same-height columns conforming to the tallest image in the row and is best used with an image ratio or uniform height images.
    • Masonry will align all posts in a brick-and-mortar style where images of varying heights can lock together dynamically. Best used when your content is mixed.
  7. Choose a number of columns.
    • If 1 column is chosen, your images need to be hi-res, at least 2000px wide if the Full Width layout is used, and 1000px wide for boxed for best results.
  8. Choose the number of posts to show per page. To show all, enter a number higher than the total number of Projects.
  9. Under Title & Excerpt Position, choose Regular  or Overlay. Like the widget, Overlay will show images only, where the text/details aren’t visible until the mouse is hovered over.
  10. Choose an Image Ratio if you are using Grid and would like to force your images into a uniform dimension.
    • Your images need to be larger than 600px wide and your media settings configured for these to work well.
    • Refer back to Showcase Setup for image information if needed.
  11. Choose a text alignment (text aligns left by default)
    • This affects the text in each Project post. To change the alignment of theme elements such as the title, header etc, refer to the Header options panel.
  12. Under Display, uncheck a box to hide any post elements you don’t want displayed:
    • Gutter (space between columns),
    • Media (images or video),
    • Category link,
    • Titles
    • Excerpts (hide these if you haven’t set custom excerpts)
    • Call To Action (buttons)
  13. Uncheck Pagination to hide the more posts links. We recommend ensuring the posts per page is higher than your total post count rather than hiding pagination to ensure new projects you add can be seen
  14. Check Popup Thumbnails To Lightbox to enable the lightbox for images. See notes below on how this works.
    • Showcase uses a built-in lightbox (PrettyPhoto) which will open images on your project archive in a nice overlay when this setting is on
    • Posts with a project gallery will open a slideshow in a nice overlay when this setting is on.
    • At this time there is no support for video lightboxes in archives – if your site contains video content we recommend only enabling lightbox for Project posts.
  15. Under Details, you can customize the meta title, or backspace it out to have no heading above the details meta.
  16. Uncheck a box to hide the IconsClientWebsiteRole or Date labels.
    • To hide the values themselves, edit the project and remove the values from the Details tab for the detail you no longer want on the project.
  17. Uncheck Tags to hide the tag links. If your project has no tags, this option is ignored.

Colors

  1. Colors for elements in the Archives and Project page template are found under the Styling section of the Archive Page options.
  2. Choose your desired colors for the post background, title, excerpt, details and button.
    • You will be able to control the visibility of these elements in the next section.
  3. Choose a color for the category filter. This will turn the filter links into buttons, which use Layers auto-invert technology to automatically adjust the text color.

 

The background style is related to each Project post in the list, not the page itself. For control of theme styling and background colors, check out Layers Pro

The Project page template and archive views do not have widget areas for further customization of content, but you can create custom landing pages for categories or your showcase by using a Layers page with the Project widget either by itself or in combination with other Layers widgets. The Project widget is explained in more detail in the next section.

Projects are linked automatically from the Project widget, Project page, or Project catetgory view. You can also add individual Project posts to a menu:

  1. Go to AppearanceMenus
  2. Select the menu you want to edit or create a new one
  3. On the lower-left you should see a Projects box where you can select posts to add to the menu. If not, click Screen Options at top-right and enable them.
  4. To add a project, select it (or multiple) and click ADD TO MENU
  5. Drag and drop the links in the order you wish
  6. Click SAVE CHANGES when finished