{"id":136,"date":"2016-11-28T10:04:52","date_gmt":"2016-11-28T10:04:52","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=136"},"modified":"2023-07-31T17:56:58","modified_gmt":"2023-07-31T17:56:58","slug":"portfolio-page-creation","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/post-types\/portfolio-page-creation","title":{"rendered":"Portfolio Page Creation"},"content":{"rendered":"<p>To create Portfolio page, you should navigate to <strong>Pages<\/strong> section of the WordPress admin area and click on <strong>Add new<\/strong>.<br \/>\nSelect <strong>Portfolio page template <\/strong>for your page in <strong>Page Attributes<\/strong> section in the right sidebar of the page back-end editor.The single portfolio items are added on this page automatically according to their publication date: firstly the newest portfolios are displayed.<\/p>\n<p>The single portfolio items are added on this page automatically according to their publication date: firstly the newest portfolios are displayed.<\/p>\n<h5>Watch the video tutorial on\u00a0<a href=\"https:\/\/youtu.be\/Y8pagQW2gvU\" target=\"_blank\" rel=\"noopener\">portfolio page creation<\/a>\u00a0for more details.<\/h5>\n<p>This template inherits its settings from the <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Portfolio options<\/del> <del>Portfolio page options<\/del> section.<\/p>\n<p>You may also overwrite these options from the <strong>Portfolio page options<\/strong> meta box.<br \/>\nThe changes set in the <strong>Portfolio page options<\/strong> meta box of the page will be applied on this page only, they will not influence on other pages of the site.<\/p>\n<h3 class=\"dfd-portfolio_settings_box active\">Portfolio page options<\/h3>\n<h4 class=\"dfd-portfolio_settings_box active\">Stylish portfolio page created with the help of Portfolio page template can be customized using these settings.<\/h4>\n<p class=\"cmb_metabox_title\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13188\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/port-page1.jpg\" alt=\"\" width=\"978\" height=\"818\" \/><\/p>\n<h6><\/h6>\n<ul>\n<li><strong>Stunning header<\/strong>\u00a0\u2013\u00a0set it to\u00a0<strong>Enable<\/strong>\u00a0to show the stunning header on <span style=\"background-color: #ffffff;\">portfolio\u00a0<\/span>page. If you choose inherit from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Categories and tags dropdown<\/strong>\u00a0\u2013 adds categories, tags and author drop-down sorter before portfolio items. If you choose\u00a0<strong>inherit<\/strong>\u00a0the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Portfolio layout width<\/strong>\u00a0\u2013\u00a0allows you select the width of the page.\u00a0<strong>Boxed<\/strong>\u00a0and\u00a0<strong>full width<\/strong>\u00a0variants are available. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Sidebar configuration<\/strong>\u00a0\u2013\u00a0set the sidebars to be shown on the portfolio\u00a0page. \u00a0\u00a0<strong>No sidebars, sidebar on left, sidebar on right<\/strong>\u00a0and\u00a0<strong>both left and right sidebars\u00a0<\/strong>are available. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Portfolio layout style<\/strong> &#8211; select layout style for the single portfolio items on your portfolio page.\n<ul>\n<li><strong>Standard<\/strong>\u00a0\u2013 the featured image of the single portfolio items is displayed in one column with the description below it. Find the example of the page\u00a0<a href=\"http:\/\/rnbtheme.com\/home-demo\/classic-layout\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/li>\n<li><strong>Masonry<\/strong>\u00a0\u2013 the portfolios are aligned into a masonry sections. The content takes as much space as needed and the thumbnails are not cropped and adjusted to it. Find the example of the page\u00a0<a href=\"http:\/\/rnbtheme.com\/home-demo\/masonry-layout\/\">here<\/a>.<\/li>\n<li><strong>Grid<\/strong>\u00a0\u2013 the portfolio items are aligned into a grid equal sections. The content is adjusted to take equal space and the thumbnails are cropped respectively. Grid page example can be found\u00a0<a href=\"http:\/\/rnbtheme.com\/home-demo\/grid-layout\/\">here<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Number of columns<\/strong> &#8211; select the number of columns for portfolio items on the\u00a0portfolio page. Five columns are the\u00a0maximum value (for Grid and Masonry styles only!).<\/li>\n<li><strong>Sort panel<\/strong> &#8211; allows you to enable or disable portfolio categories sorter above portfolio items (for Grid and Masonry styles only!).<\/li>\n<li><strong>Title<\/strong> &#8211; select whether the title of the single portfolio item will be shown or hidden on the portfolio page under the\u00a0featured image of a single portfolio item.<\/li>\n<li><strong>Subtitle<\/strong> &#8211;\u00a0select whether the subtitle of the single portfolio item will be shown or hidden on the portfolio page under the featured image of a single portfolio item.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13190\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/port-page3.jpg\" alt=\"\" width=\"978\" height=\"816\" \/><\/p>\n<ul>\n<li><strong>Meta<\/strong> &#8211; allows you to show or hide the information about the portfolio item (date of creation, category, likes, count) under the featured image.<\/li>\n<li><strong>Comments count<\/strong>\u00a0\u2013\u00a0select whether to show or hide the comments count of the single portfolio item. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Likes<\/strong>\u00a0\u2013\u00a0select if you\u2019d like to show or hide the likes count of the single portfolio item. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Description<\/strong> &#8211; allows you to show or hide short description from the <strong>Excerpt field<\/strong> under the featured image of the\u00a0single portfolio item.<\/li>\n<li><strong>Comments and likes style<\/strong>\u00a0\u2013 \u00a0set the visibility of comments and likes counter.\u00a0<strong>Always show<\/strong>\u00a0or\u00a0<strong>Show on hover<\/strong>\u00a0variants are available. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Content alignment<\/strong> &#8211;\u00a0set the horizontal alignment for the content of single portfolio item.<\/li>\n<li><strong>Read more style<\/strong>\u00a0\u2013\u00a0choose one of the preset styles for the<strong>\u00a0Read more<\/strong>\u00a0button. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Share style<\/strong>\u00a0\u2013\u00a0select one of the preset styes for the Share button. If you choose inherit from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Works per page<\/strong> &#8211; enter the number of portfolio items to be displayed on portfolio page.<\/li>\n<li><strong>Items offset in px<\/strong>\u00a0\u2013 adds space between single portfolios on the portfolio page.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13190\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/port-page4.jpg\" alt=\"\" width=\"978\" height=\"816\" \/><\/p>\n<ul>\n<li><strong>\u00a0Content position<\/strong> &#8211; select the position for the Visual Composer content displaying. Two variants are available: <strong>under<\/strong> or <strong>over<\/strong> the content.<\/li>\n<li><strong>Portfolio Category<\/strong> &#8211;\u00a0select the categories of the single portfolio items to be displayed on portfolio page.<\/li>\n<li><strong>Items appear effect<\/strong> &#8211; allows you to select the animation appear effect for the single portfolio item.\u00a0If you choose <strong>theme default<\/strong> the displaying will correspond to the settings in <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">Portfolio page options<\/del> <del> Extra features.<\/del><\/li>\n<\/ul>\n<h6><\/h6>\n<h3>Portfolio hover options<\/h3>\n<h4>Customize the hover style for the portfolio featured images to add cool animation effects and make the portfolio page unique and incomparable.<\/h4>\n<ul>\n<li><strong>Hover style group<\/strong> &#8211; select the portfolio type to use on the site:\n<ul>\n<li><strong>Pre-built hovers (old version)<\/strong> &#8211; 24 pre built hover styles (available till Ronneby 1.1.0).\n<ul>\n<li><strong>Hover style<\/strong> &#8211; choose one of the preset hover styles from the list.<\/li>\n<li><strong>Advanced customizable hover<\/strong> &#8211; new elaborated hovers that can be customized (available in Ronneby 1.1.1).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13194\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/port-hover.jpg\" alt=\"\" width=\"978\" height=\"716\" \/><\/p>\n<ul>\n<li><strong>Appear effect<\/strong> \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>Main decoration<\/strong> &#8211; set the decoration which will be displayed on hover.\n<ul>\n<li><strong>Inherit\u00a0<\/strong>\u2013 if you choose\u00a0<strong>theme default<\/strong>\u00a0the displaying will correspond to the\u00a0<del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Portfolio options settings<\/del>\u00a0<del class=\"support-arrow-right\">portfolio hover options<\/del><del class=\"support-arrow-right\">\u00a0<\/del><del>Main hover decoration<\/del>\u00a0settings.<\/li>\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 item 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. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Show title<\/strong>\u00a0\u2013 set to\u00a0<strong>Enable<\/strong>\u00a0if you want the gallery 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 gallery item subtitle to be displayed on hover.<\/li>\n<li><strong>Enable external link<\/strong> &#8211; set on to display the link to custom project or external site.<\/li>\n<li><strong>Enable Quick view<\/strong> &#8211; set on to display the button to preview portfolio work in the lightbox .<\/li>\n<li><strong>Enable Lightbox<\/strong> &#8211; set on to display the icon to open the portfolio gallery in a lightbox.<\/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. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/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. If you choose\u00a0<strong>inherit<\/strong>\u00a0from theme options the displaying will correspond to the theme options settings.<\/li>\n<li><strong>Enable external link<\/strong> &#8211; set on to display the link to custom project or external site.<\/li>\n<li><strong>Enable Quick view<\/strong> &#8211; set on to display the button to preview portfolio work in the lightbox .<\/li>\n<li><strong>Enable Lightbox<\/strong> &#8211; set on to display the icon to open the portfolio gallery in a lightbox.<\/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>Enable external link<\/strong> &#8211; set on to display the link to custom project or external site.<\/li>\n<li><strong>Enable Quick view<\/strong> &#8211; set on to display the button to preview portfolio work in the lightbox .<\/li>\n<li><strong>Enable Lightbox<\/strong> &#8211; set on to display the icon to open the portfolio gallery in a lightbox.<\/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>Enable external link<\/strong> &#8211; set on to display the link to custom project or external site.<\/li>\n<li><strong>Enable Quick view<\/strong> &#8211; set on to display the button to preview portfolio work in the lightbox .<\/li>\n<li><strong>Enable Lightbox<\/strong> &#8211; set on to display the icon to open the portfolio gallery in a lightbox.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Stunning Header Options<\/h3>\n<h4>Use this meta box to style the unique Stunning header for a single page in case you want to add something special to your page.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13029\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/stunning-header-inside1.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/stunning-header-inside1.jpg 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/stunning-header-2-300x247.png 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/stunning-header-inside1.jpg 768w\" alt=\"\" width=\"978\" height=\"806\" \/><\/p>\n<ul>\n<li><strong>Background image<\/strong>\u00a0\u2013 upload the background image for stunning\u00a0header.<\/li>\n<li><strong>Background image position<\/strong>\u00a0\u2013 set the position of the image or images selected for stunning header.<\/li>\n<li><strong>Background size<\/strong>\u00a0\u2013 allows adjusting the background image displaying. You can select:\u00a0<strong>cover<\/strong>,\u00a0<strong>contain<\/strong>\u00a0and\u00a0<strong>initial<\/strong>\u00a0values or\u00a0<strong>inherit<\/strong>\u00a0the value set for\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">Header options<\/del>\u00a0<del>Stunning Header options<\/del>\u00a0section.<\/li>\n<li><strong>Background color<\/strong>\u00a0\u2013 select the background color for the stunning\u00a0header, which will be shown if the image is not set for the stunning\u00a0header.<\/li>\n<li><strong>Page subtitle<\/strong>\u00a0\u2013 enter page subtitle text to be displayed in stunning\u00a0header.<\/li>\n<li><strong>Breadcrumbs<\/strong>\u00a0\u2013\u00a0show or hide the navigation links in stunning\u00a0header.<\/li>\n<li><strong>Stunning header height in px<\/strong>\u00a0\u2013 you can set the height for your stunning\u00a0header. Note, the height should be set in px.<\/li>\n<li><strong>Text alignment<\/strong>\u00a0\u2013 sets the text position in stunning header.\u00a0<strong>Center<\/strong>,\u00a0<strong>left<\/strong>\u00a0and\u00a0<strong>right<\/strong>\u00a0positions are available.<\/li>\n<li><b>Fixed background image position<\/b>\u00a0\u2013 switch it to\u00a0<strong>Enable<\/strong>\u00a0if you want to have parallax effect for stunning\u00a0header:\u00a0the background image is fixed and content scrolls over it.<\/li>\n<li><strong>Background scheme<\/strong>\u00a0\u2013 select whether\u00a0<strong>dark<\/strong>\u00a0or\u00a0<strong>light<\/strong>\u00a0color scheme is used for stunning\u00a0header. According to the color scheme, you choose the text colors will be changed to make it more readable. By default, the displaying will\u00a0inherit the settings from\u00a0<del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Header options<\/del>\u00a0<del>Stunning Header options<\/del>\u00a0section.<\/li>\n<li><strong>Stunning header video<\/strong>\u00a0\u2013 switch it to\u00a0<strong>Enable<\/strong>\u00a0to set video background for the stunning\u00a0header.\n<ul>\n<li><strong>Stunning\u00a0header video source<\/strong>\u00a0\u2013 select the source for the video for stunning\u00a0header. You can use\u00a0<strong>self-hosted video<\/strong>, videos from\u00a0<strong>YouTube<\/strong>\u00a0and\u00a0<strong>Vimeo<\/strong>\u00a0resources.\n<ul>\n<li><strong>Self-hosted video file<\/strong>\u00a0can be uploaded in mp4 format and\u00a0in webM format. Select\u00a0the video in mp4 format for IE, Chrome and Safari browsers and the webM\/ogg video for Firefox and Opera.<br \/>\nSimply upload the video to Media Library and insert the link to the video.<\/li>\n<li><strong>oEmbed YouTube video<\/strong>\u00a0\u2013 allows you to set the video from YouTube resource.\n<ul>\n<li><strong>Stunning\u00a0header background video style<\/strong>\u00a0\u2013 allows you to select whether the video will be set as background for stunning header or will have full screen size.<\/li>\n<li><strong>Youtube video ID<\/strong>\u00a0\u2013 enter the video ID to be displayed in stunning\u00a0header. To find the video ID, look at the URL of that page, and at the end of it, you should see a combination of numbers and letters after an equal sign (=). Copy the numbers of an equal sign (=) and enter the ID.<\/li>\n<\/ul>\n<\/li>\n<li><strong>oEmbed Vimeo video<\/strong>\u00a0\u2013 allows you to set the video from Vimeo resource.\n<ul>\n<li><strong>Stunning\u00a0header background video style<\/strong>\u00a0\u2013 allows you to select whether the video will be set as background for stunning\u00a0header or will have full screen size.<\/li>\n<li><strong>Vimeo video ID<\/strong>\u00a0\u2013 enter the video ID to be displayed in stunning\u00a0header. To find the video ID, copy the numeric code that appears at the end of its URL at the top of your browser window.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Loop video<\/strong>\u00a0\u2013 enable it to loop the video.<\/li>\n<li><strong>Mute video<\/strong>\u00a0\u2013\u00a0enable it to mute the video.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Pagination options<\/h3>\n<h4>Select the most suitable style for your portfolio page in order to arrange the portfolio items on it in the best way.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13140\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/pagination-type.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/pagination-type.jpg 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/11\/Pagination-1-300x45.png 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/pagination-type.jpg 768w\" alt=\"\" width=\"978\" height=\"148\" \/><\/p>\n<ul>\n<li><strong>Pagination type<\/strong>\u00a0\u2013 select the style of the pagination \u2013 it\u2019s the way extra content is loaded.\u00a0<strong>Default<\/strong>,\u00a0<strong>ajax<\/strong>\u00a0and<strong>\u00a0lazy load<\/strong>\u00a0variants are available.\n<ul>\n<li><strong>Pagination style<\/strong>\u00a0\u2013 select among 5 styles available for the number on the portfolio page.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3 class=\"dfd-page_bg_metabox active\">Page options<\/h3>\n<h4>You can set the Background for the whole page in this meta box. You can also enable parallax effect for the page, add the\u00a0white frame around etc.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13083\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/page-options-ins.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/page-options-ins.jpg 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/page-options-ins.jpg 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/page-options-ins.jpg 768w\" alt=\"\" width=\"978\" height=\"407\" \/><\/p>\n<ul>\n<li><strong>Background color<\/strong>\u00a0\u2013 select the background color for the page to be seen if the image background is not set for the page or image does not cover the whole page.<\/li>\n<li><strong>Fixed background<\/strong>\u00a0\u2013 enable fixed background to make the background image fixed, so the content will scroll separately over it. When\u00a0<strong>Disable<\/strong>\u00a0is selected, the background image scrolls with the content.<\/li>\n<li><strong>Background image<\/strong>\u00a0\u2013 upload the image to be displayed as a background of the page or enter the URL of the image.<\/li>\n<li><strong>Background image repeat<\/strong>\u00a0\u2013 select whether the page background image will be repeated or not repeated. You can select\u00a0<strong>horizontal repeat<\/strong>,\u00a0<strong>vertical repeat<\/strong>\u00a0or<strong>\u00a0disable repeat<\/strong>\u00a0of the image.<\/li>\n<li><strong>Background size<\/strong>\u00a0\u2013\u00a0allows adjusting the background image displaying. You can select:\u00a0<strong>cover<\/strong>,\u00a0<strong>contain<\/strong>\u00a0and\u00a0<strong>initial<\/strong>\u00a0values or\u00a0<strong>inherit<\/strong>\u00a0the value set for\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del>\u00a0<del>Layout settings<\/del>\u00a0section.<\/li>\n<li><strong>Layout frame<\/strong>\u00a0\u2013 switch it to\u00a0<strong>Enable<\/strong>, if you want to have the\u00a0frame around the page. The color and width of the frame can be set in\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Layout settings<\/del>\u00a0<del class=\"support-arrow-right\">Layout frame size<\/del>\u00a0and\u00a0<del>Layout frame color<\/del>.<\/li>\n<li><strong>Parallax footer<\/strong>\u00a0\u2013 switch it to\u00a0<strong>Enable\u00a0<\/strong>to have fixed the footer with content scrolling over it.<\/li>\n<\/ul>\n<h3>Preloader options<\/h3>\n<h4>Set certain preloader style for the\u00a0page on the site.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13086\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/preloader-met.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/preloader-met.jpg 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/preloader-met.jpg 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2019\/06\/preloader-met.jpg 768w\" alt=\"\" width=\"978\" height=\"871\" \/><\/p>\n<ul>\n<li><strong>Background image<\/strong>\u00a0\u2013\u00a0upload the image to set it as site preloader background.<\/li>\n<li><strong>Background position<\/strong>\u00a0\u2013 select the position for the image for its better displaying.<\/li>\n<li><strong>Background color<\/strong>\u00a0\u2013 pick up the site preloader background color to be displayed as a background for the preloader.<\/li>\n<li><strong>Background size<\/strong>\u00a0\u2013\u00a0allows adjusting the background image displaying. You can select:\u00a0<strong>cover<\/strong>,\u00a0<strong>contain<\/strong>\u00a0and\u00a0<strong>initial<\/strong>\u00a0values or\u00a0<strong>inherit<\/strong>\u00a0the value set\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del>Site preloader option<\/del>\u00a0section.<\/li>\n<li><strong>Background repeat<\/strong>\u00a0\u2013\u00a0select whether the site preloader background image will be repeated or not repeated. You can select\u00a0<strong>horizontal repeat<\/strong>,\u00a0<strong>vertical repeat<\/strong>\u00a0or\u00a0<strong>disable repeat<\/strong>\u00a0of the image.<\/li>\n<li><strong>Background attachment<\/strong>\u00a0\u2013\u00a0sets the background image attachment style:\n<ul>\n<li><strong>Scroll<\/strong>\u00a0\u2013 background image scrolls with the content.<\/li>\n<li><strong>Fixed<\/strong>\u00a0\u2013 the background image is fixed and content scrolls over it.<\/li>\n<li><strong>Initial<\/strong>\u00a0\u2013 the background image and content will be fixed.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Counter<\/strong>\u00a0\u2013 set it to\u00a0<strong>Enable<\/strong>\u00a0to display percents counter for the page loading.<\/li>\n<li><strong>Preloader style<\/strong>\u00a0\u2013\u00a0select the preloader style for your page.\n<ul>\n<li><strong>Theme default<\/strong>\u00a0\u2013 will inherit the settings from\u00a0<del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">General options<\/del>\u00a0<del>Site preloader options<\/del>\u00a0section.<\/li>\n<li><strong>None<\/strong>\u00a0\u2013 no style is selected for site preloader.<\/li>\n<li><strong>\u0421SS Animation<\/strong>\u00a0\u2013\u00a0adds animated element to the preloader.\n<ul>\n<li><strong>Animation style<\/strong>\u00a0\u2013 select the animation elements site for the preloader.<\/li>\n<li><strong>Animation base color<\/strong>\u00a0\u2013 set the color of the animated element.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Image<\/strong>\u00a0\u2013 set the image that will be displayed on the preloader (*.gif images can be used as well).\n<ul>\n<li><strong>Preloader image<\/strong>\u00a0\u2013 upload the image for the site preloader.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Progress bar<\/strong>\u00a0\u2013 adds the horizontal progress bar to the preloader.\n<ul>\n<li><strong>Preloader bar height in px<\/strong>\u00a0\u2013 set the height of the progress bar. Note, you don\u2019t have to add px to the input field.<\/li>\n<li><strong>Preloader bar background color<\/strong>\u00a0\u2013 select the color for your preloader bar to be displayed on the page.<\/li>\n<li><strong>Preloader bar opacity<\/strong>\u00a0\u2013 enter the value from 1 to 100 here to change bar background opacity.<\/li>\n<li><strong>Preloader bar position<\/strong>\u00a0\u2013 allows you to select the preloader bar position.\u00a0<strong>Top<\/strong>,\u00a0<strong>middle\u00a0<\/strong>and\u00a0<strong>bottom<\/strong>\u00a0positions are available.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>To create Portfolio page, you should navigate to Pages section of the WordPress admin area and click on Add new. Select Portfolio page template for your page in Page Attributes<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[38,11],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/136"}],"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=136"}],"version-history":[{"count":119,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/136\/revisions"}],"predecessor-version":[{"id":15637,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/136\/revisions\/15637"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}