Our theme customizer works as the original WordPress customizer feature but be much more versatile. All our theme options can be changed in our Customizer on the left side and live previewed instantly in previewed site on right side. With its 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 your 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 settings in Customizer and Import to apply for other sites.
Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our short guide for each option right in Customizer bar.
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 image. 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.
Smooth Scrolling: Enable/disable the smooth scrolling feature.
Design & Layout
Site Layout: Choose Full-width or Boxed layout for your site. With Boxed layout, you will have additional below options for background setting:
Site Width: Set width of the boxed layout in regard to full-width layout
Site Max Width: Set max width of the boxed layout in any screen size.
Background Color: Choose color of background
Background Image: Upload your background image along with some settings: Background Image Repeat, Background Image Alignment, and Background Image Attachment.
Link Color: Choose color of links on your site and color when you hover in.
Typography
Custom Font: Dreamers integrated all Google Fonts. Enable Custom Font 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 headings and body
Header
Customize your settings for your Header including Navigation Bar (Logo and Navigation) and an optional Top Bar.
Navigation Bar: Control the navigation bar with all the related settings here: its position, font, link color, link hover color and more. Check the box beside Custom Dropdown Style to change background color, font size, link color and link hover color on dropdown bar.
Logo: Upload your logo image and retina one (a larger image, with double the amount of pixels that your image will be displayed at). Enter your image height you want to display on navigation bar and we will do the calculation part for you to make it look great on all screen size.
NavBar Alignment: Adjust link alignment, height of navigation bar and size of mobile navigation button.
Top Bar: Enable/disable top bar. Top bar lays on top of your site, above Navigation Bar. It is suitable for placing contact information and social media link. You can choose to display social icons, set it as a top menu or custom content by checking each option. By checking Custom Content option, you are able to add content for top bar. Choose layout to display social icon and content of top bar.
This section contains all settings for Footer in your site.
Footer Columns: Set the number of column shown in footer.
Upload Footer Logo: select a photo to be displayed at the right bottom corner of the footer.
Bottom Bar Content: Add content shown in bottom bar.
Widgets
You can create widgets with various type of contents to put in the footer. To create a widget, click Add a Widget.
Blog
Blog Layout: Choose page layout for your blog page. It can be full-width, with 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.
Single Post: Choose Post layout same as blog layout by checking the box beside the option or uncheck to choose another layout. You also can choose to show or hide Post Meta, Tags and Author’s Bio. In addition, by enabling Social Sharing, you enable visitors to share your post. Enter Social Sharing Title and decide which social media your post can be shared.
Cause/Event
Cause/Event page: Assign a page as Cause/Event listing page. Once you chose a page as Cause/Event Page, its slug will be your Cause/Event’s main slug.
Cause/Event List Layout: Choose page layout for your cause/event page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select cause sidebar for your cause/event page.
Cause/Event List Sidebar: Choose a sidebar for your cause/event pages.
Cause/Event List Style: Choose between List or Grid Style.
Single Cause/Event: Choose Single Cause/Event layout same as Cause/Event page layout by checking the box beside the option or uncheck to choose another layout. In addition, by enabling Social Sharing, you enable visitors to share your cause/event. Enter Social Sharing Title and decide which social media your cause/event can be shared.
Portfolio
Portfolio page: Assign a page as Portfolio page. Once you chose a page as Portfolio Page, its slug will be your Portfolio’s main slug.
Grid Columns: select the number of columns.
Items per page: the number of items to be shown one page.
WooCommerce
Shop Layout: Choose page layout for your shop page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select cause sidebar for your shop page.
Shop Sidebar: Choose a sidebar for your shop pages.
Products per page: the number of items to be shown one page.
Single Product: Choose Single Product layout same as Shop page layout by checking the box beside the option or uncheck to choose another layout.
Custom Code
In this section you can add custom JavaScript and CSS to your site. Your Google analytics tracking code should be added to Custom JavaScript field.
Import/Export Settings
All themes from NooTheme share the same theme setting structure so you can export then import settings from one theme to another conveniently without any problem.
Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import settings 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 Settings: 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.