Our theme customizer works as original WordPress customizer feature but be must more versatile. All our theme options can be changed in our Customizer on the left side and live previewed instantly in previewed on right side. With this intuitive interface, you can customize your website as you wish at your fingertips without writing a line of code.
To start using Customizer in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You also are able to Export your setting in Customizer and Import to apply for other sites.
Site Enhancement
- Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon”, selecting your existing image or uploading new image.
- Back To Top Button: Back To Top will appear in the right bottom when users scroll down. Enable/Disable as your preference.
- Enable page Heading: Page heading will appear in the header of site. When you enable you will have header background image on blog page, project page or shop page.
- Enable MailChimp Subscribe: This option allows you to enable/disable MailChimp which will display on footer. In addition, you need to enter MailChimp API key to connect to your account. Don’t know where to find Just click here to get your API
Design and Layout
- Site Layout: This option will help you to choose layout for your website. We provide two layout you can use, that is Fullwidth and Boxed. With Boxed layout you will have additional options for max style width background and background color or image setting.
- Color: This option allows you to set color for links and various element for your site.
- Primary Color: This option provides table color or code color which will help you to change primary color for your site.
Typography
You can customize your Typography settings. Constru integrated all Google Fonts. See font preview at Google Fonts.
- Custom Fonts: Enable Custom Fonts to customize font, font size and other settings for heading and body text.
- Custom Font Color: Enable Custom Font Color to customize font color of heading and body.
- Headings: If checked on Transform to Uppercase, you will have heading <h1> <h2> <h3> which is uppercase type.
- Body: You can change font size of body by selecting font size from dropdown list.
Header
Customize settings for Heading including Navigation Bar, Logo, Navigation Alignment and Social Media.
This option adjusts settings for Navigation Bar. You also can customize some settings for the Toggle Button on Mobile in this section.
- NavBar Position: This option allows you to select type of for NavBar, includes Static Top and Fixed Top.
- Show Search Box: If On, you will have search option on main menu.
- Use Custom NavBar Font and color: If On, you can change font, font size, link color and link hover color for header font.
Logo
Constru allows you to add image file or user text for logo. You will see button to turn On/Off Use Image for Logo
- If you turn Off Use Image for Logo button, you will have option to enter your site name, select logo font from Google font, font size and color for your logo.
- If you turn On, you will see Upload your Logo option which will allow to add your logo image. And enter your image height you want to display on navigation bar and we will do calculation part for you to make it looks great on all screen size.
Adjust height of navigation bar, space between links and size of mobile navigation button.
You can input URLs of your social media profile. Inputting URL here means that corresponding social icon will be displayed when Social Icon is enabled on Top Bar and/or on Bottom Bar. To enable each social media you need to enter your link on each box.
Footer contains Widgetized area and Footer bottom. You can change any parts.
- Upload Footer Background: This option allows you to display footer background image for your footer position.
- Footer Columns: Set the footer column number on drop-down list. Number of columns can be from 1 to 4. You can also select None to leave it blank(no footer content).
- Show Footer Bottom: If you choose Yes on droop-down list, you need to enter Footer Bottom Content on the Footer Bottom Content box.
Widget
This section enables you to add and customize Widgets on your preview site. It includes Main Sidebar and the number of Footer Columns due to setting in above section: Footer settings.
Footer Column #i: Add text, image or other widget by hitting Add a Widget button.
Blog
Post List
Choose layout setting for your Post List.
- Blog layout: It can be full-width, right sidebar or left sidebar. If you choose layout with sidebar, select blog sidebar for your blog.
- Blog sidebar: Choose a sidebar for your blog pages, including Main Sidebar, Shop Sidebar and Noo Footer Bottom.
- Blog Heading: You can enter your Blog name which is displayed on Heading Blog page.
- Heading Background Image: You will have background image on header of blog page if you click “Select Image” button then choose your image.
- Enable Menu Transparent: Check the box to enable Menu Transparent for your page.
- Show Post Meta: Check the box to show post me-ta of Blog page.
- Show Read more link: Check the box to show read more link.
- Excerpt Length: The number of characters displayed on post selection.
Post Single
- Show Post Meta: This option allows you to Show/Hide post me-ta when you open post detail page. Similarly, you can Show/Hide Post thumbnail, author’s bio of post.
- Show navigation: This option will help you to show/hide Navigation which is next/preview feature on post detail.
- Heading Background Image: You will have background image on header of blog page if you click “Select Image” button then choose your image.
Woo Commerce
Shop page
This section provides some options which help you choose Layout and Headline Settings for your Shop Page.
- Shop Layout: You can choose different layout for Shop page, including Full-Width, With Right Sidebar or With Left Sidebar. If you choose layout with sidebar, select shop sidebar for your shop.
- Shop Sidebar: You can select shop sidebar on dropdown list.
- Shop Heading: You can choose Heading Background of Shop page by clicking “Select Image” button and then enter title for Shop page.
- Shop Default View Style: There are 2 product display options: Grid &List which allow to view products in 2 different way.
- Products Per Page: You can set number of products displayed per page. Limited on 4 to 50 products
Single Product
Same as with Shop Layout you can choose Layout for Single Product. Besides that, you can enter number of Related Products Count
Single Portfolio
In this section you have settings for your single portfolio page.
- Heading Background Image: This options will help you to choose Heading Background for single portfolio page (single project page).
- Show navigation: This option allows to Show/Hide Navigation which is next/preview on single portfolio detail.
- Share Portfolio: This option allows to share single portfolio on Facebook, Twitter or Google+… and Share option will be displayed on left side of single post. You can tick on list checkbox to select social media for your site.
This option will help you input URLs of your social media profile. Inputting URL here means that corresponding social icon will be displayed when Social Icon is enabled on Top Bar and/ or Bottom Bar.
Custom Code
In this section you can add custom JavaScript and CSS to your site. You Google analytics tracking code should be added to Custom JavaScript field.
Import/Export Setting
All themes from NooTheme share the same theme settings structure so you can export then import setting from one theme to another conveniently with our any problem.
- Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import setting to this theme. All the settings will be loaded for preview here and will not be saved until you click button “Save and Publish”.
- Export Setting: Simply click Download button to export all your settings to a JSON file (.json). You then can use that file to restore theme settings to any theme of NooTheme.