Did You Know?

JOOJ - Best software development company exercise agility to deliver web

Get JOOJ Scripts
leafleafDocly banner shape 01Docly banner shape 02Man illustrationFlower illustration
Updated on October 30, 2021

Customize Option & Style

Author: admin 87 views

Customizer Overview

As you know, WordPress provides a great useful feature that called the Customizer. The Customizer allows you to preview changes that you made on your site before publishing them. You can navigate to different pages on your site within the preview.

Now with Yo!Web, we make it even better, by modifying the Customizer based on the best User Interface and User Experience. Our Customizer have more than 700 options to modify. You have limitless possibility on enhancing your website. Say good bye to the old-school way of refreshing the page after changing website setting!

On this part, we will guide you how to use Customizer feature with Yo!Web to customize your site. There’re a few things that we’ll explain to you on this section :

  1. Accessing Customizer Panel
  2. Live Search Option
  3. Partial Refresh Feature
  4. Redirect to Appropriate Page

 

1. Accessing Customizer Panel

You can easily access customizer panel on your website. Please check the following information below to access customizer panel quickly :

  1. WordPress Dashboard
    You can access customizer panel on WordPress Dashboard by go to WordPress Dashboard → Appearance → Customize 
  2. Yo!Web Dashboard
    You can access customizer panel on Yo!Web Dashboard by go to Yo!Web Dashboard → Customize Style 
  3. Frontend Preview
    Customizer panel can be accessed from the frontend preview as well.

 

2. Live Search Option

We add live search feature on our Customizer. You can easily search an option without navigate to the option tab anymore. You just need to click the search icon on the right side of the box and then you can start typing the option that you need quickly.

Also, related option results will be shown during typing the searched words. To make it clear, you can check the images below about the live search feature:

 

 

3. Partial Refresh Feature

Yo!Web has been completed with partial refresh feature on our Customizer. With this feature, you can directly view the effect of a change that you’ve made only on certain section on your website. Your site don’t need to refresh the whole page to see the setting or customizing result. You will save so much time.

You can check the following images for better understanding about the partial refresh feature :

 

4. Redirect to Appropriate Page

We provide a “redirect to appropriate page” feature on our Customizer. With this feature, after customizing a page you will be redirected into appropriate page based on options that you have currently set up, instead of staying on the same page / homepage.

It means that, if the current page is not related to the option that you have currently set up, a dialog box will prompt you to redirect into the related appropriate page review the change.

To make it clear, you can check the images below about redirect to appropriate page feature :

 

Layout, Color & Scheme

On Yo!Web : Layout, Color & Scheme, there are several section option that you will find. They are :

  1. Layout & Background
  2. Sidefeed Setting
  3. Scheme & Website Color
  4. Mobile Browser Color

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

 

1. Layout & Background

In this part, you can setup general layout and background setting for your website.

Box Layout

  1. Enable Boxed Layout
    Turn on this option if you want to use boxed layout. These options below will only appear if you activate the Enable Boxed Layout.
  2. Background Color
    Choose color for background. Please note, this option will appear if you enable Boxed Layout option.
  3. Background Image
    Choose an image for background. Please note, this option will appear if you enable Boxed Layout option.

This option below will appear if you set Background Image option above.

  1. Background Repeat
    Set background image repeat.
  2. Background Position
    Set background image position.
  3. Attachment Background
    Set background image attachment.
  4. Background Size
    Set background image size.

 

Container Background

  • Container Background Color
    Set background color for inside container.

 

2. Sidefeed Setting

On this part, you can setup sidefeed setting for your website. The list option below might affect on another option.

  1. Enable Sidefeed
    Turn on this option if you want to use sidefeed. Please note, the next option list below will appear and work if Sidefeed option is enabled.
  2. Enable Ajax Load Sidefeed Post
    Turn on this option if you want enable ajax load post.
  3. Number of Post
    Set the number of post that you want to show per load.
  4. Main Content Position
    Choose main content position.
  5. Show Trending Button
    Turn on this option to show trending button on sidefeed. Please note, you will need to activate Yo!Web View Counter plugin to use this feature.
  6. Trending Range
    Choose time range for trending post. Please note, this option will appear and work if Show Trending Button option enabled.
  7. Show Category
    Turn on this option to enable category filter button.
  8. Select Category List
    Select category post that you want to use as category filter. Please note, this option will appear and work if Show Category option enabled.
  9. Overlay Background Color
    Choose color for overlay background. Please note, this option will work if Enable Ajax Load Sidefeed Post option enabled.

Sidefeed & Header 7

Header 7 is the best header for side feed. When you enable side feed, header 7 will automatically be chosen, but you are still able to change the header from header menu.

 

3. Scheme & Website Color

On this part, you can setup general color setting for your website.

Website Scheme

  • Choose your scheme color
    This option will switch color option of your website. Header & footer option won’t be affected by this option.

 

Website Color

  1. Base Text Color (Body)
    Choose general color for body.
  2. Accent Color
    Choose general color for accent.
  3. Accent Hover Color
    Choose general color for active button and hover background color.
  4. Alternate Color
    Choose general alternate color including post meta icon and floating social share.
  5. Heading Color
    Choose general color for post title and heading element such as H1, H2, H3, H4, H5 and H6.

 

4. Mobile Browser Color

On this part, you can setup mobile browser color setting for your website.

  • Mobile Browser Background Color
    Change color of chrome, firefox, vivaldi, windows phone browser, iOS Safari on mobile device.

Header Option

On Yo!Web : Header Option, there are several section options that you will find:

  1. Header – Builder & Layout
  2. Header – Desktop Option
  3. Header – Sticky Option
  4. Header – Mobile Option
  5. Header – Mobile Drawer Option
  6. Header – Logo
  7. Header – Top Bar Menu
  8. Header – Main Menu
  9. Header – Social Icon
  10. Header – Date
  11. Header – Search Icon
  12. Header – Search Form
  13. Header – Account
  14. Header – Navigation Icon
  15. Header – Cart Icon
  16. Header – Cart Detail
  17. Header – Language Switcher
  18. Header – HTML Element
  19. Header – Button Element
  20. Header – Vertical Menu

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

 

1. Header – Builder & Layout

In this part, you can choose header layout for your website.

  • Starter Layout
    Choose a desired layout for header. We provide 7 kinds of header for the best website’s look.
Notice
  • We will reset all options inside header builder panel when you click one of the starter layout
  • You can modify your header using header builder like normal after choosing header builder layout.

 

2. Header – Desktop Option

In this part, you can setup several options for desktop navigation.

  • Dekstop Header Width
    Choose header container width that you want to use.

Dekstop Header – Topbar

  1. Top Bar Height
    Set height size of top bar height.
  2. Top Bar Scheme
    Choose scheme that you want to use for top bar.
  3. Background Color
    Set background color for top bar.
  4. Border Bottom
    Set border bottom color for top bar.
  5. Side Border
    Set side border color for top bar.
  6. Default Text Color
    Set default text color for top bar.
  7. Default Link Color
    Set default link color for top bar.
  8. Top Bar Border – Top Height
    Set border top height for top bar.
  9. Top Bar Border – Top Color
    Set border top color for top bar.

Dekstop Header – Middle Bar

  1. Middle Bar Height
    Set middle bar height.
  2. Middle Bar Scheme
    Choose scheme for middle bar.
  3. Middle Bar Background Color
    Set background color for middle bar.
  4. Middle Bar Background Image
    Set background image for middle bar.
  5. Background Repeat
    Set background repeat for middle bar. Please note, this option will appear and work if you set Middle Bar Background option.
  6. Background Position
    Set background position for middle bar. Please note, this option will appear and work if you set Middle Bar Background option.
  7. Attachment Background
    Set background attachment for middle bar. Please note, this option will appear and work if you set Middle Bar Background option.
  8. Background Size
    Set background size for middle bar. Please note, this option will appear and work if you set Middle Bar Background option.
  9. Middle Bar Border – Bottom Height
    Set border bottom height for middle bar.
  10. Middle Bar Border – Bottom Color
    Set border bottom color for middle bar.
  11. Default Text Color
    Set default text color for middle bar.
  12. Default Link Color
    Set default link color for middle bar.

Desktop Header – Bottom Bar

  1. Bottom Bar Height
    Set height size of bottom bar.
  2. Boxed Navbar
    Turn on this option to make bottom bar have boxed layout.
  3. Fit Width Navbar
    Turn on this option to make bottom bar have fit width effect.
  4. Navbar Border
    Turn on this option to add border for bottom bar.
  5. Navbar Shadow
    Turn on this option to add shadow for bottom bar.
  6. Menu Scheme
    Choose menu scheme for bottom bar.
  7. Bottom Bar Background Color
    Set background color for bottom bar.
  8. Border Color
    Set border color for bottom bar.
  9. Default Text Color
    Set default text color for bottom bar.
  10. Default Link Color
    Set default link color for bottom bar.
  11. Border Top Height
    Set border top height for bottom bar.
  12. Border Top Color
    Set border top color for bottom bar.
  13. Border Bottom Height
    Set border bottom height for bottom bar.
  14. Border Bottom Color
    Set border bottom color for bottom bar.

 

3. Header – Desktop Sticky Option

In this part, you can setup several options for desktop sticky navigation.

Sticky Bar Setting

  1. Menu Following Mode
    Choose menu following mode for sticky bar.
  2. Header Sticky Width
    Set sticky bar width.
  3. Sticky Bar Height
    Set sticky bar height.
  4. Boxed Navbar
    Turn on this option to make sticky bar have boxed layout.
  5. Fit Width Navbar
    Turn on this option to make sticky bar have fit width effect.
  6. Navbar Border
    Turn on this option to add border on sticky bar.
  7. Navbar Shadow
    Turn on this option to add shadow on sticky bar.

Sticky Bar Style

  1. Menu Scheme
    Choose menu scheme for sticky bar.
  2. Sticky Bar Background Color
    Set background color for sticky bar.
  3. Border Color
    Set border color for sticky bar.
  4. Default Text Color
    Set default text color for sticky bar.
  5. Default Link Color
    Set default link color for sticky bar.
  6. Border Bottom Height
    Set border bottom height for sticky bar.
  7. Border Bottom Color
    Set border bottom color for sticky bar.

 

4. Header – Mobile Option

In this part, you can setup several options for mobile navigation.

  • Menu Following Mode
    Choose menu following mode for mobile navigation.
  • Mobile Background Color
    Set background color for mobile browser.

Mobile Header – Top Bar

  1. Top Bar Scheme
    Set top bar scheme.
  2. Top Bar Background Color
    Set background color for top bar.
  3. Default Text Color
    Set default text color for top bar.
  4. Default Link Color
    Set default link color for top bar.

Mobile Header – Middle Bar

  1. Middle Bar Scheme
    Choose middle bar scheme.
  2. Middle Bar Height
    Set middle bar height.
  3. Background Color
    Set background color for middle bar.
  4. Default Text Color
    Set default text color for middle bar.
  5. Default Link Color
    Set default link color for middle bar.
  6. Bottom Bar Border Height
    Set border height for bottom bar.
  7. Mobile Top Bar Border – Top Color
    Set border top color for mobile menu top bar.

Mobile Header – Below Header Menu

  1. Enable Below Header Menu
    Show below header menu on mobile view
  2. Below Header Menu
    Choose a menu to set in below header menu
  3. Menu Style
    Choose below header menu style
  4. Background Color
    Set background color for below header menu.
  5. Text Color
    Set text color for below header menu.
  6. Border Top Height
    Set top border to separate header and menu.
  7. Border Top Color
    Set top border color.
  8. Enable Gradient
    Set gradient background color for below header menu.

 

5. Header – Mobile Drawer Option

In this part, you can setup several options for mobile drawer navigation.

  1. Drawer Scheme
    Choose drawer scheme.
  2. Background Color
    Set background color for mobile drawer.
  3. Overlay Color
    Set overlay color for mobile drawer.
  4. Mobile Drawer Background Image
    Set background image for mobile drawer.
  5. Background Repeat
    Set background repeat. Please note, this option will appear and work if you set Mobile Drawer Background Image option.
  6. Background Position
    Set background position. Please note, this option will appear and work if you set Mobile Drawer Background Image option.
  7. Attachment Background
    Set attachment background. Please note, this option will appear and work if you set Mobile Drawer Background Image option.
  8. Background Size
    Set background size. Please note, this option will appear and work if you set Mobile Drawer Background Image option.

 

6. Header – Logo

In this part, you can setup several options for logo.

  1. Header Logo
    Upload an image as logo for header.
  2. Header Logo Retina
    Upload a retina image as retina logo for header.
  3. Logo Spacing
    Insert logo spacing. You can use px or em unit.
  4. Header Logo Alt
    Insert alternate text for header logo.
  5. Sticky Menu Logo
    Upload an image as logo for sticky menu.
  6. Sticky Menu Logo Retina
    Upload a retina image as retina logo for sticky menu.
  7. Sticky Menu Alt
    Insert alternate text for sticky menu logo.
  8. Mobile Device Logo
    Upload an image as logo for mobile device.
  9. Mobile Device Logo Retina
    Upload a retina image as retina logo for mobile device.
  10. Mobile Device Logo Alt
    Insert alternate text for mobile device logo.

 

7. Header – Top Bar Menu

In this part, you can setup several options for top bar menu.

Dektop – Top Bar Menu

  1. Text Color
    Set text color for top bar menu.
  2. Menu Hover Color
    Set menu hover color.
  3. Drop Arrow Color
    Set drop arrow color.
  4. Submenu Background
    Set background color for top bar submenu.
  5. Submenu Text Color
    Set text color for top bar submenu.
  6. Submenu Background Hover Color
    Set background hover color for top bar submenu.
  7. Submenu Border Color
    Set border color for top bar submenu.

 

8. Header – Main Menu

In this part, you can setup several options for main menu.

Main Menu Style

  1. Menu Style
    Choose menu style.
  2. Menu Text Color
    Set menu text color.
  3. Menu Hover Line Color
    Set menu line color when hover
  4. Menu Hover Background Color 4
    Set menu background color when menu hover. Please note, this option will appear and work if you choose Style 4 on Menu Style option.
  5. Menu Hover Text Color
    Set menu text color when menu hover.

Main Submenu Style

  1. Submenu Arrow Icon Color
    Set submenu arrow icon color.
  2. Submenu Background Color
    Set background color for submenu.
  3. Submenu Text Color
    Set submenu text color.
  4. Submenu Hover Background Color
    Set hover background color for submenu.
  5. Submenu Hover Text Color
    Set hover text color for submenu.
  6. Submenu Border Color
    Set border color for submenu.

Mega Menu

  1. Subcategory News Feed Background Color
    Set background color for subcategory news feed.
  2. Subcategory News Feed Border Color
    Set border color for subcategory news feed.
  3. Subcategory News Feed Text Color
    Set text color for subcategory news feed.
  4. Subcategory News Feed Hover Text Color
    Set hover text color for subcategory news feed.
  5. Subcategory News Feed Hover Background Color
    Set hover background color for subcategory news feed.
  6. News Feed Background Color
    Set background color for news feed.
  7. News Feed Overlay Background Color
    Set overlay background color for news feed.
  8. News Feed Preloader Color
    Set preloader color for news feed.
  9. News Feed Text Color
    Set text color for news feed.
  10. Tags Heading Color
    Set tags heading color.
  11. Tags List Color
    Set tags list color.
  12. Separator Border Color
    Set separator border color.
  13. Nav Arrow Color
    Set nav arrow color.
  14. Nav Arrow Background Color
    Set background color for nav arrow.
  15. Nav Arrow Border Color
    Set border color for nav arrow.
  16. Nav Arrow Hover Color
    Set hover color for nav arrow.
  17. Nav Arrow Hover Background Color
    Set hover background color for nav arrow.
  18. Nav Arrow Hover Border Color
    Set hover boder color for nav arrow.
  19. Nav Arrow Disabled Color
    Set color when nav arrow disabled.
  20. Nav Arrow Disabled Background Color
    Set background color when nav arrow disabled.
  21. Nav Arrow Disabled Border Color
    Set border color when nav arrow disabled.

 

9. Header – Social Icon

In this part, you can setup several options for header social icon.

Social – Desktop Header

  1. Social Icon Type
    Choose social icon type.
  2. Icon Color
    Set icon color.
  3. Background Color
    Set icon background color.

Social – Mobile Drawer

  • Icon Color
    Set icon color.

 

10. Header – Date

In this part, you can setup several options for header date.

  1. Date format for Header
    Set date format for header. For more detail about date format, please refer to Developer Codec.
  2. Text Color
    Set text color for date.
  3. Background Color
    Set background color for date.

 

11. Header – Search Icon

In this part, you can setup several options for search icon.

Desktop – Search Icon

  1. Search Style
    Choose your navbar search style.
  2. Search Icon Color
    Set color of search icon.

Desktop – Popup Drop Style

  1. Search Background Color
    Set search background color.
  2. Search Border Color
    Set search border color.
  3. Search Input Background Color
    Set search input background color.
  4. Search Input Border Color
    Set search input border color.
  5. Search Icon Color
    Set search icon color.
  6. Search Input Text Color
    Set search input text color.
  7. Search Placeholder Color
    Set search placeholder color.

Desktop – Live Results

  1. Background Color
    Set live results background color.
  2. Border Color
    Set live results border color.
  3. Text Color
    Set live results text color.

Desktop – Modal Style

  1. Search Modal Color
    Set search modal color.
  2. Search Modal Input Placeholder Color
    Set search modal input placeholder color.
  3. Search Modal Background Color
    Set search modal background Color.

Mobile – Search Icon

  • Search Icon Color
    Set search icon color for mobile.

Mobile – Popup Drop Style

  1. Search Background Color
    Set search background color.
  2. Search Border Color
    Set search border color.
  3. Search Input Background Color
    Set search input background color.
  4. Search Input Border Color
    Set search input border color.
  5. Search Icon Color
    Set search icon color.
  6. Search Input Text Color
    Set search input text color.
  7. Search Placeholder Color
    Set search placeholder color.

 

12. Header – Search Form

In this part, you can setup several options for search form.

  • Search Form Style
    Choose search form style that you want to use.
  • Form Width
    Set search input form width in percentage.

Search Form Color Options

  1. Search Input Background Color
    Set search input background color.
  2. Search Input Border Color
    Set search input border color.
  3. Search Icon Color
    Set search icon color.
  4. Search Input Text Color
    Set search input text color.
  5. Search Input Placeholder Color
    Set search input placeholder color.

Live Results Color Options

  1. Background Color
    Set background color for live results.
  2. Border Color
    Set border color for live search results.
  3. Text Color
    Set text color for live search results.

 

13. Header – Account

In this part, you can setup several options for header account.

  1. Text Color
    Set account text color.
  2. Submenu Background
    Set top bar submenu background color.
  3. Submenu Text Color
    Set top bar submenu text color.
  4. Submenu Background Hover Color
    Set top bar submenu background hover color.
  5. Submenu Border Color
    Set top bar submenu border color.

 

14. Header – Navigation Icon

In this part, you can setup several options for navigation icon.

  1. Desktop Navigation Icon Color
    Set nav icon color for desktop navigation.
  2. Mobile Navigation Icon Color
    Set nav icon color for mobile navigation.

 

15. Header – Cart Icon

In this part, you can setup several options for cart icon.

  • Cart Icon Color
    Set cart icon color

Cart Drop Style

  1. Cart Background Color
    Set cart background color.
  2. Cart Text Color
    Set cart text color.
  3. Product Quantity Color
    Set product quantity color.
  4. Cart Border Color
    Set cart border color.
  5. Cart Button Background Color
    Set background color for cart button.
  6. Cart Button Color
    Set cart button color.
  7. Cart Button Background Hover Color
    Set background hover color for cart button.
  8. Cart Button Hover Color
    Set hover color for cart button.

 

16. Header – Cart Detail

In this part, you can setup several options for cart detail.

  • Cart Icon Color
    Set cart icon color for cart detail element.
  • Cart Text Color
    Set cart text color for cart detail element.

Cart Drop Style

  1. Cart Drop Background Color
    Set background color for cart drop.
  2. Cart Drop Text Color
    Set text color for cart drop.
  3. Product Quantity Text Color
    Set text color for product quantity.
  4. Cart Drop Border Color
    Set border color for cart drop element.
  5. Cart Drop Button Background Color
    Set background color for cart drop button.
  6. Cart Drop Button Text Color
    Set text color for cart drop button.
  7. Cart Drop Button Background Hover Color
    Set background hover color for cart drop button.
  8. Cart Drop Button Hover Text Color
    Set hover text color for cart drop button.

 

17. Header – Language Switcher

In this part, you can setup several options for language switcher.

  1. Text Color
    Set text color for language switcher.
  2. Background Color
    Set background color for language switcher.

 

18. Header – HTML Element

In this part, you can setup several options for HTML element.

  1. Mobile HTML
    Insert html or shortcode element.
  2. HTML Element 1
    Insert html or shortcode element.
  3. HTML Element 2
    Insert html or shortcode element.
  4. HTML Element 3
    Insert html or shortcode element.
  5. HTML Element 4
    Insert html or shortcode element.
  6. HTML Element 5
    Insert html or shortcode element.

 

19. Header – Button Element

In this part, you can setup several options for button element.

Button 1

  1. Button Text
    Insert button text.
  2. Font Icon Class
    Insert font icon for button.
  3. Button Link
    Insert button url link.
  4. Button Style
    Set button style.
  5. Background Color
    Set background color for the button.
  6. Background Hover Color
    Set background hover color for the button.
  7. Text Color
    Set text colot for the button.
  8. Border Color
    Set border color for the button.

Button 2

  1. Button Text
    Insert button text.
  2. Font Icon Class
    Insert font icon for button.
  3. Button Link
    Insert button url link.
  4. Button Style
    Set button style.
  5. Background Color
    Set background color for the button.
  6. Background Hover Color
    Set background hover color for the button.
  7. Text Color
    Set text colot for the button.
  8. Border Color
    Set border color for the button.

Button 3

  1. Button Text
    Insert button text.
  2. Font Icon Class
    Insert font icon for button.
  3. Button Link
    Insert button url link.
  4. Button Style
    Set button style.
  5. Background Color
    Set background color for the button.
  6. Background Hover Color
    Set background hover color for the button.
  7. Text Color
    Set text colot for the button.
  8. Border Color
    Set border color for the button.

 

20. Header – Vertical Menu

In this part, you can setup several options for vertical menu.

Vertical Menu 1

  1. Choose Vertical Menu
    Choose menu for the vertical menu.
  2. Top Bar Border Top Height
    Set border top height.
  3. Top Bar Border Top Color
    Set border top color.
  4. Link Color
    Set link color for the vertical menu.

Vertical Menu 2

  1. Choose Vertical Menu
    Choose menu for the vertical menu.
  2. Top Bar Border Top Height
    Set border top height.
  3. Top Bar Border Top Color
    Set border top color.
  4. Link Color
    Set link color for the vertical menu.

Vertical Menu 3

  1. Choose Vertical Menu
    Choose menu for the vertical menu.
  2. Top Bar Border Top Height
    Set border top height.
  3. Top Bar Border Top Color
    Set border top color.
  4. Link Color
    Set link color for the vertical menu.

Vertical Menu 4

  1. Choose Vertical Menu
    Choose menu for the vertical menu.
  2. Top Bar Border Top Height
    Set border top height.
  3. Top Bar Border Top Color
    Set border top color.
  4. Link Color
    Set link color for the vertical menu.

Single Post Option

On Yo!Web : Single Post Option, there are several section options that you will find :

  1. Auto Load Scroll Post Option
  2. Breadcrumb Setting
  3. Single Post Option
  4. Related Post Option
  5. Comment Setting

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

 

1. Auto Load Scroll Post Option

For more detail information about Auto Load Scroll Post Option, please visit our documentation about it on Auto Load Post

 

2. Breadcrumb Setting

For more detail information about Breadcrumb Setting, please visit our documentation about it on Breadcrumb Setting

 

3. Single Post Option

In this part, you can setup general option for single post.

Also, you can override this option on single post editor. You can follow this link for more detail about override single post general option (jump into Single Post Setting part).

Single Blog Post Template

  1. Single Blog Post Template
    Choose template for the single blog post.
  2. Single Blog Post Layout
    Choose layout for the single blog post.
  3. Parallax Effect
    Turn on this option to enable parallax effect on single blog post. Please note, this option will appear and work if you choose Template 4 or Template 5 on Single Blog Post Template option.
  4. Fullscreen Featured Image
    Turn on this option to enable parallax effect on single blog post. Please note, this option will appear and work if you choose Template 4 or Template 5 on Single Blog Post Template option.
  5. Single Post Sidebar
    Choose sidebar that you want to use on single blog post. Please note, this option will appear and work if you choose Right Sidebar or Left Sidebar on Single Blog Post Layout option.

 

Single Post Element

  1. Show Featured Image/Video
    Turn on this option to show post featured image or video.
  2. Show Post Meta
    Turn on this option to show post meta.
  3. Show Post Author
    Turn on this option to show post author. Please note, this option will appear and work if Show Post Meta option enabled.
  4. Show Post Author Image
    Turn on this option to show post author image. Please note, this option will appear and work if both Show Post Meta option and Show Post Author option are enabled.
  5. Show Post Date
    Turn on this option to show post date. Please note, this option will appear and work if Show Post Meta option enabled.
  6. Show Category
    Turn on this option to show post category. Please note, this option will appear and work if Show Post Meta option enabled.
  7. Show Comment Button
    Turn on this option to show post comment button. Please note, this option will appear and work if Show Post Meta option enabled.
  8. Share Position
    Choose position of share button on single blog post.
  9. Float Share Style
    Choose style for floated share button. Please note, this option will appear and work if you choose Only Float or Float + Bottom on Share Position option.
  10. Show Share Counter
    Turn on this option to show share counter. Please note, this option will appear and work if you choose Only Top or Top + Bottom on Share Position option.
  11. Show View Counter
    Turn on this option to show view counter. Please note, this option will appear and work if you choose Only Top or Top + Bottom on Share Position option.
  12. Show Post Tag
    Turn on this option to show post tag.
  13. Show Prev / Next Post
    Turn on this option to show prev and next post.
  14. Show Popup Post
    Turn on this option to show popup post.
  15. Number of Popup Post
    Set the number of post to show when popup post appears. Please note, this option will appear and work if Show Popup Post option enabled.
  16. Show Author Box
    Turn on this option to show author box.

 

Single Thumbnail Setting

  1. Post Thumbnail Size
    Choose your post single image thumbnail size. You can also override this behaviour on your Single Post editor.
  2. Post Gallery Thumbnail Size
    Choose your gallery image thumbnail size. You can also override this behaviour on your Single Post editor.

 

4. Related Post Option

In this part, you can setup related post option.

  • Show Post Related
    Turn on this option to show related post.

This option below will appear if Show Post Related option enabled.

  1. Related Post Filter
    Choose how related post will filter your article.
  2. Related Post Module Header Style
    Choose header style for related post.
  3. Related Pagination Style
    Choose pagination style for related post.
  4. Number of Post
    Set the number of related post.
  5. Auto Load Limit
    Set the limit of auto load post. Please note, this option will appear and work if you don’t choose No Pagination on Related Pagination Style option.
  6. Related Post Template
    Choose template for related post.
  7. Excerpt Length
    Set word length of post excerpt on related post.
  8. Related Post Date Format
    Choose date format for related post.
  9. Custom Date Format for Related Post
    Set date format for related post. For more detail about date format, please refer to Developer Codec.

 

5. Comment Setting

In this part, you can setup general comment setting.

  1. Comment Type
    Choose comment platform to use.
  2. Disqus Shortname
    Insert your Disqus shortname. You can register your website and get Disqus shortname for your website here. Please note, this option will appear and work if you choose Disqus Comment on Comment Type option on above.
  3. Disqus API Key
    Insert your Disqus API key. You can create an application and get Disqus API Key for your website here. Please note, this option will appear and work if you choose Disqus Comment on Comment Type option on above.
  4. Facebook App ID
    Insert your Facebook App id. You can create an application and get Facebook App id for your website here. Please note, this option will appear and work if you choose Facebook Comment on Comment Type option on above.
  5. Comment Cache Lifetime
    Set the lifetime of comment cache in hours. Please note, this option will appear and work if you’re not using WordPress Comment type.

Social, Like & View

On Yo!Web : Social, Like & View, there are several section options that you will find :

  1. Social Bar, View & Like
  2. Social Icon
  3. Instagram Feed Setting
  4. Social Login Setting
  5. Like Button Setting

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

 

1. Social Bar, View & Like

For more detail information about Social Bar, View & Like setting, please visit our documentation about it on Social Share & Counter

 

2. Social Icon

This social icon will show on header & footer of your website. Also, will be used if you install Yo!Web – Meta Header & Yo!Web JSON LD plugin.

You can check the following images below about how to setup social icon and social icon preview.

 

3. Instagram Feed Setting

For more detail information about Instagram Feed setting, please visit our documentation about it on Instagram Feed

.

 

4. Social Login Setting

For more detail information about Social Login setting, please visit our documentation about it on Social Login & Registration

 

5. Like Button Setting

For more detail information about Like Button setting, please visit our documentation about it on Like Post Button

.

Search Option

On Yo!Web : Search Option, there are two section options that you will find :

  1. Search Content
  2. Live Search Setting

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

 

1. Search Content

  • Only Search Post
    By default, WordPress search will also look for your single page. By enabling this option, it will make search only on post type.

 

2. Live Search Setting

In this part, you can setup general live search setting for your website.

  1. Enable Live Search Block
    Turn on this option to enable live search block.
  2. Live Search Number of Post
    Set number of post for live search.
  3. Live Search Date Format
    Choose date format for live search.
  4. Custom Live Search Date Format
    Insert custom date format for live search. Please note, this option will appear if you choose Custom Format on Live Search Date Format option.
    For more detail about date format, please refer to Developer Codec.

Category Template

On Yo!Web : Category Template, there are several section option that you will find :

  1. Category : Global Template
  2. Category List Setting

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

 

1. Category : Global Template

In this part, you can setup general setting for category.

Category Color :

  1. Background Color
    Set background color for global category.
  2. Text Color
    Set text color for global category.

 

Category Sidebar :

  1. Show Sidebar
    Turn on this option to show sidebar for global category.
  2. Category Sidebar
    Choose sidebar for global category. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

 

Category Header :

  1. Category Title Style
    Choose title style for global category.
  2. Title Background Color
    Set background color for title of global category.
  3. Title Background Image
    Set background image for title of global category. Please note, this option will appear and work if you choose Style 3 or Style 4 on Category Title Style option.

 

Category Hero :

  1. Show Category Hero Block
    Turn on this option to show hero block on global category. Please note, this option below will appear if this option enabled.
  2. Category Hero Header
    Choose hero header layout for global category.
  3. Category Hero Header Style
    Choose hero header style for global category.
  4. Hero Margin
    Set hero margin for global category.
  5. Hero Date Format
    Choose date format for hero on global category.
  6. Custom Hero Date Format
    Set date format for hero. For more detail about date format, please refer to Developer Codec.
    Please note, this option will appear and work if you choose Custom Format on Choose Hero Date Format option above.

 

Category Content :

  1. Category Content Layout
    Choose content layout for global category.
  2. Excerpt Length
    Set word length of excerpt post content for global category.
  3. Content Date Format
    Choose date format post for global category.
  4. Custom Date Format for Content
    Set date format for post content. For more detail about date format, please refer to Developer Codec.
    Please note, this option will appear and work if you choose Custom Format on Choose Date Format for Content option above.
  5. Choose Pagination Mode
    Choose pagination mode for global category.
  6. Auto Load Limit
    Set post limit of auto load when scrolling, set to zero to always load until end of content. Please note, this option will appear and work if you choose Ajax – Auto Scroll Load on Choose Pagination Mode option above.
  7. Pagination Align
    Choose pagination align for global category.
  8. Show Navigation Text
    Turn on this option to show navigation text for global category.
  9. Show Page Info
    Turn on this option to show page info for global category.

 

2. Category List Setting

In this part, you can override color option of Category Global Setting for each post category that you have.

  1. Override Color
    Turn on this option to override global category color. Please note, this option below will appear if this option enabled.
  2. Category Background Color
    Set background color for this category.
  3. Text Color
    Set text color for this category.

Other Template

On Yo!Web : Other Template, there’re several section option that you will find :

  1. Archive Template
  2. Search Template
  3. Author Template
  4. Attachment Template
  5. 404 (Not Found) Template

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

 

1. Archive Template

In this part, you can setup general option of archive page template.

Archive Sidebar :

  1. Show Sidebar
    Turn on this option to show sidebar.
  2. Archive Sidebar
    Choose sidebar for archive page. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

 

Archive Content :

  1. Archive Content Layout
    Choose content layout for archive page.
  2. Excerpt Length
    Set word length of excerpt post content on archive page.
  3. Content Date Format
    Choose date format post on archive page.
  4. Custom Date Format for Content
    Set date format for archive post content. For more detail about date format, please refer to Developer Codec.
    Please note, this option will appear and work if you choose Custom Format on Choose Date Format for Content option above.
  5. Choose Pagination Mode
    Choose pagination mode on archive page.
  6. Pagination Align
    Choose pagination align on archive page.
  7. Show Navigation Text
    Turn on this option to show navigation text on archive page.
  8. Show Page Info
    Turn on this option to show page info on archive page.

 

2. Search Template

In this part, you can setup general option of search result page template.

  • Only Search Post
    Turn this option to force search on post only. By default, WordPress search will also look for single page.

 

Search Sidebar :

  1. Show Sidebar
    Turn on this option to show sidebar.
  2. Search Sidebar
    Choose sidebar for search result page. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

 

Search Content :

  1. Search Content Layout
    Choose content layout for search result page.
  2. Excerpt Length
    Set word length of excerpt post content on search result page.
  3. Content Date Format
    Choose date format post on search result page.
  4. Custom Date Format for Content
    Set date format for search result content. For more detail about date format, please refer to Developer Codec.
    Please note, this option will appear and work if you choose Custom Format on Choose Date Format for Content option above.
  5. Choose Pagination Mode
    Choose pagination mode on search result page.
  6. Pagination Align
    Choose pagination align on search result page.
  7. Show Navigation Text
    Turn on this option to show navigation text on search result page.
  8. Show Page Info
    Turn on this option to show page info on search result page.

 

3. Author Template

In this part, you can setup general option of author page template.

Author Sidebar :

  1. Show Sidebar
    Turn on this option to show sidebar.
  2. Author Sidebar
    Choose sidebar for author page. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

 

Author Content :

  1. Author Content Layout
    Choose content layout for author page.
  2. Excerpt Length
    Set word length of excerpt post content on author page.
  3. Content Date Format
    Choose date format post on author page.
  4. Custom Date Format for Content
    Set date format for author post content. For more detail about date format, please refer to Developer Codec.
    Please note, this option will appear and work if you choose Custom Format on Choose Date Format for Content option above.
  5. Choose Pagination Mode
    Choose pagination mode on author page.
  6. Pagination Align
    Choose pagination align on author page.
  7. Show Navigation Text
    Turn on this option to show navigation text on author page.
  8. Show Page Info
    Turn on this option to show page info on author page.

 

4. Attachment Template

In this part, you can setup general option of attachment page template.

Attachment Sidebar :

  1. Show Sidebar
    Turn on this option to show sidebar.
  2. Attachment Sidebar
    Choose sidebar for attachment page. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

 

5. 404 (Not Found) Template

In this part, you can setup general option of 404 (not found) page template.

404 Page Sidebar :

  1. Show Sidebar
    Turn on this option to show sidebar.
  2. 404 Page Sidebar
    Choose sidebar for 404 page. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

 

404 Page Cotent :

  1. Not Found Content Layout
    Choose content layout for not found page.
  2. Excerpt Length
    Set word length of excerpt post content on not found page.
  3. Content Date Format
    Choose date format post on not found page.
  4. Custom Date Format for Content
    Set date format for not found page. For more detail about date format, please refer to Developer Codec.
    Please note, this option will appear and work if you choose Custom Format on Choose Date Format for Content option above.

 

6. WooCommerce Template

In this part, you can setup general option of  WooCommerce archive and single page template.

Please note, this option below will appear and work if you’re using WooCommerce plugin.

WooCommerce Archive :

  1. Show Sidebar on WooCommerce Archive
    Turn on this option to show sidebar on WooCommerce archive.
  2. WooCommerce Archive Sidebar
    Choose sidebar for WooCommerce archive page. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

 

WooCommerce Single :

  1. Show Sidebar on WooCommerce Single
    Turn on this option to show sidebar on WooCommerce single.
  2. Woocommerce Single Sidebar
    Choose sidebar for WooCommerce single page. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

 

7. BBPress Template

In this part, you can setup general option of BBPress page template.

Please note, this option below will appear and work if you’re using BBPress plugin.

BBPress Sidebar :

  1. Show Sidebar on BBPress
    Turn on this option to show sidebar on BBPress page.
  2. BBPress Sidebar
    Choose sidebar for BBPress page. If you need another sidebar, you can create from WordPress Admin → Appearance → Widgets.
    Please note, this option will appear and work if Show Sidebar option enabled.

Font Option

On Yo!Web : Font Option, there are several section option that you will find :

  1. Global Font
  2. Custom Font
  3. Type Kit Font

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

 

1. Global Font

In this part, you can setup general font. You will be able to setup certain font for Body, Post Title, Block Heading (block module & widget title) and Paragraph (post content).

  1. Font Family
    Choose font family that you want to use.
  2. Font Variant
    Set font variant. Please note, this option may not available on certain font.
  3. Font Subsets
    Set font subsets. Please note, this option may not available on certain font.
  4. Font Size
    Set font size.
  5. Line Height
    Set line height.
  6. Color
    Set colof of font.

 

2. Custom Font

In this part, you can upload your custom font. You can generate your custom font using Squirrel Generator.

Please note, you will need to refresh the customizer page after you’ve done configure this option to see your custom font on the font list (Global Font option).

  1. Font Name
    Insert the name of your custom font.
  2. Font Weight
    Set font weight.
  3. Font Style
    Set font style.
  4. EOT File
    Upload EOT file of your font.
  5. WOFF File
    Upload WOFF file of your font.
  6. TTF File
    Upload TTF file of your font.
  7. SVG File
    Upload SVG file of your font.

 

3. Type Kit Font

In this part, you can setup type kit font.

  1. Type Kit ID
    Insert your type kit id.
  2. Name Your Type Kit Font
    Insert the name of your type kit font. You can add multiple font name and delete it if no longer using them.

Additional Option

On Yo!Web : Additional Option, there’re several section option that you will find :

    1. jQuery Migrate
    2. Loader Setting
    3. Post Date Setting
    4. GDPR Compliance
    5. Analytics / Tracking
    6. Custom Post Type
    7. Speed Optimization

 

Info

If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.

1. jQuery Migrate

This option serves as a temporary solution, enabling the migration script for your site to give your plugin and theme authors some more time to update, and test their code.

This option was added for WordPress 5.5 which remove outdated jQuery which some themes/plugins previously use. Enabling this option would temporarily prevent outdated jQuery uses issue.

2. Loader Setting

In this part, you can setup a general loader type that will be used on certain elements such as post-split, module block, mega menu, and side-feed element.

  1. Post Split Loader Style
    Choose loader type that will be using on post split. Please note, this option will appear if Yo!Web Post Split plugin enabled.
  2. Module Loader Style
    Choose loader type that will be used on the module.
  3. Mega Menu Loader Style
    Choose loader type that will be used on the mega menu.
  4. Sidefeed Loader Style
    Choose loader type that will be used on the sidefeed.
  5. Sidefeed Ajax Overlay Loader Style
    Choose loader type that will be used on the sidefeed ajax.

3. Post Date Setting

Choose which post date type that you want to show for the global post date meta.

4. GDPR Compliance

Please refer to this link for additional information

5. Analytics / Tracking

Insert Google Analytics Property ID to enable Google Analytics on your site.

6. Custom Post Type

Enable products post type and their custom taxonomy as a content filter.

7. Global API Key

  1. Youtube API
    Insert your Youtube API here. For more information please visit this page. This API will be required by Yo!Web Youtube/Vimeo Playlist.
  2. Enable Recaptcha
    Enable this feature to use the captcha feature in the login section. Please insert your google Recaptcha site key and secret key if you enable this option. For additional information, please visit this link.

8. Speed Optimization

Please refer to this page for more additional information regarding the Speed Optimization option.

Additional CSS

Since WordPress 4.7 release, now you will be able to add custom CSS code directly from WordPress Admin. You just need to access WordPress Customizer, then you can put your custom CSS code on Additional CSS field and you’re done.

With this feature, you would be able to see your changes with a live preview instantly, no need guessing no more.

JSON LD Schema Setting

JSON LD is JavaScript notation separate from the body of the HTML itself that is included in a file and served from the web. It typically uses the schema.org vocabulary—an open community effort to promote standard structured data in a variety of online applications.

To enable JSON LD Schema on your website, you just need to install Yo!Web – JSON LD Rich Snippet plugin. For more complete information about it please visit Rich Snippet (JSON-LD)

Loading...