Thème Xtra – Widgets / Sidebars

Theme Options

Theme Options is located in Appearance > Customize and all the options are live, it means you can see changes before publish and save

General Settings

  • Layout
    • Layout – 3 different types, Full width without border, Boxed with different backgrounds and Boxed margin
    • Site Width – You can change Site Width with px or %, if you need full width set 98%
    • Sidebar Position – There are multiple different sidebar positions Left, Right, Double, Mix, etc.
    • Sticky Sidebars – This will turn siebars sticky on page scrolling, affects on all the pages
    • RTL Mode – If you want to load RTL styles, turn this option ON
    • Responsive – Enable styling for mobile and small devices, We recommend to keep this ON
  • Theme colors
    • Primary – Example if site color is red and you change it to green, everywhere in site, red colors will change to green
    • Secondary – Such as primary color, This option only works if you have any second color on the site
    • Dark Mode – By enabling this option, dark CSS will loads, If you still see any light parts, you need fix them manually
    • Styles – You can set body background, styling of buttons, styling of widgets, etc. on your needs.
  • Loading
    • Loading – By enabling loading option, Your visitors will see loading screen before your site pages.
  • Page 404
    • Custom 404 Page – If you want custom page 404, Go to Pages and create your own 404 then assing it here
    • 404 Message – Default page 404 have message that says Page not found!, So you can change it
    • 404 Button Title – In page 404 you can change title of Back to Homepage button title
  • Custom codes If you want to add custom codes to your site such as meta tags, CSS, JS, etc.
  • Advances settings SEO options, Custom post types, Maintenance Mode, Lazyload, Popup, etc.
    • Maintenance Mode – If you assign any page, All of your visitors will redirect to it automatically
    • Lazyload – Will help you to speed up your site page by loading images on scrolling
    • Post Types – You can add unlimited post types and manage settings with different templates

Typography

Typography – In the Typography panel you can set Google fonts or change fonts size of overall website. For example if you think your site overall font size is small, then click on Body StyleKit then set font size to 26px to see changes. There are over 870 google fonts that you can set for Body or Headlines, Please note, Only use 1 or Maximum 2 fonts on your site because site speed issue. If you want to use custom font in your WordPress editor in posts, Then from last option in typography panel, Add some fonts, then in WP Editor you can access them.

Header

  • Logo – Prepare logo image
    • Logo – Set your site logo and styling logo
    • Logo Alternative – Such as logo, But its usefull for other ways example custom sticky or footer
    • Logo Tooltip – Will shows on mouse hover, You can create a page with some text then assing it here.
  • Social Icons
    • Social Icons – Add any social icons you want then you can show them in header
    • Settings – Select hover effect, color mode, tooltip, etc. and customize styling of icons
  • Header
    • Left – Left place of top bar header, You can add element such as text or menu
    • Center – Center place of top bar header, You can add element such as text or menu
    • Right – Right place of top bar header, You can add element such as text or menu
    • Container – If you want to set top bar header background click on this stylekit
    • Row Inner – If you want to set top bar header width size click on this stylekit
    • Menu Styling – If you have menu on this row, So you can customize styling of it, fully live
  • Header top bar Exactly like header you can create or edit elements but for top bar header
  • Header bottom bar Exactly like header you can create or edit elements but for bottom bar header
  • Sticky Header You can select which header you want to be sticky or such as header create separate sticky header
  • Mobile and Tablet Header Such as other row you can also create your own mobile header
  • Fixed Side Fixed side a little different, Because it have Top, Middle and bottom elements location
  • More If you want to add backround to overall header go there, Additionally header supports extra panel

Header Builder Video

Title and Breadcrumbs

  • Header Position – You can set header top or header overlay or header after title and slider
  • Title Type – Global settings for all site pages
    • None – Disable title and breadcrumbs section on all pages
    • Title and Breadcrumbs – Its clear, It will show title and or breadcrumbs on pages
    • Revolution Slider – If you want slider on all site pages, then select this option
    • Custom Shortcode – If you wish to display something with custom code on all pages, then try this
    • Custom Page – You can also create an page and assing it here instead title and breadcrumbs section
  • Settings
    • Container background – If you want to have background color or image for title section, click on Container stylekit
    • Page Title styling – If you want to change page title size or font, Click on Page Title stylekit
    • Breadcrumbs delimiter – Add icon between breadcrumbs items
    • Breadcrumbs styling – If you want to change page breadcrumbs size or font, Click on this stylekit

Footer

Footer You can set widgets or copyright text, Footer allows you to build 3 row

  • Top of Footer Exactly like header you can create or edit elements for top bar of footer
  • Widgets Layout and styling, if you want to add footer widgets go to Appearance > Widgets
  • Bottom of Footer Exactly like header you can create or edit elements for bottom bar of footer
  • More Back to top button and quick contact form settings, Will visible in right bottom of website

Footer Builder Video

Video

Blog

  • Blog You can set blog template, customize posts stylig, search settings, etc.
    • Blog Settings Set template, layout, translations, etc.
    • Blog Styling If you set one of default templates, then you can customize all styling of posts for archive pages
    • Single Settings You can translate important titles, hide or show post meta in single post page
    • Single Styling Customize single page styling, colors, font size, etc.
    • Search settings Filter post types, change search title, sidebar position

If you want to change number of posts for blog pages, Go to Dashboard > Settings > Reading

How to Create Custom Blog Archive Template?

In our theme you can create custom blog template with page builder posts grid element. Please follow steps below to create and setup your website custom blog page.

Go to Dashboard > Pages > Add New, create new page and name it My Blog Template

Then publish page and click on Front End editor button above text editor and after loading page, Edit your Posts Grid Element and create your design, then update page.

Finally go to Appearance > Customize > Blog > Blog Settings and Choose your new blog template like below shot:

For setting number of posts, Go to Dashboard > Settings > Reading

Portfolio

Portfolio Its custom post type for portfolio but you canset new slugs, styling posts, etc.

  • Portfolio Slug Set template, layout, translations, etc.
  • Portfolio Settings Set slugs, title, columns, number of posts, etc.
  • Portfolio Styles If you set one of default templates, then you can customize all styling of posts for archive pages
  • Portfolio Single Settings You can translate important titles, hide or show post meta in single post page
  • Portfolio Single Styles Customize single page styling, colors, font size, etc.

How to Create Custom Portfolio Archive Template?

In our theme you can create custom portfolio template with page builder posts grid element. Please follow steps below to create and setup your website custom portfolio page.

Go to Dashboard > Pages > Add New, create new page and name it My Portfolio Template

Then publish page and click on Front End editor button above text editor and after loading page, Edit your Posts Grid Element and create your design, then update page.

Finally go to Appearance > Customize > Portfolio > Portfolio Settings and Choose your new portfolio template like below shot:

WooCommerce

WooCommerce If you installed WooCommerce plugin then you can manage some of shop settings here

  • WooCommerce Settings Manage layout, columns, number of products, Single pages, etc.
  • WooCommerce Styles Customize products styling, colors, sizes, etc.

Backup / Reset

  • Backup / Reset From Theme Options > Backup, you can download file or copy backup of Options or reset all the settings
  • Restore or import By pasting in first field you can import your previously backed up file of options

Other Options

  • Site Identity Set title and favicon for your site
  • Menus You can edit your site menus items, links, titles, etc.
  • Widgets If you have sidebar on your site, then you can customize widgets
  • Homepage Settings Set custom page for home or blog posts page
  • Additional CSS If you have some custom CSS, so put it there

For adding favicon go to Theme Options > Site Identity and upload your favicon.