Displaying and Configuring Portfolio Posts On Your Site

Displaying and Configuring Portfolio Posts On Your Site

12/10/2018

Once you’ve created your portfolio posts, you can now use the Portfolio Element to display them on the page. The Portfolio element is a flexible tool which you can use to display your posts in a variety of styles and layouts. You can use its extensive design options and settings to build your ideal portfolio page. You can also customize your Portfolio items using the available options for Portfolio in Theme Options and Fusion Page Options. Options in Theme Options are global options; and options in Fusion Page Options and Portfolio Element will override the global options.

Overview

How To Display A Portfolio On Your Site

IMPORTANT NOTE The Portfolio Element (previously known as Recent Works Element) has been updated in Avada 5.0.
Click Here To Learn How To Create Portfolio Posts

How To Add A Portfolio Element

Step 1 - Create a new page, or edit an existing one.

Step 2 - Click the 'Use Fusion Builder' button to activate the Fusion Builder.

Step 3 - Add a container and select your desired column layout. Alternatively, you can add a column by clicking the '+ Column' button on an existing container.

Step 4 - Click the '+ Element' button on the column to bring up the 'Elements' window.

Step 5 - Locate the Portfolio element and click it to open its options window. Customize the element to your liking. Please continue reading below to know more about each of the Portfolio element's options.

Step 6 - Once finished, click 'Save'.

Portfolio Element, Fusion Theme Options, and Fusion Page Options

Portfolio Element Options

The options below are found in every instance of the Portfolio element. These options only affect the single instance of the Portfolio element you set them on, and these options also override global options set in the Fusion Theme Options panel. Choose Default on the options that have them to keep the Fusion Theme Options settings. Element Options also features Advanced Option Network Correlation for your convenience.

IMPORTANT NOTE Element Options will override the global options set in Fusion Theme Options.

Layout - Illustrated as A. Controls the portfolio's layout. Choose between Carousel, Grid, or Masonry.

Picture Size - Illustrated as B. Controls how the featured image will be sized. Choose between Default, Fixed, or Auto. Choose Fixed to load a theme generated image size so your images display in the same width and size, creating a uniform layout. Choosing Auto will use the featured image's natural height and width.

Text Layout - Illustrated as C. Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled. Choose between Default, No Text, Boxed, or Unboxed.

Grid Box Color - Illustrated as D. Controls the background color for the grid boxes. For Grid layout this option will only work in boxed mode.

Grid Element Color - Illustrated as E. Controls the color of borders/date box/timeline dots and arrows for the grid boxes.

Grid Separator Style - Illustrated as F. Controls the line style of grid separators. Choose between Default, No Style, Single Border Solid, Double Border Solid, Single Border Dashed, Double Border Dashed, Single Border Dotted, Double Border Dotted, or Shadow.

Grid Separator Color - Illustrated as G. Controls the line style color of grid separators.

Number of Columns - Illustrated as H. Controls the number of columns per row. With Carousel layout this specifies the maximum amount of columns.

Column Spacing - Illustrated as I. Controls the space or padding between the columns of the portfolio items.

Masonry Image Aspect Ratio - Illustrated as J. Controls the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). Note: 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 - Illustrated as K. Controls when a square 1x1 image should become 2x2. This will not apply to images that highly favor landscape or portrait layouts. Note: 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.

Content Position - Illustrated as L. Controls the content's orientation in relation to the image. This option is only for Grid and Masonry layouts and with Columns set to 1. Choose between Below Image or Next to Image.

Equal Heights - Illustrated as M. Allows you to display grid boxes with equal heights per row. Choose between Yes or No.

Posts Per Page - Illustrated as N. Controls how many portfolio items to display on the page. Set to -1 to display all portfolio items. Set to 0 to use number of posts from Settings > Reading.

Portfolio Title Display - Illustrated as O. Controls what displays with the portfolio post title. Choose between Default, Title and Categories, Only Title, Only Categories, or None.

Portfolio Text Alignment - Illustrated as P. Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts in portfolio archive pages. Choose between Left, Center, or Right.

Portfolio Text Layout Padding - Illustrated as Q. Controls the top, right, bottom, and left padding for the portfolio text layout when using boxed mode.

Show Filters - Illustrated as R. Allows you to show or hide the category filters. Choose between Yes, Yes without "All", or No.

Pull Posts By - Illustrated as S. Allows you to choose how posts are filter. Choose between Category or Tag.

Categories - Illustrated as T. Controls which categories to display on the page. Only portfolio items organized under these categories will be shown. Leave blank to display all categories.

Exclude Categories - Illustrated as U. Controls which categories to hide from the page. Only portfolio items tagged under these categories will be hidden. Leave blank to load all categories.

Tags - Illustrated as V. Controls which tags to display on the page. Only portfolio items organized under these tags will be shown. Leave blank to display all tags.

Exclude Tags - Illustrated as W. Controls which tags to hide from the page. Only portfolio items organized under these tags will be hidden. Leave blank to load all tags.

Pagination Type - Illustrated as X. Controls the pagination type. Choose between Default, Pagination, Infinite Scrolling, Load More Button, or None.

Hide URL Parameter - Illustrated as Y. You can use this setting to disable the URL parameter used in single post links when navigating from a Portfolio Element that's filtering by Categories or Tags. You can find more info on that here

Post Offset - Illustrated as Z. Controls how many portfolio items to skip before showing posts on the page.

Order By - Illustrated as AA. Controls how portfolios should be ordered. Choose between Date, Post Title, Portfolio Order, Post Slug, Author, Number of Comments, Last Modified, or Random.

Order - Illustrated as AB. Controls the sorting order of portfolios. Choose between Descending or Ascending.

Text Display - Illustrated as AC. Controls how to display the post excerpt. Choose between Default, No Text, Excerpt, or Full Content.

Excerpt Length - Illustrated as AD. Controls the number of words/characters to display in the excerpt.

Strip HTML - Illustrated as AE. Allows you to strip HTML from the excerpt for portfolio archive pages. Choose between On or Off. Choose On to strip HTML, or Off to keep it.

Carousel Layout - Illustrated as AD. Controls the carousel's layout. Choose between Title below image or Title on rollover.

Carousel Scroll Items - Illustrated as AE. Accepts a numerical value that sets how many items to scroll. Leave empty to scroll number of visible items.

Carousel Autoplay - Illustrated as AF. Allows you to enable or disable the carousel's autoplay feature. Choose between Yes or No.

Carousel Show Navigation - Illustrated as AG. Allows you to show or hide the carousel's navigation. Choose between Yes or No.

Carousel Mouse Scroll - Illustrated as AH. Allows you to enable or disable the carousel's mouse drag control. Choose between Yes or No.

Element Visibility - Illustrated as AI. Controls which screen sizes to display the element in. Choose between Small Screen, Medium Screen, or Large Screen. You can choose one or more settings.

CSS Class - Illustrated as AJ. Allows you to add a class to the wrapping HTML element.

CSS ID - Illustrated as AK. Allows you to add an id to the wrapping HTML element.

Animation Type - Illustrated as A. Controls what type of animation to use. Choose between None, Bounce, Fade, Flash, Rubberband, Shade, Slide, or Zoom.

Direction of Animation - Illustrated as B. Controls the animation's incoming direction. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation - Illustrated as C. Controls the speed at which the animation plays.

Offset of Animation - Illustrated as D. Controls at what point the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

Fusion Theme Options

These options are located in the Avada > Theme Options > Portfolio > General Portfolio tab on your WP admin panel. These options are global options which will affect your Portfolio archive pages (e.g. your category / tag archive pages).

Portfolio Archive Layout - Illustrated as A. Controls the layout for the portfolio archive pages. Choose between Grid or Masonry.

Portfolio Archive Featured Image Size - Illustrated as B. Controls if the featured image size is fixed (cropped) or auto (full image ratio) for portfolio archive pages. Choose between Fixed or Auto. Note: Fixed will use a uniform image size generated by the theme. Auto will use the image's natural size and scale according to your layout in proportion with itself.

Portfolio Archive Number of Columns - Illustrated as C. Controls the number of columns per row for portfolio archive pages. With Carousel layout this specifies the maximum amount of columns. This ranges from 1 - 6. Note: Masonry layout does not work with 1 column.

Portfolio Archive Column Spacing - Illustrated as D. Controls the column spacing for portfolio items for archive pages. This is a pixel unit.

Equal Heights - Illustrated as E. Allows you to display grid boxes with equal heights per row. Choose between On or Off.

Portfolio Archive Content Position - Illustrated as F. Select if title, terms, and excerpts should be displayed below or next to the featured images. Choose between Below Image or Next to Image.

Number of Portfolio Items Per Archive Page - Illustrated as G. Controls how many portfolio items to display on the portfolio archive page. -1 will display all and 0 will use the number set in WP Admin > Settings > Reading.

Portfolio Archive Text Layout - Illustrated as H. Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled for portfolio archive pages. Choose between No Text, Boxed, or Unboxed.

Portfolio Archive Text Display - Illustrated as I. Controls how to display the post excerpt for portfolio archive pages. Choose between No Text, Excerpt, or Full Content.

Portfolio Archive Excerpt Length - Illustrated as J. Controls the number of words in the excerpts for portfolio archive pages.

Strip HTML from Excerpt - Illustrated as K. Allows you to strip HTML from the excerpt for portfolio archive pages. Choose between On or Off. Choose On to strip HTML, or Off to keep it.

Portfolio Archive Title Display - Illustrated as L. Controls what displays with the portfolio post title and categories for portfolio archive pages. Choose between Title and Categories, Only Title, Only Categories, or None.

Portfolio Archive Text Alignment - Illustrated as M. Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts in portfolio archive pages. Choose between Left, Center, or Right.

Portfolio Archive Text Layout Padding - Illustrated as N. Controls the padding for the portfolio text layout when using boxed mode in portfolio archive pages.

Portfolio Archive Pagination Type - Illustrated as O. Controls the pagination type for portfolio archive pages. Choose between Pagination, Infinite Scroll, or Load More Button.

Load More Posts Button Color - Illustrated as P. Controls the background color of the load more button for ajax post loading for portfolio archive pages.

Portfolio Slug - Illustrated as Q. Allows you to set a custom permalink when you use %postname% for your WordPress site's permalink structure. This slug name cannot be the same name as a page name or the layout will break.

Meta Data Font Size - Illustrated as R. Controls the font size for meta data text. Enter value including any valid CSS unit, ex: 13px.

Fusion Page Options

When creating or editing a Portfolio item, scroll below the WordPress Content Editor to find the Portfolio tab inside the Fusion Page Options box. Inside that tab are all the individual Portfolio settings, and page settings that can be set for each Portfolio item. These options also override global options set in the Fusion Theme Options panel. Choose Default on the options that have them to keep the Fusion Theme Options settings. Fusion Page Options also features Advanced Option Network Correlation for your convenience.

IMPORTANT NOTE Fusion Page Options will override the global options set in Fusion Theme Options.

Width (Content Columns for Featured Image) - Illustrated as A. Allows you to set if the featured image is full or half width. Choose between Default, Full Width, or Half Width.

Use 100% Width Page - Illustrated as B. Allows you to set the post to 100% browser width.

Show Project Description Title - Illustrated as C. Allows you to show or hide the project desciption title.

Show Project Details - Illustrated as D. Allows you to show or hide the project details text.

Disable First Featured Image - Illustrated as E. Allows you to disable the first featured image.

Featured Image Dimensions - Illustrated as F. Allows you to set dimensions for featured image in pixels or percentage, or use “auto” for automatic resizing if you added either width or height.

Video Embed Code - Illustrated as G. Allows you to attach a video through inserting Youtube or Vimeo embed code.

Youtube/Vimeo Video URL for Lightbox - Illustrated as H. Allows you to attach a video that will show in the lightbox through inserting Youtube or Vimeo URL.

Project URL - Illustrated as I. Allows you to set the URL on which the project text links to.

Project URL Text - Illustrated as J. Allows you to set the custom project URL text that will link.

Copyright URL - Illustrated as K. Allows you to set the URL on which the copyright text links to.

Copyright URL Text - Illustrated as L. Allows you to set the custom copyright URL text that will link.

Image Rollover Icons - Illustrated as M. Allows you to set which icons to be displayed on this portfolio post. Choose between Default, Link + Zoom, Link, Zoom, or No Icons.

Custom Link URL On Archives - Illustrated as N. Allows you to set link URL that will be used on archives either for the rollover link icon or on the image if rollover icons are disabled.

Open Portfolio Links in New Window - Illustrated as O. Choose to open the single post page, project url, and copyright url links in a new window.

Show Related Projects - Illustrated as P. Allows you to show or hide related projects on this portfolio post.

Show Social Share Box - Illustrated as Q. Allows you to show or hide the social share box.

Show Previous/Next Pagination - Illustrated as R. Allows you to show or hide the post navigation.

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept