This feature is available only for Premium members
See this document if you need more information
NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor.
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