Tutorial

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!

Posted by

7 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?

    Reply

    • 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!

      Reply

  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

    Reply

  3. Hi,
    I only have uncathegorized under the portfolio cathegory and there is not any field underneath to fill. Fo rexample, I chose 6 posts and 3 columns but where I can acutally uplaod the content of the posts and pictures.
    Thanks

    Reply

    • Hello,

      You will need to create a post for each portfolio item. Add your portfolio image as the featured image for the post, and apply a post category (like “portfolio”) for each post. Then, once you have added multiple portfolio posts, they will display in your portfolio widget.

      Thanks!

      Reply

  4. I want to hide the featured image at the top of the post. But when I hide featured image, the post no longer displays in portfolio view anymore (both 1.portfolio widget page view and 2.category view). How to fix this? I want the post and its thumbnail image still display in portfolio view

    Thanks a lot

    Reply

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.