Skip to content

Theme Options

This section of the User Guide provides a comprehenisve overview of all the settings available in the Theme Options section of your WordPress admin panel. The settings found here are applied globally and will affect all pages on your website. However, note that many of these options can be overridden locally by applying settings on individual pages or on shortcode elements.

General

Design Style

  • Google Font Family - Set the default font family for your website.
  • Additional Google Fonts - Set this option to "Yes" if you would like to add aditional Google Fonts to your website. These fonts are not set on any specific elements, just added to the site stylesheet, so they can be added to elements via custom css, or used in the Custom Font element.
  • Google Fonts Style & Weight - Define font weights for your Google Fonts.
  • Google Fonts Subset - Choose a subset of fonts to use.
  • First Main Color - Set a first main color for your website.
  • Page Background Color - Set a background color for your pages.
  • Page Background Image - Upload the image for the background.
  • Page Background Image Repeat - Enabling this option will set the background image as a repeating pattern throughout the page, otherwise the image will appear as the cover background image.
  • Text Selection Color - Set a color for text selection.
  • Boxed Layout - Set this option to "Yes" to enable the boxed layout. If you choose a boxed layout for your site, the content will be fitted in a centrally positioned grid.
    • Page Background Color - Set a background color for outside the boxed content.
    • Background Image - Set a background image for the content outside the box.
    • Background Pattern - Set a background pattern for the content outside the box.
    • Background Image Attachment - Choose whether the background image will be fixed or can be scrolled.
  • Passepartout - Set this option to "Yes" if you would like to enable a passepartout border around your website.
    • Passepartout Color - Choose a color for the passepartout border.
    • Passepartout Size - Set a size (in pixels) for the passepartout border.
    • Responsive Passepartout Size - Set a size for the passepartout border when viewed on smaller screens.
    • Disable Top Passepartout - Set this option to "Yes" if you would like to disable the top passepartout border.
    • Enable Fixed Passepartout - Enabling this option will set fixed passepartout for your screens
  • Initial Width of Content - Choose the initial width of your content in grid. This option only takes effect on pages set to the "Default Template" and rows set to "In Grid".

Settings

  • Smooth Scroll - Set this option to "Yes" if you would like to enable a smooth scrolling effect.
  • Smooth Page Transitions - Set this option to "Yes" if you would like to enable smooth loading transitions between pages on your website.
    • Enable Preloading Animations - Set this option to "Yes" to enable an animation while the page is loading.
      • Page Loader Background Color - Set a background color for the page while it is loading.
      • Loader Style - Choose a type of loader and a color for it.
    • Enable Fade Out Animation - Set this option to "Yes" to enable a fade out animation when navigating away from pages on your website.
  • Show "Back to Top" Button - Set this option to "Yes" to display a "Back to Top" button on your website.
  • Responsiveness - Set this option to "Yes" to enable responsiveness on your website.

Custom Code

  • Custom JS - You can input any custom Javascript into this field and it will take effect on your site. The entered code will be executed on domready. If using jQuery, please note that the jQuery selector is "$j" because of the conflict mode.

Google API

  • Google Maps API Key - Insert your Google Maps API key here. You can find instructions on how to create a Google Maps API key here.

Branding

  • Hide Logo - Set this option to "Yes" to hide the logo from your website.
    • Logo Image - Default - Upload a default logo for your website.
    • Logo Image - Dark - Upload a logo to be displayed on the "Dark" header skin.
    • Logo Image - Light - Upload a logo to be displayed on the "Light" header skin.
    • Logo Image - Mobile - Upload a logo to be displayed on the mobile header.

Typography

Headings

Here you can set up all styles for heading tags (H1-H6)

Headings Responsive

Here you can set up responsive styles for headings (H1-H6), when viewed on tablet and mobile devices.

Text

  • Paragraph - Set styles for paragraph text.
  • Paragraph Responsive (Tablet Portrait View) - Set styles for paragraph text when viewed on a tablet in portrait view.
  • Paragraph Responsive (Mobile Devices) - Set styles for paragraph text when viewed on mobile devices.
  • Links - Set styles for link text.

Header and Menu

Header Settings

Header Type

  • Choose Header Type - Choose the type of header you would like to use.

Header Settings

  • Choose Header Type To Customize - Select the header type you would like to set styling and behavior options for. The header type you choose here will not affect your website's default header, which is chosen above, in the header type field. You'll get a set of options for customization related to the header type you've chosen just below this option.
  • Choose Header Behaviour - Choose a header behaviour type.
  • Header Skin - Choose a predefined header skin in order to display all header elements in the style of that skin.
  • Top Bar - Set this option to "Yes" to enable the top bar on the header.
    • Choose Top Bar Layout - Set a layout for the top bar.
      • Choose Columns Width - Set the width of the top bar columns..
      • Enable Grid Layout - Set this option to "Yes" if you would like the top bar content to be displayed in grid.
      • Background Color - Set a background color for the top bar.
      • Background Transparency - Set a background transparency for the top bar.
      • Top Bar Height - Set a height for the top bar.

Depending on the type of header you choose, you will be presented with a specific set of options.

Logo Area

  • Logo Area in Grid - Set this option to "Yes" if you would like to place the logo area in grid.
  • Background Color - Set a background color for the logo area.
  • Background Transparency - Set a background transparency (from 0-1) for the logo area.
  • Logo Area Border - Set this option to "Yes" to display a border below the logo area.
    • Border Color - Set a color for the logo area border.
  • Height - Set a height for the header.
  • Logo Padding - Input padding values for the logo area.
  • Menu Area in Grid - Set this option to "Yes" if you would like to place the menu area in grid.
  • Background Color - Set a background color for the menu area.
  • Background Transparency - Set a background transparency (from 0-1) for the menu area.
  • Menu Area Shadow - Set this option to "Yes" to enable a shadow effect on the menu area.
  • Menu Area Border - Set this option to "Yes" to display a border below the menu area.
    • Border Color - Set a color for the menu area border.
  • Height - Set a height for the header.
  • Choose Menu Area Position - Choose a position for the menu area.

Fullscreen Menu

  • Fullscreen Menu Overlay Animation - Choose an animation type for the fullscreen menu overlay.
  • Fullscreen Menu in Grid - Set this option to "Yes" to set the fullscreen menu in grid.
  • Fullscreen Menu Alignment - Choose a text alignment for the fullscreen menu.
  • Background - Set a background color and background color transparency for the fullscreen menu.
  • Background Image - Set a background image for the fullscreen menu.
  • Pattern Background Image - Set a pattern background image for the fullscreen menu.
  • 1st Level Style - Set text styles for the 1st level menu items.
  • 2nd Level Style - Set text styles for the 2nd level menu items.
  • 3rd Level Style - Set text styles for the 3rd level menu items.
  • Choose Full Screen Menu Icon Source - Choose whether you would like to use icons from an icon pack or SVG icons.
    • Full Screen Menu Icon Pack - Choose an icon pack for the full screen menu. This option is only available if you have selected icon pack as your source.
    • Full Screen Menu Icon SVG Path - Enter the full screen menu icon SVG path here. This option is only available if you have selected the SVG icons as your source.
    • Full Screen Menu Close Icon SVG Path - Enter the full screen menu close icon SVG path here. This option is only available if you have selected the SVG icons as your source.
  • Full Screen Menu Icon Style - Set styles for the fullscreen menu icon.

Fixed Header

  • Background Color - Set a background color for the fixed header.
  • Background Transparency - Set a background transparency for the fixed header.
  • Border Color - Set a color for the border of the fixed header.
  • Fixed Header Menu - Define style for the menu area in the fixed header.

Main Menu General Settings

  • Main Dropdown Menu - Set styles for the dropdowns in the main menu.
  • Wide Dropdown Menu in Grid - Set this option to "Yes" if you would like the wide dropdown menu to be in grid.
  • Wide Dropdown Menu Content in Grid - Set this option to "Yes" if you would like the wide dropdown menu content to be in grid.
  • Main Dropdown Menu Appearance - Choose how the dropdown menu will appear.
  • Dropdown Position - You can use this field if you would like to change the position of the second menu level dropdown. Enter the value in percentages, in relation to the entire header height. So if you would like your dropdown to appear in the middle of your header instead of fully below it, you would enter 50. The default setting is 100 (dropdown appears right below header).
  • 1st Level Menu - Set styles for 1st level menu items in the main menu.
  • 2nd Level Menu - Set styles for 2nd level menu items in the main menu.
  • 2nd Level Wide Menu - Set styles for the 2nd level menu items in the wide menu.
  • 3rd Level Menu - Set styles for 3rd level menu items in the main menu.
  • 3rd Level Wide Menu - Set styles for 3rd level menu items in the wide menu.

Mobile Header

  • Mobile Header Styles - Define the style of the mobile header.
  • Mobile Menu Styles - Define the style of the mobile menu.
  • Logo Height for Mobile Header - Set a height for the logo in the mobile header (on screens smaller than 1000px).
  • Logo Height for Mobile Devices - Set a height for the logo on mobile devices (on screens smaller than 480px)

Typography

  • 1st Level Menu - Set typography styles for the 1st level menu items in the mobile menu.
  • Dropdown Menu - Set typography styles for the 2nd and 3rd level menu items in the mobile menu.

Mobile Menu Opener

  • Mobile Navigation Title - Input a title for the mobile menu.
  • Choose Mobile Navigation Icon Source - Choose whether you would like to use icons from an icon pack or SVG icons.
    • Mobile Navigation Icon Pack - Choose an icon pack for the mobile navigation.
    • Mobile Navigation Icon SVG Path - Enter the mobile navigation icon SVG path here.
  • Mobile Navigation Icon Color - Set a color for the mobile menu icon.
  • Mobile Navigation Icon Hover Color - Set a color for the mobile menu icon on hover.

Off Canvas Sidebar

  • Side Area Type - Choose the tipe of side area you would like to use.
  • Side Area Width - Set a width for the side area.
    • Content Overlay Background Color - Set a background color for the content overlay. This option is only available if you have selected the Slide from Right Over Content side area type.
    • Content Overlay Background Transparency - Set the transparency for the content overlay background color. This option is only available if you have selected the Slide from Right Over Content side area type.
  • Choose Side Area Icon Source - Choose whether you would like to use icons from an icon pack,SVG icons or a predefined icon style.
    • Side Area Icon Pack - Choose an icon pack you wish to use for side area icon.
    • Side Area Icon SVG Path - Enter your Side Area icon SVG path here.
    • Side Area Close Icon SVG Path - Enter your Side Area close icon SVG path here.
  • Background Color - Set a background color for the side area.
  • Padding - Define padding for the side area.
  • Text Alignment - Choose an alignment for the text in the side area.

Search Page

  • Layout - Choose a layout for search pages.
  • Sidebar Layout - Choose a layout for the sidebar on search pages.

Search

  • Select Search Type - Choose a type of search to use.
  • Select Search Icon Source - Choose whether you would like to use icons from an icon pack or SVG icons.
    • Search Icon SVG Path - Input your search icon SVG path. This option is only available if you have selected SVG path as your search icon source.
    • Search Close Icon SVG Path - Input the search close icon SVG path here. This option is only available if you have selected SVG path as your search icon source.
    • Search Icon Pack - Choose an icon pack to use for search icons. This option is only available if you have selected Icon Pack as your search icon source.
  • Enable Grid Layout - Set this option to "Yes" if you would like the search area to be in grid.

Initial Search Icon in Header

  • Icon Size - Set a size for the search icon in the header. This option is only available if you have selected Icon Pack as your search icon source.
  • Icon Colors - Set colors for the search icon.
  • Enable Search Icon Text - Set this option to "Yes" to display the text "Search" next to the search icon in the header.
    • Search Icon Text - Set styles for the search icon text.

Title

Title Settings

Title Settings

  • Show Title Area - Use this option to control whether you would like to display the title area or not on your website.
    • Title Area Type - Chose a type of title area to use.
    • Title Area in Grid - Set this option to "Yes" if you would like to set the title area content in grid.
    • Height - Set a height for the title area.
    • Background Color - Set a background color for the title area
    • Background Image - Chose a background image for the title area.
    • Background Image Behavior - Choose how you would like the background image to behave.
    • Vertical Alignment - Define the vertical alignment setting for the title area content on this page. You can choose to vertically align the title area content from the bottom of the header, or from the top of your browser window.

Typography

  • Title - Set styles for the title text.
  • Subtitle - Set styles for the subtitle text in the title area.
  • Breadcrumbs - Set styles for the breadcrumb text in the title area.

Page

Page Style

  • Grid Layout Space - Set a predefined size for the space between the content layout and the sidebar layout for your pages. This only applies to pages set to Default Template.
  • Show Comments - Set this option to "Yes" to display comments on pages.

Content Style

  • Content Top Padding For Template in Full Width - Set a top padding for the page content when using full width templates.
  • Content Top Padding For Templates in Grid - Set a top padding for page content when using in grid templates.
  • Content Top Padding For Mobile Header - Set a top padding for page content when the header layout switches to the mobile header (under 1024px).

Content Bottom Area Style

  • Enable Content Bottom Area - Set this option to "Yes" to enable the content bottom area.
    • Widget Area to Display - Choose a custom widget area to display in the content bottom area of your website. You can create custom widget areas by navigating to Appearance > Widgets and there creating your custom widget areas.
    • Display in Grid - Set this option to "Yes" if you would like the content bottom to be fitted in a centraly positioned gird.
    • Background Color - Choose a background color for the content bottom area.
  • Sidebar Layout - Choose a layout for the sidebar on pages.

Footer Settings

  • Footer in Grid - Set this option to "Yes" if you would like the footer content to be displayed in grid.
  • Uncovering Footer - Set this option to "Yes" if you would like to make the footer gradually appear on scroll.
  • Footer Skin - Set the skin for the footer.
  • Show Footer Top - Set this option to "Yes" to display the footer top.
    • Footer Top Columns - Choose a number of columns to display in the footer top.
    • Footer Top Columns Alignment - Choose the text alignment for the footer top column content.
    • Background Color - Set a background color for the footer top.
  • Show Footer Bottom - Set this option to "Yes" to display the footer bottom.
    • Footer Bottom Columns - Choose the number of columns to display in the footer bottom.
    • Background Color - Set a background color for the footer bottom.

Blog

Blog Lists

  • Blog Layout for Archive Pages - Choose a blog layout for blog archive pages.
  • Sidebar Layouts for Archive Pages - Choose a sidebar layout for blog archive pages.
  • Masonry - Layout - Choose whether you would like your Masonry blog lists to be in grid or full width.
  • Masonry - Number of Columns - Choose a number of columns to display Masonry blog lists in.
  • Masonry - Space Between Items - Choose a predefined spacing between items in Masonry blog lists.
  • Featured Image Proportion - Choose whether you would like your featured images to keep their original proportions or have a fixed proportion which you can predefine for each blog post individually (by navigating to that blog post from the backend and choosing your fixed proportion in the "Dimensions for Fixed Proportion" field).
  • Pagination Type - Choose a type of pagination to use.
  • Number of Words in Excerpt - Set a number of words to be displayed in the excerpt.

Blog Single

  • Blog Layout for Single Post Pages - Choose a default layout for your single blog post pages.
  • Sidebar Layout - Choose a sidebar layout for blog single posts.
  • Show Title Area - Set this option to "Yes" if you would like to display the title area on your blog single posts.
  • Full Height Title - Set this option to "Yes" if you would like the title area to take up the full height of the screen.
  • Show Post Title in Title Area - Set this option to "Yes" to display the post title in single post title areas.
  • Show Related Posts - Set this option to "Yes" to display related posts on blog single pages.
  • Show Comments Form - Set this option to "Yes" to display the comments form.
  • Enable Prev/Next Single Post Navigation Links - Enable navigation links on single posts, so you can navigate through single blog posts.
    • Enable Navigation Only in Current Category - Set this option to "Yes" to limit the navigation only to the current category.
  • Show Author Info Box - Set this option to "Yes" to display the author info box on blog single posts.
    • Show Author Email - Set this option to "Yes" to show the author e-mail in the author info box.
    • Show Author Social Icons - Set this option to "Yes" to display social icons in the author info box.

Portfolio

Portfolio Archive

  • Number Of Items - Set a number of portfolio items to display on each archive page.
  • Number of Columns - Choose a number of columns in which to display your portfolio items on archive pages.
  • Space Between Items - Choose a spacing between items on portfolio archive pages.
  • Image Proportions - Set proportions for your featured images on portfolio archive pages.
  • Item Style - Choose a style (layout and hover type) for single projects on portfolio archive pages.

Portfolio Single

  • Portfolio Type - Choose a default type for portfolio single pages.
  • Show Title Area - Set this option to "Yes" if you would like to display the title area on portfolio single pages.
  • Enable Lightbox for Images - Set this option to "Yes" to enable opening images in a lightbox.
  • Enable Lightbox for Videos - Set this option to "Yes" to enable opening videos in a lightbox.
  • Enable Categories - Set this option to "Yes" to display category meta descriptions on portfolio single pages.
  • Enable Date - Set this option to "Yes" to enable date meta descriptions on portfolio single pages.
  • Enable Sticky Side Text - Set this option to "Yes" to make the side text on portoflio single pages sticky on scroll.
  • Show Comments - Set this option to "Yes" to enable comments on portfolio single items.
  • Hide Pagination - Set this option to "Yes" to hide pagination from portfolio single pages.
    • Enable Pagination Through Same Category - Set this option to "Yes" to make the portfolio pagination navigate only through portfolio single items in the same category.
  • Portfolio Single Slug - If you wish to use a different Single Project slug, please enter it here (Note: After entering slug, navigate to Settings -> Permalinks and click "Save" in order for changes to take effect)

Subscribe Pop-up

  • Enable Pop-up - Set this option to "Yes" if you would like to enable a pop-up window with a contact form for your pages on page load.
  • Title - Input the title for the pop-up window.
  • Subtitle - Input the subtitle for the pop-up window.
  • Background Image - Upload an image to be displayed in the background.
  • Select Contact Form - Choose the contact form you wish to display.
  • Contact Form Style - Set the style for the contact form.
  • Enable Pop-up Prevent - Set this option to "Yes" if you would like to enable pop-up preventing.
    • Pop-up Prevent Behavior - Choose how to manage pop-up prevention.

Social Networks

  • Enable Social Share - Set this option to "Yes" to enable the social share functionality.

Show Social Share On

Here you can choose on what types of pages you would like to enable the social share functionality.

Social Networks

Here you can set which social networks you would like sharing to be available on. If you would like to, you can also set a custom icon for each social network.

Open Graph

  • Enable Open Graph - Set this option to "Yes" if you would like to enable the usage of the open graph protocol on your website. The open graph protocol is created for easier and more streamlined sharing of pages on social networks. To find out more about the open graph protocol, please visit the following link: http://ogp.me/
    • Default Share Image - Upload an image to use as your default share image. This image will be used only if you are sharing a page that doesn't have a featured image set. Please make sure that the image is at least 1200 x 630 px large, and up to maximum 8MB in size.

404 Error Page

  • Background Color - Set a background color for the header on your 404 page.
  • Background Transparency - Set a transparency value (from 0 to 1) for the header on your 404 page.
  • Border Color - If you would like the header on your 404 page to have a border, set the border color here.
  • Header Skin - Choose a skin for the header on your 404 page.

404 Page Options

  • Background Color - Set a background color for the 404 page.
  • Background Image - Upload a background image for the 404 page.
  • Pattern Background Image - If you would like to use a pattern as the background, you can upload the pattern image here.
  • Title Image - Upload a background image for the title area of your 404 page.
  • Title - Enter a title to be displayed on the 404 error page.
  • Title Style - Set styles for the 404 page title.
  • Title Style Responsive - Define responsive styles for 404 page title (under 680px).
  • Subtitle - Input a subtitle for the 404 page.
  • Subtitle Style - Set styles for the 404 page subtitle.
  • Subtitle Style Responsive - Define responsive styles for 404 page subtitle (under 680px).
  • Text - Input text to display on your 404 page.
  • Text Style - Set styles for the text on your 404 page.
  • Text Style Responsive - Define responsive styles for 404 page text (under 680px).
  • Back to Home Label - Enter text for the "Back to Home" label. This is the text that will suggest users to return to the home page from the 404 error page.
  • Button Skin - Choose a predefined skin for the "Back to Home" button.

Contact Form 7

You can set multiple custom styles for contact forms, and then choose what style you would like to apply to each form you add to a page.

  • Form Text Typography - Set styles for the contact form text.
  • Form Label Typography - Set styles for the contact form labels.
  • Form Elements Background and Border - Set the background and border styles for contact form elements.
  • Elements Padding - Set up padding for contact form elements.
  • Elements Margin - Set up margins for contact form elements.
  • Textarea Height - Set a height for the textarea contact form elements.
  • Button Typography - Set styles for text in the contact form buttons.
  • Button Background and Border - Set the background and border styles for contact form buttons.
  • Button Height - Set a height for the contact form button.
  • Button Left/Right Padding - Set a left and right padding for the contact form button.

WooCommerce

Product List

  • Product List Columns - Choose a number of columns for the product list.
  • Space Between Products - Set a spacing between products in the list.
  • Product Info Position - Choose a position for the product information.
  • Number of Products Per Page - Set the number of products you would like to display per page.
  • Products Title Tag - Set a heading tag for your product titles on product list pages.

Single Product

  • Show Title Area - Set this option to "Yes" if you would like to display the title area on single product pages.
  • Single Product Title Tag - Set a heading tag for your single product titles.
  • Number of Thumbnail Images per Row - Choose a number of thumbnail images to display in a row on your single product pages.
  • Set Thumbnail Images Position - Choose a position for the thumbnail images.
  • Enable Zoom Maginfier - Set this option to "Yes" if you would like to enable a zoomed view of product images when they are hovered on.
  • Set Image Behavior - Choose a behavior for the images.
  • Related Products Columns - Set the number of columns for related products on single product pages.
  • Select Drodown Cart Icon Source - Choose whether you would like to use icons from an icon pack or SVG icons.
    • Dropdown Cart Icon Pack - Choose an icon pack for the dropdown cart.
    • Dropdown Cart Icon SVG Path - Enter the dropdown cart icon SVG path here.
  • Dropdown Cart Icon Style - Set the color and hover color for the dropdown cart icons.

Reset

You can use this option to reset all the Theme Options to their default settings.

Backup Options

You can use this panel to export and import your theme options. Please note that if you import theme options, your current options will be rewriten.

  • Export - Copy the code from this field and save it to a textual file to export your options. Save that textual file somewhere so you can later use it to import options if necessary.
  • Import - To import options, just paste the code you previously saved from the "Export" field into this field, and then click the "Import" button.