Portfolio Element

Last Update: April 17, 2024

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.

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

HeadingDescription
LayoutSelect the layout for the element.
Picture Sizefixed = width and height will be fixed auto = width and height will adjust to the image.
Text LayoutControls if the portfolio text content is displayed boxed or unboxed or is completely disabled.
Grid Box ColorControls the background color for the grid boxes. For grid layout this option will only work in boxed mode.
Grid Element ColorControls the color of borders of the grid boxes.
Grid Separator StyleControls the line style of grid separators.
Grid Separator ColorControls the line style color of grid separators.
Number of ColumnsSet 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 SpacingControls the column spacing for portfolio items.
Masonry Image Aspect RatioSet 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 WidthThis 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 PositionSelect if title, terms and excerpts should be displayed below or next to the featured images.
Equal HeightsSet to yes to display grid boxes with equal heights per row.
Posts Per PageSelect number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.
Portfolio Title DisplayControls what displays with the portfolio post title.
Portfolio Text AlignmentControls 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 FiltersChoose to show or hide the category filters.
Pull Posts ByChoose to show posts by category or tag.
CategoriesSelect categories or leave blank for all.
Exclude CategoriesSelect categories to exclude.
TagsSelect a tag or leave blank for all.
Exclude TagsSelect a tag to exclude.
Pagination TypeChoose the type of pagination.
Hide URL ParameterTurn on to remove portfolio category parameters in single post URLs. These are mainly used for single item pagination within selected categories.
Post OffsetThe number of posts to skip. ex: 1.
Order ByDefines how portfolios should be ordered.
OrderDefines the sorting order of portfolios.
Text DisplayChoose how to display the post excerpt.
Excerpt LengthInsert the number of words/characters you want to show in the excerpt.
Strip HTMLStrip HTML from the post excerpt.
Carousel LayoutChoose to show titles on rollover image, or below image.
Carousel Scroll ItemsInsert the amount of items to scroll. Leave empty to scroll number of visible items.
Carousel AutoplayChoose to autoplay the carousel.
Carousel Show NavigationChoose to show navigation buttons on the carousel.
Carousel Mouse ScrollChoose to enable mouse drag control on the carousel.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article