Portfolio Element

24/07/2022

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.

Portfolio Element Example

Overview

How To Use The Portfolio Element

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

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

Step 2 – Select the container and column you would like to place the portfolio items into.

Step 3 – Click on the + Element button at the bottom of the column. Select Portfolio.

Step 4 – 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. Be sure to visit the Portfolio Element Demo page to get a good idea of what’s possible with this amazing element.

Step 5 – 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.

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

Step 7 – Once you have completed styling your Portfolio Element, click Save. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..

Read below for a detailed description of all element options.

Avada Website Builder

868,153 Businesses Trust Avada

Avada Website Builder

868,153 Businesses Trust Avada

Avada Website Builder

868,153 Businesses Trust Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab

  • Layout – Controls the portfolio’s layout. Choose between Carousel, Grid, or Masonry.

  • Picture Size – 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 – 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 – 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/date box/timeline dots and arrows for the grid boxes.

  • Grid Separator Style – 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 – Controls the line style color of grid separators.

  • Number of Columns – Controls the number of columns per row. With Carousel layout, this specifies the maximum amount of columns.

  • Column Spacing – Controls the space or padding between the columns of the portfolio items.

  • Masonry Image Aspect Ratio – 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 2×2 Width – Controls when a square 1×1 image should become 2×2. 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 (1×1, landscape, portrait or 2×2), regardless of the original ratio.

  • Content Position – 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 – Allows you to display grid boxes with equal heights per row. Choose between Yes or No.

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

  • Portfolio Title Display – Controls what displays with the portfolio post title. Choose between Default, Title and Categories, Only Title, Only Categories, or None.

  • Portfolio Text Alignment – 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 – Controls the top, right, bottom, and left padding for the portfolio text layout when using boxed mode.

  • Show Filters – Allows you to show or hide the category filters. Choose between Yes, Yes without “All”, or No.

  • Pull Posts By – Allows you to choose how posts are filtered. Choose between Category or Tag.

  • Categories – 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 – 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 – 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 – 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 – Controls the pagination type. Choose between Default, Pagination, Infinite Scrolling, Load More Button, or None.

  • Hide URL Parameter – 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 – Controls how many portfolio items to skip before showing posts on the page.

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

  • Order – Controls the sorting order of portfolios. Choose between Descending or Ascending.

  • Text Display – Controls how to display the post excerpt. Choose between Default, No Text, Excerpt, or Full Content.

  • Excerpt Length – Controls the number of words/characters to display in the excerpt.

  • Strip HTML – 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 – Controls the carousel’s layout. Choose between Title below image or Title on rollover.

  • Carousel Scroll Items – Accepts a numerical value that sets how many items to scroll. Leave empty to scroll the number of visible items.

  • Carousel Autoplay – Allows you to enable or disable the carousel’s autoplay feature. Choose between Yes or No.

  • Carousel Show Navigation – Allows you to show or hide the carousel’s navigation. Choose between Yes or No.

  • Carousel Mouse Scroll – Allows you to enable or disable the carousel’s mouse drag control. Choose between Yes or No.

  • Margin – In pixels or percentage, ex: 10px or 10%.

  • Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the column.

  • CSS ID – Allows you to add an ID for the column.

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.

  • Offset of Animation – Controls when 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.

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Portfolio

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Portfolio Featured Image Size – Controls if the featured image size is fixed (cropped) or auto (full image ratio) for portfolio elements. IMPORTANT: Fixed works best with a standard 940px site width. Auto works best with larger site widths.

  • 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. In pixels.

  • Number of Portfolio Items Per Page – Controls the number of posts that display per page for portfolio elements. Set to -1 to display all. Set to 0 to use the number of posts from Settings > Reading.

  • Portfolio Text Layout – Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled for portfolio elements.

  • Portfolio Text Display – Choose how to display the post excerpt for portfolio elements.

  • Excerpt Length – Controls the number of words in the excerpts for portfolio elements.

  • Strip HTML from Excerpt – Turn on to strip HTML content from the excerpt for portfolio elements.

  • Portfolio Title Display – Controls what displays with the portfolio post title for portfolio elements.

  • Portfolio Text Alignment – Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts in portfolio elements.

  • Portfolio Text Layout Padding – Controls the padding for the portfolio text layout when using boxed mode in portfolio elements. Enter values including any valid CSS unit, ex: 25px, 25px, 25px, 25px.

  • Pagination Type – Controls the pagination type for portfolio elements. Choose from Pagination, Infinite Scroll, or Load More Button.

  • Load More Posts Button Background Color – Controls the background color of the load more button for ajax post loading for portfolio elements.

  • Load More Posts Button Text Color – Controls the text color of the load more button for ajax post loading for portfolio elements.

  • Load More Posts Button Hover Background Color – Controls the hover background color of the load more button for ajax post loading for portfolio elements.

  • Load More Posts Hover Button Text Color – Controls the hover text color of the load more button for ajax post loading for portfolio elements.

Avada Page Options

When creating or editing a Portfolio item, there is also a Portfolio tab on the Avada Page Options. See below for a quick overview, or for more detail, read the Portfolio Post Options doc.

  • Choose to set this post to 100% browser width.

  • Choose if the featured image is full or half width.

  • Disable the 1st featured image on single post pages.

  • In pixels or percentage, ex: 100% or 100px. Or Use “auto” for automatic resizing if you added either width or height.

  • Insert Youtube or Vimeo embed code.

  • Insert the video URL that will show in the lightbox.

  • Choose to show or hide the project description title.

  • Choose to show or hide the project details text.

  • The URL the project text links to.

  • The custom project text that will link.

  • The URL the copyright text links to.

  • The custom copyright text that will link.

  • Choose which icons display on this post. Leave empty for default value

  • 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.

  • Choose to open the single post page, project URL and copyright URL links in a new window.

  • Choose to show or hide the social share box.

  • Choose to show or hide related projects on this post.

Avada Website Builder

868,153 Businesses Trust Avada

Avada Website Builder

868,153 Businesses Trust Avada

Avada Website Builder

868,153 Businesses Trust Avada