Portfolio metro
shortcode

Present your portfolios in noticeable and great looking metro style. Impress the visitors with extremely popular design.
Read documentation
Usage frequency
65%
Preset amount
75%
Customizability
94%

Available options

Default code: [dfd_portfolio_module posts_to_show="6" items_offset="20" columns="3"]

Content – Allows you to choose the content to display. You can set loop to display multiple works of different categories, or select single item to combine portfolio works manually;

Categories – Select the categories to show;

Item to display– Choose the item you’d like to show;

Item size – Choose standard, tall, large or wide sizes for the single portfolio item;

Number of columns – Set the number of columns you’d like to display;

Animation – Select among 14 appear effects;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Content elements – Choose the content elements you’d like to display;

Sort panel alignment – Allows you to align the sort panel horizontally;

Content alignment – Choose the horizontal alignment for the portfolio info;

Content style – This option allows you to choose the content hover style. Simple style allows you to have transparent background without hover effect. Tiled style allows you to have white background with shadow hover effect;

Hover – Allows you to enable or disable hover effect for the portfolio items;

Mask appear effect – Select the mask appearing hover effect;

Image hover effect – Allows you to choose the image behaviour on hover;

Hover mask settings – Customize the mask style, color, opacity, set the color for the content on hover. You can also enable the frame decoration and customize it;

Hover decoration settings – Allow you to add the main decoration and choose the behaviour for the decoration link;

Typography – Select letter spacing, font size and element tag. You can also choose the custom font family.

Default styles

Sample of preset styles without custom changes
Loop

Customized styles

Variation of style customizations of the shortcode
custom hover