Displaying and Configuring Portfolio Posts On Your Site

02/22/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.

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.

Note: Before you can use the Portfolio Element, you must first create your portfolio items. To learn how, click the button below.

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.

Step 6 – Once finished, click ‘Save’.


Portfolio Element, Fusion Theme Options, and Fusion Page Options

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.
General Tab

Layout – Illustrated as A on the screenshot, this option lets you select the portfolio’s layout. Choose between Carousel, Grid or Masonry.

Picture Size – Illustrated as B on the screenshot, this option lets you select 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 on the screenshot, this option lets you select the excerpts’ layout or remove the excerpt altogether. Choose between Default, No Text, Boxed, or Unboxed.

Grid Box Color – Illustrated as D on the screenshot, this option lets you set the background color for the grid boxes. For Grid layout this option will only work in boxed mode.

Grid Element Color – Illustrated as E on the screenshot, this option lets you set the color of borders/date box/timeline dots and arrows for the grid boxes.

Grid Separator Style – Illustrated as F on the screenshot, this option lets you set 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 on the screenshot, this option lets you set the line style color of grid separators.

Columns – Illustrated as H on the screenshot, this option lets you select the number of columns to display. With Carousel layout this specifies the maximum amount of columns.

Content Position – Illustrated as I on the screenshot, this option lets you set 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.

Column Spacing – Illustrated as J on the screenshot, this setting determines the space or padding between your columns.

Equal Height – Illustrated as K on the screenshot, this setting lets you display grid boxes with equal heights per row. Choose between Yes or No.

Posts Per Page – Illustrated as L on the screenshot, this option lets you set 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 M on the screenshot, this option lets you select how to display the portfolio post title and categories. Choose between Default, Title and Categories, Only Title, Only Categories, or None.

Portfolio Text Alignment – Illustrated as N on the screenshot, this option lets you set the text alignment for titles, categories, and excerpt text. Choose between Default, Left, Center or Right.

Portfolio Text Layout Padding – Illustrated as O on the screenshot, this option accepts a pixel value that sets the text layout’s top, bottom, left, and right padding. For example, 25px.

Show Filters – Illustrated as P on the screenshot, this option lets you show or hide the category filters. Choose between Yes, Yes without “All”, or No.

Pull Posts By – Illustrated as Q on the screenshot, this setting lets you choose how posts are filter. Choose between Category or Tag.

Categories – Illustrated as R on the screenshot, this option lets you select 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 S on the screenshot, this option lets you select 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 T on the screenshot, this option lets you select 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 U on the screenshot, this option lets you select 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 V on the screenshot, this option lets you select the pagination type. Choose between Default, Pagination, Infinite Scrolling, Load More Button, or None.

Hide URL Parameter – Illustrated as W on the screenshot, 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 X on the screenshot, this option lets you set how many portfolio items to skip before showing posts on the page.

Order By – Illustrated as Y on the screenshot, this option lets you set 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 Z on the screenshot, this option lets you set the sorting order of portfolios. Choose between Descending or Ascending.

Text Display – Illustrated as AA on the screenshot, this option lets you select how to display the post excerpt. Choose between Default, No Text, Excerpt, or Full Content.

Excerpt Length – Illustrated as AB on the screenshot, this option lets you set the number of words/characters to display in the excerpt.

Strip HTML – Illustrated as AC on the screenshot, this option lets you strip HTML from the post excerpt. Choose between Default, Yes, or No. Choose Yes to strip HTML, or No to keep it.

Carousel Layout – Illustrated as AD on the screenshot, this option lets you set the carousel’s layout. Choose between Title below image, or Title on rollover.

Carousel Scroll Items – Illustrated as AE on the screenshot, this option accepts a numerical value that sets how many items to scroll. Leave blank to scroll number of visible items.

Carousel Autoplay – Illustrated as AF on the screenshot, this option lets you enable or disable the carousel’s autoplay feature. Choose between Yes or No.

Carousel Show Navigation – Illustrated as AG on the screenshot, this option lets you show or hide the carousel’s navigation. Choose between Yes or No.

Carousel Mouse Scroll – Illustrated as AH on the screenshot, this option lets you enable or disable the carousel’s mouse drag control. Choose between Yes or No.

Element Visibility – Illustrated as AI on the screenshot, this option lets you select 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 on the screenshot, lets you add a class to the wrapping HTML element.

CSS ID – Illustrated as AK on the screenshot, this option lets you add an ID to the wrapping HTML element.


Animation Tab

Animation Type – Illustrated as A on the screenshot, this option lets you select what type of animation to use. Choose between None, Bounce, Fade, Flash, Rubberband, Shade, Slide, or Zoom.

Direction of Animation – Illustrated as B on the screenshot, this option lets you select the animation’s incoming direction. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Illustrated as C on the screenshot, this option lets you set the speed at which the animation plays.

Offset of Animation – Illustrated as D on the screenshot, this option lets you set 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 on the screenshot, this option lets you select the portfolio archive’s layout. Choose between Grid or Masonry.

Portfolio Archive Featured Image Size – Illustrated as B on the screenshot, choose between Fixed or Auto. 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 Columns – Illustrated as C on the screenshot, choose the max number of columns for your Portfolio archive page. This ranges from 1 – 6

Portfolio Archive Column Spacing – Illustrated as D on the screenshot, this option lets you set the spacing between columns on the Portfolio archive page. This is a pixel unit.

Equal Heights – Illustrated as E on the screenshot, this option lets you display grid boxes with equal heights per row. Choose between On or Off.

Portfolio Archive Content Position – Illustrated as F on the screenshot, this option lets you 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 on the screenshot, this option lets you set how many portfolio items to display on the Portfolio archive page page. -1 will display all and 0 will use the number set in WP Admin > Settings > Reading.

Portfolio Archive Text Layout – Illustrated as H on the screenshot, this option lets you select the text style you want or disable text. Choose between No Text, Boxed, or Unboxed.

Portfolio Archive Text Display – Illustrated as I on the screenshot, this option lets you select how to display the content of your portfolio posts. Choose between No Text, Excerpt, or Full Content.

Portfolio Archive Excerpt Length – Illustrated as J on the screenshot, this option lets you set the number of words to display in the excerpt.

Strip HTML from Excerpt – Illustrated as K on the screenshot, this option lets you strip HTML from the post excerpt. Choose between On, or Off. Choose On to strip HTML, or Off to keep it.

Portfolio Archive Title Display – Illustrated as L on the screenshot, this option lets you select how to display the portfolio post title and categories. Choose between Title and Categories, Only Title, Only Categories, or None.

Portfolio Archive Text Alignment – Illustrated as M on the screenshot, this option lets you set the text alignment for titles, categories, and excerpt text in Portfolio archive pages. Choose between Left, Center or Right.

Portfolio Archive Text Layout Padding – Illustrated as N on the screenshot, this option lets you set the padding for the portfolio text layout when using Boxed mode in Portfolio archive pages.

Portfolio Archive Pagination Type – Illustrated as O on the screenshot, this option lets you select the type of pagination to display on the Portfolio archive pages. Choose between Pagination, Infinite Scroll, or Load More Button.

Load More Posts Button Color – Illustrated as P on the screenshot, this option lets you select the Load More Posts button’s color on the Portfolio archive pages.

Portfolio Slug – Illustrated as Q on the screenshot, this option lets you 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 or the layout will break.

Meta Data Font Size – Illustrated as R on the screenshot, this option lets you control the font size for meta data text. Enter value including any valid CSS unit. For example, 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 on the screenshot, this option allows you to set if the featured image is full or half width.

Use 100% Width Page – Illustrated as B on the screenshot, this option allows you to set the post to 100% browser width.

Show Project Description Title – Illustrated as C on the screenshot, this option allows you to show or hide the project desciption title.

Show Project Details – Illustrated as D on the screenshot, this option allows you to show or hide the project details text.

Disable First Featured Image – Illustrated as E on the screenshot, this option allows you to disable the first featured image.

Featured Image Dimensions – Illustrated as F on the screenshot, this option allows you to set dimensions for featured image in pixels or percentage, or use “auto” for automatic resizing.

Video Embed Code – Illustrated as G on the screenshot, this option allows you to attach a video through inserting Youtube or Vimeo embed code.

Youtube/Vimeo Video URL for Lightbox – Illustrated as H on the screenshot, this option allows you to attach a video that will show in the lightbox through inserting Youtube or Vimeo URL.

Project URL – Illustrated as I on the screenshot, this option allows you to set the URL on which the project text links to.

Project URL Text – Illustrated as J on the screenshot, this option allows you to set the custom project URL text that will link.

Copyright URL – Illustrated as K on the screenshot, this option allows you to set the URL on which the copyright text links to.

Copyright URL Text – Illustrated as L on the screenshot, this option allows you to set the custom copyright URL text that will link.

Image Rollover Icons – Illustrated as M on the screenshot, this option allows you to set which icons to be displayed on this portfolio post.

Link Icon URL – Illustrated as N on the screenshot, this option allows you to set link icon URL.

Open Portfolio Links in New Window – Illustrated as O on the screenshot, this option allows you to choose to open the single post page, project url, and copyright url links in a new window.

Show Related Projects – Illustrated as P on the screenshot, this option allows you to show or hide related projects on this portfolio post.

Show Social Share Box – Illustrated as Q on the screenshot, this option allows you to show or hide the social share box.

Show Previous/Next Pagination – Illustrated as R on the screenshot, this option allows you to show or hide the post navigation.


2 Likes
Proudly Serving Over 400000 Satisfied Users!