All Settings Overview

General Settings:

Layout: switch between full width or boxed website layout

Boxed Container Width: set the outer container width for boxed layout

Boxed Inner Body Background Color: set the background color for boxed content
Body Background: set the background type for the website body

Container Width: set the inner container width for both boxed and full-width layouts

RTL: enables right to left writing for Arabic languages
Back to Top: adds a back to top button on bottom right

404 Page: allows you to set a custom 404 page; if not set, the default theme 404 page will be used
Maintenance Mode: enables maintenance mode on your website; shows the default maintenance page to non-logged-in users
Maintenance Page: allows you to set a custom maintenance page
Browser Theme Color: sets the browser color for Chrome 39+ for Android

Site Border (Passepartout): sets a colored border around the website

Branding

Primary Logo: set the default logo for non-transparent header

Secondary Logo: set the default logo for transparent header

Mobile Logo: set a custom logo for mobile devices; if not set, Primary Logo will be used instead

Secondary Mobile Logo: set a custom logo for transparent header on mobile devices; if not set, Secondary Logo will be used instead

Favicon: set the icon for the browser tab and mobile devices (home screen, bookmarks, etc.)
Main Color: set the primary color of your website (usually your company color); used on various elements throughout the website
Hover Color: set the secondary (hover) color of your website

Typography

Set the general text options for your website (not including blog posts). Settings worth mentioning:

Font Family: choose between System Fonts (optimized for performance) or Google Fonts (optimized for display)

Font Size: make sure you also set the values for tablets and phones
Line Height: this is a standard value and it's not measured in pixels; a value of 1.2 will render a line height of 36 px for a font size of 30px (1.2 x font size)
Letter Spacing: value is set in EM rather than PX, to avoid display issues on smaller screens; if your design specs are set in PX, use this convertor to get the EM value: https://www.w3schools.com/cssref/css_pxtoemconversion.asp

Header Style

Set the general styling for header bar.

Layout: choose between classic or left header type
Header Background: set the background for header bar; choose between solid color, gradient or image
Border: add a 1px border below the header

Header Padding: set the top/bottom padding for header bar; use this to increase the overall header height

Logo Height: set the desired logo height; it's recommended you upload a file with 3x the logo height (for retina devices)

Top Bar

Adds a small header above the main header. Use this for secondary content like menus, notes or social icons.

Top Bar Background: set the background for top bar; choose between solid color, gradient or image
Text Color: set the color for all text inside the top bar
Font Size: set the font size for all text inside the top bar
Link Color: set the main and hover color for links inside the top bar
Top Bar Padding: set the top/bottom padding for top bar; use this to increase the overall height
Top Bar Layout: choose between one or two columns layout
First Column Content: set the content type for the first top bar column: Social Icons (set this in Theme Options - Social), Menu (set it in Appearance - Menus and choose Top Bar Column One as location), Custom (use the custom editor to add the content)
First Column Alignment: set the content alignment for the first column

Header Options

Transparent Header: makes the header background transparent; link color and border options will enable with this option
Wide Header: stretches the header content to full screen width (with 70px left and right padding)
Sticky Header: set the header position to fixed (doesn't scroll with content)
Change Height on Scroll: use this option to make the header bigger (taller) before scroll; you can do this by setting a larger value on Padding Before Scroll than on Header Padding; header will transition this height right after scroll

Header Extras

Call to Action Button: adds a button on the right side of the header (classic header) or on the bottom (left header)

Search: adds a search icon right after the menu (classic header)
Social Icons: adds social media icons; set the link in Theme Options - Social
Enable Widget Area on Desktop: adds a custom widget area on the right side of the header

Enable Widget Area on Mobile: adds a custom widget area on mobile menu

Menu Typography: set the text options for menu
Menu Item Spacing: set the spacing between menu items

Menu Position: choose the menu alignment on header (left, center, right)

Dropdown Background Color: set the background color for dropdown menu
Dropdown Menu Color: set the main and hover color for dropdown menu

Mobile Logo Height: set the logo height for mobile menu
Mobile Menu Background: set the background for mobile menu dropdown; choose between solid color, gradient or image
Use Secondary Logo: use Secondary Mobile Logo (set in Theme Options - Branding); recommended for transparent headers
Mobile Menu Animation: set the animation for mobile dropdown menu
Mobile Menu Typography: set text options for mobile menu
Mobile Menu Alignment: set menu alignment on mobile

Layout: choose the footer layout; after choosing the layout, widget locations will update in Appearance - Widgets
Footer Background: set the footer background; choose between solid color, gradient or image
Footer Vertical Padding: set the top/bottom padding for footer

Footer Title Style: set the text options for footer title; add the title in Appearance - Widgets
Footer Text Style: set the text option for regular text on footer; link colors are set separately; add the text in Appearance - Widgets

Footer Link Color: set the main and hover color for all links in footer
Wide Footer: stretches the footer to full screen width (with 30px left and right padding)

Copyright Style

Copyright Background Color: set the background color for copyright bar
Border: add a 1px border on top of copyright bar

Wide Border: stretches the copyright border to full screen width

Copyright Vertical Padding: set the top/bottom padding for copyright bar

Copyright Text Color: set the text color for copyright bar; link colors are set separately
Copyright Font Size: set the copyright text font size
Copyright Link Color: set the main and hover color for all links in copyright
Social Icons: add social icon on the right side of copyright bar; social links are set in Theme Options - Social

Page Title

Page Title Background: set the page title background; choose between solid color, gradient or image
Page Title Background Overlay: set the background overlay for page title; choose between solid color or gradient

Featured Image as Background: use the page/post/portfolio/product featured image as background; overwrites Page Title Background but keeps Background Overlay
Page Title Vertical Padding: set the top/bottom padding for page title
Page Title Tag: set the heading tag for page title; the recommended tag is H1
Page Title Color: set the page title color
Page Title Text Transform: set the text transform option for page title (uppercase, capitalize, lowercase)
Page Title Text Align: set the content alignment on page title

Container Max Width: limit the inner width of page title content; useful for long page descriptions

Breadcrumbs: adds breadcrumb links on top of the title

Blog

Blog / Archive Style

These settings affect blog page and all blog archive pages (category, date, author, tag).

Layout: set the blog grid layout
Grid Columns: set the number of columns for blog page grid; varies depending on layout
Grid Items Spacing: set the spacing between grid items
Grid Item Hover Effect: set the image hover effect for blog grid; varies depending on layout
Image Border Radius: set the border radius for images in blog grid
Blog Page Vertical Padding: set the top/bottom padding for blog page (and archives)

Blog Page Post Title Style: set the text options for blog title in blog page grid
Show Excerpt on Blog Page: shows blog post excerpt in blog grid; if the excerpt is empty, WordPress automatically creates an excerpt using the first 55 words of the post
Excerpt Character Length: limits the number of characters for blog excerpt; useful for grid visual consistency
Blog Page Post Excerpt Style: set the text options for blog excerpt in blog page grid
Show Author on Blog Page: displays post author name on blog page grid
Show Date on Blog Page: displays post date on blog page grid
Show Category on Blog Page: displays post categories on blog page grid
Blog Page Sidebar: enable sidebar on blog page; sidebar widgets can be configured in Appearance - Widgets

Blog Post Style

Blog Post Page Title: choose between the default page title (set in Theme Options - Page Title) or Simple Page Title

Featured Image: show post featured image below the title; only available for Simple Page Title
Container Max Width: limit the inner width of page title content; useful for long page descriptions; overwrites the value set in Theme Options - Page Title - Container Max Width
Show Author on Blog Post: shows post author name on blog post
Show Date on Blog Post: shows post date on blog post
Show Category on Blog Post: shows post categories on blog post

Show Tags on Blog Post: shows post tags on blog post

Narrow Post Width: limits the content width to 65% of your website container (set in Theme Options - General Settings - Container Width); use this to improve readability

Reading Progress: shows a reading progress bar below the header

Blog Post Sidebar: enable sidebar on blog post; sidebar widgets can be configured in Appearance - Widgets

Blog Post Typography

Blog posts should be optimized for reading, that's why we included a different set of typography options for it.

Portfolio

Porfolio Page Style

Layout: set the grid layout for portfolio page
Grid Columns: set the number of columns for the portfolio page grid
Grid Items Spacing: set the spacing between portfolio items in portfolio page grid
Grid Item Hover Effect: set the hover effect for portfolio page grid
Image Ratio: set the image aspect ratio (square, landspace, portrait) on portfolio page grid
Image Border Radius: set the image border radius on portfolio page grid
Portfolio Items on Page: set the number of portfolio items on a page; if this number is smaller than the total number of items, pagination will be used
Portfolio Page Vertical Padding: set the top/bottom padding for portfolio page

Full Width: stretch the portfolio page grid to full-screen width
Portfolio Page Sidebar: set the sidebar options for portfolio page; sidebar widgets can be customized in Appearance - Widgets
Portfolio Page: set your custom portfolio page; if left blank, the portfolio will be accessible at www.yoursite.com/portfolio

Portfolio Post Style

Portfolio Post Sidebar: set the sidebar options for portfolio post (single); sidebar widgets can be customized in Appearance - Widgets

WooCommerce

Header Cart Icon: enables a cart icon in the header; on click, it toggles a side quick cart view

WooCommerce Shop Style

WooCommerce Page Vertical Padding: set the top/bottom padding for the shop page

Grid Columns: set the number of columns for shop page grid
WooCommerce Items on Page: set the number of items on shop page grid; if this value is smaller than total number of items, pagination will be used
WooCommerce Page Sidebar: set the sidebar options for shop page; sidebar widgets can be customized in Appearance - Widgets

WooCommerce Product Style

WooCommerce Product Sidebar: set the sidebar options for product page; sidebar widgets can be customized in Appearance - Widgets

Set links for your social network channels. These will be used throughout the theme, where social icons option is enabled. Use the full links for each channel.

Custom

Use this to add custom CSS or JS to your website. Custom code will be loaded in every page and will overwrite theme CSS/JS.

Theme Options