Portfolio Post Type – Avada Website Builder

Creating Custom Portfolio Layouts with Avada Layouts

Geoff — Mon, 13 Apr 2020 02:42:44 +0000

With Avada Layouts, you can easily create fully customized Portfolio Layouts for your Avada website, using the full design power of the Avada Builder. The two Portfolio related areas you can create custom Layouts for are the Single Portfolio Page, and the Archives page. The changes you make to a Portfolio Post Layout could be as little as adding a Custom Page Title Bar section, or it might be a reworked Header, Content Section, or Footer, or any combination of the four.

With the help of Layout Elements, and with the help of Dynamic Content within normal Design Elements, you can build virtually any layout you can think of, using the full power of the Avada Builder. And using the power of Conditional Layouts, you can specify exactly when and where your Layout will be used. You could make a Custom Layout for ALL single portfolio pages, just for a single portfolio post, or category etc, or you could also just exclude a single post of category. The Conditions can be as simple or as complex as you need them to be.

The Avada Layouts Interface

You find Avada Layouts at Avada > Layouts. This interface is where you both create and manage your Layouts and Layout Sections in Avada. Initially, there is just a Global Layout, and by default this is empty, with no attached Layout Sections, as you can see below.

Technically, a Custom Portfolio Post Layout is a Conditional Layout that only shows on Single Portfolio Pages. So the first step is to create a Layout, and then decide which Layout Sections you want to customize for your Single Portfolio Posts…

See the Introducing Avada Layouts doc for a general overview of the Avada Layouts, and Understanding Layout and Layout Sections for more information on the difference between these two component parts.

Creating A Custom Layout

For this document, I’m going to recreate the Single Portfolio Layout as created on the Restaurant Demo, and seen in the video above.

Creating the Layout is done on the Layout Builder page, by simply adding a name (in this case, perhaps Single Portfolio would be most appropriate) and then clicking on Create New Layout, as can be seen below.

Creating Custom Layout Sections

The page reloads and the new layout is added to the Layout Builder. At this point is has no conditions set, and no Custom Layout Sections added. Now we have the Layout, we can begin to create any Layout Sections that we will add to it. In this example, we will add a Page Title Bar Layout Section, a Content Layout Section, and a Footer Layout Section.

You can create Custom Layout Sections in one of two ways. You can head to the Layout Section Builder link at Layouts > Layout Section Builder from the Avada Dashboard, and create one from there, as seen below.

Alternatively, you can create one by clicking on the corresponding Layout Section in the existing Layout, and create one from there. The first method just creates a Layout Section, while the second method attaches it to a Layout at the same time.

To use the second method, I would click on the Select Page Title Bar section of the Single Post Layout, and in the following dialog, under the New Section tab, I would give it a name (Single Portfolio PTB would be appropriate) and click on Create New Section.

This creates and connects the Layout Section to the Layout, but at this point, it is still empty. If we mouse over the Layout Section on the Layout, as shown below, we can then click on the edit icon to design and build our Layout Section.

Editing a Custom Layout Section

Now we come to the Avada Builder, and here we can create our Custom Layout Sections. You can do this in either Avada Builder or Avada Live. Please refer to Creating Layout Section Content for more information on this, but in short, you can build anything you want here.

Anything you can build in the Avada Builder can constitute the content of your Layout Sections. You can have multiple columns, background images, dynamic data… anything. The freedom this gives is enormous. The Layout Section is literally that – a section where can create the Layout. The content itself comes from the Builder, and what you can do is only limited by your imagination.

The example below is relatively simple. The end result shows a Title, a dynamic Title below this that pulls the Portfolio Category Term, and the container itself has a background gradient and dynamic featured image, as well as a couple of Separators for control over various screen sizes. For more information on how this specific Page Title Bar was constructed, please watch the video at the top of the page.

Adding Other Layout Sections

For this example, we also want to add another two Layout Sections, a Content Layout Section and a Footer Layout Section. We go about this in the same way as we did with the Page Title Bar Layout Section.

First, we create the Layout Section, and then we edit it. With the Content Layout Section, the Layout Section Elements become available. See the Avada Design Elements vs. Layout Section Elements doc and the How To Use The Layout Section Elements Video for more info on these special Elements.

For the Restaurant Demo Content Layout Section, just the Content Element was used, as well as an Image Element with dynamic content. See the Content Layout Section below.

For the Footer Layout Section, just a few columns with some icons were added to the standard footer. See this Layout Section below.

Setting Conditions For The Layout

With any Conditional Layout, the last thing you need to do is to set the conditions of the layout. This is best done last, because as soon as you set the conditions, the layout is active, and if you do this after creating the Layout Sections, but before editing them, the pages displayed that fit the conditions would be empty in those sections.

To add a condition, or conditions, simply mouse over the bottom of the Layout, and choose Add A Condition. This brings up the Layout Conditions Dialog, as seen below. Please see Understanding Conditional Layouts for more information on Conditional Layouts, but for this example, as we want this layout to display on Single Portfolio Posts, we just need to go to Portfolio and select the All Portfolio condition.

Example Of The Layout

See below for a front end example of a full single Portfolio post from the Restaurant Prebuilt Website, showing all three Layout Sections that were added. First is the Custom Page Title Bar Layout Section, then the Content Layout Section, and finally the Footer Layout Section. See this portfolio post on the Restaurant website for a live example of this Layout.

Portfolio Archives Layout

You might also want to create a Custom Layout for your Portfolio Archives pages. Just remember, that a Custom Layout can include as little or as much as you want.

You may just want to add a Custom Page Title Bar, or Custom Footer, but you might also want to customize the Content Layout Section of the page. For this, there is the Archive Element, one of the Layout Elements, as well as the other Layout Section and normal design elements. See the How To Use The Layout Elements video for more info on this.

If you don’t set a Custom Content Layout Section, your Archives layout will be controlled from the Portfolio Archives Layout Options, found under the Options > General Portfolio tab.

Conclusion

With Avada Layouts, creating a custom Layout for your Single Portfolio Posts or Portfolio Archive pages is not only a reality, but rather, an unlimited possibility. You can use the power of the Avada Builder to create almost any Layout you can concieve of, and with the power of Conditional Layouts, have it display on all portfolio posts, a specific category, or even just a single item.

Avda Layouts is a game changer in the true sense of the word. It enables such freedom of design, and gives such flexibility in deployment, that building your website layout will simply never be the same again.

Portfolio Post Options

Geoff — Tue, 28 May 2019 00:24:59 +0000

The Portfolio Tab of the Avada Global Options allows you to 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.

IMPORTANT NOTE: When using Avada Layouts with your Portfolio, about half of these post options will be unavailable.

Portfolio Post Options

* Not available when using an Avada Layout for Portfolio Posts.

*Show Previous/Next Pagination – Choose to show or hide the post navigation.
*Use 100% Width Page – Choose to set this post to 100% browser width.
*Width (Content Columns for Featured Image) – Choose if the featured image is full or half width.
*Disable First Featured Image – Disable the 1st featured image on single post pages.
*Featured Image Dimensions – In pixels or percentage, ex: 100% or 100px. Or Use “auto” for automatic resizing if you added either width or height.
Video Embed Code – Insert Youtube or Vimeo embed code.
Youtube/Vimeo Video URL for Lightbox – Insert the video URL that will show in the lightbox.
*Show Project Description Title – Choose to show or hide the project description title.
*Show Project Details – Choose to show or hide the project details text.
Project URL – The URL the project text links to.
Project URL Text – The custom project text that will link.
Copyright URL – The URL the copyright text links to.
Copyright URL Text – The custom copyright text that will link.
Image Rollover Icons – Choose which icons display on this post. Leave empty for default value
Custom Link URL On Archives – Link URL that will be used on archives either for the rollover link icon or on the image if rollover icons are disabled. Leave blank for post URL.
Open Portfolio Links In New Window – Choose to open the single post page, project URL and copyright URL links in a new window.
*Show Author – Choose to show or hide the author in the Project Details.
*Show Social Share Box – Choose to show or hide the social share box.
*Show Related Projects – Choose to show or hide related projects on this post.
*Show Comments – Choose to show or hide comments area.

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.

Related: Portfolio Global Options

How To Set Up A Portfolio In Avada

Geoff — Mon, 27 May 2019 22:31:44 +0000

A portfolio is a collection of creative work intended to demonstrate a person’s ability, to a potential employer, or customer. And so websites often have a great need for such collections. Whether you are a web designer, graphic designer, photographer, artist, or in fact anyone who creates a body of work, you will probably want to display your work in a well-presented collection on your website.

Read on to find out how best to set up a Portfolio in Avada, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

The Portfolio Custom Post Type

The first thing to understand about setting up a portfolio is that the Portfolio is a custom post type in Avada, in the same way the Blog or FAQ is. So, setting up a Portfolio requires you to create Portfolio items, and then you display them on your site in various ways, much like we create individual blog posts and then use the Post Card Element or the Blog Element to display them on our pages.

The Portfolio Custom Post Type is similar to the ‘Post’ Post Type in WordPress. It gathers your portfolio items together and provides options for Categories, Skills, and Tags, which allow for further filtering and sorting down the track. Categories and Skills can also be customized with language files if you want to have your own personalized headings.

The Portfolio Custom Post Type, together with Avada Layouts and Post Cards offers you the most up to date way of setting up a Portfolio in Avada.

Overview of the Portfolio Process

In the other documents in the Portfolio Category, we break down the process of setting up a Portfolio into their individual steps, but in broad terms, to create a Portfolio on your Avada site using the most current methods, you will follow this general process:

Create your individual Portfolio posts. These are the individual items in your portfolio. If using Avada Layouts, this is basically raw data, as the Layout will control the design.
Use a Post Card to display your collected Portfolio posts. You can use the Post Cards Element to display your collected Portfolio Posts, on the home page, or wherever else you may want. You can design your own Post Card, or import one from Avada Studio.
Create Layouts for you individual Portfolio posts and your Portfolio archives. You will also need a couple of Layouts, to display both the individual posts and the portfolio archives. This is the most up to date and most flexible method. As part of this process you will need to design content layout sections for both Layouts to display the single post content, and the archive grid.

Make sure you read the remaining Portfolio docs to see how this great system can work for you.

Next Step: Creating Portfolio Posts!

Disabling The Portfolio Custom Post Type

If you wish to disable the Portfolio Post Type entirely, just head to Options > Advanced > Post Types, and here you can turn the Portfolio post types off. This will disable the Post type and remove it from the menu.

Portfolio Element

Geoff — Sat, 10 Nov 2018 18:03:00 +0000

The Portfolio Element allows you to display your collected portfolio posts on any page you wish. It includes 3 different layout styles: Carousel, Grid, or Masonry. All styles can specify a certain category and number of posts, along with a plethora of customization options that are simply amazing. All layouts can also use 1-6 columns. Read below for an overview of the specific features of this much-used Element.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

View All Portfolio Docs!

How To Use The Portfolio Element

The Portfolio Element allows you to add a customized range of your Portfolio items anywhere in your content.

To start, simply add the element into your desired column.

Start by working through the options. You can style the output of this element in three main ways. It can be a Portfolio Carousel, a Grid layout, or a Masonry layout. There are several options after this that control the look and feel of the layout, depending on what option you initially select.

After the styling options, come the content options. With this Element, you can specify which categories you would like to include, or alternatively exclude. You can control their alignment, offset the content (for example a post offset of 1 would not show the latest portfolio item but would start with the second latest), set the number of posts per page, specify the pagination, as well as many other small granular controls. To get the layout you want might take some experimentation, but pretty much all options you might wish for are included.

Once you have set all your styling options, there is also the Extras Tab, which has animation options, if you wish to influence how your content interacts with the page load.

Read below for a description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Portfolio section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Layout		Select the layout for the element.
Picture Size		fixed = width and height will be fixed auto = width and height will adjust to the image.
Text Layout		Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled.
Grid Box Color		Controls the background color for the grid boxes. For grid layout this option will only work in boxed mode.
Grid Element Color		Controls the color of borders of the grid boxes.
Grid Separator Style		Controls the line style of grid separators.
Grid Separator Color		Controls the line style color of grid separators.
Number of Columns		Set the number of columns per row. With Carousel layout this specifies the maximum amount of columns. IMPORTANT: Masonry layout does not work with 1 column.
Column Spacing		Controls the column spacing for portfolio items.
Masonry Image Aspect Ratio		Set the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). IMPORTANT: The value of "1.0" represents a special case, which will use the auto calculated ratios like in versions prior to Avada 5.5.
Masonry 2x2 Width		This option decides when a square 1x1 image should become 2x2. This will not apply to images that highly favor landscape or portrait layouts. IMPORTANT: There is a “Masonry Image Layout” setting for every image in the WP media library that allows you to manually set how an image will appear (1x1, landscape, portrait or 2x2), regardless of the original ratio. In pixels.
Content Position		Select if title, terms and excerpts should be displayed below or next to the featured images.
Equal Heights		Set to yes to display grid boxes with equal heights per row.
Posts Per Page		Select number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.
Portfolio Title Display		Controls what displays with the portfolio post title.
Portfolio Text Alignment		Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts.
Portfolio Text Layout Padding		Controls the padding for the portfolio text layout when using boxed mode. Enter values including any valid CSS unit, ex: 25px, 25px, 25px, 25px.
Show Filters		Choose to show or hide the category filters.
Pull Posts By		Choose to show posts by category or tag.
Categories		Select categories or leave blank for all.
Exclude Categories		Select categories to exclude.
Tags		Select a tag or leave blank for all.
Exclude Tags		Select a tag to exclude.
Pagination Type		Choose the type of pagination.
Hide URL Parameter		Turn on to remove portfolio category parameters in single post URLs. These are mainly used for single item pagination within selected categories.
Post Offset		The number of posts to skip. ex: 1.
Order By		Defines how portfolios should be ordered.
Order		Defines the sorting order of portfolios.
Text Display		Choose how to display the post excerpt.
Excerpt Length		Insert the number of words/characters you want to show in the excerpt.
Strip HTML		Strip HTML from the post excerpt.
Carousel Layout		Choose to show titles on rollover image, or below image.
Carousel Scroll Items		Insert the amount of items to scroll. Leave empty to scroll number of visible items.
Carousel Autoplay		Choose to autoplay the carousel.
Carousel Show Navigation		Choose to show navigation buttons on the carousel.
Carousel Mouse Scroll		Choose to enable mouse drag control on the carousel.
Margin		Enter values including any valid CSS unit, ex: 4%.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Useful Links & Resources

Displaying Portfolio Posts On Your Site

Geoff — Thu, 22 Feb 2018 15:46:28 +0000

Once you’ve created your individual portfolio posts, you can now display them on your site.

There are three areas portfolio items are typically displayed. Normally, there will be a Portfolio grid or Carousel, as in the image below, which displays the collected portfolio posts. This might be its own page, or part of another page. The recommended best practice here is to create a Portfolio Post Card (or import one from Avada Studio), and to use the Post Cards Element to display your Portfolio posts. This allows the greatest flexibility with design. However, if you wish, you can still use the Portfolio Element to display your posts in a variety of styles and layouts. There are extensive design options and settings to build your portfolio page.

Then there are the individual posts. These will display without any additional effort other than adding content in the posts themselves, but to best style the content, it’s recommended to create a Portfolio Single Post Layout, and then design a Content Layout Section for that Layout. In that, you can dynamically pull your portfolio content with various Layout and Design Elements, and design your portfolio post layout exactly as you wish.

And then, there are the Portfolio Archives. Again, it is recommended to create a Portfolio Archives Layout and add the Post Card Archives Element to the Content Layout Section of the Layout, to display the Portfolio Archives using your chosen Post Card.

For more information, watch the How To Set Up A Portfolio In Avada video, for a full rundown of the entire process.

Alternative Element: The Portfolio Element

Further Information: Portfolio Archives & Filters

Deprecated FAQ and Portfolio Page Templates

Geoff — Thu, 13 Oct 2016 03:46:27 +0000

IMPORTANT NOTE: All FAQ and Portfolio Page Templates have been deprecated in Avada 5.0

In Avada version 5.0, we decided to remove all FAQ and Portfolio Page Templates from the theme. Do not worry however, as nothing changes, and all of the layout and configuration options previously available in page templates have been retained in the new FAQ and Portfolio Elements. This is a step in the right direction and makes Avada more flexible, intuitive and extensible. Please continue reading below for more information regarding this development and to learn how this affects you and your site.

Why Remove FAQ & Portfolio Templates?

In simple terms, being able to deploy an element anywhere within a page or post on your site using the FAQ/Portfolio Elements is a lot more flexible and allows you to design more dynamic and engaging content than fixed page templates. Elements are easier to deploy with your content, exciting your viewers attention by delivering richer more engaging content.

What Does This Mean For You?

If you use the theme without a child theme and haven’t done any customizations to the theme’s core files, then this update will not affect you at all. Your pages that use these page templates will be converted automatically and will remain identical on the front end of your site. If you do use a child theme and have altered and customized the theme’s core files, then please refer to the Child Theme Users section below.

Removal of all FAQ and Portfolio Page Templates – All FAQ and Portfolio Page Templates available under the ‘Templates’ option under the ‘Page Attributes’ box have been deprecated and replaced with an Element for improved design flexibility.
Page Template Conversion – If you have pages that make use of these Page Templates, don’t worry! When you update to Avada 5.0, they’ll be automatically converted to the corresponding elements and will look exactly the same as before the update.

What Does This Mean For Child Theme Users?

If you use a child theme and have customized or modified to the theme’s core files and/or deprecated template files, you may have to re-work your customizations. We’ve added several new PHP hooks to the Portfolio and FAQ Elements, that in fact make it a lot easier to customize your content. You can also choose to make customizations through full element class replacements.

How to Fix portfolioID=xxx url Showing in Single Portfolio Item URLs

Geoff — Tue, 26 May 2015 18:59:38 +0000

If you are using the Portfolio Element, and you follow one of the links to a single portfolio item, you have probably noticed ?portfolioID=xxx (where xxx is a number) is being added to the url in the browser address bar. Continue reading below to understand why this is appearing on your portfolio item links and how to change it.

Why Is ?portfolioID=xxx Appearing?

This will happen if you’re constraining the Portfolio posts to a certain category / group of categories, or to exclude categories. That is done through the Portfolio Element settings in the builder. The reason why this query string is added to the URL is so the Previous / Next navigation on single portfolio posts will navigate only within your set categories and exclude any other posts. Without that identifier, it’s not possible for the theme to pass your specific category settings along to the single posts for accurate paging.

For example, let’s assume you chose to only show the Audio, Photography, and Web in a page using the Portfolio Element. Once you click on one of the portfolio item links to open it in a single portfolio page, the unique identifier will be added to the link. Then, if you use the Previous / Next buttons to navigate through the posts, only items from the 3 categories you’ve set will be displayed, and any additional items that are from other categories will be omitted.

How Do I Remove It?

This will only happen for links from the Portfolio element that does not include all categories. You can disable this, however, it will not retain the ability to page between your specific categories on your single post page. To remove the identifier for the URL, edit your page and open the Portfolio Element settings. Then find and enable the Hide URL Parameter setting. Be sure to update your page after making these changes in the settings.

Portfolio Archives & Filters

Geoff — Mon, 27 Apr 2015 19:31:14 +0000

Portfolio Archives

The Portfolio Archives are automatically generated from the Categories, Skills, and Tags that you enter into your individual portfolio items. When you are viewing a portfolio item on the front end, and click on a Category, Skill or Tag, you will be taken to a Portfolio Archive page, filtered to that Category, Skill or Tag.

The best practice for the Archive pages is to use a Portfolio Archive Layout to control their appearance. Here, in the Archive Layout Content Layout Section, you can add the Post Cards Archive Element to display the archives, and the Layout Conditions to control where that layout will be used.

Alternatively, the Archives can be configured via the General Portfolio Options, found in the Global Options at Avada > General Portfolio. Please see the Portfolio Global Options doc for more details on what can be configured here. You can also add Sidebars to them in the Avada > Sidebars > Portfolio Archive tab in the Global Options.

The items shown on the Archive pages pull their information from the individual Portfolio posts, including their Featured Image, Category, Skills, etc., so even if you are not displaying this information on the Single Portfolio Posts, it’s important it’s entered into the Portfolio tab of the Avada Page Options on each Portfolio item, so all your Portfolio Posts are shown when filtering.

Portfolio Filters

Portfolio Filters are an option in the Portfolio Element, and are used to allow your users to sort and filter your Portfolio items. You can assign Categories or Tags as the basis for the Portfolio filters, and you can show filters on both Grid and Masonry Portfolio layouts. The filter bar essentially allows your viewers to sort posts easily by a Category or Tag they are interested in, for a better user experience.

Tags and Categories

Portfolio Filters are categories and/or tags assigned to your Portfolio posts. When any given post can be seen by users on the frontend, the categories or tags assigned to it will be in the Portfolio’s filter bar. If you’re not sure how to add categories or tags to your portfolio posts, you can follow the link below to get more information on creating Portfolio posts and the editor interface.

How To Enable Portfolio Filters In The Portfolio Element

Step 1 – Edit the Portfolio Element by hovering over the element in the Avada Builder and clicking the pencil icon button.

Step 2 – Ensure Masonry or Grid layout is chosen. The Portfolio Filters do not work with Carousel layout.

Step 3 – In the Show Filters option, you can choose Yes, Yes Without “All”, or No. Select “Yes” or “Yes without All”.

Step 4 – In the “Pull Posts By” setting, choose whether you’ll be using Categories or Tags to filter your posts.

Step 5 – In the available tags/categories field, enter the respective terms of the posts you’d like to display. Leave this option blank to display all categories or tags.

Step 6 – In the “Posts Per Page” option, select the number of posts you would like to display at one time in the Element. This can be up to 25.

Step 7 – Save the Element.

Show Portfolio Filters Options

Yes / Show – Selecting this option will show all the categories or tags of the posts currently being displayed. This option also includes an All filter on the front-end.
Yes Without “All”/ Show Without “All” – Selecting this option will show all the categories or tags of the posts currently being displayed. This option does not include an All filter, so the posts showing will always be limited to a specific category or tag group.
No / Hide – Selecting this option will hide all filters entirely.

Important Portfolio Filter Information

Filters will only work for posts that are actually on the current page. For example, a filter on page 1 cannot pull posts from page 2. So your choice of the number of posts per page, and the pagination chosen will have an effect on how the Portfolio Filters display.

“All” Filter

You can choose to display an All filter to display all your posts, alongside the filters of the posts currently being displayed. On the other hand, you can also choose to just display the filters of the posts being displayed without the All filter. If the All filter is not used, the first filter is auto activated and only portfolio posts belonging to that category will be displayed on the page.

Infinite Scrolling

Currently, only filters from the categories of the first batch of posts that load on your page will appear above your posts. We’ve made it so when you scroll down the page to load more posts, the filters will automatically update to include any categories it may have excluded beforehand. Also, when you’re viewing a certain filter and load more posts, only posts within that filter will be shown.

Further Information: Portfolio Featured image Options

Related Projects

Geoff — Mon, 13 Apr 2015 14:08:19 +0000

Related Projects are Portfolio Posts which appear below each active portfolio post, and that have similar categories as the one being currently viewed.

Related Projects are a convenient way to show your viewers other projects that they may be interested in, based on the one they are currently viewing. You can choose to activate Related Posts globally under the Avada Global Options, or individually per post under the Avada Page Options. Continue reading below to learn more about Related Projects and its included options.

Displaying Related Projects Globally

Step 1 – Navigate to the Avada > Options > Portfolio > Portfolio Single Post sub-panel to access the portfolio single posts options.

Step 2 – Find the ‘Related Posts’ option and switch it to On to display Related Posts on portfolio projects globally.

Displaying Related Posts Individually Per Post

Step 1 – Navigate to the portfolio post you’d like to display Related Projects in, then to the Avada Page Options box below the editor field.

Step 2 – In the Portfolio tab, set the Show Related Posts field to Default, Show, or Hide. The Default setting will keep the Avada Global Option setting. Show or Hide will override the Global Option settings for the current post.

Related Project Options

The various options for Related Posts are located in the Avada > Options > Extra > Related Posts / Projects sub-panel. These options also affect the Related Posts for Blog Posts. All of these options are global settings that cannot be overridden per post. Continue reading to learn more about each of these options.

Related Posts / Projects Layout – Controls the layout of the related posts/projects title text. Choose from title on rollover, or title below image to control where the titles are placed.
Number of Related Posts / Projects – Controls how many related posts/projects are displayed on each single portfolio or blog post. Accepts a numerical value. For example, 5.
Related Posts / Projects Maximum Columns – Controls how many columns are displayed. Choose from 1 to 6.
Related Posts / Projects Columns Spacing – IControls the amount of spacing between items. Accepts a numerical value. For example, 5.
Related Posts / Projects Image Size – Controls how your images are displayed. Choose between fixed, which will crop the image, or auto, which will display it at the original image ratio (not original image size).
Related Posts / Projects Autoplay – Allows you to turn the autoplay feature on the carousel On or Off.
Related Posts / Projects Speed – Controls the speed of related posts and projects carousel. Accepts a numerical value. For example, 1000. 1000 is equal to 1 second.
Related Posts / Projects Show Navigation – Allows you to turn the navigation buttons on the carousel On or Off.
Related Posts / Projects Mouse Scroll – Allows you to turn the mouse drag control feature on the carousel On or Off. When this is On, the links on posts will be disabled.
Related Posts / Projects Scroll Items – Allows you to control the number of items that scroll at one time. Accepts a numerical value. For example, 5. Set to O to scroll the number of visible items.

Portfolio Single Post Pages

Geoff — Mon, 25 Aug 2014 16:16:50 +0000

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 as edited in the Gutenberg Editor.

The Post Editor – You can use either the Gutenberg 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 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. Portfolios are very flexible in their structure, but the easiest way to add content is just to add raw content through the editor, and use a Layout to control the display of that content. See How To Set Up A Portfolio in Avada for more information.

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.

Next Step: Displaying Portfolio Posts On Your Site