Displaying Portfolio Posts

07/10/2017

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. Continue reading below to learn more about how to display your portfolio posts.

Portfolio Element

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 and Fusion Theme 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.

General Tab

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

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

Columns – Illustrated as D, this option lets you select the number of columns to display.

Content Position – Illustrated as E, 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 F, this setting determines the space or padding between your columns.

Posts Per Page – Illustrated as G, this option lets you set how many portfolio items to display on the page. Set to -1 to display all portfolio items.

Portfolio Title Display – Illustrated as H, 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 I, 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 J, 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 K, this option lets you show or hide category filters. Choose between Yes, Yes without “All”, or No.

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

Categories – Illustrated as M, 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 N, 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 O, 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 P, 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 Q, this option lets you select the pagination type. Choose between Default, Pagination, Infinite Scrolling, Load More Button, or None.

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

Content Display – Illustrated as T, this option lets you select how to display the portfolio item’s content. Choose between Default, Excerpt, or Full Content.

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

Strip HTML – Illustrated as V, 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 W, this option lets you set the carousel’s layout. Choose between Title Below Image, or Title On Rollover.

Carousel Scroll Items – Illustrated as X, 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 Y, this option lets you enable or disable the carousel’s autoplay feature. Choose between Yes or No.

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

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

Element Visibility – Illustrated as AB, 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 AC, lets you add a class to the wrapping HTML element.

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


Animation Tab

Animation Type – Illustrated as A, 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, this option lets you select the animation’s incoming direction. Choose between Top, Right, Bottom, Left, or Static.

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

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

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

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

Number of Portfolio Items Per Archive Page – Illustrated as E, 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 F, this option lets you select the text style you want or disable text. Choose between No Text, Boxed, or Unboxed.

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

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

Strip HTML from Excerpt – Illustrated as I, 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 J, 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 K, this option lets you set the text alignment for titles, categories and excerpt text on the Portfolio Archive page. Choose between Left, Center or Right.

Portfolio Archive Text Layout Padding – Illustrated as L, 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 M, this option lets you select the type of pagination to display on the Portfolio Archive page. Choose between Pagination, Infinite Scroll, or Load More Button.

Load More Posts Button Color – Illustrated as N, this option lets you select the Load More Posts button’s color on the Portfolio Archive page.

Portfolio Slug – Illustrated as O, 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.


19 Likes
Proudly Serving Over 390000 Satisfied Users!