Portfolio

A Portfolio project. Each project is one post with its own images, client details and layout, and the Portfolio blocks list them.

You will find it in the WordPress admin menu as Portfolio, stored as canvas_portfolio.

What You Get

These decide where items appear and what you can do with them:

One item is called a Portfolio Item.
Items have their own page on the front end.
There is a listing page for all items.
Item addresses start with /projects/.
Editor features: autosave, comments, editor, excerpt, thumbnail, title.
Grouped by: Portfolio Categories (canvas_portfolio_category).

Demo

A panel on the Portfolio Item edit screen, holding these settings:

Demo

Load this demo's stylesheet, fonts and scripts on this content, and add its body class. Leave as None for content that is not part of a demo.
Demo Role

Marks this content as the demo's cart, checkout or other named piece, so the demo can link to it without storing an ID. Free-form; used with the Demo above.

Shown when Demo is set

Header Settings

A panel on the Portfolio Item edit screen, holding these settings:

Built Header

Override the built header (Header Container block) shown on this page. Leave as Inherit to use the global default.
Header Layout
Header Style

The style tier above Header Layout. Full Bordered gives the header its full-width bottom rule (the full-header class); Plain drops it. Leave as Global Default to follow Theme Options.
Side Header Closes on Scroll

Applies to the open side-header layouts: the panel folds away as the visitor scrolls instead of staying open.
Custom Header Height

Height of the header bar on this page when Header Size is Custom, written to the theme's --cnvs-header-height token. Any CSS length, e.g. 40px. Empty follows Theme Options.
Floating Header Background

Background of the floating header bar on this page, written to the theme's --cnvs-header-floating-bg token. Any CSS colour, e.g. rgba(var(--cnvs-invert-contrast-rgb), 0.85). Empty keeps the theme default.
Floating Header Top Offset

Gap above the floating header bar on this page, written to the theme's --cnvs-header-floating-top-offset token. Any CSS length, e.g. 40px. Empty keeps the theme default.
Menu Font Size

Top-level menu label size on this page, written to the theme's --cnvs-primary-menu-font-size token. Any CSS length, e.g. .925rem. Empty follows Theme Options.
Menu Item Horizontal Padding

Space either side of each top-level label on this page, written to the theme's --cnvs-primary-menu-padding-x token. Any CSS length, e.g. 10px. Empty follows Theme Options.
Header Icon Size

Size of the cart / search / social icons in the bar on this page. Any CSS length, e.g. 1.5rem. Empty keeps the theme default.
Dropdown Corner Radius

Rounds the corners of a dropdown or mega-menu panel as it opens, on this page. Any CSS length, e.g. 10px. Empty leaves the panels square.
Dropdown Top Border

Rule drawn along the top of every dropdown and mega-menu panel on this page. Any CSS border shorthand, e.g. 1px solid rgba(var(--cnvs-contrast-rgb), .1). Empty keeps the theme default.
Bordered Menu Distribution

With the Full Bordered header style, whether top-level items keep their natural widths or stretch to an equal share with a divider each, on this page.
Menu Breakpoint (px)

Viewport width at which the expanded desktop menu engages on this page; below it the mobile trigger takes over. Empty follows Theme Options.
Top Bar
Top Bar Color Scheme

Dark adds the "dark" class to the top bar on this page only. Overrides both the site-wide option and the bar's own setting, so one top bar can be light on the front page and dark elsewhere.
Force transparent header on this page
Color Scheme

Dark adds the "dark" class to the header on this page only.
Header Size

Header height on this page. "Default" removes the site-wide size class; "Custom" uses the Custom Header Height from Theme Options.
Responsive State Classes

Classes swapped onto the header below the mobile menu breakpoint. Space separated.
Extra Header Classes

Additional classes on the header element. Space separated.
Header Classes (exact list)

The complete class list for this page's header element, written exactly as given. Replaces the classes the settings above compose, including their order. Leave empty to compose them from the settings.
Menu Style

Top-level item style on this page.
Menu Item Spacing

How space between top-level items is created on this page.
Dropdown Skin

Dropdown / mega-menu treatment on this page.
Dropdown Arrow Icon

Caret shown next to items that have a sub-menu, on this page.
Item Sub-Titles

Show each top-level item's Description (Appearance → Menus) beneath its label on this page.
Open Dropdowns on Click

Open sub-menus on click instead of hover on this page.
Sticky Header

Keep the header visible while scrolling this page. Leave on Global Default to follow Theme Options.
Sticky Behavior

How the sticky header behaves on this page.

Shown when Sticky Header is not "0".
Sticky Shrink

Disable to keep the sticky header at its full height instead of shrinking on scroll.

Shown when Sticky Header is not "0".
Sticky on Mobile

Keep the header pinned below the mobile menu breakpoint too. Off follows the global behaviour.

Shown when Sticky Header is not "0".
Sticky Offset

Scroll position at which the header becomes sticky: a pixel value, or "full" for one full viewport.

Shown when Sticky Header is not "0".
Sticky Offset - Reduce By

Engage the sticky state this many pixels before the fold, or "auto" for the header's own height.

Shown when Sticky Header is not "0" and Sticky Offset is "full".
Sticky State Classes

Classes swapped onto the header while it is sticky. Space separated.

Shown when Sticky Header is not "0".
Sticky Header Height

Height the header bar takes once pinned, written to the theme's --cnvs-sticky-header-height token. Any CSS length. Empty follows Theme Options.

Shown when Sticky Header is not "0".

Page Layout

A panel on the Portfolio Item edit screen, holding these settings:

Body Classes

Extra classes on the page's element, letting this page opt into a layout mode the theme already styles. Space separated.
Wrapper Classes

Utility classes on the page's outermost wrapper, which is where a full-window texture or clipping treatment belongs. Space separated.
Wrapper Custom CSS

Inline CSS declarations for that outermost wrapper. Filtered against the allowed-property list on output.
Content Wrap Classes

Utility classes on the content wrapper: spacing and overflow for full-bleed sections. Space separated.
Content Section Classes

Utility classes on the page's content section itself: a page-wide background tint, for example. Space separated.
Content Wrap Custom CSS

Inline CSS declarations for the content wrapper. Filtered against the allowed-property list on output.
Content Section Custom CSS

Inline CSS declarations for the content section itself: a page-wide background or top border, for example. Filtered against the allowed-property list on output.
Page Custom CSS

CSS rules added to this page only, in a tag after the site-wide Custom CSS so these rules win. Do not include tags.
Page Loader HTML

Preloader markup for this page only, overriding the site-wide page-transition loader. Leave empty to inherit.
Custom Cursor

Force the custom cursor on or off for this page only. The cursor is a whole-document effect, so a page that needs the native pointer can opt out without changing the site setting.

Page Title Settings

A panel on the Portfolio Item edit screen, holding these settings:

Enable Page Title
Style
Template

Shown when Style is "template".
Custom Page Title

Shown when Style is "custom".
Alignment

Shown when Style is empty or "default" or "mini".
Background

Shown when Style is empty or "default" or "mini".
Include Header

Shown when Style is empty or "default" or "mini" and Background is "image" or "parallax" or "pattern" or "video".
Color Scheme

Shown when Style is not "custom".
Custom Title
Custom Subtitle
Show Subtitle

Hides the subtitle line on this page only.
Show Breadcrumbs
Breadcrumb Label

Shorter name for this page inside the breadcrumb trail.

Shown when Show Breadcrumbs is not "0".
Breadcrumb Parents

Section crumbs shown between Home and this page.

Shown when Show Breadcrumbs is not "0".
Label
URL

Leave empty to render the crumb as plain text.
Show Entry Meta

Author / date / category line, on layouts that render one.
Background Color
Background Image
Text Color
Vertical Padding
Row Classes

Utility classes on the title row (spacing, and how the content and breadcrumbs align).

Page Title Buttons

A panel on the Portfolio Item edit screen, holding these settings:

Buttons

Call-to-action buttons shown under the title. Leave a button's URL empty to render a scroll trigger instead of a link.
Label

Wording on this button.
URL

Leave empty to render a scroll trigger instead of a link.
Scroll To

Which section of the page this button glides down to. Name the section by its id, for example #content.
Scroll Offset

How many pixels to stop short of that section, so a pinned header does not cover its first line.
Icon

Icon shown with the label, such as an arrow on a button that scrolls down.
Icon Position

Which side of the label the icon sits on.
Extra Classes

Classes on this one button, so it can look different from the others in the row.
Open in New Tab

Opens the link in a new browser tab. Use it for a destination that leaves your site.
Row Classes

Utility classes on the button row wrapper.
Button Classes

Base classes shared by every button on this page.
Button Row Position

Move the buttons out of the title column so they sit at the far side of the title row.

Page Title - Layout & Media

A panel on the Portfolio Item edit screen, holding these settings:

Section Classes

Extra classes on the page-title section: the colour scheme and vertical rhythm the design uses. Space separated.
Heading Classes

Utility classes on the title element. Space separated.
Heading Custom CSS

Inline CSS declarations for the title element. Filtered against the allowed-property list on output.
Heading Wrapper

Element wrapped around the title text by the page-title template layouts, so the display type can be styled without restyling every H1.
Heading Wrapper Classes

Utility classes on that wrapper. Space separated.
Heading Animation

Entrance animation played on the title as it scrolls into view.
Heading Animation Delay (ms)

Shown when Heading Animation is set
Badge Classes

Utility classes on the badge line the template layouts render above the title. Leave empty for the layout's own pill styling.
Subtitle Classes

Utility classes on the subtitle element. Space separated.
Subtitle Custom CSS

Inline CSS declarations for the subtitle element.
Subtitle Animation

Entrance animation played on the subtitle.
Subtitle Animation Delay (ms)

Shown when Subtitle Animation is set
Subtitle Position

Move the subtitle above the title as a small eyebrow line.
Breadcrumbs Position

Where the breadcrumb trail sits inside the title row.
Home Crumb

Show the first crumb as a house icon instead of the word Home.
Home Icon Classes

Icon class used for the Home crumb.

Shown when Home Crumb is "icon"
Separator

Character drawn between crumbs. Leave empty for the stylesheet default.
Crumb Spacing

Horizontal space around each crumb, e.g. 1rem.
Breadcrumb Wrapper Classes

Utility classes on the breadcrumb navigation element: visibility and alignment. Space separated.
Breadcrumb List Classes

Utility classes on the crumb list itself, usually its vertical margins. Space separated.
Badge Text

Shown when canvas_page_title_template is "featured" or "boxes"
Primary Button Label

Shown when canvas_page_title_template is "featured"
Primary Button URL

Shown when canvas_page_title_template is "featured"
Secondary Button Label

Shown when canvas_page_title_template is "featured"
Primary Button Icon

Shown when canvas_page_title_template is "featured"
Secondary Button URL

Shown when canvas_page_title_template is "featured"
Secondary Button Icon

Shown when canvas_page_title_template is "featured"
Button Layout

Where the two buttons sit relative to the title and description.

Shown when canvas_page_title_template is "featured"
Support Boxes

Cards shown beneath the title by the Boxes layout.

Shown when canvas_page_title_template is "boxes"
Icon
Title
Description
Link URL
Link Text
Record

The post or product whose date, author, price and rating the Blog and Shop layouts show. Leave empty to use the page being viewed.

Shown when canvas_page_title_template is "blog" or "shop"
Video File

An uploaded video. Takes precedence over the Video URL.

Shown when canvas_page_title_background is "video"
Video URL

An externally hosted video file, used when no Video File is chosen.

Shown when canvas_page_title_background is "video"
Alternate Video Format

A second encoding of the same clip (WebM alongside MP4) offered to browsers that prefer it.

Shown when canvas_page_title_background is "video"
Video Poster

Still shown before the video plays.

Shown when canvas_page_title_background is "video"
Overlay Opacity

Darkening layer over the video, from 0 (none) to 1 (solid).

Shown when canvas_page_title_background is "video"
Video Overlay

Stylesheet default drops the inline tint so the overlay takes its colour from the theme instead of the opacity above.

Shown when canvas_page_title_background is "video"
Image Overlay

Colour or gradient painted over the background image so light text stays legible. Leave empty for no overlay.

Shown when canvas_page_title_background is "image" or "parallax" or "pattern"
Map Address

Shown when canvas_page_title_template is "gmap"
Map Zoom

Shown when canvas_page_title_template is "gmap"
Compact Map

Show the map as a narrow panel beside the title instead of filling the whole band.

Shown when canvas_page_title_template is "gmap"
Marker Info Window

Content shown in the bubble that opens when the map marker is clicked.

Shown when canvas_page_title_template is "gmap"
Marker Icon

Custom pin image. Leave empty for the default Google marker.

Shown when canvas_page_title_template is "gmap"
Map Styles

A Google Maps style array (JSON) recolouring the map to match the site.

Shown when canvas_page_title_template is "gmap"
Stick to the Top

Keep the title bar in view as the page scrolls.
Sticky Offset

Distance from the top of the viewport the pinned bar rests at: normally the shrunk header's height.

Shown when Stick to the Top is "1"
Stick From

Screen sizes the bar sticks on. Narrower screens scroll it away with the content.

Shown when Stick to the Top is "1"

Portfolio Settings

A panel on the Portfolio Item edit screen, holding these settings:

Client
Created By

Name shown in the "Created by" row. Empty credits the project's WordPress author.
Completed Date
Skills / Tags
Project URL
Video URL

Shown by the Portfolio Image block in Video mode. YouTube, Vimeo, or Dailymotion.
Project Gallery

Extra images for this project, used by the Portfolio Image block in Gallery mode and by lightbox galleries on grids. Chosen here rather than by uploading to the project, so one image can belong to several projects.
Cover Image

Wide hero crop used by single templates instead of the featured image.
Lightbox Image

Opened at full size by the grid card's enlarge trigger. Leave empty to open the featured image.
Card Slider Shots

Two or more shots turn this project's grid card into a slider that cycles through them.
Card Slider Speed (ms)

How long one transition takes. Empty uses the grid default.
Card Slider Pause (ms)

How long each shot is held. Empty uses the grid default.
Card Slider Animation
Card Video

Self-hosted clip that plays while the pointer rests on this project's grid card.
Card Video Poster

Still frame shown before the card video plays.
Card Media Height

Height utility class for this project's card media box, e.g. vh-60.
Wide Card

This project takes the wider column in a mixed-width grid. The grid block decides how wide that is.
Card Shape

Shape of this project's grid card. "Image's own shape" crops nothing and lets the picture set the height. Read only by grids whose Card Shape is set to "Each project's own shape".
Primary Category

Which of this project's categories its card shows. Defaults to the first one.

Slider

A panel on the Portfolio Item edit screen, holding these settings:

Select Slider

Stored Values

You need these only when reading or writing a Portfolio Item in code:

_canvas_portfolio_byline

Name credited in the project's "Created by" row.
_canvas_portfolio_card_aspect

Shape of this project's grid card: a ratio token such as 8x3. Read only by grids set to use per-project card shapes.
_canvas_portfolio_card_images

Grid-card slider shots: comma-separated attachment IDs.
_canvas_portfolio_card_slider_animation

Grid-card slider transition style: fade or slide.
_canvas_portfolio_card_slider_pause

Grid-card slider hold time in milliseconds.
_canvas_portfolio_card_slider_speed

Grid-card slider transition duration in milliseconds.
_canvas_portfolio_card_wide

This project takes the wider column in a mixed-width grid.
_canvas_portfolio_client

Portfolio client name.
_canvas_portfolio_columns

Archive column count override.
_canvas_portfolio_cover

Wide cover image used by single templates.
_canvas_portfolio_date

Portfolio project date.
_canvas_portfolio_gallery

Project gallery: comma-separated attachment IDs.
_canvas_portfolio_layout

Archive layout override.
_canvas_portfolio_media_height

Grid-card media height utility class (e.g. vh-60).
_canvas_portfolio_primary_category

Primary category slug used by the card eyebrow.
_canvas_portfolio_skills

Portfolio skills / services used.
_canvas_portfolio_url

Portfolio project URL.
_canvas_portfolio_video_file

Self-hosted card video attachment ID.
_canvas_portfolio_video_poster

Poster image attachment ID for the card video.

Other Canvas content types: Copyrights, Events, Footers, Forms, Headers, Heroes.

Was this page helpful?