{"id":11998,"date":"2017-01-04T14:05:48","date_gmt":"2017-01-04T14:05:48","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=11998"},"modified":"2017-02-10T12:49:00","modified_gmt":"2017-02-10T12:49:00","slug":"portfolio-module","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/portfolio-module","title":{"rendered":"Portfolio Module"},"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]Before\u00a0displaying the portfolio items in Portfolio module, you need to create portfolios in the corresponding section of the admin panel. Check the <a href=\"http:\/\/nativewptheme.net\/support\/post-types\/portfolio-item-creation\" target=\"_blank\">Portfolio item creation<\/a> section of the theme documentation for more information.<\/p>\n<p>You may check the examples of the portfolio module on the <a href=\"http:\/\/nativewptheme.net\/shortcodes\/portfolio-module\/\">Portfolio module<\/a> page.<\/p>\n<h5>Watch the video tutorial on <a href=\"https:\/\/youtu.be\/xWQrIPskTds\" target=\"_blank\">Portfolio 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-2174 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/Genrea.jpg\" width=\"978\" height=\"497\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/Genrea.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/Genrea-300x152.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/Genrea-768x390.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Style<\/strong> &#8211; choose between 4\u00a0preset styles.\n<ul>\n<li><strong>Carousel<\/strong> \u2013 arranges the portfolio items into a\u00a0slideshow.<\/li>\n<li><strong>Grid<\/strong> \u2013 shows regularly spaced horizontal and vertical portfolio items.<\/li>\n<li><strong>Masonry<\/strong> \u2013\u00a0allows you to show portfolio items one after another, first in the horizontal direction, then vertically.<\/li>\n<li><strong>Justified Grid<\/strong> \u2013\u00a0shows elements one after another, first in the vertical direction, then horizontally.<\/li>\n<\/ul>\n<\/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>Portfolio item settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2187 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-settings-1.jpg\" width=\"978\" height=\"536\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-settings-1.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-settings-1-300x164.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-settings-1-768x421.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Categories<\/strong> &#8211; select the portfolio categories to display on the site.<\/li>\n<li><strong>Portfolios to show<\/strong> &#8211; set the number of portfolio works to display.<\/li>\n<li><strong>Items offset<\/strong> &#8211; set the space between the portfolio items.<\/li>\n<\/ul>\n<h5>Layout settings<\/h5>\n<ul>\n<li><strong>Number of columns<\/strong> &#8211; set the number of columns for the portfolio items. Five is the maximum value. For all styles except for\u00a0<strong>Justified Grid<\/strong>.<\/li>\n<li><strong>Auto slideshow<\/strong> \u2013 set it to <strong>Enable<\/strong>\u00a0to activate\u00a0the autoplay for the slider.\u00a0For <strong>Carousel style<\/strong> only.<\/li>\n<li><strong>Slideshow speed<\/strong> \u2013 specify the speed for the slideshow. For <strong>Carousel style<\/strong> only.<\/li>\n<\/ul>\n<h5>Content elements<\/h5>\n<p><strong><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2190 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-eleemnt.jpg\" width=\"978\" height=\"592\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-eleemnt.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-eleemnt-300x182.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-eleemnt-768x465.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/strong><\/p>\n<ul>\n<li><strong>Sort panel<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the sort panel with the portfolio categories above the single portfolio items.<\/li>\n<li><strong>Category<\/strong> \u2013 switch it to <strong>Enable<\/strong> to display the featured image of the single portfolio item.<\/li>\n<li><strong>Title<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the category of the portfolio on the\u00a0featured image of the single portfolio item.<\/li>\n<li><strong>Subtitle<\/strong> &#8211;\u00a0set it to <strong>Enable<\/strong> to display the subtitle of the\u00a0single portfolio item.<\/li>\n<li><strong>Meta<\/strong> \u2013 switch it to <strong>Enable<\/strong> to display the meta information of the single portfolio item.\n<ul>\n<li><strong>Date in portfolio meta<\/strong> \u2013 show or hide the date of publication in the meta of the single portfolio item.<\/li>\n<li><strong>Category in portfolio meta<\/strong> \u2013 set to <strong>Enable<\/strong> to display the category in the meta of the single portfolio item.<\/li>\n<li><strong>Comments counter in portfolio meta<\/strong> \u2013 show or hide the number of comments in the meta of the single portfolio item.<\/li>\n<li><strong>Likes in portfolio meta<\/strong> \u2013 show or hide the number of likes in the meta of the single portfolio item.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Excerpt<\/strong> \u2013 switch it to <strong>Enable<\/strong> to display the excerpt of the single portfolio 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. For <strong>Grid<\/strong> and <strong>Masonry <\/strong>styles<strong>\u00a0<\/strong>only.<\/li>\n<li><strong>Content position<\/strong> &#8211; choose the displaying of the gallery info content. You can set the content under or in front of the portfolio items.\u00a0For all styles except for\u00a0<strong>Justified Grid<\/strong>.<\/li>\n<li><strong>Content alignment<\/strong> \u2013\u00a0select the horizontal alignment of the content. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available. For all styles except for\u00a0<strong>Justified Grid<\/strong>.<\/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 portfolio hover settings may find in the\u00a0<a href=\"http:\/\/nativewptheme.net\/support\/theme-options\/portfolio-options\" target=\"_blank\">Portfolio options<\/a> post (Portfolio hover options section).<\/h4>\n<h5>Main hover settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2184 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/main-hover.jpg\" width=\"978\" height=\"486\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/main-hover.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/main-hover-300x149.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/main-hover-768x382.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Hover<\/strong> &#8211; switch it to <strong>Enable<\/strong> to activate hover effect for your portfolio items inside the module.<\/li>\n<li><strong>Content style<\/strong> &#8211;\u00a0select the style of the content for the\u00a0portfolio module. <strong>Simple<\/strong> and <strong>Tiled<\/strong> styles are available.\n<ul>\n<li><strong>Simple\u00a0<\/strong>\u2013 allows you to have transparent background without hover effect.<\/li>\n<li><strong>Tiled<\/strong>\u00a0\u2013 allows you to have white background with shadow hover effect.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Mask appear effect<\/strong> &#8211; select the hover effect for the mask appearing from the available ones.<\/li>\n<li><strong>Image hover effect<\/strong> &#8211;\u00a0choose behaviour for the featured image on hover.<\/li>\n<\/ul>\n<h5 class=\"wpb_vc_param_value \">Hover mask settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2308 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-mask-settings-1.jpg\" width=\"978\" height=\"696\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-mask-settings-1.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-mask-settings-1-300x213.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-mask-settings-1-768x547.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Mask content color <\/strong>&#8211; 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\">Portfolio options<\/del> <del class=\"support-arrow-right\">Portfolio hover style options<\/del> <del>Text color<\/del>.<\/li>\n<li><strong>Hover mask background style<\/strong> &#8211; 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\">Portfolio options<\/del> <del class=\"support-arrow-right\">Portfolio hover style options<\/del> <del>Hover mask background style<\/del>.<\/li>\n<li><strong>Mask background<\/strong> &#8211; choose the mask background color. The default value is inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Portfolio options<\/del> <del class=\"support-arrow-right\">Portfolio hover style options<\/del> <del>Hover mask background color<\/del>.<\/li>\n<li><strong>Mask background<\/strong>\u00a0<strong>opacity<\/strong>&#8211; choose the mask background color. The default value is inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Portfolio options<\/del> <del class=\"support-arrow-right\">Portfolio hover style options<\/del> <del>Hover mask background opacity<\/del>.<\/li>\n<li><strong>Hover mask frame decoration<\/strong> &#8211; set it to <strong>Enable<\/strong> to display the frame decoration on hover.\n<ul>\n<li><strong>Hover mask background style<\/strong>\u00a0&#8211; 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> &#8211; 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\" width=\"978\" height=\"368\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-decoration-settings.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-decoration-settings-300x113.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/hover-decoration-settings-768x289.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Decoration link<\/strong> &#8211;\u00a0choose the behaviour for the decoration link. It may be leading to the<strong> inner portfolio item page<\/strong>, to the\u00a0<strong>external link<\/strong> or to the <strong>lightbox<\/strong>.<\/li>\n<li><strong>Main decoration<\/strong> &#8211; 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\/portfolio-options\" target=\"_blank\">Portfolio options<\/a> post (Portfolio hover options section).<\/li>\n<li><strong>Title<\/strong> &#8211; set it to <strong>Enable<\/strong> to display the title of the portfolio item on hover.<\/li>\n<li><strong>Subtitle<\/strong> &#8211; set it to <strong>Enable<\/strong> to display the subtitle of the portfolio 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-12000 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/title-typography-1.jpg\" width=\"978\" height=\"457\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/title-typography-1.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/title-typography-1-300x140.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/title-typography-1-768x359.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><br \/>\nThese 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\">Portfolio typography<\/del>\u00a0<del>Portfolio item 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\" width=\"978\" height=\"460\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/subtitle-typography-1.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/subtitle-typography-1-300x141.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/subtitle-typography-1-768x361.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/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\">Portfolio typography\u00a0<\/del><del>Portfolio item subtitle Typography.<\/del><\/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>The description typography 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\">\u00a0Text typography<\/del><del>\u00a0Default text Typography<\/del>.<\/p>\n<p>These meta typography 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\">Text typography<\/del>\u00a0<del>Meta typography.<\/del>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Before displaying the portfolio items in Portfolio module, you need to create portfolios in the corresponding section of the admin panel. Check the Portfolio item creation section of the theme documentation for more information.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[22,11,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11998"}],"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=11998"}],"version-history":[{"count":4,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11998\/revisions"}],"predecessor-version":[{"id":12004,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11998\/revisions\/12004"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=11998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=11998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=11998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}