Portfolio Sections

Portfolio Sections

Grid layouts to showcase your work

Portfolio sections are grid layouts that focus on imagery and alignment.

Each of our templates comes with 6 portfolio/grid sections:

  • Blog Grid
  • Project Masonry
  • Project with Captions
  • Products with Captions
  • Project Masonry with Captions

Blog Grid

A complex grid layout with up to 3 columns, perfect for a blog newsletter.
Includes images, article titles, date fields, and excerpts.
On mobile, the columns go full width and stack.

Example

Blog grid

Project Masonry

An image grid with different sizes, great for showing off a portfolio, or even shop products.
It includes a header that goes inline with a hamburger menu, which you can use as a 'project filter' by linking menu items to different pages on your site. On mobile, the columns go full width and stack.

Example

Project masonry grid

Project with Captions

A simple two column, multiple row grid, that includes images and headings.
On mobile, the columns go full width and stack.

Example

Project grid with captions

Products with Captions

Similar to the Project with Captions layout, this is a variation more suited for ecommerce.
On mobile, the columns stay the same as on desktop - but you can easily change that by adjusting the mobile-6 class on their <th> to one of the other mobile column modifiers.

Example

Product grid with captions

Project Masonry with Captions

Similar in concept to the Project Masonry section, but a little less complex and with captions underneath the images.
On mobile, the columns go full width and stack.

Example

Project masonry grid with captions

Customisation

You can easily change the looks of a portfolio section by changing its background, text, spacing, and images.

  • Background — change the value in the bgcolor="" attribute on the parent row table
  • Menus — change colour, alignment, font sizes, all with inline CSS
  • Text and links can be changed with inline CSS
  • For the images, simply change the src and the dimension settings inline.
  • Top/bottom inner spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the spacer <td>