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 The Reset button will affect just the following Theme Options, conceived for your Theme: Layout, General, Header, Content, Footer and all their sub-options.
The General Options affect different elements of your site, influencing overall design, site animation effects, interaction with search engines and site visitors experience.
General settings are as follows:
Summary
Colors
The theme gives you control on site colors that will affect typographical elements, shortcodes, fill-color items etc. The following options are available:
- Feature color — choose the specific color of your site
- Headings — color of headings you insert in WordPress Editor (and are not affected by ohter shortcodes or Editor tools)
- Body text — color of text you insert in WordPress Editor (and is not affected by ohter shortcodes or Editor tools)
- Background — color of site background
- Selection — choose which color you would like to see while selecting the site content
For Buttons:
- Text
- Text hover
- Background
- Background Hover
The change of Feature Color changes the general feeling of site, while affecting a lot of its elements:
- Site loader
- Widgets
- Cards (Blog Posts, Projects, Related Posts & Projects, Album Items)
- Shortcodes (Team member, Separator)
- Buttons (Contact forms, Comment button)
- Error 404 Page
Typography
This section allows you to set up typography properties for different elements on your site, which is essential for achieving a consistent design. The following options are available:
- Google Fonts — beyond the theme’s default fonts, you can add anytime a new Google Font to the site fonts list.
- Headings — it affects all the titles of your site (titles of Posts, Projects, Pages, titles of Blog Posts, Projects, Related Posts, Related Projects, Album Items etc), including those inserted via WordPress Editor. The following options are available:
- Font family
- Body text — it affects the text of your site, including that inserted via WordPress Editor. The following options are available:
- Font family
- Font size
- Line height
- Site Header navigation — it affects the items of Site main navigation or Site Header. The following options are available:
- Font family
Keep in mind Examples of how to insert a Google Font in Theme Options field: Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i or Ubuntu+Mono:400,400i,700.
When adding a new Google Font, you should follow the next steps.
Go to Google Fonts directory, type the Google Font you want to use in the Search Box — for example: Fira Sans, click on the Select this font button.
Enter the window appeared at the bottom of the page, go to Customize, 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 Embed, copy just a part of the link — for example: Exo+2:400,400i,700,700i.
Go back to your Theme Dashboard, in Theme Options → General → Typography — you will find Google Fonts input box; paste here what you copied before and click Add font; after a few time, you will see Font was added. See font family dropdown-lists.
Keep in mind Avoid adding all the font-weights (100, 100i, 300, 300i etc) if you know you will not use even half of them, because each font-weight added increases the site load time. For example, in case you know you will use just Regular (400, 400i) and Bold (700, 700i), then you could add Roboto font by this way: Roboto:400,400i,700,700i
Logo
Please upload your logo in two different version to the media library: Dark (or Logo — as it appears in Theme Options) and Light (or Inverted Logo — as it appears in Theme Options).
The reason of requesting 2 different logo skins is because of creating special effects with the logo while using the site.
Keep in mind The logo displays in the original size you upload it. So, if you upload a logo which has 250 x 250 (pixels), it will display this size on the site (which could appear too big). So, make sure to upload the logo in the exact size you want to display it.
Custom Code
Advanced users can enter their custom JavaScript code here. Entered code will be executed on domready. The following options are available:
- JavaScript Header — this code will be added in the <head> section
- JavaScript Footer — this code will be added right before </body> tag
Miscellaneous
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 Theme Options offered by your Theme. The following options are available:
- Site loading animation — site could load differently, by choosing the right loading animation
- Parallax speed — parallax is a special smooth scrolling effect that could be apllied on site specific elements (like Google Map, Row shortcode). So, decide how fast the “parallaxed” items will move, by choosing a specific speed: from 1 to 6. But rememeber to drive safely!
- Scroll Top button — it appears at the bottom of browser window and, if clicked, it leads you to the top of page
- Reset Theme Options — it resets all the custom Theme Options offered by your theme to default values. So, all the options from the following Sections will be reset: Layout, General, Header, Content, Footer.