Customizer

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 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. Please see the below illustrative image to better understand function of the favicon. After choosing the favicon, you will click Save and Publish. Then when you come back to your site, you will see an image displayed on the tap of your website. It is clear that by dint of the favion, you can distinguish your website`s tab from other tabs more easily.
  • Capture17

a1

  • Back To Top Button: Back To Top Button will appear in the right bottom when users scroll down. Enable/Disableas your preference.
  • Enable Page Heading: Page Heading will appear on the header of page. When you Enable this option, you will have header background image on blog page, shop page or another page…
  • Enable Breadcrumbs: Breadcrumbs will appear on the header of page. Enable/Disable as your preference.

Design & Layout

  • Style Layout:This option will help you set Style & Layout for your site. We provide two layout styles including: Boxed Layout and Fullwidth layout. With Boxed layout, you will have additional options for side width, max site width, background color or image setting, background repeat, background image alignment, auto resize.

Capture28

 

If you opt blue for background, background of your site will be filled with blue.

blog4

 

However, when you set up background image, background of the site will be replaced with a new image.

Blog5

 

  • Color: This option allows you to set the color for links and various elements for your site.

Auto Resize: if you turn on the button, background image will appear in the whole sides of pages. Yet, turning off this button will make background image be displayed only in a part of one side. Position of background image in this case may be left top, left center, left bottom, center top, center center, etc of the side. It depends on your choice in Background Image Alignment box. In our example, the background image will be placed at left top of the left side.

Capture31

 

 

Capture32

Primary Color: you can change primary color by this option. There is table of color, which allows you to select color you want or enter your color code on box.

Typography

You can customize your Typography settings here. Yogi 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 and NavBar Alignment.

Navigation Bar

This section 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, including Static Top or Fixed Top. Static Top, in this case, the NavBar does not move. It means that when you scroll down on the page and let the mouse pass the NavBar, you will not see the NavBar displayed on top. However, Fixed Top will allow you to see the NavBar when you scroll down the mouse.
  • Use Custom NavBar Font and color: If On, you can change font, font size, link color and link hover color for header font.

For example, if you decide on green for Link Hover then the Navigation Bar will have transformation. When you let your mouse hover over menu pagelink displayed on Navigation Bar, it will turn green.

Capture85

Yogi allows you to add image file or use text for logo. You will see button to turn On/Off Use Image for Logo.

If Off, you will have option to enter your site name, select logo font from Google font, font size and color for your logo.

If On, you will have two logo images to upload.  The first one is for standard desktop while the second one is for retina ready devices (optional). Click the Upload button and select your logo file. 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.

Capture86

 

 

Capture87

 

NavBar Alignment

Adjust height of navigation bar, space between links and size of mobile navigation button.

Top Bar

Top Bar lays on top of your site, above Navigation Bar. It is suitable for placing contact information and social media link. Enable to controls its layout and content.

  • Enable Top Bar: If On, you will see Custom Content (HTML) field where you can enter HTML content for Top Bar.

Footer

Footer contains Widgetized area and Bottom Bar. This section describes all settings for Footer in your site.

  • Footer Columns (Widgetized): set the footer column number from drop-down list. Number of columns can be from 1 to 4. You also can select None to leave it blank (no footer content).
  • Bottom Bar Content: Add content shown in bottom bar.

Widgets

This section enables you to add and customize Widgets on your preview site. It includes number of Footer Columns due to setting in above section: Footer settings.

Footer Column #i: You will see number of footer columns corresponding to footer settings. 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.
  • Heading Title: Enter title for blog page here. Your title will be displayed in center of background image.
  • Heading Background Image: You will have background image on header of blog page if you click “Select Image” button then choose your image.
  • Show Post Meta: Check the box to show post meta of Blog page.
  • Show Read more link: Check the box to show read more link.
  • Excerpt Length: Excerpt is a short extract or a short passage taken from the post. Length of the excerpt is determined by number of words. Therefore, if you opt a specific number like 23, the number of words contained in an excerpt will be equivalent to 23.

Capture77

Single Post

  • Post Layout: Choose Post layout same as blog layout by checking the boxes beside options or uncheck to choose another layout.
  • Show Post Meta: If checked, post me-ta will display on each post. Similarly, you can choose show/hide post tags and author’s bio.
  • Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitor to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn.

Capture78

Class

Classes Listing

This section will help you to configure Class Listing page. Firstly assign a page as your class listing page from dropdown list. Once you choose a page as Class listing page, its slug will be your Class Listing’s main slug.

  • Class Page: Select a page as Class listing page from dropdown list.
  • Class Heading Title: Enter heading title for class page here.
  • Class Heading Background Image: Choose heading background image for class page. It will be displayed on header of class page.
  • Classes List Layout: It can be With Right Sidebar and With Left Sidebar. You need to choose a sidebar for class page.
  • Class List Style: That includes Grid style and List Style. You can choose style for class. With Grid style, you can choose number of column to display classes. It can be 2 or 3 columns.

Capture49

 

For example, you opt 2 columns. Coming back to Class page, if you click the left small square (Grid Button), classes will be separated into 2 columns.

Capture51

Single Class

  • Layout: Single Class inherited layout of Classes Listing.
  • Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitor to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn.

Event

Event Listing

  • Event page: Select a page as Event Listing page from dropdown list.
  • Events Heading Title: Enter title for events page here.
  • Events Heading Background Image: You can choose heading background image for event page. It will be displayed on header of events page.
  • Event List Layout: It can be Full Width, With Right Sidebar and With Left Sidebar. If you choose layout with sidebar, you need to choose sidebar for class page.
  • Number Columns: The column attribute controls width of column should be displayed on Event Listing page.

Single Event

  • Layout: Single Event inherited layout of Event Listing.
  • Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitor to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn.

Trainer

  • Trainer Page: Select a page as Trainer page from dropdown list.
  • Grid Columns: The column attribute controls width of column should be displayed on Trainer Page.
  • Items Per Page: This option allows you enter the number of trainers which will be displayed per page.

WooCommerce

When WooCommerce is installed on your site, you will be able to change settings for shop pages and products in Customizer.

Shop Page

  • Shop Heading Background Image: You can choose heading background image for shop page. It will be displayed on header of shop page.
  • Shop Layout: It can be full width, with right sidebar and with left sidebar. If you choose layout with sidebar, you need to choose sidebar for event page.
  • Products Per Page: This option allows you enter the number of products which will be displayed on per page.

Single Product

  • Product Layout: It inherited from shop page layout. You can choose layout for single product on Shop Page section. If you want to change to different layout, uncheck the Same as Shop layout box to choose another option.

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.

Login