{"id":1768,"date":"2017-05-05T14:32:10","date_gmt":"2017-05-05T14:32:10","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1768"},"modified":"2017-10-04T07:44:08","modified_gmt":"2017-10-04T07:44:08","slug":"layout-structure","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/managing-content\/layout-structure\/","title":{"rendered":"Layout Structure"},"content":{"rendered":"<p>One of\u00a0the most important aspect of the site stands in its\u00a0layout. A layout that is easy to follow will give the site\u2019s visitor easy access to valuable and important information.\u00a0<em>This is why it&#8217;s crucial to understand\u00a0the manner OMBRA manages the layout and how it is structured.<\/em><\/p>\n<p>By this way, you will be able to create an <strong><em>effective layout<\/em><\/strong> with proper sizing, spacing and placement of content, as well as to make\u00a0the site appearance consistent and visually appealing.<\/p>\n<p>Ombra Theme\u00a0can hold and display many different types of content, organized in <strong><em>Posts, Projects, Pages<\/em><\/strong>\u00a0or <strong><em>Albums<\/em><\/strong>. All of them are called generically <em>Post Types<\/em>.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>Three of them, namely <strong>Posts<\/strong>, <strong>Projects<\/strong> and <strong>Pages,\u00a0<\/strong>have many similar elements, despite the fact they stand apart from each other by specific features.<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: 0px 0px 18px 6px;\"><p><span class=\"pikode pikode--highlight highlight--fill\" style=\"background-color: #4b917d;  color: #ffffff;  box-shadow: 0.21em 0px 0px #4b917d, -0.21em 0px 0px #4b917d;\" >Keep in mind<\/span> \u00a0 For a facile\u00a0presentation, let\u2019s call <em>Post, Project<\/em>\u00a0or\u00a0<em>Page<\/em>\u00a0with the generic term of <strong>Single<\/strong> and \u2014\u00a0when refering to all of them\u00a0\u2014<strong>\u00a0Singles<\/strong>.<\/p><\/div><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\">\n<div \t\tclass=\"pikode pikode--row  summary-box\" style=\"padding: 0px 0px 36px 0px; margin: 0px -36px 0px 0px;\" >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t\t<div class=\"pikode--row__background\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"color-overlay\" style=\"opacity: 1; background-color: #4b917d;\" ><\/div>\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-light\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\" style=\"padding: 0px 30px 0px 30px;\" >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; line-height: 1.0; text-decoration: none; color: #ffffff; padding: 36px 0px 0px 0px;\"><p>Summary<\/p><\/div>\n<p><a href=\"#main-elements\">Main elements<\/a><br \/>\n<a href=\"#sub-elements\">Sub elements<\/a><a href=\"#sub-elements\"><br \/>\n<\/a><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n<p><strong>The structure<\/strong> of\u00a0any Post, Project or Page has almost the same elements, that could be grouped in two main categories:<\/p>\n<ul>\n<li><strong>Main elements<\/strong> (Featured Branding, Header, Content, Footer)<\/li>\n<li><strong>Sub elements\u00a0<\/strong>(Branding, Text, Info, Related Items, Comments, Navigation, Custom fields)<\/li>\n<\/ul>\n\n<div id=\"main-elements\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>Main elements<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>The\u00a0main elements\u00a0are <strong><em>independent items<\/em><\/strong>\u00a0<em>that could comprise, in certain cases, the sub-elements.<\/em> They\u00a0also have a <strong><em>precise position and display order<\/em><\/strong> in the site, that\u00a0are\u00a0not changeable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2839\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Single_layout.png\" alt=\"\" width=\"500\" height=\"546\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Single_layout.png 690w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Single_layout-275x300.png 275w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2840\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Site-layout-elements.jpg\" alt=\"\" width=\"751\" height=\"563\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Site-layout-elements.jpg 800w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Site-layout-elements-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Site-layout-elements-768x576.jpg 768w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/p>\n\n<div id=\"fb-vs-b\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Featured Branding vs Branding<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>The\u00a0&#8220;branding&#8221; term reffers to that area of\u00a0<strong>Single<\/strong>, which includes\u00a0<em><strong>title,\u00a0metadata\u00a0<\/strong>(depending on Single, it could comprise Date, Categories or Number of comments)<\/em> and <strong><em>breadcrumbs<\/em><\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2841\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/FBvsB.jpg\" alt=\"\" width=\"751\" height=\"563\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/FBvsB.jpg 800w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/FBvsB-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/FBvsB-768x576.jpg 768w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: 0px 0px 18px 6px;\"><p><span class=\"pikode pikode--highlight highlight--fill\" style=\"background-color: #4b917d;  color: #ffffff;  box-shadow: 0.21em 0px 0px #4b917d, -0.21em 0px 0px #4b917d;\" >Keep in mind<\/span> \u00a0 It is not possible to have at the same time on the same\u00a0<strong>Single\u00a0<\/strong>both Featured Branding and Branding\u00a0as they do display the same thing, but with different looks. So, if Featured Branding is enabled, the Branding will be disabled and vice versa.<\/p><\/div>\n<p>The Branding is usually displayed inside Content layout <em>(Post or Page),<\/em> but also could be displayed inside Header layout <em>(Project)<\/em>.<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 12px -36px 0px 0px; background-color: #f1f1f1;\"><p>A\u00a0unique aspect of Feature Branding is that <strong><em>it\u00a0always gets the site full-width size<\/em><\/strong>.<\/p><\/div><\/div><\/div>\n<p>Compared to Branding, the Featured Branding is designed based\u00a0on the Featured Image of the\u00a0<strong>Single\u00a0<\/strong><em>(this is where\u00a0the name comes from)<\/em> and has a specific position inside it: <strong><em>above all the elements of Single layout<\/em><\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2842\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/FB_B.png\" alt=\"\" width=\"800\" height=\"467\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/FB_B.png 1000w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/FB_B-300x175.png 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/FB_B-768x449.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Header<\/p><\/div>\n<p>The Header is the element which generally makes the major difference between Post, Page and Project. Each of them has a specific Header:<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><ul>\n<li><strong>Post<\/strong> changes its Header based on the 8 Post Formats it offers: <span style=\"color: #959595;\"><em><strong>Standard<\/strong><\/em>, <em><strong>Gallery<\/strong><\/em>, <em><strong>Image<\/strong><\/em>, <em><strong>Quote<\/strong><\/em>, <em><strong>Video<\/strong><\/em>, <em><strong>Audio, Link<\/strong> <\/em><\/span>and <span style=\"color: #959595;\"><em><strong>Aside<\/strong><\/em><\/span><\/li>\n<li><strong>Page<\/strong> has a customizable <span style=\"color: #959595;\"><strong>Hero Header Area<\/strong><\/span> where user is able to insert any text, media items and elegant shortcodes in order to embellish it<\/li>\n<li><strong>Project <\/strong>consists of 3 types of Headers: <span style=\"color: #959595;\"><strong>Masonry<\/strong>, <strong>Slider<\/strong><\/span> and <span style=\"color: #959595;\"><strong>Carousel<\/strong><\/span>, that could be extended also with a <span style=\"color: #959595;\"><strong>Hero Header Area<\/strong><\/span>. The Header also displays the <em>Description<\/em> and <em>Custom fields<\/em> with additional data about project itself.<br \/>\n<em>For more information about Project, please visit <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/managing-projects\/\" target=\"_blank\" rel=\"noopener\">Managing Projects<\/a> section.<\/em><\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 12px -36px 0px 0px; background-color: #f1f1f1;\"><p>A unique aspect of Header is the<strong><em>\u00a0Hero Header Area<\/em><\/strong>: almost always, it helps you to insert content on <em>site full-width size<\/em>.<\/p><\/div><\/div><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Content<\/p><\/div>\n<p>The Content represents that area\u00a0where you could insert any\u00a0<strong><em>Text, Media items <\/em><\/strong><em>or<\/em><strong><em> Shortcodes, <\/em><\/strong>enhanced by an informational sidebar of useful <em><strong>Widgets<\/strong><\/em>.<\/p>\n<p>The Content layout\u00a0consists of three elements, generically called, <strong>Branding<\/strong>,\u00a0<strong>Text<\/strong> and <strong>Sidebar<\/strong>. <em>In case Featured Branding is enabled, the Branding element will not be displayed.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2843\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Content.png\" alt=\"\" width=\"600\" height=\"401\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Content.png 636w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Content-300x200.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Footer<\/p><\/div>\n<p>The Footer is the element which\u00a0includes the Single common elements, like <em><strong>Info\u00a0<\/strong>(Tags &amp; Social Share)<\/em>, <em><strong>Comments<\/strong> <\/em>and <em><strong>Navigation<\/strong><\/em>. There is also one more field \u2014\u00a0<em><strong>Related Items <\/strong>\u2014<\/em>\u00a0specific just for <em>Post<\/em> and <em>Project<\/em>.<\/p>\n<p>It helps visitor to navigate further the site, by accessing other site&#8217;s pages, or to share the content on social networks.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2844\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_footer.png\" alt=\"\" width=\"699\" height=\"284\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_footer.png 820w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_footer-300x122.png 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_footer-768x312.png 768w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/p>\n\n<div id=\"sub-elements\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>Sub elements<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>The sub elements are dependent items, included inside Main elements. Their position and display order\u00a0generally are\u00a0not the same, depending on\u00a0the type of Single.\u00a0The position and display order of certain sub elements are even customizable, <em>like Branding or\u00a0Sidebar.<\/em><\/p>\n<p>The sub elements are: <em><strong>Branding, Text, Info, Related Items, Comments, Navigation,<\/strong><strong>\u00a0Sidebar\u00a0<\/strong>and<strong> Custom fields<\/strong><\/em>.<\/p>\n\n<div id=\"sub-elements-diagram\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2845\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sub_elements.png\" alt=\"\" width=\"750\" height=\"622\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sub_elements.png 904w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sub_elements-300x249.png 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Layout_sub_elements-768x637.png 768w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Branding<\/p><\/div>\n<p><em>See <a href=\"#fb-vs-b\">Featured Branding vs Branding<\/a>.<\/em><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Text<\/p><\/div>\n<p><em><strong>The text<\/strong><\/em> is editable\u00a0part of Content, where user is able to insert text, media items or elegant shortcodes \u2014 all of them make the most substantial part of the page.<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Sidebar<\/p><\/div>\n<p>It is always inside the Content and could be displayed either on left or\u00a0right side of the Content.\u00a0One more thing, its size is customizable from Theme Options. <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/theme-options\/content\/#sidebar\" target=\"_blank\" rel=\"noopener\"><em>Please see<\/em><\/a>.<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Info<\/p><\/div>\n<p>It always includes <em><strong>Social Share<\/strong><\/em> and, depending on Single type, it could comprise <em>taxonomies<\/em> in the form of <strong><em>Tags<\/em> <\/strong>(for Post and Project). The Info area is displayed inside Single Content.<\/p>\n\n<div id=\"related-items\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Related Items<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>Related Items (when\u00a0saying <em>Items<\/em>, we refer here at either Posts or Projects) are conceived\u00a0to\u00a0view the related content from across all the posts or projects\u00a0of your site.<\/p>\n<p>They can be related to each other by\u00a0<em><strong>having the same taxonomies<\/strong>, represented by\u00a0both <strong>categories<\/strong> and <strong>tags<\/strong><\/em>.<\/p>\n<p>The Related Items are always displayed as <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#cards\" target=\"_blank\" rel=\"noopener\"><em>cards<\/em><\/a> inside Single Footer and are specific for Post <strong><em>(Related Posts)<\/em><\/strong> and Project <strong><em>(Related Projects)<\/em><\/strong>.<\/p>\n<p>Enable or disable them\u00a0by going to Theme Options, at <em>Appearance \u2192 Customize \u2192 Content\u00a0\u2192 Post \/ Project<\/em>.<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 0px -36px 0px 0px; background-color: #f1f1f1;\"><p>The <strong><em>Related Items (Posts or Projects)<\/em><\/strong> can have a significant impact on your site by increasing your pageviews and decreasing your bounce rate.<\/p>\n<p><em><strong>Bounce rate<\/strong><\/em> essentially represents the percentage of initial visitors to a site who \u201cbounce\u201d away to a different site, rather than continue on to other pages within the same site.<\/p><\/div><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2846\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/related_items.jpg\" alt=\"\" width=\"751\" height=\"563\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/related_items.jpg 800w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/related_items-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/related_items-768x576.jpg 768w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Comments<\/p><\/div>\n<p>Comments allow your website&#8217;s visitors to have a discussion with you and each other.\u00a0They are always displayed inside the Single Footer.<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Navigation<\/p><\/div>\n<p>The Navigation module helps to pass from one page to another,\u00a0keeping visitors inside your site&#8217;s content. The <strong><em>previous<\/em> <\/strong>&amp; <strong><em>next<\/em> <\/strong>items are designed based on chronological order, or, by other words, on the date they were published. You\u00a0can change anytime their order by changing their publishing date. The navigation is always placed inside the Single Footer.<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Custom fields<\/p><\/div>\n<p>Custom fields are\u00a0specific for <strong>Project<\/strong> Header, as they comes with additional information about the project itself, like <em>date<\/em> or <em>client name<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of\u00a0the most important aspect of the site stands in its\u00a0layout. A layout that is easy to follow will give the site\u2019s visitor easy access to valuable and important information.\u00a0This is why it&#8217;s crucial to understand\u00a0the manner OMBRA manages the layout and how it is structured. By this way, you will be able to create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1770,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1768","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=1768"}],"version-history":[{"count":13,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1768\/revisions"}],"predecessor-version":[{"id":2990,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1768\/revisions\/2990"}],"up":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1770"}],"wp:attachment":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=1768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}