{"id":3690,"date":"2017-04-27T08:00:55","date_gmt":"2017-04-27T08:00:55","guid":{"rendered":"https:\/\/ombra.pikarthouse.com\/documentation\/?page_id=3690"},"modified":"2018-04-10T12:32:28","modified_gmt":"2018-04-10T12:32:28","slug":"pikart-base","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/getting-started\/pikart-base\/","title":{"rendered":"Pikart Base"},"content":{"rendered":"<p>Pikart Base Plugin is a fundamental part of Ombra Theme as it allows you to quickly build professional pages due to its easy-to-use and intuitive tools.\u00a0The features it comes with work in tandem with Ombra Theme options.<\/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>The plugin extends the Ombra Theme functionality with the following elements:<\/p>\n<ul>\n<li><em><a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/shortcodes\/\" target=\"_blank\" rel=\"noopener\">Shortcodes<\/a><\/em><\/li>\n<li><em><a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/\" target=\"_blank\" rel=\"noopener\">Portfolio tools<\/a>, also including <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/theme-options\/content\/#project\" target=\"_blank\" rel=\"noopener\">Project<\/a> Section in Theme Options<\/em><\/li>\n<li><em>Google Services<\/em><\/li>\n<li><em>Social Services<\/em><\/li>\n<li><em>Widgets (Pikart Recent Projects, Pikart Social Links)<\/em><\/li>\n<li><em>Wide\u00a0Menu option for Navigation Menus<\/em><\/li>\n<\/ul><\/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=\"#google-services\">Google Services<\/a><br \/>\n<a href=\"#social-services\">Social Services<\/a><br \/>\n<a href=\"#navigation-menus\">Navigation Menus<\/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>If Shortcodes, Widgets and Portfolio tools are properly described in specific sections of Ombra documentation, the other features of Pikart Base Plugin are detailed below with appropriate explanations.<\/p>\n\n<div id=\"google-services\"\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>Google Services<\/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>There are two types of Google Services that Pikart Base uses in order to enhance the existing theme features: <strong><em>Location<\/em><\/strong> and\u00a0<strong><em>Analytics\u00a0<\/em><\/strong>services. Each of them requires specific data from Google in order to make them working on Ombra.<\/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>Location<\/p><\/div>\n<p>This section allows you to manage the map, that could be\u00a0generated with <strong>Map<\/strong> shortcode. You can display on the <em>Google Map<\/em>\u00a0as\u00a0many addresses as you need to\u00a0pin on it. The following options are available:<\/p>\n<ul>\n<li><strong>Pin image<\/strong>\u00a0\u2014 choose an image to be used for the pins on Google Map. The <em><strong>png<\/strong> <\/em>format is recommended<\/li>\n<li><strong>API Key\u00a0<\/strong>\u2014 in order to use Google Maps you must authenticate your site with an API key.\u00a0As of <a href=\"https:\/\/maps-apis.googleblog.com\/2016\/06\/building-for-scale-updates-to-google.html\" target=\"_blank\" rel=\"noopener\">June 2016<\/a>, the key is a requirement from Google that is necessary in order to make the map on your site functional.\u00a0Follow the instructions and\u00a0<strong><em><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key#get-an-api-key\" target=\"_blank\" rel=\"noopener\">Get the API key<\/a><\/em><\/strong>.<\/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>Analytics<\/p><\/div>\n<p>In case you&#8217;re using Google Analytics to monitor your site traffic, enter your account ID here. For more information on this, see the <a href=\"https:\/\/www.google.com\/analytics\/\" target=\"_blank\" rel=\"noopener\">link<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3259 size-full\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/GoogleAnalytics.jpg\" alt=\"\" width=\"1000\" height=\"750\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/GoogleAnalytics.jpg 1000w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/GoogleAnalytics-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/GoogleAnalytics-768x576.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n\n<div id=\"social-services\"\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>Social Services<\/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>Social Services\u00a0\u2014 as the name already says it\u00a0\u2014 are intended to connect and adapt Ombra Theme to diverse social networks. There are two types of Social Services: Share and Likes.<\/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>Share<\/p><\/div>\n<p>This section\u00a0enables your viewers to share your posts, pages or projects via social networks. Encourage your visitors to spread your content across a large range of social networks and drive more traffic to your 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>Social sharing experience is possible due to <a href=\"https:\/\/www.addthis.com\/\" target=\"_blank\" rel=\"noopener\">AddThis<\/a>, which offers quite a large number of supported social services, each identified by a specific, <em>lowercase name<\/em> that you can find on <a href=\"https:\/\/www.addthis.com\/services\" target=\"_blank\" rel=\"noopener\">this list<\/a>.<\/p>\n<p>Besides those social networks, there are another three unique buttons that you can use:<\/p>\n<div>\n<ul>\n<li>The\u00a0<b>more\u00a0<\/b>button that will open up a popup where people can search for their particular service.<\/li>\n<li>The <strong>counter<\/strong> button\u00a0is\u00a0a global share counter that\u00a0counts how many times your page was shared<\/li>\n<li>The\u00a0<b>preferred<\/b>\u00a0button type that displays your visitor&#8217;s favorite social services, saving him the time of finding them. This feature allows you to get\u00a0to a wider audience since there are many social services nowadays, in different languages, and you cannot cover them all. You can have multiple<b> <\/b>preferred<b> <\/b>buttons, and they will be filled with various social services automatically. You can find more about this <a href=\"https:\/\/www.addthis.com\/academy\/preferred-services-personalization\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/li>\n<\/ul>\n<\/div><\/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>Example of how to insert <strong>Social Services\u00a0<\/strong>below:<\/p>\n<p><strong>facebook,preferred,preferred,counter,more<\/strong><\/p>\n<p>On the page it is displayed, there will be the following icons: facebook icon, next two icons depend on visitor\u00a0most used social networks, the counter button and the more button.<\/p><\/div><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3751 size-full\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/01\/social-share.jpg\" alt=\"\" width=\"2000\" height=\"1500\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/01\/social-share.jpg 2000w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/01\/social-share-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/01\/social-share-768x576.jpg 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/01\/social-share-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/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>Likes<\/p><\/div>\n<p>Likes Area was conceived in a similar way the <em>Facebook Likes\u00a0<\/em>work and is intended to encourage your site&#8217;s visitors to interact with site content. You can add Likes functionality for Posts, Pages,\u00a0Projects and Products.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3819\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/likes_areas.jpg\" alt=\"\" width=\"2000\" height=\"1500\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/likes_areas.jpg 2000w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/likes_areas-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/likes_areas-768x576.jpg 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/likes_areas-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/p>\n\n<div id=\"navigation-menus\"\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>Navigation Menus<\/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 menus represent an important tool for an easy navigation through your site, that is why we recommend to explore all its locations.<\/p>\n<p>The <strong><em>Primary Menu<\/em><\/strong>\u00a0will be always in your <em>Site Header<\/em> and it is the most seen part of your site. The <strong><em>Footer Menu<\/em><\/strong>, located in the footer of your site, usually contains just the critical items necessary to navigate, like Home or Contact pages. The last one is <strong><em>Social Menu<\/em><\/strong>, where you will be able to insert Custom Links referred to social websites (like <em>Facebook<\/em>, <em>LinkedIn<\/em>, <em>Pinterest<\/em>, <em>Twitter<\/em> etc.)<\/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 \u00a0In order to set up a Social Menu, you need to do the following steps:<\/p>\n<ul>\n<li>In your Dashboard, go to <strong><em>Appearance\u00a0\u2192 Menus<\/em><\/strong> to bring up the Menu Editor<\/li>\n<li>Select <em><strong>Create a new menu<\/strong><\/em> at the top of the page<\/li>\n<li>Enter a name for your new menu in the <strong><em>Menu Name<\/em><\/strong> box and click <strong><em>Create Menu<\/em><\/strong> button<\/li>\n<li>Go to <strong><em>Menu Settings<\/em><\/strong> at the bottom of page\u00a0and find <strong><em>Display location<\/em><\/strong> field where you choose <strong><em>Social<\/em><\/strong><\/li>\n<li>Find <strong><em>Custom Links<\/em><\/strong> on the left side, enter the link of the social network (for example, <em>https:\/\/www.facebook.com<\/em>)\u00a0in the <strong><em>URL<\/em><\/strong> field and the name of the social network at <strong><em>Navigation Label\u00a0<\/em><\/strong>(for example, <em>Facebook<\/em>), then click on <strong><em>Add to Menu<\/em><\/strong> button. Follow this step for as many social links you need.<\/li>\n<li>Click on <em><strong>Save Menu<\/strong><\/em> button<\/li>\n<\/ul><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3832\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/04\/Social_menu.jpg\" alt=\"\" width=\"1500\" height=\"1125\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/04\/Social_menu.jpg 1500w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/04\/Social_menu-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/04\/Social_menu-768x576.jpg 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/04\/Social_menu-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p>Beyond the WordPress basic functionality of its menus and various locations, Pikart Base comes with a new feature represented by Wide Menu.<\/p>\n<p>The Wide Menu options extend the basic functionality of a WordPress menu. Wide Menu allows you to customize the <em>submenus of <strong>Primary Menu<\/strong><\/em>. After enabling the <em>Wide Menu checkbox,\u00a0<\/em>the first level of submenus are extended up to the <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/theme-options\/layout\/#site-width\" target=\"_blank\" rel=\"noopener\"><em>site width<\/em><\/a>.\u00a0There is also couple of extra features conceived to enhance Wide Menu behaviour <em>(that do work just when Wide Menu is activated and Primary location is selected):<\/em><\/p>\n<ul>\n<li><strong>Number of columns<\/strong>\u00a0\u2014 choose how many columns of submenus to appear inside the Wide Menu item: 1, 2, 3, 4, 5 or 6<\/li>\n<li><strong>Background Image<\/strong> \u2014 choose an image to be used as background for Wide Menu item<\/li>\n<li><strong>Custom Widget Area<\/strong>\u00a0\u2014 it is available for children of Wide Menu items. In order to add a Widget Area, you need to go to <em>Appearance\u00a0\u2192 Widgets<\/em> and add a new sidebar at <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/managing-content\/customize-sidebars\/#custom-sidebars\" target=\"_blank\" rel=\"noopener\"><strong><em>Add Custom Sidebar<\/em><\/strong><\/a> section. After doing so, you will be able to set up a Custom Widget Area inside the children of Wide Menu items.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3821\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/Wide_menu.jpg\" alt=\"\" width=\"1500\" height=\"1125\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/Wide_menu.jpg 1500w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/Wide_menu-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/Wide_menu-768x576.jpg 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2018\/03\/Wide_menu-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pikart Base Plugin is a fundamental part of Ombra Theme as it allows you to quickly build professional pages due to its easy-to-use and intuitive tools.\u00a0The features it comes with work in tandem with Ombra Theme options. If Shortcodes, Widgets and Portfolio tools are properly described in specific sections of Ombra documentation, the other features [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":785,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3690","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/3690","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=3690"}],"version-history":[{"count":56,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/3690\/revisions"}],"predecessor-version":[{"id":3833,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/3690\/revisions\/3833"}],"up":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/785"}],"wp:attachment":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=3690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}