Introduction

Nitro Customizer allows you to preview changes to your site before publishing them. You can also change and preview settings for each page on your site here.

 

Open Customizer

There are 2 methods to open Nitro Customizer.

  1. Click on Customize button on top sidebar.
  2. Go to Dashboard > Appearance > Customize.

 

Expert Mode

By default, you can only see live preview while you are opening the right tab on the right page. For example, you cannot see changes for product category page when you’re still on Homepage. That’s why we hide settings for inactive pages.1-1But if you want, you can still enable settings for the inactive page. Here’s how to do it.

  1. Hover and click on “Expert Mode” to turn on Live Customizer for the inactive page.
  2. On Customizer, open “System” tab, then turn on “Enable Expert Mode”.

Note: Turning on “Expert Mode” on “System” tab in method 2 will be synchronized with that on Method 1.

 

Customization Tabs

Follow below links to learn how to customize a section using Live Customizer:

  • General: general settings for your whole site
  • Layout: change settings for design layouts
  • Typography: all you need to change text areas
  • Color: everything related to color can be edited here
  • Header: pick up a global header for all your pages. To add, manage, or edit headers, open Header Builder on your WordPress Dashboard)
  • WooCommerce: include all magic for eCommerce pages, like product category, product details, cart page, checkout page
  • Blog: change settings for blog list and blog detail pages
  • Pages: global settings for page, including “404” page
  • Footer: pick up footer for each sidebar area and copyright text (to create or change footer widgets, go to “Widgets” tab)
  • System: everything related to system for your site can be edited here: change front-page, custom CSS, etc.
  • Menus: change content and settings for all menus (you can also change menu’s content in “Widgets” tab)
  • Widgets: customize content for all widgets on your site

 

Note: all changes in Live Customizer will be applied to all pages that are using “Global Settings“. To change settings for a specific page, please click here.

Back To Top

General

In this panel, you can customize settings for your overall live site. To view settings for any sub-panels, click on below links:

 

Site Identity

In this sub-panel, you can change global site’s information.

  • Site title: change site’s title
  • Tagline: change site’s tagline

1

  • Site icon: change icon for your site.

img_doc

Social

Inthissub-panel, you can quickly insert links to your social channels. Social icons of channels which include links will be displayed on every social icon area on your site.2

 

Page Loading Effects

In this sub-panel, you can change the loading style of your site.

There are 3 loading options:

 

 

CSS Animation

There are 12 CSS animations
This is how CSS Animation loading effect works.image05

 

Image

This is how image loading effect works.

 

Widget Styles

In this sub-panel, you can customize widget style, with specific settings for each one.

You can also customize widget color by clicking on the bottom button.
There are 4 widget styles:

 

Style 1

Options:

  • Enable background
  • Enable border
  • Enable divider for widget titleartboard-1-copy-5

 

Style 2

Options:

  • Enable background
  • Enable border
  • Enable divider for widget title

artboard-1-copy-6

Style 3

Options:

  • Enable border

artboard-1-copy-7

Style 4

Options:

artboard-1-copy-8

Pagination Style

In this sub-panel, you can change style for your pagination.

There are 3 pagination styles:

 

Style 1artboard-1-copy-4

 

Style 2artboard-1-copy-9

 

Style 3artboard-1-copy-10

Back to top button

“Back to top” button helps you instantly scroll up to the top of any page on your site.
When enable “Back to top” button, you can see all settings for this button.26

With the “Back to top” button, you can set:

You can also customize button color by clicking on the bottom button on this sub-panel.

Shape

There are 3 button shapes:

 

Square

 

 

Circle25Rounded21

Style

There are 2 styles: Light and Dark.

Light20

 

Dark
19

Button Size18

Icon Sizelive_general

Back To Top

Layout

In this sub-panel, you can customize:

 

General

In this sub-panel, you can customize

You can also edit color and typography of layout by clicking on 2 buttons at the bottom of this sub-panel.

 

Offset width

Offset width is in pxpages

Content width

Content width is in px or %

pages-copy

Gutter width

Change the width between 2 sections.pages-copy-2

Enable boxed layout

When enabling boxed layout, you can display a padding around the main wrapper and can apply a custom background to your page’s body content.

Note: When enabling boxed layout:

  • Changing offset width means changing the width of the whole page wrapper. When disabling boxed layout, changing content width means changing only the width of all elements inside page wrapper.
  • Content width remains unchanged

pages

You can also edit color and typography of layout by clicking on 2 buttons at the bottom of this sub-panel

pages-copy-3

 

Page Title

Options

 

 

Show page title

When enabling page title, you can see all settings for page title.

pages-copy-4

Layout

There are 5 layout styles.

 

Style #1pages-copy-5

Style #2pages-copy-6

Style #3pages-copy-7

 

Style #4pages-copy-8

 

Style #5layout-copy-5

 

Show breadcrumblayout

Paddingslayout-copy

Min height

Setting Minium height for page title

 

You can also edit color and typography of layout by clicking on 2 buttons at the bottom of this sub-panel

 

 

 

Button

Options:

 

Paddings

Paddings are in px.layout-copy-2

 

Border radius

Border radius is in px.layout-copy-3

 

Border width

Border width is in px.layout-copy-4

You can also edit color and typography of layout by clicking on 2 buttons at the bottom of this sub-panel.

 

Back To Top

Typography

[‘Here you can customize typography:

General

You can customize text style for Body Text and Heading Text.
To customize color or layout for these 2 kinds of text, you can click the buttons at the bottom of each sub-panel.

live-typoO

Body fonts

    • Body font type: change font type for body text
      • You can choose google fonts, standard fonts or Custom fonts
      • Custom fonts support file with format: eot, otf, ttf, woff, woff2
    • Body text size: drag to change size for body text
    • Body line height: change height between 2 text lines on body text
    • Body letter spacing: change spacing between 2 letters on body

17

 

Heading font

    • Heading font type: change font type and style for heading text
      • You can choose google fonts, standard fonts or Custom fonts
      • Custom fonts support file with format: eot, otf, ttf, woff, woff2
    • Heading base size: change size for all headings. This means changing all your headings in an appropriate ratio (no need to manually change size for each heading)
    • Heading line height: change height between 2 text lines on heading
    • Heading letter spacing: change spacing between 2 letters on heading

16

To customize color or layout, you can click the buttons at the bottom of each sub-panel

 

Page Title

Options:

  • Heading style: pick up a style for heading
    • I: Italic
    • U: Underline
    • T: Uppercase
  • Heading text size: change size for heading text
  • Heading line height: change height between 2 text lines for heading
  • Heading letter spacing: change spacing between 2 letters for headingtfr
    15

To customize color or layout, you can click the buttons at the bottom of each sub-panel

 

Button

Options:

  • Style: pick up a style for button text
    • I: Italic
    • U: Underline
    • T: Uppercase
  • Text size: change size for button text
  • Line height: change height between 2 text lines for button text
  • Letter spacing: change spacing between 2 letters for button text13

To customize color or layout, you can click the buttons at the bottom of each sub-panel

 

Quotes

Options:

  • Text font: pick up a font for quote text
  • Text style: pick up a style for quote text

To customize color or layout, you can click the buttons at the bottom of each sub-panel

Back To Top

Color

In this sub-panel, you can change general color settings for:

 

General

In this section, you can change general color settings sfor your site, including:

 

Color profiles

3 predefined color profiles, plus 1 custom profile for you to save your own color profile.

Light (1)11

 

Light (2)12

 

Customlive-color

 

Background

  • Outer Body BG: set background color for outer body
  • Inner body BG: set background
  • Secondary BG: set secondary background
  • Form fields BG: set background for form fields
  • Offset BG: set offset background
  • Outer Body BG image: set background for out

Content

  • Main: set main color tone
  • Text: set color for body text
  • Heading: set color for heading text

10

 

  • Entry meta: set color for entry meta text

9

 

  • Line: set color for all lines

8

 

You can also edit layout and typography by clicking on 2 buttons at the bottom of this sub-panel.

 

 

Page Title

In this panel, you can change color style for page title, including:

 

Use general color

When enabled, you can apply color settings in “General” tab for page title.
If you want to customize text color for page title only, disable this option.7

 

 

Background

Background color6

 

Background image

Upload background image

  • Background Size
    • Auto
    • Cover
    • Contain
  • Background Repeat
    • No repeat
    • Repeat
      • Repeat X
      • Repeat Y
  • Background Position
    • Left Top
    • Left Center
    • Left Bottom
    • Right Top
    • Right Center
    • Right Bottom
    • Center Top
    • Center Center
    • Center Bottom
  • Background Attachment
    • Scroll
    • Fixed
  • Parallax Background
  • Mask Overlay Color

 

Content

  • Text: change color for body text
  • Heading: change color for heading text
  • Link: change color for links
  • Hover: change color for link hover

5

 

 

You can also edit layout and typography by clicking on 2 buttons at the bottom of this sub-panel.

 

 

Button

In this sub-panel, you can change color style for primary and secondary buttons.

 

Primary

Primary buttons are buttons that take you to a new page. You can customize primary button including:

 

Background

Change primary color for background4

 

Background hover

Change primary color for background on mouseover

 

  • Text:Change primary color for text
  • Text hover:Change primary color for text on mouseover
  • Border: Change primary color for all borders
  • Border hover:Change color for border on mouseover

Secondary

  • Background: change secondary color for background
  • Background hover: change secondary color for background on mouseover
  • Text: change secondary color for text
  • Text hover: change secondary color for text on mouseover
  • Border: change secondary color for all borders

3

You can also edit layout and typography by clicking on 2 buttons at the bottom of this sub-panel.

 

 

 

Here you can change color style for footer and footer bottom, including:

When enabled, you can apply color settings in “General” tab for Footer. If you want to customize text color for footer only, disable this option.
2
Main footer content1

  • Background color
  • Background image: select image for background
    • Background Size
      • Auto
      • Cover
      • Contain
  • Background Repeat
    • No repeat
    • Repeat
      • Repeat X
      • Repeat Y
  • Background Position
    • Left Top
    • Left Center
    • Left Bottom
    • Right Top
    • Right Center
    • Right Bottom
    • Center Top
    • Center Center
    • Center Bottom
  • Background Attachment
    • Scroll
    • Fixed
  • Parallax Background
  • Mask Overlay Color

 

Footer Bottom

  • Text: change color for text
  • Background color: change footer’s background color
  • Link: change link color
  • Link hover: change link hover color

You can also customize footer widget by clicking on the button at the bottom of this sub-panel.

Back To Top

Header

In this panel, you can pick up a header for all your pages.

Display a header

 

To display a default header for all pages on your site, pick up a header from below list.

You can also add a default header for a specific page. Click here to learn how to do it.header

Configure a header

To configure a header, go to Header Builder settings.

Back To Top

WooCommerce

In this panel, you can customize all settings for WooCommerce elements.

Please notice that all changes in this panel will only affect WooCommerce pages, including:

 

 

General

In this section, you can live configure general settings for all WooCommerce pages and elements.

 

Options:

 

Note: you can also use “buy now” button for one or several products anywhere on your site by using Buy Now shortcode.

 

Enable catalog mode

 

When enabled, no one can see eCommerce buttons (add to cart, buy now, quick view, compare). Your eCommerce site will turn into an online catalog.

ecommerce

When catalog mode is enabled, you can disable product price as well as add acustom CTA button.

 

Disable price

Show or hide price in Product List or Product Details pageecommerce-copy-2

 

Enable custom button

In Product Details page, you can add a button with the following options:ecommerce-copy
Button text: insert text on button

  • Button type:
    • Simple text or link: insert action for button such as link or email address etc.
    • Contact Form 7: select form, only work with Contact Form 7 plugin

 

Disable wishlist/buy now

  • #1 Enable/disable wishlist: show/hide wishlist icon on each product item

image15

 

image38

 

  • #3 Enable “buy now” button: when enabled, there’ll be a “buy now” button being added to each product item. You can configure how this “buy now” button works

enable

 

Icon set

Pick up a predefined eCommerce icon set for all WooCommerce elements

Note: you can also use “buy now” button for one or several products anywhere on your site by using Buy Now shortcode.
icon-set

 

Product Category

In this sub-panel, you can customize settings for product category.

 

General

Options:

 

 

Show page title

Show or hide page titletitle

 

Sidebar layout

Pick up a layout for product category page. There are 3 sidebar layouts.

 

Layout 1slidebar-layout1

 

Layout 2slidebar-layout2

 

Layout 3slidebar-layout3

 

Sidebar width

Change the width for sidebar. If you choose “no sidebar” option above, this option won’t be shown

sidebar

 

Enable sticky sidebar

Make sidebar sticky.

image20

 

Sidebar above product list

Pick up a sidebar above product list

To create a new sidebar or change sidebar content, go to Widgets panel on Live Customizer, or go to WP Dashboard > Appearance > Widgets.

sidebar-above-product-list

 

Sidebar below product list

Pick up a sidebar below product list.layout-copy-5

To create a new sidebar or change sidebar content, go to Widgets panel on Live Customizer, or go to WP Dashboard > Appearance > Widgets.

 

Customize widget styles

You can also customize Widget styles for your product detail page by clicking on this button.

 

 

Product List

With this sub-panel, you can customize:

 

Layout

There are 3 product list layouts: Grid, Masonry, and List.

 

Grid
layout-1

Masonry
layout2-1

List
layout3-1

Enable border wrap

Use border wrap around each product itemboder boder2

Number of columns

There are 3 options for number of columns:

 

2-column2-colum

 

3-column3-colum

 

4-column4-colum

Column gutter width
layout-copy-6

 

Enable full width

Enable full-width layout style for product list page

Enable item animation

Turn on animation effect for product items

Number of products per page

Change total number of product items per page

Pagination type

There are 3 pagination types.

 

 

Numberpagination

 

Load Morepagination2

 

Infinity scroll

image17

 

Product Item

Here you can pick up a layout as well as hover effect for each product item on product category page.

 

Layouts

There are 6 layouts for a product item.

 

Layout 1

 

Layout 2

 

Layout 3

 

Layout 4

 

Layout 5

image13

 

Layout 6

image39

 

Hover effects

There are 4 hover effects for your product item:

 

Notice: if your choose product list layout #4, you cannot set hover effect.

None
There is no hover effect at all.hover-none

 

Zoom Inimage30

 

Mask Overlayimage27

2-image Previewimage56

 

Product Details

On this sub-panel, you can configure your product detail item page, including:

 

 

General

 

  • #1 Enable floating “add to cart”: make “add to cart” button always display no matter how you scroll mouse up and down
  • #2 Enable social share: turn on social sharing

social

  • Sidebar above product details: pick up a sidebar above product details areasidebar-above-product-list

 

 

  • Sidebar below product details: pick up a sidebar below product details arealayout-copy-7

 

Main Information

Options:

 

Layout

There are 5layout styles for main information area.

 

Layout 1layout1

 

 

Layout 2layout2

With layout 2, you can:

 

Sidebar layout

There are 3 sidebar layouts:

 

 

Noneslidebar-layout2
Left sidebarslidebar-layout1

 

 

With left sidebar, you can customize sidebar, including:

 

Pick up sidebar content

To create a new sidebar or change sidebar content, go to Widgets panel on Live Customizer, or go to WP Dashboard > Appearance > Widgets.pickup-slide-bar

 

Change sidebar width

Sidebar width is in pxsidebar

 

Enable sticky sidebar
Keep the sidebar display when scrolling downsticky

 

Customize widget styles

you can also customize Widget styles by clicking on this button.custom

 

Right sidebarslidebar-layout3With right sidebar, you can make customizations like on left sidebar, including:

 

Thumbnail position
There are 3 thumbnail positions: Left, Right, Bottom

 

Leftthumbnail3

 

Rightthumbnail2

 

Bottomthumbnail1

Enable zooming on mouse hover

When enabled, you can make zooming effect on mouse hover.

You can customize zooming options, including:

 

Zooming type
There are 3 zooming types: Window, Inner, and Lens.

 

Windowimage39

With this zooming type, you can change width and height for the zooming window.layout-copy-8

Innerimage18

Lensimage67

Enable mousewheel zoom

When enabled mousewheel zoom, you can make zooming just by scrolling your mousewheel.mouse

image03

Enable easing

When enabled easing, your zooming movements will be smoother.easing

 

Layout 3layout3

 

Layout 4layout4

 

With this layout, you can pick up background color for main product section.color

 

Layout 5

This layout is used for digital download niche, but you can still use it for your product detail page if you like.layout5

Extra Information

 

  • #1 Show description: show product descriptionshow-des

 

  • #2 Show attributes: show product attributesattriibuilt

 

  • #3 Show reviews: show review arearevie

 

Other Products

In this section, you can customize:

 

 

Show upsell productslayout-copy-10

 

Show recently viewed productslayout-copy-9

Number of products to show

Number of products is from 1 to 6relate-size

 

Cart Page

 

Sidebar above cart pagelayout-copy-11

 

Sidebar below cart pagerelate-size-copy-2

 

Checkout Page

Sidebar above checkout formlayout-copy-12

 

Sidebar below checkout formlayout-copy-13

 

 

Thank You Page

You can write your own thank you page by clicking “Set Content” button. HTML tags are allowed

layout-copy-14

 

Mobile layout

Besides using responsive desktop layout, you can setup a special shop layout on mobile devices. We highly recommend you to use this mobile layout to ensure the most friendly user experience on mobile devices.

On this section, you can setup mobile layout for:

Product category

This is a product category layout on mobile.

image87

 

With this shop page, you can:

 

Show or hide product categories widget

image38

 

image69

 

Show or hide sidebar widget. When enabling sidebar widget, you can pick up a sidebar content

image82

 

image86

 

 

Layout:

There are 2 layouts for product category: Grid and List

 

Grid

With grid layout, you can pick up number of product item columns. There are 2 options for number of columns:

 

1-column

image05

 

2-columns

image10

 

List

image06

 

Product details

With product detail, you can enable or disable sticky function of “add to cart” button.

image19

 

image24

Back To Top

Blog

In this panel, you can customize all settings for blog list and single post.

 

Blog list

In this sub-panel, you can customize all settings for blog list, including:

Layouts

There are 4 layouts:

Layout 1layout1

Item styles

With Layout 1, there are 2 blog item styles: transparent and with background.

 

Transparentitem-style1

With backgrounditem-style2

You can change blog item’s background color in “Secondary Background” on Color settings.

Layout 2layout-2

Item styles

With this blog list layout, there are 2 item styles: transparent and with background.

 

Item style 1 – Transparentitem-style-1

Item style 2 – With backgrounditem-style-2

You can change blog item’s background in “Secondary Background” on Color settings.

Layout 3layout-3

Layout 4layout-4

With this style, there are 3 options for number of columns, and 2 item styles.

 

Number of columns

There are 3 options for number of columns:

 

2-column2-column

3-column3-column

 

4-column4-column

Item style

There are 2 blog item styles: transparent and with background.
Transparent

item-style1 With backgrounditem-style2

 

Enable full width

When enabled, all single blog post items will be displayed full-width of blog page.enable-full-width-copy

 

Sidebar layouts

There are 3 sidebar layouts: no sidebar, left sidebar, and right sidebar.

 

No sidebarblog

 

Left sidebarblog-copy

With this sidebar, you can pick up sidebar content, change sidebar width or enable sticky sidebar.

 

Pick up sidebar content

To create a new sidebar or change sidebar content, go to Widgets panel on Live Customizer, or go to WP Dashboard > Appearance > Widgets.

You can also customize widget styles.

 

Sidebar width is in px. From 250 to 575pxsidebar

When enabled, your sidebar won’t be disappeared when scrolling mouse down.

image19

Right sidebarblog-copy-2

All options for right sidebar is like those in left sidebar.

 

Single post

In this sub-panel, you can customize all settings for single blog post, including settings for single post title and single post content.

 

Single post title

  • Layout
  • Font size
  • Padding top & padding bottom

 

Layout

There are 2 layouts for single blog post title.

 

Layout 1blog-copy-3

Layout 2blog-copy-4
With this layout, you can setup post title’s background to full screen.blog-copy-5

Font size

Font size is in px, from 12 to 80pxblog-copy-6

Padding top & padding bottom

Padding is in px, from 0 to 500px.blog-copy-7

Single post content

Here you can edit content and sidebar layout, including:

Sidebar layout

There are 3 sidebar layouts, including:

 

Note: with Left Sidebar or Right Sidebar layout, you can also edit sidebar content and width

 

No sidebarblog

Left sidebarblog-copy

Right sidebarblog-copy-2

Show social sharingblog-copy-8

Show author infoblog-copy-9

Show post navigationblog-copy-10

 

Show comment areablog-copy-11

 

To create a new sidebar or change sidebar content, go toWidgetspanel on Live Customizer, or go toWP Dashboard > Appearance > Widgets.blog-copy-12

 

Sidebar belowpost

To create a new sidebar or change sidebar content, go toWidgetspanel on Live Customizer, or go toWP Dashboard > Appearance > Widgets.

blog-copy-13

Back To Top

Pages

In this panel, you can customize settings for:

Standard Page

In this sub-panel, you can customize standard page, including:

 

Note: this change will be applied for all pages using “global settings”. You can also change settings for a specific page.

Sidebar layout

There are 3 sidebar layouts:

With Left and Right sidebar layout, you can choose sidebar content, change sidebar width, as well as enable sticky sidebar.

 

No sidebarartboard-1-copy-2

Sidebar content

With left and right sidebar layouts, you can pick up a sidebar content.
pages-copy-2

To create a new sidebar or change sidebar content, go to Widgets panel on Live Customizer, or go to WP Dashboard > Appearance > Widgets

Sidebar width is in px. From 250 to 575px
pages-copy-3

When enabled, your sidebar won’t be disappeared when scrolling mouse down.artboard-1-copy-3

This is how sticky sidebar works.image06

You can also customize widget styles.artboard-1-copy-9

“404” page

In this sub-panel, you can customize your page 404, including:

 

 

Content

Insert your content for the page 404. You can use HTML code here.enable-full-width

Show search form

Tick this checkbox if you want to display search form on page 404.enable-full-width-copy-2

Styling

For background color, image, text size and color.enable-full-width-copy

Back To Top

Gallery

In this panel, you can edit Archive Gallery or Single Gallery.

 

Archive Gallery

In this sub-panel, you can customize your gallery list page, including:

 

 

Change gallery slug textenable-full-width-copy-5

  • Layout: pick up a layout for gallery list
  • Thumbnail shape: change shape for image thumbnails

 

Layout 1
enable-full-width-copy-7

Thumbnail shape #1

blog

Thumbnail shape #2blog-copy

Thumbnail shape #3

blog-copy-2

Layout2

enable-full-width-copy-6

  • Columns: pick up number of columns for gallery list
  • Number of item per page: change number of image item per page

enable-full-width-copy-10

Space between items

Increase/decrease space between 2 itemsenable-full-width-copy-8

Style

There are 2 styles for gallery item’s title.

 

Style 1
enable-full-width-copy-9

Style 2
blog-copy-3

Enable slider for thumbnail / Enable full-width

  • Enable slider for thumbnail: enable or disable slider for image thumbnail
  • Enable full-width: turn on full-width for gallery layout

 

 

Enable filter & filter alignment

Turn on gallery filter, then set alignment for filter. There are r3 filter alignment layouts:

 

Align Filter Left
blog-copy-4

Center Filterblog-copy-5

Align Filter Rightblog-copy-6

Single Gallery

In this sub-pane, you can customize your single gallery item, including:

 

Layout/ Thumbnail shape

  • Layout: pick up a layout for single gallery item
  • Thumbnail shape: change thumbnail shape for gallery

 

Layout 1blog-copy-7

Layout 2
blog-copy-8

Layout 3
blog-copy-9

Layout 4
blog-copy-10

Enable full-width

Turn on full-width for gallery layout

 

 

Columns

Pick up number of columns for gallery listblog-copy-11

Space between items

Increase/decrease space between 2 itemsenable-full-width-copy-8

 

 

Back To Top