Gallery metro
shortcode

Present your galleries in an noticeable and great looking metro style. Impress the visitors.
Read documentation
Usage frequency
82%
Preset amount
87%
Customizability
93%

Available options

Default code: [dfd_gallery_metro_module items="single" columns="3" gallery_show_top_cat="on"]

Content – Allows you to choose the content to display. You can set loop to choose the definite categories or single item to show;

Categories – Select the categories to show;

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

Item size – Standard, tall, large or wide sizes for the single gallery item are available for choosing;

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 gallery 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 the hover effect for the gallery items;

Mask appear effect – Select the hover effect for the mask appearing;

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 content

Customized styles

Variation of style customizations of the shortcode
with category