{"id":968,"date":"2017-04-27T13:23:10","date_gmt":"2017-04-27T13:23:10","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=968"},"modified":"2018-10-03T14:36:10","modified_gmt":"2018-10-03T14:36:10","slug":"general","status":"publish","type":"page","link":"https:\/\/nels.pikarthouse.com\/documentation\/theme-options\/general\/","title":{"rendered":"General"},"content":{"rendered":"<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>This section allows you to set up general settings for your site: <em>Colors, Typography, Logo, Sliders, Custom code <\/em>and <em>Miscellaneous<\/em>.<\/p>\n<p>You will also find here the <em>Reset button<\/em>, in case you want to have initial options provided by your Theme.<\/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-image: linear-gradient(to top, #4b917d 35%, rgba(0, 0, 0, 0) 35%);  color: #ffffff;  background-color: #4b917d; box-shadow: 0.21em 0px 0px #4b917d, -0.21em 0px 0px #4b917d;\" >Keep in mind<\/span> \u00a0\u00a0<em>The Reset button will affect just the\u00a0following Theme Options, conceived for your Theme: Layout, General, Header, Content, Footer and all their sub-options.<\/em><\/p><\/div>\n<p>The General Options affect different elements of your site, influencing overall design, site animation effects, interaction with search engines and site visitors experience.<\/p>\n<p>General settings are as follows:<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\">\n<div \t\tclass=\"pikode pikode--row  summary-box\"  style=\"margin: 0px -36px 0px 0px;\" >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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--24\" 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=\"#typography\">Typography<\/a><br \/>\n<a href=\"#custom-code\">Custom Code<\/a><br \/>\n<a href=\"#miscellaneous\">Miscellaneous<\/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=\"typography\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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--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--24\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>Typography<\/p><\/div>\n<p>This section allows you to set up typography properties for different elements on your site, which is essential for achieving a consistent design.\u00a0The following options are available:<\/p>\n<ul>\n<li><strong>Google Fonts<\/strong>\u00a0\u2014 beyond the theme&#8217;s default fonts, you can add anytime a new Google Font to the <em>site fonts list<\/em>.<\/li>\n<li><strong>Headings<\/strong> \u2014\u00a0it affects all the titles of your\u00a0site (titles of Posts, Projects, Pages, titles of Blog Posts, Projects, Related Posts, Related Projects, Album Items etc), including those inserted via WordPress Editor.\u00a0The following options are available:\n<ul>\n<li>Font family<\/li>\n<li>Font size<\/li>\n<li>Font weight<\/li>\n<\/ul>\n<\/li>\n<li><strong>Body text<\/strong> \u2014 it affects the text\u00a0of your\u00a0site, including that inserted via WordPress Editor.\u00a0The following options are available:\n<ul>\n<li>Font family<\/li>\n<li>Font size<\/li>\n<li>Line height<\/li>\n<\/ul>\n<\/li>\n<li><strong>Site Header navigation\u00a0<\/strong>\u2014 it affects\u00a0the items of <em>Site main navigation<\/em> or <em>Site Header<\/em>.\u00a0The following options are available:\n<ul>\n<li>Font family<\/li>\n<\/ul>\n<\/li>\n<li><strong>Hover style<\/strong>\u00a0\u2014 it affects the menu items\n<ul>\n<li>Default<\/li>\n<li>Ball<\/li>\n<\/ul>\n<\/li>\n<\/ul>\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-image: linear-gradient(to top, #4b917d 35%, rgba(0, 0, 0, 0) 35%);  color: #ffffff;  background-color: #4b917d; box-shadow: 0.21em 0px 0px #4b917d, -0.21em 0px 0px #4b917d;\" >Keep in mind<\/span> \u00a0 Examples of how to insert a Google Font<strong>\u00a0<\/strong>in Theme Options field: <span style=\"color: #4b917d;\"><em>Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i<\/em> <\/span>or\u00a0<em><span style=\"color: #4b917d;\">Ubuntu+Mono:400,400i,700<\/span><strong>.<\/strong><\/em><\/p><\/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: 100px -36px 0px 0px; background-color: #f1f1f1;\"><p>When adding a new Google Font,\u00a0you should follow the next steps.<\/p>\n<p>Go to <a href=\"https:\/\/www.google.com\/fonts\" target=\"_blank\" rel=\"noopener\">Google Fonts directory<\/a>, type the Google Font you want to use in the Search Box\u00a0\u2014 for example: Fira Sans, click on the <strong>Select this font<\/strong>\u00a0button.<\/p>\n<p>Enter the window appeared at the bottom of the page, go to <strong>Customize<\/strong>, select the font styles you need, also the Languages (in case your language has specific characters, like Polish or Czech languages have, for example), then navigate to <strong>Embed<\/strong>, copy just a part of the link \u2014 for example: <em>Exo+2:400,400i,700,700i.<\/em><\/p>\n<p>Go back to your Theme Dashboard, in <em>Theme Options \u2192 General \u2192 Typography<\/em> \u2014 you will find Google Fonts input box; paste here what you copied before and click Add font; after a few time, you will see <strong>Font was added. See font family dropdown-lists<\/strong>.<\/p><\/div><\/div><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: 30px 0px 18px 6px;\"><p><span class=\"pikode pikode--highlight highlight--fill\" style=\"background-image: linear-gradient(to top, #4b917d 35%, rgba(0, 0, 0, 0) 35%);  color: #ffffff;  background-color: #4b917d; box-shadow: 0.21em 0px 0px #4b917d, -0.21em 0px 0px #4b917d;\" >Keep in mind<\/span> \u00a0 Avoid adding all the\u00a0font-weights (100, 100i, 300, 300i etc) if you know you will not use even half of them, because\u00a0<strong>each font-weight added increases the site load time<\/strong>. For example, in case you know you will use just Regular (400, 400i) and Bold (700, 700i), then you could add <em>Roboto\u00a0<\/em>font by this way: \u00a0<em>Roboto:400,400i,700,700i<\/em><\/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\n<div id=\"custom-code\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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--24\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>Custom Code<\/p><\/div>\n<p>Advanced users can enter their custom JavaScript code\u00a0here. Entered code will be executed on <strong><em>domready<\/em><\/strong>. The following options are available:<\/p>\n<ul>\n<li><strong>JavaScript Header\u00a0<\/strong>\u00a0\u2014\u00a0this code will be added in the <em>&lt;head&gt;<\/em> section<\/li>\n<li><strong>JavaScript Footer\u00a0<\/strong>\u2014\u00a0this code will be added right before &lt;\/body&gt; tag<\/li>\n<\/ul>\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=\"miscellaneous\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\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\t style=\"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--24\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>Miscellaneous<\/p><\/div>\n<p>This section helps you to control site options that are different from each other by their functionality. Here, you also are able to reset all the <em>Theme Options offered by your Theme<\/em>.\u00a0The following options are available:<\/p>\n<ul>\n<li><strong>Site loading animation\u00a0<\/strong>\u00a0\u2014 site could load differently, by choosing the right loading animation<\/li>\n<li><strong><a href=\"https:\/\/nels.pikarthouse.com\/main\/parallax\/\" target=\"_blank\" rel=\"noopener\">Parallax speed<\/a>\u00a0<\/strong>\u2014\u00a0<em>parallax<\/em> is a special smooth scrolling effect that could be apllied on site specific elements (like Google Map, Row shortcode). So, decide how fast the &#8220;parallaxed&#8221; items will move, by choosing a specific speed: <em>from 1 to 6<\/em>. <em>But rememeber to drive safely!<\/em><\/li>\n<li><strong>Scroll Top button\u00a0<\/strong>\u00a0\u2014 it appears at the bottom of browser window and, if clicked, it leads you to the top of page<\/li>\n<li><strong>Reset Theme Options\u00a0<\/strong>\u00a0\u2014 it resets\u00a0all the custom Theme Options offered by your theme to default values. So, all the options from the following Sections will be reset: <em>Layout, General, Header, Content, Footer.<\/em><\/li>\n<\/ul>\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","protected":false},"excerpt":{"rendered":"This section allows you to set up general settings for your site: Colors, Typography, Logo, Sliders, Custom code and Miscellaneous. You will also find here the Reset button, in case you want to have initial options provided by your Theme. Keep in mind \u00a0\u00a0The Reset button will affect just the\u00a0following Theme Options, conceived for your [...]","protected":false},"author":1,"featured_media":0,"parent":847,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-968","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=968"}],"version-history":[{"count":4,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/968\/revisions"}],"predecessor-version":[{"id":4245,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/968\/revisions\/4245"}],"up":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/847"}],"wp:attachment":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}