General Options

Here you can style the general appearance of the site and set the main style for all of the pages, posts, portfolios, etc.

Note, theme options influence the whole site. However, you can overwrite them using the meta boxes in each page, post, portfolio, gallery back-end editor. Due to this, you can achieve maximum customization for your site.

Main settings

These options help to manage the general theme features and add custom styles to it.

Main options

These options help to manage the general theme features for your site.

• Page scroll animation – switch this option to Enable to activate the smooth scroll on your site.
• Generate dynamic styles file – this option allows you to enqueue dynamic styles from the file. These styles are enqueued in HEAD tag by default. This option allows you to enable browser and server cache for that file and increase site performance.
• Mobile Responsive – switch this option to Enable to activate mobile responsiveness for the site.
• Default Visual Composer modules – allows you to enable or disable default modules for the Visual Composer plugin.
• Envato Toolkit auto update tool – switch it to Enable if you want to use the Envato auto update option.
• Custom Google API key – allows you to add custom Google API key which will be used for the Google map. To create your Google API key, please see the official documentation for more information. Check this post for more details as well.

Logos

Here you can upload the logos that will be used on the site.

• Favicon – select a 16×16 px image from the media library and upload it to be displayed as favicon of your site.
• Header Main Logotype image – select an image from the media library and upload it as header main logotype. You can also define logo for each header styles in Theme options Header options section, logo for mobile and sticky header in Theme options Header options Mobile and Sticky header options sections.
• Header Main Logotype image for retina – select 2x the size of your main logo from the media library and upload it as header main logotype for retina. You can also define logo for each header styles in Theme options Header options section, logo for mobile and sticky header in Theme options Header options Mobile and Sticky header options sections.

Layout settings

Assign the Sidebars and Headers to all pages on the site using Layout settings section.

• Custom header – set it to Enable to activate custom header by default for For page builder page template. There is also an option on the item’s page if you need to disable or enable custom header for one single item in Custom Header options section.
• Default page layout width – select the content width for default and for page builder page templates. Boxed and full width variants are available.
• Lazy Load Pagination image – upload the image for the lazy load pagination. It will be displayed on the pages for the extra content loading on such pages as blog page template, portfolio page template etc.
• Single pages layout – select one of the layout types which will be set as default for all the single pages. There is also the meta box Page Attributes Template on the item’s page if you need to change the layout for the single page. Layout with no sidebars, with left or right sidebar and with both sidebars layout styles are available.
• Single pages header – select the header type which will be set as default for all the single pages. There is also the meta box Header style in the single page editor if you need to change the layout for the single page.
• Archive Pages Layout – select one of the layout types which will be set as default for all the archive pages. Layout with no sidebars, with left or right sidebar and with both sidebars layout styles are available.
• Single posts layout – set one of the layout types which will be set as default for all the single posts. Layout with no sidebars, with left or right sidebar and with both sidebars layout styles are available. There is also an option on the single post editor to select the layout style if you need to change the layout for the single post only.
• Single posts header – select the header type which will be set as default for all the single posts. There is also an option on the single post editor if you need to change the header style for the single post only.
• Search results layout – select one of the available layout types which will be set as default for the search results page. Layout with no sidebars, with left or right sidebar and with both sidebars layout styles are available.
• Search results header– select the header type which will be set as default for the search results page.
• 404 Page Layout – select one of the available layout types which will be set as default for the 404 page. Layout with no sidebars, with left or right sidebar and with both sidebars layout styles are available.
• 404 Page header – select the header type which will be set as default for the 404 page.
• Layout frame size – set the size for the frame around the page. It can be either enabled or disabled for each post type separately in back-end editor Page options meta box Advanced settings Layout frame.
• Layout frame color – select the color for the layout frame.

Site preloader options

Here you can style the preloader for the whole site. It appears while the content is loading and prevents the visitors from seeing the content restructures while all the images and text are completely loaded.

• Site Preloader – this option allows you to enable or disable the preloader for the site. It is displayed while the content is fully loaded. The preloader can be also either enabled or disabled for a single page, post, portfolio item etc in back-end editor Preloader options meta box.
• Preloader percentage – allows you to enable or disable preloader percentage counter.
  • Preloader Counter Typography – customize the typography settings for the preloader counter for the whole site.
• Preloader background – allows you to style the background for the preloader on your site:
  • Preloader image – upload the image for the site preloader.
  • Background color – pick up the site preloader background color to be displayed as a background for the preloader.
  • Background position – select the position for the image for its better displaying.
  • Background size – allows adjusting the background image displaying. You can select: cover, contain and initial values or inherit the value set Theme options General options Site preloader option section.
  • Background repeat – select whether the site preloader background image will be repeated or not repeated. You can select horizontal repeat, vertical repeat or disable repeat of the image.
  • Background attachment – sets the background image attachment style:
    • Scroll – background image scrolls with the content.
    • Fixed – the background image is fixed and content scrolls over it.
    • Initial – the background image and content will be fixed.
• Preloader style – select the preloader style for your site.
  • None – no style is selected for site preloader.
  • СSS Animation – adds animated element to the preloader.
    • Animation style – select the animation elements site for the preloader.
    • Animation base color – set the color of the animated element.
  • Image – set the image that will be displayed on the preloader (*.gif images can be used as well).
    • Preloader image – upload the image for the site preloader.
  • Progress bar – adds the horizontal progress bar to the preloader.
    • Preloader bar background color – select the color for your preloader bar to be displayed on the page.
    • Preloader bar position – allows you to select the preloader bar position. Top, middle and bottom positions are available.
    • Preloader bar height in px – set the height of the progress bar.

Default button options

This section allows you to style the default buttons on your site, e.g. Submit Comments button, etc.

• Default button typography – allows you to set the font family and styling for all the default buttons. Typography option with each property can be called individually.
• Default button background color – set the background color for all the default buttons.
• Default button border color – set the border color for all the default buttons.
• Default button hover text color – it allows you to set the text hover color for all the default buttons.
• Default button hover background color – set the button background hover color for all the default buttons of your site.
• Default button border color on hover – select the button border hover color for all the default buttons.
• Default button border width – set the button border width for all the default buttons (added in px).
• Default button border style – select the button border style for all the default buttons. Solid, dashed and dotted variants are available.
• Default button border radius – set the button border radius for all the buttons on your site.
• Default button left padding – set the left padding to the button text, added in px.
• Default button right padding – set the right padding to the button text, added in px.

Lightbox styling options

Customize the lightbox to make the preview of the image galleries more stylish and convenient.

• Lightbox deep links – set it to Enable to display the prettyPhoto links in the lightbox URL.
• Background style – set background style for the lighbox background.
  • Simple – select this style to have one color for the lighbox background.
    • Background color – set the background style for the lighbox background
  • Gradient – select this style to have the gradient style for the lighbox background.
    • Background gradient – choose the start and end color for the lighbox background.
    • Background opacity – set the opacity value for the lighbox background.
• Lightbox elements color – choose the color for the elements set in lightbox.
• Lightbox share – set it to Enable to have the share buttons in the lightbox.
• Lightbox navigation arrows – switch it to Enable to activate navigation arrows in the lightbox.
• Lightbox zoom button – select whether the zoom button will be displayed or hidden for the images in the lightbox.

Login page options

You may style default WordPress login page.

You may check the example of the page here.

• Custom styles – set it to Enable to activate the custom changes for the login page.
• Logo – set whether you want to show or hide the logotype for the login page.
• Background color – set the background color for the login page.
• Background style – select the background style for the login page.
  • Image – allows you to set the custom image as a background for the login page.
    • Background image – set the background image for the login page.
    • Background size – set the background size for the background image.
  • Video – allows you to set the video as a background.
    • Video variant – select the video source for the video on login page.
      • Self hosted – upload the video from the media library:
        • Video in MP4 Format – add the link to your video in mp4 format.
        • Video in WebM / Ogg Format – ddd the link to your video in WebM / Ogg format.
      • Youtube – allows you to set the video from YouTube resource.
        • YouTube video ID – enter the video ID to be displayed in custom header. To find the video ID, look at the URL of that page, and at the end of it, you should see a combination of numbers and letters after an equal sign (=). Copy the numbers of an equal sign (=) and enter the ID.
      • Vimeo – allows you to set the video from Vimeo resource.
        • Vimeo video ID – enter the video ID to be displayed in custom header. To find the video ID, copy the numeric code that appears at the end of its URL at the top of your browser window.
• Color scheme – select whether light or dark colors is set as a background for login page. According to the color set, the text color will be changed to make it more readable.

404 page options

Native theme functionality allows you to customize 404 page for your site according to your needs. Check the options available below.

You may check the 404 page example following this link.

• 404 page variants – select the style for the 404 page on your site. Default and with widgets inside variants are available. If you select with widgets inside, you can add the desired widgets for your 404 page in Appearance Widgets 404 page column 1, 404 page column 2, 404 page column 3 and 404 page column 4 sections.
• Page width – set the content width for 404 page. Boxed and full width variants are available for you.
• Background image for number “404” – allows you to add the background image under the 404 number on the page.
• Page background color – select the background color for the 404 page on your site.
• Dark background – switch it to Enable if dark background color was set for 404 page. The text color will be changed to make the text more readable.

Custom CSS / JS

This section will be helpful to you if you want to add custom styles to your site.

• JS code to be added inside HEAD tag – enter the script to add the custom metrics javascript code.
• Custom JS – allows adding the custom javascript code if you need to customize anything using javascript code.
• Custom CSS – add your custom CSS code if you need to customize the theme styles.