Create A Portfolio Page

The Portfolio Widget section displays a portfolio of posts from a selected category or the Jetpack custom post type. It’s like an art gallery for your website! Use it to showcase your projects, artwork, photography — or anything else!

Here is an example of an Organic Portfolio section.

After installing and activating the Organic Builder Widgets plugin, you’ll be able to add a Portfolio section by following simple steps within the Customizer:

  1. Apply the Organic Custom page template to your page.
  2. Update or Publish the page.
  3. Click the Customize Page button.
  4. Click the + Add A Widget button.
  5. Select the Organic Portfolio widget.
  6. Give your Portfolio section a title and description.
  7. Select a Portfolio Category.
  8. Complete the remaining fields, as desired (Max Number Of Posts, Number Of Columns, and Section Background Options).

Using Builder Widgets Pro, you can create filterable portfolios, change the image style, layout, fonts, colors, and more!

3 Comments on “Create A Portfolio Page

  1. I love this widget, but the featured image on my website ends up pixelated and distorted. Any way to have the featured image in the portfolio gallery, but not on the actual project page?

    • Hi John,

      The single portfolio isn’t really built to display without the featured image. If you upload a higher quality image with a width of about 1800px, it should display better on the single portfolio. Have you tried doing this already? Otherwise you could change which image loads in each single portfolio with CSS like this:

      #post-172 .feature-img.banner-img {
      background-image: url(image-url) !important;
      }

      You’ll need to first upload the image to your media library and find the URL, then you can target the specific post using the ID for that post. This way a different image will load as the background banner for your portfolio post. If you wanted to use the same image for all portfolio posts you would use something like this instead:

      .jetpack-portfolio-template-default .feature-img.banner-img {
      background-image: url(image-url) !important;
      }

      Add this to the Additional CSS section of the customizer.

      Thanks!

  2. Great article and guide, thanks for sharing such useful tips! A decent portfolio must cover a lot of bases. Apart from actually showcasing your work, the text alongside each piece must give the right level of context. Not only that, but it must also be designed well enough to catch people’s attention without shifting focus away from the work itself. Here’s an article covering the same topic and it would be great to have your feedback 🙂 https://goo.gl/AZpd6B

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.