{"id":11889,"date":"2017-01-06T11:44:28","date_gmt":"2017-01-06T11:44:28","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=11889"},"modified":"2017-02-08T16:02:12","modified_gmt":"2017-02-08T16:02:12","slug":"gallery-metro","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/gallery-metro","title":{"rendered":"Gallery Metro"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]Impress your visitors with the\u00a0metro style of your gallery section. More example of the module can be found on <a href=\"http:\/\/nativewptheme.net\/shortcodes\/gallery-metro\/\" target=\"_blank\">Gallery Metro<\/a> page.<\/p>\n<p>Before\u00a0displaying the gallery items in Gallery module, you need to create gallery items in the corresponding section of the admin panel. Check the <a href=\"http:\/\/nativewptheme.net\/support\/post-types\/gallery-item-creation\" target=\"_blank\">Gallery item creation<\/a> section of the theme documentation for more information.<\/p>\n<h5>Watch the video tutorial on <a href=\"https:\/\/youtu.be\/AGjTdh_r-H4\" target=\"_blank\">Gallery Metro module creation<\/a> for more details.<\/h5>\n<p>[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3>General settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2379 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/general-1-1.jpg\" width=\"978\" height=\"456\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/general-1-1.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/general-1-1-300x140.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/general-1-1-768x358.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Content<\/strong> \u2013 select the content to be displayed in the module.\n<ul>\n<li><strong>Loop<\/strong> \u2013 choose this style to display the latest gallery works.<\/li>\n<li><strong>Single item<\/strong> \u2013 select this content type to display single gallery work on the page.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Categories<\/strong> \u2013 select the categories of the gallery items to be displayed within the module. For <strong>Loop<\/strong> style only.<\/li>\n<li><strong>Galleries to show<\/strong> \u2013 select the number of the gallery to be displayed in the\u00a0module. For <strong>Loop<\/strong> style only.<\/li>\n<\/ul>\n<p>For <strong>Single item<\/strong> style there is an option to select the items to be displayed.<\/p>\n<p>By clicking on the arrow down icon you can reveal the whole section to adjust it to your needs. Here you are also able to duplicate the gallery items, change their order (simply drag-n-drop the blocks) and delete the unnecessary ones as well.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2382 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/single-item.jpg\" width=\"978\" height=\"650\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/single-item.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/single-item-300x199.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/single-item-768x510.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Item to display<\/strong> \u2013 select the gallery work you want to show.<\/li>\n<li><strong>Item size<\/strong> \u2013 select the size of the featured image of the gallery work.<\/li>\n<\/ul>\n<p>Using this section you can create your own structure and achieve any\u00a0displaying\u00a0you may need.<\/p>\n<h5>Layout settings<\/h5>\n<ul>\n<li><strong>Number of columns<\/strong>\u00a0\u2013 select the number of the columns you want to have for your gallery section.<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<ul>\n<li><strong>Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type <strong>custom-style<\/strong> class and then go to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Content settings&#8221; tab_id=&#8221;1486545572829-e1c1304c-ee12&#8243;][vc_column_text]<\/p>\n<h3>Content settings<\/h3>\n<h5>Content elements<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2385 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content.jpg\" width=\"978\" height=\"472\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-300x145.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-768x371.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Sort panel<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the sort panel with the gallery categories above the single gallery items.<\/li>\n<li><strong>Category<\/strong> \u2013 switch it to <strong>Enable<\/strong> to display the featured image of the single gallery item.<\/li>\n<li><strong>Title<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the category of the gallery on the\u00a0featured image of the single gallery item.<\/li>\n<li><strong>Subtitle<\/strong> \u2013\u00a0set it to <strong>Enable<\/strong> to display the subtitle of the\u00a0single gallery item.<\/li>\n<li><strong>Enable excerpt<\/strong> \u2013 switch it to <strong>Enable<\/strong> to display the excerpt of the single gallery item as its description.<\/li>\n<li><strong>Sort panel alignment<\/strong> \u2013 select the horizontal alignment of the sort panel. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<li><strong>Content style<\/strong> &#8211; choose the content hover style.\n<ul>\n<li><strong>Simple<\/strong>\u00a0&#8211; the gallery works are displayed on the transparent background without hover effect.<\/li>\n<li><strong>Tiled\u00a0<\/strong>&#8211; the gallery works are displayed on white background with shadow hover effect.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Hover settings&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Hover settings<\/h3>\n<h4>More information regarding the gallery hover settings may find in the\u00a0<a href=\"http:\/\/nativewptheme.net\/support\/theme-options\/gallery-options\" target=\"_blank\">Gallery options<\/a> post (Gallery hover style options section).<\/h4>\n<h5>Main hover settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2275 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/main-hover-1.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/main-hover-1.jpg 978w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/main-hover-1-300x118.jpg 300w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/main-hover-1-768x302.jpg 768w\" width=\"978\" height=\"384\" \/><\/p>\n<ul>\n<li><strong>Hover<\/strong> \u2013 switch it to <strong>Enable<\/strong> to activate hover effect for your gallery items inside the module.<\/li>\n<li><strong>Mask appear effect<\/strong> \u2013 select the hover effect for the mask appearing from the available ones.<\/li>\n<li><strong>Image hover effect<\/strong> \u2013\u00a0choose behavior for the featured image on hover.<\/li>\n<\/ul>\n<h5 class=\"wpb_vc_param_value \">Hover mask settings<\/h5>\n<p class=\"wpb_vc_param_value \"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2310 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-mask-settings-2.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-mask-settings-2.jpg 978w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-mask-settings-2-300x213.jpg 300w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-mask-settings-2-768x547.jpg 768w\" width=\"978\" height=\"696\" \/><\/p>\n<ul>\n<li><strong>Mask content color <\/strong>\u2013 choose the color for the content text. The default value is inherited from <del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Gallery options<\/del><del class=\"support-arrow-right\">Gallery hover style options<\/del> <del>Text color<\/del>.<\/li>\n<li><strong>Hover mask background style<\/strong> \u2013 select the mask background style, you can choose simple color or gradient. The default value is inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Gallery options<\/del> <del class=\"support-arrow-right\">Gallery hover style options<\/del> <del>Hover mask background style<\/del>.<\/li>\n<li><strong>Mask background<\/strong> \u2013 choose the mask background color. The default value is inherited from <del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Gallery options<\/del><del class=\"support-arrow-right\">Gallery hover style options<\/del> <del>Hover mask background color<\/del>.<\/li>\n<li><strong>Mask background<\/strong>\u00a0<strong>opacity<\/strong>\u2013 choose the mask background color. The default value is inherited from <del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Gallery options<\/del><del class=\"support-arrow-right\">Gallery hover style options<\/del> <del>Hover mask background opacity<\/del>.<\/li>\n<li><strong>Hover mask frame decoration<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the frame decoration on hover.\n<ul>\n<li><strong>Hover mask background style<\/strong>\u00a0\u2013 select the style of the mask decoration.\u00a0<strong>Simple<\/strong> and\u00a0<strong>Offset<\/strong> styles are available.<\/li>\n<li><strong>Hover mask frame size<\/strong> \u2013 set the size for the frame decoration on hover.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Hover decoration settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2196 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-decoration-settings.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-decoration-settings.jpg 978w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-decoration-settings-300x113.jpg 300w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-decoration-settings-768x289.jpg 768w\" width=\"978\" height=\"368\" \/><\/p>\n<ul>\n<li><strong>Decoration link<\/strong> \u2013\u00a0choose the behavior for the decoration link. It may be leading to the<strong> inner gallery item page<\/strong>, to the\u00a0<strong>external link<\/strong> or to the <strong>lightbox<\/strong>.<\/li>\n<li><strong>Main decoration<\/strong> \u2013 choose the main decoration style for the hover. More information regarding each style you may find in the\u00a0<a href=\"http:\/\/nativewptheme.net\/support\/theme-options\/gallery-options\" target=\"_blank\">Gallery options<\/a> post (Gallery hover style options section).<\/li>\n<li><strong>Title<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the title of the gallery item on hover.<\/li>\n<li><strong>Subtitle<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the subtitle of the gallery item on hover.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Typography settings&#8221; tab_id=&#8221;1486545573311-423c930f-c6e7&#8243;][vc_column_text]<\/p>\n<h3>Typography settings<\/h3>\n<h5>Title typography<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2199 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/title-typography.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/title-typography.jpg 978w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/title-typography-300x141.jpg 300w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/title-typography-768x361.jpg 768w\" width=\"978\" height=\"460\" \/><\/p>\n<p>These settings are inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Typography\/Fonts<\/del> <del class=\"support-arrow-right\">Gallery typography<\/del>\u00a0<del>Gallery item title Typography.<\/del>Default color is\u00a0#fff. If the title is set to be displayed, but no hover effect is set for the gallery items, the setting for title are inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Typography\/Fonts<\/del><del class=\"support-arrow-right\">Blog typography\u00a0<\/del><del>Blog title Typography.<\/del><\/p>\n<ul>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use in the title.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the title text.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the title.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the title.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Subtitle typography<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2201 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/subtitle-typography-1.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/subtitle-typography-1.jpg 978w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/subtitle-typography-1-300x141.jpg 300w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/subtitle-typography-1-768x361.jpg 768w\" width=\"978\" height=\"460\" \/><\/p>\n<p>These settings are inherited from <del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Typography\/Fonts<\/del><del class=\"support-arrow-right\">Gallery typography\u00a0<\/del><del>Gallery item subtitle Typography.<\/del> Default color is\u00a0#fff.<\/p>\n<ul>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use in the subtitle.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the subtitle text.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the subtitle.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the subtitle.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Impress your visitors with the metro style of your gallery section.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[12,22,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11889"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=11889"}],"version-history":[{"count":2,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11889\/revisions"}],"predecessor-version":[{"id":11892,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11889\/revisions\/11892"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=11889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=11889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=11889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}