{"id":11998,"date":"2017-01-04T14:05:48","date_gmt":"2017-01-04T14:05:48","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=11998"},"modified":"2023-07-31T11:03:00","modified_gmt":"2023-07-31T11:03:00","slug":"portfolio-module","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/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:\/\/rnbtheme.com\/documentation\/post-types\/portfolio-item-creation\" target=\"_blank\" rel=\"noopener\">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=\"https:\/\/rnbtheme.com\/elements\/\">Portfolio module<\/a> page.[\/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 size-full wp-image-14309\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfoio-general.png\" alt=\"\" width=\"978\" height=\"404\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfoio-general.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfoio-general-300x124.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfoio-general-768x317.png 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>FitRows<\/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>Simple<\/strong> &#8211; arranges the portfolios in the list with portfolio thumbnail image displayed on the left.<\/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:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/content-settings-1.jpg\" width=\"978\" height=\"536\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/content-settings-1.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/content-settings-1-300x164.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/content-settings-1-768x421.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Content<\/strong>\u00a0\u2013 select the content to be displayed in the module.\n<ul>\n<li><strong>Loop<\/strong>\u00a0\u2013 select this style to display multiple portfolio items in the module.<\/li>\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<li><strong>Content visibility<\/strong> &#8211; the visibility options for the portfolio&#8217;s content.<strong> Show on hover<\/strong> and <strong>show on default<\/strong> variants are available.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Single item<\/strong>\u00a0\u2013 select this style to display certain portfolio item.\n<ul>\n<li><strong>Portfolio item to display<\/strong>\u00a0\u2013 select the portfolio \u00a0item to display in the module.<\/li>\n<li><strong>Items offset<\/strong>\u00a0\u2013 set the paddings of the item.<\/li>\n<li><strong>Content alignment<\/strong>\u00a0\u2013 select how to align the module.<\/li>\n<li><strong>Content visibility<\/strong> &#8211; the visibility options for the portfolio&#8217;s content.<strong> Show on hover<\/strong> and <strong>show on default<\/strong> variants are available.<\/li>\n<\/ul>\n<\/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>Simple<\/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><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14312\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfoio-content.png\" alt=\"\" width=\"978\" height=\"668\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfoio-content.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfoio-content-300x205.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfoio-content-768x525.png 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 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>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>Heading 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>Simple<\/strong>.<\/li>\n<li><strong>Read more button<\/strong>\u00a0\u2013 enable the read more button, if needed.<\/li>\n<li><strong>Share buttons<\/strong>\u00a0\u2013 set on to display share buttons.<\/li>\n<li><strong>Comments<\/strong>\u00a0\u2013 set of to display the comments counter.<\/li>\n<li><strong>Likes<\/strong>\u00a0\u2013 enable the like button.<\/li>\n<li><strong>Animate comments and likes<\/strong>\u00a0\u2013 set on to make the comments and likes appear on hover.<\/li>\n<li><strong>Read more style<\/strong>\u00a0\u2013 select the style of the read more button.<\/li>\n<li><strong>Share style<\/strong>\u00a0\u2013 select the style of the share.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Thumbs settings&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Thumbs settings<\/h3>\n<h4>Set the size of thumbnails. For Carousel and Fitrows styles only.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14284\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/image.png\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/image.png 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/image-300x51.png 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/image-768x130.png 768w\" alt=\"\" width=\"978\" height=\"165\" \/><\/p>\n<ul>\n<li><strong>Image width<\/strong>\u00a0\u2013 type the image width of single portfolio item thumbnail.<\/li>\n<li><strong>Image height<\/strong>\u00a0\u2013 type the thumbnail height.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Hover settings&#8221; tab_id=&#8221;1506343713742-0e19bb04-6340&#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:\/\/rnbtheme.com\/documentation\/theme-options\/portfolio-options\" target=\"_blank\" rel=\"noopener\">Portfolio options<\/a> post (Portfolio hover options section).<\/h4>\n<h5>Main hover settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14315\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfolio-hover.png\" alt=\"\" width=\"978\" height=\"718\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfolio-hover.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfolio-hover-300x220.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/portfolio-hover-768x564.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Hover style<\/strong>\u00a0\u2013 select if you\u2019d like to inherit the hover settings from theme options or to create custom hover effect.<\/li>\n<li><strong>Mask appear\u00a0effect<\/strong>\u00a0\u2013 allows you to choose one of the preset appear animations for the portfolio items. If you choose inherit from theme options the displaying will correspond to the theme options.<\/li>\n<li><strong>Image effect<\/strong>\u00a0\u2013 This option allows you to choose the image behavior for the portfolio items.<\/li>\n<li><strong>Main decoration<\/strong>\u00a0\u2013\u00a0set the decoration element which will be displayed on hover.\n<ul>\n<li><strong>None<\/strong>\u00a0\u2013 no decoration is set for mouse hover effect.<\/li>\n<li><strong>Heading<\/strong>\u00a0\u2013\u00a0allows showing the portfolio\u00a0item title\/subtitle which is possible to link to the portfolio page itself, to the\u00a0external link or open the image in lightbox.\n<ul>\n<li><strong>Heading decoration<\/strong>\u00a0\u2013\u00a0\u00a0choose the style for the heading hover decoration.<\/li>\n<li><strong>Hover link<\/strong>\u00a0\u2013 set the link for the plus icon. It can link to\u00a0<strong>inside<\/strong>\u00a0(inner page of single portfolio\u00a0item) and to\u00a0<strong>lightbox<\/strong>.<\/li>\n<li><strong>Show title<\/strong>\u00a0\u2013 set to\u00a0<strong>Enable<\/strong>\u00a0if you want the portfolio item title to be displayed on hover.<\/li>\n<li><strong>Show subtitle<\/strong>\u00a0\u2013\u00a0set to\u00a0<strong>Enable<\/strong>\u00a0if you want the portfolio item subtitle to be displayed on hover.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Plus<\/strong>\u00a0\u2013 the plus icon will be displayed as hover decoration.\n<ul>\n<li><strong>Hover link<\/strong>\u00a0\u2013 set the link for the plus icon. It can link to\u00a0<strong>inside<\/strong>\u00a0(inner page of single portfolio item) and to\u00a0<strong>lightbox<\/strong>.<\/li>\n<li><strong>Plus position<\/strong>\u00a0\u2013\u00a0set the Plus decoration position.<\/li>\n<li><strong>Plus background<\/strong>\u00a0\u2013\u00a0set the Plus decoration\u2019s background. This option is not available for \u2018<strong>Middle of the project<\/strong>\u2018 plus position.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Lines<\/strong>\u00a0\u2013\u00a0the lines will be displayed as hover decoration.\n<ul>\n<li><strong>Hover link<\/strong>\u00a0\u2013 set the link for the plus icon. It can link to\u00a0<strong>inside<\/strong>\u00a0(inner page of single portfolio item) and to\u00a0<strong>lightbox<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Dots<\/strong>\u00a0\u2013\u00a0three dots will be displayed as hover decoration.\n<ul>\n<li><strong>Hover link<\/strong>\u00a0\u2013 set the link for the plus icon. It can link to\u00a0<strong>inside<\/strong>\u00a0(inner page of single portfolio item) and to\u00a0<strong>lightbox<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/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<h5>Title typography<\/h5>\n<p>These settings are inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">Custom typography<\/del>\u00a0<del>Blog heading Typography<\/del>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2166 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/typography.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/typography.jpg 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/typography-300x141.jpg 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/01\/typography-768x362.jpg 768w\" width=\"978\" height=\"461\" \/><\/p>\n<ul>\n<li><strong>Font size<\/strong>\u00a0\u2013 set the font size you need to use in the title.<\/li>\n<li><strong>Letter spacing<\/strong>\u00a0\u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong>\u00a0\u2013\u00a0set the needed distance between lines in the title text.<\/li>\n<li><strong>Text color<\/strong>\u00a0\u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong>\u00a0\u2013 select the font weight and style (bold, italic) for the title.<\/li>\n<li><strong>Custom font family<\/strong>\u00a0\u2013 set it to\u00a0<strong>Enable<\/strong>\u00a0to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong>\u00a0\u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong>\u00a0\u2013 select the font weight and style (bold, italic) for the title.<\/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>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:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11998"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=11998"}],"version-history":[{"count":10,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11998\/revisions"}],"predecessor-version":[{"id":15588,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11998\/revisions\/15588"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=11998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=11998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=11998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}