This feature is available only for Premium members
NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information
Description and Code
The portfolio catalog shortcode lets you pull in portfolio items to display in a carousel, a grid, or columns with excerpts. Here's an example of the shortcode in code view:
[portfolio_component layout="carousel" filters="yes" columns="1" columns_grid="1" cat_slug="" exclude_cats="" number_posts="4" columns_excerpt="yes" excerpt_length="35" project_buttons="yes" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""][/portfolio_component]
Parameters
- layout
- set the predefined layout of the portfolio catalog
- Possible values - carousel, grid, column
- filters
- defines if to show or hide the category filters (only for Grid or Columns)
- Possible values - yes or no
- columns
- defines the number of columns to display for the Columns layout
- Possible values - number - like 1, 4 etc.
- columns_grid
- defines the maximum number of items (columns) for the Grid layout
- Possible values - number - like 1, 4 etc.
- cat_slug
- defines the categories to include in the output
- Possible values - array - like category 1, category 2 etc.
- exclude_cats
- defines the categories to exclude in the output, cat_slug value must be defined
- Possible values - array - like category 1, category 2 etc.
- number_posts
- set the number of portfolio items to display
- Possible values - number - like 1, 5, 16 etc.
- columns_excerpt
- defines if display an excerpt portfolio content (only for Columns)
- Possible values - yes or no
- excerpt_length
- defines the number of words to show in the portfolio excerpts (only for Columns)
- Possible values - number - like 10, 25, 50 etc.
- project_buttons
- defines if display the project buttons - Read More | View Project (only for Columns)
- Possible values - yes or no
- animation_type
- set the animation type of the component
- Possible values - none, bounce, fade, flash, shake, slide
- animation_direction
- set the animation direction of the component
- Possible values - down, left, right, up
- animation_speed
- set the animation speed of the component
- Possible values - in seconds like 0.1, 1, 5.3 etc.
- class
- custom class for CSS of component
- Possible values - string - like custom-element-class
- id
- custom ID for CSS of component
- Possible values - string - like custom-element-id
Basic Examples
Carousel
Grid
Columns
Animated Examples



