Home/Documentation/Basics/Post Types/Portfolio Post Type/

Portfolio Single Post Pages

Last Update: March 13, 2023

At the core of the Portfolio system in Avada are the Portfolio Single Post Pages. Each portfolio item you create generates a corresponding Portfolio Single Post page. The single post page is the full portfolio post and associated content such as Featured Images, Project Details, Project URL text, Copyright URL text, etc. In this article, we will explain all the relevant sections in a single post page and how to configure it to your preferences.

Portfolio Single Post Screen

The following screenshot shows the various areas of the Portfolio Single Post Page.

  • The Post Editor – You can use either the WordPress editor or the Avada Builder to create your Portfolio Post Content.

  • The Custom Post Type Fields – This is where you add and assign Portfolio Categories, Skills, Tags, and Featured Images to your individual Portfolio posts.

  • The Portfolio tab of the Avada Page Options – Here you can override global options pertaining to the Portfolio Single Post, and further extend the post with embedded videos, and other project details.

The Post Editor

The Post Editor is where you add your page content for your Portfolio posts. Other content comes from the Custom Post Type Fields, and through the Portfolio tab of the Avada Page Options, so depending on the type of Portfolio Post you are making, you might add more or less content via the Editor. Avada allows you to use any editor on the single post pages, from the WordPress Editor, the Gutenberg Editor or the Avada Builder. To enable the Avada Builder, simply click the ‘Avada Builder’ button above the WordPress Content Editor to access the Avada Builder. Any elements and content added to the post is treated exactly like regular page content.

As an example, this portfolio post on the Avada Agency demo has just two paragraphs of dummy text added through the Editor, while this post has a full Avada Builder layout.

The Custom Post Type Fields

There are four fields added to the Portfolio Custom Post Type to allow you to add specific portfolio details to your posts – Portfolio Categories, Skills, Tags, and the Featured Images fields. These are accessed on the right-hand side of the page.

  • Portfolio Categories – Here, you can add and assign Portfolio Categories. Categories are pre-defined taxonomies used to sort and group content into different sections and making it easier for the user to filter and select the relevant portfolio items they prefer to view.

    You can add Categories on the fly by clicking the + Add New Category link at the bottom of the Portfolio Categories section, or you can navigate to Portfolio < Portfolio Categories to set up your Categories independently. To assign Categories, check the box next to the Category name. These Categories are the filters that show above your portfolio items when displaying your Portfolio items with the Portfolio Element. They allow you to filter different types of projects.

    When using the Portfolio Element, you can choose to pull posts by Category or Tag, so think about how you would like your Portfolio Filters to work. Category is the default option.

  • Skills – Here, you can add and assign any associated Skills to the post. Each skills tag is a meta link that your viewer can click to view similar types of portfolio posts.

    You can add Skills on the fly by clicking the + Add New Skill link at the bottom of the Skills section, or you can navigate to Portfolio < Skills to set up your Skills independently. To assign skills to the post, check the box next to the Skill.

  • Tags – Here you can add Tags to your post. Type the name of the tag in the field and hit enter or enter multiple tags by separating tags with commas. The Tags are the same as the tags you find in blog posts, but these tags will only show up on Portfolio items.

    When using the Portfolio Element, either Tags or Categories can be used to pull the portfolio posts, which then creates the Filters at the top of the Portfolio.

    The Categories, Skills, and Tags that are added to the individual portfolio posts are also used as a way of filtering content in the Portfolio Archive pages. Read the Portfolio Archives & Filters page for more information on that.

  • Featured Images – Here you can add a Featured Image to the post. To do this, click the first Featured Image Box, select an image and click ‘Set Featured Image’. For a slideshow, insert more than one Featured Image and each image will be a slide in the slideshow.

    By default you can upload 5 featured images per post, however, that can be changed globally by going to Options > Slideshows > Post Slideshow Images and increasing/decreasing the number (min. 1 – max. 30).

    For a video post, paste the iFrame embed from either Youtube or Vimeo into the Video Embed Code field, found in the Portfolio tab of the Avada Page Options. See the Avada Page Options section below, for more details on that.

Avada Page Options > Portfolio Tab

The Portfolio Tab of the Avada Global Options is a very important part of the Portfolio post type. Here you can accept or override the global Portfolio Single Post Options on your individual post, and there are extra fields to add further information to your Portfolio items, such as the Video Embed field, and the Project and Copyright URL and Text fields.

Please see the Portfolio Post Options doc for the full range of options. Below, we will look at some of the less understood post options available.

Selecting The Column Width Layout

Each Portfolio post you create allows you to set the width of the Featured Image’s column. This option is called the ‘Width (Content Columns for Featured Image)’ option and you can set it to be Full Width or Half Width. You can also set the entire Portfolio post to display 100% of the browser width.

  • Default – This is the global value that is set in Avada > Options > Portfolio > Portfolio Single Post > Featured Image Column Size.

  • Half Width – This option lets you set the Featured Image column on the left side of the screen, and the Project Description and Details column on the right side.
  • Full Width – This option lets you set the Featured Image to display full width on top of the page, and the Project Description and Details below it in two columns.
  • 100% Width Page – This option lets you display the entire Portfolio Single Post page in 100% of the browser width.

Featured Image Dimensions

The Featured Image you upload to each post will show the full image ratio on the single post page by default. The width of the featured image will be set to the site width or the column width if you’re using a Half Width layout and the height is set to auto so it displays the original height. In addition to this, you can set a custom featured image width and height to control the size of the image. This is useful in specific situations when you need a custom featured image size.

The ‘Featured Image Dimensions’ option (Image width and height) is located in the Avada Page Options > Portfolio section of the posts page. Values are set in pixels or percentage, ex: 100% or 100px. Or Use “auto” for automatic resizing if you added either width or height.

Featured Videos

You can also upload a Youtube or a Vimeo video to be displayed in the Featured Image section of the portfolio post. You can even have a combination of videos and images, displayed as a slideshow on the portfolio single post page. Read below to learn how to upload a Youtube or a Vimeo video.

How To Upload A Youtube/Vimeo Video

Step 1 – Go to the ‘Portfolio’ tab on your WordPress admin sidebar and clicking ‘Add New’ to add a new post.

Step 2 – Give your portfolio post a title and add your content as normal.

Step 3 – In the Avada Page Options box, switch to the ‘Portfolio’ tab, then find the ‘Video Embed Code’ option.

Step 4 – Enter the Youtube or Vimeo embed code into the provided field. You can find the embed code by clicking the ‘Embed’ option on Youtube, and the ‘Share’ option on Vimeo.

Step 5 – Click ‘Save Draft’ or ‘Publish’.

Project Description Title and Project Description

The Project Description section is any content you insert in the WordPress Content Editor. This is usually the text description of the project, but it can also contain any of our elements. This is where you can put any descriptive content detailing your project. The Project Title Description option on the Portfolio tab allows you to add the Project Title automatically at the top of the content added in the Editor.

Project Details

The Show Project Details option shows the meta information relating to the project. For Full-Width layouts, the Project Details are placed in a sidebar next to the Project Description. For Half-Width layouts, they’re displayed below the Project Description.

The information shown in the Project Details consists of the Project categories, Skills and Tags added to each Portfolio Post, as well as the Project URL & URL Text, and the Copyright URL & URL Text.

  • Project URL & URL Text – This option lets you insert a Custom URL and text for the project. This is perfect for when you have an external link to show the viewer, or an internal link to another page or post of your site.
  • Copyright URL & URL Text – This option lets you insert a Custom URL and text for the Project Copyright. This can be useful for a project that might have been a collaboration with another person or company.

The key to understanding the Portfolio Single Post page is to understand how the various areas of the page contribute to the end result, and how you can use the Portfolio tab of the Avada Page Options to override the Single Post Global Options set in the Avada Global Options.

Once you have your Portfolio items created, you can think about how to display the Portfolio as a whole, which is done with the Portfolio Element. But before we do that, let’s have a deeper look at how the Global and Local Options affect the various parts of the Portfolio system.

In this article