You can create a custom showcase by starting with a preset Showcase layout under Layers → Add New Page, or create one from scratch. The following steps walk you through creating a new page to give you the best overview of how to setup the widget.

1. Go to Pages → Add New
2. Give your page a Title
3. Choose the Layers Template from the Page Template drop-down in the editor sidebar.
   • 
4. Click Publish
5. Click  Edit Layout.

1. Expand the Edit Layout panel
2. Click the Body panel for your page to expand it
3. Click +Add a Widget and choose the Projects widget

When you add a new Projects widget, or if you have created a page using one of the Preset layouts, the widget will display with some default settings.

Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

This section sets the widget content’s width. The widget itself will always be full width to the page to allow for custom backgrounds.

• Boxed will limit the width of the widget content (the columns or posts), title and description to around 1040px and center it.
• Full Width will expand the widget content to the width of the page. This also makes each column wider.

This section controls the visibility of all the elements your posts include by default.

TITLE & EXCERPT POSITION

• Regular places the post title and excerpt below the image
• Overlay places the post title and project details on top of the image when the mouse hovers over it. This option is best used with custom excerpts, or excerpts disabled:

Show Project Filter

On by default. When checked, this option displays your Project category links at the top of the post list in alphabetical order. These enable your visitors to filter posts shown in the widget by category without leaving the page.

Show Featured Images

On by default. Uncheck this option to hide the featured images or video attached to your posts. This media will still display on the post itself.

Show Project Titles

On by default. Uncheck this option to hide the post title.

Show Post Excerpts

This option is only available when using the Regular style to keep long excerpts from breaking Overlays.

On by default. Uncheck this option to hide the excerpt.

Excerpt Length

If Show Post Excerpts is checked, enter your desired character count here (200 by default). For best results add custom excerpts to your Projects to avoid your content being cut off with an elipses.

Show “View Project” Buttons

On by default. Uncheck this option to hide the View Project button.

“View Project” Text

If Show “View Project” Buttons is checked, you may customize the button text here

Project Detail Label

If using the Regular display, you can customize the Project Details label here, or backspace it out to have no heading above the details meta.

• Uncheck a box to hide the Icons, Client, Website, Role or Date labels.
• Uncheck Tags to hide the tag links. If your project has no tags, this option is ignored.

Show Pagination

On by default. When checked,  this option displays pagination below the posts when there are more posts than your posts per page setting. This is best used when the filter is disabled and you are using the widget to display a single category. To ensure all posts are displayed all the time with the filter enabled, simply ensure the Number of Items to Show option is set oa  number higher than your total projects.

Popup Projects to Lightbox

Showcase uses a built-in lightbox (PrettyPhoto) which will open your project Featured Image and Project Gallery images in a nice overlay when this option is checked.

COLUMNS

Choose the number of columns for your layout, to a maximum of 6.

• The number of columns you choose combined with the Layout will determine how large featured images in your posts need to be to fill the column space.
• For best results, use images at least 1000px wide.

BACKGROUND COLOR

Click Select Color to bring up the color wheel to choose a color for the post columns, if desired. You may optionally enter a color manually using its HEX code.

• Background colors will automatically convert the post content text color if you have not set a specific content color using the Showcase Styling options. Dark background colors will have white text, and light colors will have black text.

GUTTER

This option controls spacing between posts in the grid.

Uncheck the gutter option to remove the spacing.

The button option allows you to customize the color and size of the View Project buttons. Skip if you disabled buttons in the Display options.

BUTTON SIZE

Choose from Small, Medium or Large – changes the text size and padding of the button

BACKGROUND COLOR

Click Select Color to bring up the color wheel to choose a color for the post columns, if desired. You may optionally enter a color manually using its HEX code.

• The button text will change to light or dark automatically depending on your chosen button color.
• The button will lighten automatically on mouse-over (hover).

• Grid will arrange your columns in a uniform grid with an equal height on all column blocks. This is best if your images are all a uniform height or you use a specific image ratio.
  • When using 1 column, ensure Grid is set.
• Masonry allows each post block to fit together at various heights (such as Pinterest) and is ideal if you want your images to use their original dimensions

Image Ratio options control how your featured images are scaled or cropped.

The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 960px wide.

• Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center(boxed layout) or 1000px wide (full width). The original height is maintained.
• Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center (boxed layout) or 1000px wide (full width).
• Square: crops your image to 480×480 from center and scales responsively(boxed) or 1000px by 1000px scaled responsively (full width).
• Original: Uses the original image, scaled responsively to fit the layout. For boxed layouts, this is a max of 630px wide, for Full Width is 1000px wide.
• Circle: Sets a radius on your image.  Do not use with video content without featured images.

The background option affects the widget background and will span full width of the page.

BACKGROUND COLOR

Click SELECT COLOR to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

• Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.

BACKROUND IMAGE

Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

• Textures, photos and images without embedded text are best.
• Full-size images  should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
• Tiles or repeatable images can be any size you want.

When you set a background image, the following settings will appear:

BACKGROUND REPEAT

Enabled if a Background Image is selected. Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

BACKGROUND POSITION

This option aligns your image and can help you adjust the placement of the subject of your background if needed.

Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

Stretch

Check this option if you want your image to always fill the widget background at all screen sizes.

Darken

Check this option to add an overlay to your image that darkens it. This is helpful on busy backgrounds, or images with high contrast and may help your content stand out better.

TITLE

Enter a Title for the widget section, if desired, or backspace the default title to remove it.

Click the button to choose your alignment, size and color:

Text Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified.

Text Size

Choose from Small, Medium or Large

Each size option is pre-configured with optimal balance, line height and font-size combinations and will vary slightly depending on your font choice in Site Settings, or custom styling added through a Style Kit or Child Theme.

Text Color

Depending on the background color of the widget, your text will be black or white by default, but can be customized here.

Click on SELECT COLOR  to expand the color wheel and click to select a color from the palette or enter an HTML hex value.

DESCRIPTION

The Description field, containing “Browse through our finest work, created by a team of incredibly talented people.” by default, will display just below the widget title and above the widget content. Clicking into the description will activate the rich text editor to aid you in formatting your content, and supports basic HTML input via the Code </>view, much like the WordPress post editor Text tab.

For best results, limit the description to 1-3 sentences to introduce the content in this section of your layout, or backspace the default text for no description.

• You cannot put scripts into this field such as javascript snippets
• You should not paste text/html from Word or other text editors into this field or it may carry over unpredictable code that causes formatting issues.
• Shortcodes are OK, but the element pulled in may not jive well with the widget limitations and may require Advanced CSS styling.

CONTENT EDITOR TOOLBAR

These menus allow you to filter the posts the widget displays.

CATEGORY TO DISPLAY

Leave this set to All to show all project posts, or select a specific category. Note that if the Project Filter is enabled, visitors will be able to filter the list to show all or other categories regardless of this setting, which only designates what is shown by default when the page is first loaded.

NUMBER OF ITEMS TO SHOW

Choose how many posts to pull in. For best results, choose a multiple of the number of columns you chose in the design bar. For example, if you chose 3 columns, you should set this to 3,6,9, or 12 etc.

• If you have sticky posts, increase this by the number of stickies shown.
• To show all posts, select a number higher than your total number of Projects.

SORT BY

Choose how to sort your posts, if desired. By default they are listed in chronological order with the newest post first/left to right.

Custom Order is achieved by numbering your posts in the Order field of the post editor or Quick Edit options in the Projects list admin.

See How to Manually Order Posts for detailed steps.

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes, Margins and Padding 

Adding Other Widgets

You may add multiple Project widgets set to a specific category, or combine with other widgets such as Sliders or Content Widgets. Follow these links to view tutorials for how to use these widgets to display Projects in unique and truly custom ways.

Save your layout any time by clicking SAVE & PUBLISH

Each Save will create a page revision (up to 5) you can restore if you made a mistake or want to revert to a previous version.