{"id":1782,"date":"2017-05-05T14:34:57","date_gmt":"2017-05-05T14:34:57","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1782"},"modified":"2018-04-27T09:10:46","modified_gmt":"2018-04-27T09:10:46","slug":"customize-sidebars","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/managing-content\/customize-sidebars\/","title":{"rendered":"Customize Sidebars"},"content":{"rendered":"<p><b>Sidebar<\/b> represents a vertical column for displaying information other than the main content of the web page (for example, a short list of recent articles, recent comments or a list of pages, can easily be displayed across the entire site).<\/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>Its\u00a0main purpose has been to provide navigation assistance for the visitors to\u00a0help them\u00a0move about your site and find the information you want them to see.<\/p>\n<p>A sidebar could also be called a <em>Widgetized Area<\/em>, as it contains <strong><em>widgets that you could add and customize<\/em><\/strong>.\u00a0The widgets could be placed in <em>Appearance \u2192\u00a0Widgets.<\/em><\/p><\/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=\"#locations\">Locations<br \/>\n<\/a><a href=\"#widgets\">Widgets<br \/>\n<\/a><a href=\"#custom-sidebars\">Custom Sidebars<\/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\n<div id=\"locations\"\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>Locations<\/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>OMBRA theme can feature <strong><em>up to 6 sidebars<\/em><\/strong> displayed in <strong><em>three different site locations<\/em><\/strong>: one sidebar is displayed in <strong><em>Site Header<\/em><\/strong>, one sidebar \u2014\u00a0in <strong><em>Site Content<\/em><\/strong> and up to four sidebars (a sidebar means a column of widgets \u2192\u00a0the number of widgets columns is <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/theme-options\/footer\/#sidebar\" target=\"_blank\" rel=\"noopener\"><em>customizable from Theme Options<\/em><\/a>) showcased in <em><strong>Site Footer<\/strong><\/em>.<\/p>\n<p>Any\u00a0sidebar, Ombra theme comes with, can be customized in Theme Options, by going to <em>Appearance\u00a0\u2192 Customize\u00a0\u2192 <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/theme-options\/header\/#sidebar\" target=\"_blank\" rel=\"noopener\">Header<\/a> \/ <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/theme-options\/content\/#sidebar\" target=\"_blank\" rel=\"noopener\">Content<\/a> \/ <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/theme-options\/footer\/#sidebar\" target=\"_blank\" rel=\"noopener\">Footer<\/a>\u00a0\u2192 Sidebar<\/em>.<\/p>\n<p>If the sidebar placed in Site Header has\u00a0always the same position (it opens on left side of your site), the Site Content sidebar can be placed\u00a0on either left or right side of the content.<\/p>\n\n<div id=\"theme-sidebars\"\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-2866\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/sidebar.jpg\" alt=\"\" width=\"751\" height=\"578\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/sidebar.jpg 800w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/sidebar-300x231.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/sidebar-768x591.jpg 768w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/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\n<div id=\"widgets\"\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>Widgets<\/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>Widgets are conceived to add content and features to your Sidebars. Examples are the default widgets that come with WordPress: <em>Archives, Categories, Tag cloud, Search, Recent Posts<\/em>.<\/p>\n<p>You could add any kind of widgets inside the sidebars placed in Site Header, Content or Footer, as their offer more control and information to\u00a0site visitors.<\/p>\n<p>The theme also comes up with couple of new widgets:<\/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>Pikart Recent Projects<\/p><\/div>\n<p>The Recent Projects Widget displays the most recent projects in your sidebar, making it easy for your readers to see what\u2019s new on your portfolio. It works a similar way to Recent Posts Widget.<\/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>Pikart Social Links<\/p><\/div>\n<p>The Social Links Widget allows you to add the necessary connections with your social networks. It consists of the following options:<\/p>\n<ul>\n<li><strong>Title\u00a0<\/strong>\u2014 the title of widget<\/li>\n<li><strong>Font size (pixels)\u00a0<\/strong>\u2014 the size of social icons<\/li>\n<li><strong>Target\u00a0<\/strong>\u2014 the target specifies where to open the linked social icon\n<ul>\n<li>_blank\u00a0\u2014\u00a0opens the linked icon in a new window or tab<\/li>\n<li>_self\u00a0\u2014\u00a0opens the linked icon in the same frame as it was clicked<\/li>\n<\/ul>\n<\/li>\n<li><strong>Email\u00a0<\/strong>\u2014 put here your email in order to appear first in the list of social icons<\/li>\n<li><strong>Add social link\u00a0<\/strong>\u2014 the button allows you to add as many social links as you need<\/li>\n<\/ul>\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>Pikart Flickr<\/p><\/div>\n<p>The Flickr Widget allows you to show thumbnails of your latest Flickr photos in the sidebar. It consists of the following options:<\/p>\n<ul>\n<li><strong>Title\u00a0<\/strong>\u2014 the title of widget<\/li>\n<li><strong>Flickr ID\u00a0<\/strong>\u2014 find more about how to get your Flickr ID on this <a href=\"https:\/\/www.webpagefx.com\/tools\/idgettr\/\" target=\"_blank\" rel=\"noopener\">link<\/a><\/li>\n<li><strong>Flickr API Key\u00a0<\/strong>\u2014\u00a0in order to use the Flickr API you need to have an application key, used to track the API usage<\/li>\n<li><strong>Number of photos\u00a0<\/strong>\u2014 choose how many photos you want to display inside the widget<\/li>\n<li><strong>The type of photos from user or group\u00a0<\/strong>\u2014 you can display photos from a single user or a group of users<\/li>\n<li><strong>Photo size\u00a0<\/strong>\u2014 adjust the size of photos depending on your needs<\/li>\n<li><strong>Columns\u00a0<\/strong>\u2014 choose how many columns of photos you want to show<\/li>\n<li><strong>Columns spacing\u00a0<\/strong>\u2014 enter the spacing between photos<\/li>\n<\/ul>\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>Pikart Instagram<\/p><\/div>\n<p>The\u00a0Instagram\u00a0Widget allows you to display your Instagram photos in the site\u2019s sidebar. It consists of the following options:<\/p>\n<ul>\n<li><strong>Title\u00a0<\/strong>\u2014 the title of widget<\/li>\n<li><strong>@Username or #Hashtag <\/strong>\u2014 you can display photos either by using the Instagram username or the Hashtags<\/li>\n<li><strong>Number of photos\u00a0<\/strong>\u2014 choose how many photos you want to display inside the widget<\/li>\n<li><strong>Columns\u00a0<\/strong>\u2014 choose how many columns of photos you want to show<\/li>\n<li><strong>Columns spacing\u00a0<\/strong>\u2014 enter the spacing between photos<\/li>\n<\/ul>\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>Pikart Twitter<\/p><\/div>\n<p>Twitter\u00a0is a service for the exchange of brief messages, commonly called &#8220;tweets&#8221;, between users. The\u00a0Twiiter Widget allows you to display the latest &#8220;tweets&#8221; on your site. It consists of the following options:<\/p>\n<ul>\n<li><strong>Title\u00a0<\/strong>\u2014 the title of widget<\/li>\n<li><strong>Twitter user\u00a0<\/strong>\u2014 enter the username of the Twitter account <em>(e.g. @yourUsername)<\/em><\/li>\n<li><strong>Number of tweets <\/strong>\u2014 choose how many tweets you want to display inside the widget. The maximum is 20 tweets<\/li>\n<li><strong>Theme <\/strong>\u2014 choose between Light and Dark color skins<\/li>\n<\/ul>\n\n<div id=\"custom-sidebars\"\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>Custom Sidebars<\/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>Sometimes, you just need to showcase a specific sidebar (with certain Widgets) on a specific page. In this case, you will enjoy the Ombra powerful tool of creating custom sidebars. You can create as many custom sidebars as you want and you are able to insert them in one single location: <strong>Site Content<\/strong>.<\/p>\n<p>In order to create a custom sidebar, go to <em>Appearance\u00a0\u2192 Widgets<\/em> and find <strong>Add custom sidebar\u00a0<\/strong>field. Insert there the name of Custom Sidebar and click on the button <strong>Add Sidebar<\/strong>. A new sidebar box appears where you can add all the necessary Widgets.<\/p>\n<p>The final step is to place the sidebar on the page you need, by choosing the new created sidebar from <em>Multiple Fields Box\u00a0<\/em>from\u00a0<em>General Options\u00a0\u2192 <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/managing-content\/general-options\/#custom-sidebar\" target=\"_blank\" rel=\"noopener\">Custom Sidebar<\/a><\/em>.<\/p>\n<p>For example, on Shop Page you decide to put just the Widgets related to Shop, like <em>Cart<\/em>, <em>Price Filter<\/em>, <em>Products Categories<\/em> and so on.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3026\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Custom-sidebars.jpg\" alt=\"\" width=\"1000\" height=\"751\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Custom-sidebars.jpg 1500w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Custom-sidebars-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Custom-sidebars-768x577.jpg 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Custom-sidebars-1024x769.jpg 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sidebar represents a vertical column for displaying information other than the main content of the web page (for example, a short list of recent articles, recent comments or a list of pages, can easily be displayed across the entire site). OMBRA theme can feature up to 6 sidebars displayed in three different site locations: one [&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-1782","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1782","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=1782"}],"version-history":[{"count":34,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1782\/revisions"}],"predecessor-version":[{"id":3845,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1782\/revisions\/3845"}],"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=1782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}