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 Ombra Theme.

Keep in mind   The Reset button will affect just the following Theme Options, conceived for Ombra 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
Typography
Logo
Slider & Carousel
Custom Code
Miscellaneous

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

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 Ombra 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
  • Quote — choose a specific font for quote commas. The change is visible when adding a Blockquote or a Quote Shortcode from WordPress Editor. The following options are available:
    • Font family
  • 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

Slider & Carousel

The options below affect globally all the sliders and carousels of your site. This fact offers consistency to site overall feeling. Read more about Sliders and Carousels.

The following options are available:

  • Transition — choose how and how fast the slides pass from one to another
    • Animation type — choose the way slides will pass from one to another, either Fade or Move. Fade animation type works faster than move, especially for large sliders.
    • Speed  — decide how fast slides will pass from one to another (seconds)
  • Autoplay  — the slides pass automatically from one to another and you can set up how long the delay between slides is
    • Enabled — decide if you want the slider to play automatically
    • Delay — enter the delay time between slides, measured in seconds
  • Navigation  — necessary tools for slider’s navigation
    • Bullets — enable bullets for slider
    • Arrows — enable arrows for slider
    • Arrows visibility — check this, if you want the slider arrows to be always visible, otherwise the arrows will appear just when the slider is hovered by visitor’s mouse

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 Ombra. The following options are available:

  • Site loading animation  — the site could load differently, by choosing the right loading animation: Bounce, Pulse or Wave
  • Parallax speed — parallax is a special smooth scrolling effect that could be apllied on site specific elements (like Sliders, Google Map, Row shortcode etc). 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 Ombra to default values. So, all the options from the following Sections will be reset: Layout, General, Header, Content, Footer.