Customize Option & Style
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 :
- Accessing Customizer Panel
- Live Search Option
- Partial Refresh Feature
- 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 :
- WordPress Dashboard
You can access customizer panel on WordPress Dashboard by go to WordPress Dashboard → Appearance → Customize - Yo!Web Dashboard
You can access customizer panel on Yo!Web Dashboard by go to Yo!Web Dashboard → Customize Style - 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 :
- Layout & Background
- Sidefeed Setting
- Scheme & Website Color
- Mobile Browser Color
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
- 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. - Background Color
Choose color for background. Please note, this option will appear if you enable Boxed Layout option. - 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.
- Background Repeat
Set background image repeat. - Background Position
Set background image position. - Attachment Background
Set background image attachment. - 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.
- 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. - Enable Ajax Load Sidefeed Post
Turn on this option if you want enable ajax load post. - Number of Post
Set the number of post that you want to show per load. - Main Content Position
Choose main content position. - 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. - Trending Range
Choose time range for trending post. Please note, this option will appear and work if Show Trending Button option enabled. - Show Category
Turn on this option to enable category filter button. - 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. - Overlay Background Color
Choose color for overlay background. Please note, this option will work if Enable Ajax Load Sidefeed Post option enabled.
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
- Base Text Color (Body)
Choose general color for body. - Accent Color
Choose general color for accent. - Accent Hover Color
Choose general color for active button and hover background color. - Alternate Color
Choose general alternate color including post meta icon and floating social share. - Heading Color
Choose general color for post title and heading element such asH1
,H2
,H3
,H4
,H5
andH6
.
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:
- Header – Builder & Layout
- Header – Desktop Option
- Header – Sticky Option
- Header – Mobile Option
- Header – Mobile Drawer Option
- Header – Logo
- Header – Top Bar Menu
- Header – Main Menu
- Header – Social Icon
- Header – Date
- Header – Search Icon
- Header – Search Form
- Header – Account
- Header – Navigation Icon
- Header – Cart Icon
- Header – Cart Detail
- Header – Language Switcher
- Header – HTML Element
- Header – Button Element
- Header – Vertical Menu
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.
- 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
- Top Bar Height
Set height size of top bar height. - Top Bar Scheme
Choose scheme that you want to use for top bar. - Background Color
Set background color for top bar. - Border Bottom
Set border bottom color for top bar. - Side Border
Set side border color for top bar. - Default Text Color
Set default text color for top bar. - Default Link Color
Set default link color for top bar. - Top Bar Border – Top Height
Set border top height for top bar. - Top Bar Border – Top Color
Set border top color for top bar.
Dekstop Header – Middle Bar
- Middle Bar Height
Set middle bar height. - Middle Bar Scheme
Choose scheme for middle bar. - Middle Bar Background Color
Set background color for middle bar. - Middle Bar Background Image
Set background image for middle bar. - Background Repeat
Set background repeat for middle bar. Please note, this option will appear and work if you set Middle Bar Background option. - Background Position
Set background position for middle bar. Please note, this option will appear and work if you set Middle Bar Background option. - Attachment Background
Set background attachment for middle bar. Please note, this option will appear and work if you set Middle Bar Background option. - Background Size
Set background size for middle bar. Please note, this option will appear and work if you set Middle Bar Background option. - Middle Bar Border – Bottom Height
Set border bottom height for middle bar. - Middle Bar Border – Bottom Color
Set border bottom color for middle bar. - Default Text Color
Set default text color for middle bar. - Default Link Color
Set default link color for middle bar.
Desktop Header – Bottom Bar
- Bottom Bar Height
Set height size of bottom bar. - Boxed Navbar
Turn on this option to make bottom bar have boxed layout. - Fit Width Navbar
Turn on this option to make bottom bar have fit width effect. - Navbar Border
Turn on this option to add border for bottom bar. - Navbar Shadow
Turn on this option to add shadow for bottom bar. - Menu Scheme
Choose menu scheme for bottom bar. - Bottom Bar Background Color
Set background color for bottom bar. - Border Color
Set border color for bottom bar. - Default Text Color
Set default text color for bottom bar. - Default Link Color
Set default link color for bottom bar. - Border Top Height
Set border top height for bottom bar. - Border Top Color
Set border top color for bottom bar. - Border Bottom Height
Set border bottom height for bottom bar. - 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
- Menu Following Mode
Choose menu following mode for sticky bar. - Header Sticky Width
Set sticky bar width. - Sticky Bar Height
Set sticky bar height. - Boxed Navbar
Turn on this option to make sticky bar have boxed layout. - Fit Width Navbar
Turn on this option to make sticky bar have fit width effect. - Navbar Border
Turn on this option to add border on sticky bar. - Navbar Shadow
Turn on this option to add shadow on sticky bar.
Sticky Bar Style
- Menu Scheme
Choose menu scheme for sticky bar. - Sticky Bar Background Color
Set background color for sticky bar. - Border Color
Set border color for sticky bar. - Default Text Color
Set default text color for sticky bar. - Default Link Color
Set default link color for sticky bar. - Border Bottom Height
Set border bottom height for sticky bar. - 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
- Top Bar Scheme
Set top bar scheme. - Top Bar Background Color
Set background color for top bar. - Default Text Color
Set default text color for top bar. - Default Link Color
Set default link color for top bar.
Mobile Header – Middle Bar
- Middle Bar Scheme
Choose middle bar scheme. - Middle Bar Height
Set middle bar height. - Background Color
Set background color for middle bar. - Default Text Color
Set default text color for middle bar. - Default Link Color
Set default link color for middle bar. - Bottom Bar Border Height
Set border height for bottom bar. - Mobile Top Bar Border – Top Color
Set border top color for mobile menu top bar.
Mobile Header – Below Header Menu
- Enable Below Header Menu
Show below header menu on mobile view - Below Header Menu
Choose a menu to set in below header menu - Menu Style
Choose below header menu style - Background Color
Set background color for below header menu. - Text Color
Set text color for below header menu. - Border Top Height
Set top border to separate header and menu. - Border Top Color
Set top border color. - 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.
- Drawer Scheme
Choose drawer scheme. - Background Color
Set background color for mobile drawer. - Overlay Color
Set overlay color for mobile drawer. - Mobile Drawer Background Image
Set background image for mobile drawer. - Background Repeat
Set background repeat. Please note, this option will appear and work if you set Mobile Drawer Background Image option. - Background Position
Set background position. Please note, this option will appear and work if you set Mobile Drawer Background Image option. - Attachment Background
Set attachment background. Please note, this option will appear and work if you set Mobile Drawer Background Image option. - 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.
- Header Logo
Upload an image as logo for header. - Header Logo Retina
Upload a retina image as retina logo for header. - Logo Spacing
Insert logo spacing. You can use px or em unit. - Header Logo Alt
Insert alternate text for header logo. - Sticky Menu Logo
Upload an image as logo for sticky menu. - Sticky Menu Logo Retina
Upload a retina image as retina logo for sticky menu. - Sticky Menu Alt
Insert alternate text for sticky menu logo. - Mobile Device Logo
Upload an image as logo for mobile device. - Mobile Device Logo Retina
Upload a retina image as retina logo for mobile device. - 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
- Text Color
Set text color for top bar menu. - Menu Hover Color
Set menu hover color. - Drop Arrow Color
Set drop arrow color. - Submenu Background
Set background color for top bar submenu. - Submenu Text Color
Set text color for top bar submenu. - Submenu Background Hover Color
Set background hover color for top bar submenu. - 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
- Menu Style
Choose menu style. - Menu Text Color
Set menu text color. - Menu Hover Line Color
Set menu line color when hover - 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. - Menu Hover Text Color
Set menu text color when menu hover.
Main Submenu Style
- Submenu Arrow Icon Color
Set submenu arrow icon color. - Submenu Background Color
Set background color for submenu. - Submenu Text Color
Set submenu text color. - Submenu Hover Background Color
Set hover background color for submenu. - Submenu Hover Text Color
Set hover text color for submenu. - Submenu Border Color
Set border color for submenu.
Mega Menu
- Subcategory News Feed Background Color
Set background color for subcategory news feed. - Subcategory News Feed Border Color
Set border color for subcategory news feed. - Subcategory News Feed Text Color
Set text color for subcategory news feed. - Subcategory News Feed Hover Text Color
Set hover text color for subcategory news feed. - Subcategory News Feed Hover Background Color
Set hover background color for subcategory news feed. - News Feed Background Color
Set background color for news feed. - News Feed Overlay Background Color
Set overlay background color for news feed. - News Feed Preloader Color
Set preloader color for news feed. - News Feed Text Color
Set text color for news feed. - Tags Heading Color
Set tags heading color. - Tags List Color
Set tags list color. - Separator Border Color
Set separator border color. - Nav Arrow Color
Set nav arrow color. - Nav Arrow Background Color
Set background color for nav arrow. - Nav Arrow Border Color
Set border color for nav arrow. - Nav Arrow Hover Color
Set hover color for nav arrow. - Nav Arrow Hover Background Color
Set hover background color for nav arrow. - Nav Arrow Hover Border Color
Set hover boder color for nav arrow. - Nav Arrow Disabled Color
Set color when nav arrow disabled. - Nav Arrow Disabled Background Color
Set background color when nav arrow disabled. - 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
- Social Icon Type
Choose social icon type. - Icon Color
Set icon color. - 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.
- Date format for Header
Set date format for header. For more detail about date format, please refer to Developer Codec. - Text Color
Set text color for date. - 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
- Search Style
Choose your navbar search style. - Search Icon Color
Set color of search icon.
Desktop – Popup Drop Style
- Search Background Color
Set search background color. - Search Border Color
Set search border color. - Search Input Background Color
Set search input background color. - Search Input Border Color
Set search input border color. - Search Icon Color
Set search icon color. - Search Input Text Color
Set search input text color. - Search Placeholder Color
Set search placeholder color.
Desktop – Live Results
- Background Color
Set live results background color. - Border Color
Set live results border color. - Text Color
Set live results text color.
Desktop – Modal Style
- Search Modal Color
Set search modal color. - Search Modal Input Placeholder Color
Set search modal input placeholder color. - 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
- Search Background Color
Set search background color. - Search Border Color
Set search border color. - Search Input Background Color
Set search input background color. - Search Input Border Color
Set search input border color. - Search Icon Color
Set search icon color. - Search Input Text Color
Set search input text color. - 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
- Search Input Background Color
Set search input background color. - Search Input Border Color
Set search input border color. - Search Icon Color
Set search icon color. - Search Input Text Color
Set search input text color. - Search Input Placeholder Color
Set search input placeholder color.
Live Results Color Options
- Background Color
Set background color for live results. - Border Color
Set border color for live search results. - Text Color
Set text color for live search results.
13. Header – Account
In this part, you can setup several options for header account.
- Text Color
Set account text color. - Submenu Background
Set top bar submenu background color. - Submenu Text Color
Set top bar submenu text color. - Submenu Background Hover Color
Set top bar submenu background hover color. - Submenu Border Color
Set top bar submenu border color.
14. Header – Navigation Icon
In this part, you can setup several options for navigation icon.
- Desktop Navigation Icon Color
Set nav icon color for desktop navigation. - 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
- Cart Background Color
Set cart background color. - Cart Text Color
Set cart text color. - Product Quantity Color
Set product quantity color. - Cart Border Color
Set cart border color. - Cart Button Background Color
Set background color for cart button. - Cart Button Color
Set cart button color. - Cart Button Background Hover Color
Set background hover color for cart button. - 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
- Cart Drop Background Color
Set background color for cart drop. - Cart Drop Text Color
Set text color for cart drop. - Product Quantity Text Color
Set text color for product quantity. - Cart Drop Border Color
Set border color for cart drop element. - Cart Drop Button Background Color
Set background color for cart drop button. - Cart Drop Button Text Color
Set text color for cart drop button. - Cart Drop Button Background Hover Color
Set background hover color for cart drop button. - 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.
- Text Color
Set text color for language switcher. - Background Color
Set background color for language switcher.
18. Header – HTML Element
In this part, you can setup several options for HTML element.
- Mobile HTML
Insert html or shortcode element. - HTML Element 1
Insert html or shortcode element. - HTML Element 2
Insert html or shortcode element. - HTML Element 3
Insert html or shortcode element. - HTML Element 4
Insert html or shortcode element. - 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
- Button Text
Insert button text. - Font Icon Class
Insert font icon for button. - Button Link
Insert button url link. - Button Style
Set button style. - Background Color
Set background color for the button. - Background Hover Color
Set background hover color for the button. - Text Color
Set text colot for the button. - Border Color
Set border color for the button.
Button 2
- Button Text
Insert button text. - Font Icon Class
Insert font icon for button. - Button Link
Insert button url link. - Button Style
Set button style. - Background Color
Set background color for the button. - Background Hover Color
Set background hover color for the button. - Text Color
Set text colot for the button. - Border Color
Set border color for the button.
Button 3
- Button Text
Insert button text. - Font Icon Class
Insert font icon for button. - Button Link
Insert button url link. - Button Style
Set button style. - Background Color
Set background color for the button. - Background Hover Color
Set background hover color for the button. - Text Color
Set text colot for the button. - 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
- Choose Vertical Menu
Choose menu for the vertical menu. - Top Bar Border Top Height
Set border top height. - Top Bar Border Top Color
Set border top color. - Link Color
Set link color for the vertical menu.
Vertical Menu 2
- Choose Vertical Menu
Choose menu for the vertical menu. - Top Bar Border Top Height
Set border top height. - Top Bar Border Top Color
Set border top color. - Link Color
Set link color for the vertical menu.
Vertical Menu 3
- Choose Vertical Menu
Choose menu for the vertical menu. - Top Bar Border Top Height
Set border top height. - Top Bar Border Top Color
Set border top color. - Link Color
Set link color for the vertical menu.
Vertical Menu 4
- Choose Vertical Menu
Choose menu for the vertical menu. - Top Bar Border Top Height
Set border top height. - Top Bar Border Top Color
Set border top color. - Link Color
Set link color for the vertical menu.
Footer Option
Set social line color on the footer.Set text color of menu on the footer. Set background color of tag cloud widget on the footer.
Set title color of widget on the footer.Set title color of widget on the footer.On Yo!Web : Footer Option, there are several section options that you will find :
- Footer Style
- Footer Option
If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.
1. Footer Style
In this part, you can choose footer layout for your website.
- Footer Style
Choose a desired layout style for footer. We provide 7 kinds of the footer layout style or the best website’s look.
2. Footer Option
In this part, you can setup several options of the footer.
Footer Options
- Footer Copyright
Insert text for your site copyright. You can also insert html tag like anchor tag (a), bold tag (b), strong tag (strong) and emphasis (em). - Footer Logo
Choose an image as logo on the footer. Please note, this option will appear and work if you choose Style 7 on Footer Style option. - Footer Logo Retina
Choose an image as retina logo on the footer. Please note, this option will appear and work if you choose Style 7 on Footer Style option. - Footer Logo Alt
Insert alternate text of the footer logo. Please note, this option will appear and work if you choose Style 7 on Footer Style option. - Navigation Footer Text
Insert text for navigation footer. Please note, this option will appear and work if you choose Style 7 on Footer Style option. - Social Footer Text
Insert text for social footer. Please note, this option will appear and work if you choose Style 7 on Footer Style option. - Force Footer into Full Width
Turn on this option to force footer into fullwidth. Please note, this option will appear and work if you enable Boxed Layout option. - Show Social Icon
Turn on this option t show social icon on top of the footer. Please note, this option will appear and work if you choose Style 5 on Footer Style option. - Footer Additional Text
Insert additional text on the footer. Please note, this option will appear and work if you choose Style 4 on Footer Style option. - Show Secondary Footer
Turn on this option to show secondary footer. Please note, this option will not appear and work if you choose Style 7 on Footer Style option. - Menu Position on Secondary Footer
Adjust the position of menu on the secondary footer. Please note, this option will appear and work if you choose Style 1, Style 2, Style 3 or Style 6 on Footer Style option. - Copyright Position on Secondary Footer
Adjust the position of copyright on secondary footer. Please note, this option will appear and work if you choose Style 1, Style 2, Style 3 or Style 6 on Footer Style option. - Social Position on Secondary Footer
Adjust the position of social icon on secondary footer. Please note, this option will appear and work if you choose Style 1, Style 2, Style 3 or Style 6 on Footer Style option.
Footer Style
- Footer Scheme
Choose scheme style of the footer. - Background Color
Set background color of the footer. - Text Color
Set general color of text on the footer. Please note, this option will not appear and work if you choose Style 7 on Footer Style option. - Widget Title Color
Set title color of widget on the footer. Please note, this option will not appear and work if you choose Style 4 or Style 7 on Footer Style option. - Link Color
Set general link color for footer. Please note, this option will not appear and work if you choose Style 4 or Style 7 on Footer Style option. - Link Hover Color
Set link hover color for footer. Please note, this option will not appear and work if you choose Style 4 or Style 7 on Footer Style option. - Input Form Background
Set background color for input form on the footer. Please note, this option will not appear and work if you choose Style 4 or Style 7 on Footer Style option. - Input Text Color
Set text color of input form on the footer. Please note, this option will not appear and work if you choose Style 4 or Style 7 on Footer Style option. - Widget: Tag Cloud Background
Set background color of tag cloud widget on the footer. Please note, this option will not appear and work if you choose Style 4 or Style 7 on Footer Style option. - Widget: Tag Cloud Text Color
Set text color of tag cloud widget on the footer. Please note, this option will not appear and work if you choose Style 4 or Style 7 on Footer Style option. - Line Separator Color
Set color of line separator on footer.Please note, this option will appear and work if you choose Style 1, Style 2, Style 4 or Style 5 on Footer Style option with Show Secondary Footer option enabled. - Secondary Footer Background Color
Set background color of secondary footer. Please note, this option will not appear and work if you choose Style 7 on Footer Style option. Also you need to enable Show Secondary Footer option. - Copyright Color
Set color of copyright on the footer. Please note, this option will appear and work if Show Secondary Footer option enabled and Copyright Position on Secondary Footer not hidden. - Copyright Link Color
Set link color of copyright on the footer. Please note, this option will appear and work if Show Secondary Footer option enabled. - Navigation Text Color
Set text color of navigation on the footer. Please note, this option will appear and work if you choose Style 7 on Footer Style option. - Navigation Line Color
Set line color of navigation on the footer. Please note, this option will appear and work if you choose Style 7 on Footer Style option. - Menu Text Color
Set text color of menu on the footer. Please note, this option will appear and work if Show Secondary Footer option enabled and Copyright Position on Secondary Footer not hidden. - Menu Hover Text Color
Set hover text color of menu on the footer. Please note, this option will appear and work if Show Secondary Footer option enabled and Copyright Position on Secondary Footer not hidden. - Menu Separator Color
Set separator color of menu on the footer. Please note, this option will appear and work if Show Secondary Footer option enabled and Copyright Position on Secondary Footer not hidden. - Social Icon Color
Set social icon color on the footer. Please note, this option will appear and work if Show Secondary Footer option enabled and Copyright Position on Secondary Footer not hidden. - Social Icon Hover Color
Set social icon hover color on the footer. Please note, this option will appear and work if Show Secondary Footer option enabled and Copyright Position on Secondary Footer not hidden. - Social Icon Background Color
Set social icon background color on the footer. Please note, this option will appear and work if you choose Style 5 on Footer Style option. Also you need to enable Show Social Icon option. - Social Icon Color
Set social icon color of menu on footer. Please note, this option will appear and work if you choose Style 5 on Footer Style option. Also you need to enable Show Social Icon option. - Social Text Color
Set social icon Text color on the footer.Please note, this option will appear and work if you choose Style 5 or Style 7 on Footer Style option. Also you need to enable Show Social Icon option. - Social Line Color
Set social line color on the footer. Please note, this option will appear and work if you choose Style 7 on Footer Style option. - Social Icon Hover Background Color
Set social icon hover background color on the footer. Please note, this option will appear and work if you choose Style 5 or Style 7 on Footer Style option. Also you need to enable Show Social Icon option. - Social Hover Text Color
Set social icon hover text color on the footer. Please note, this option will appear and work if you choose Style 5 or Style 7 on Footer Style option. Also you need to enable Show Social Icon option.
Single Post Option
On Yo!Web : Single Post Option, there are several section options that you will find :
- Auto Load Scroll Post Option
- Breadcrumb Setting
- Single Post Option
- Related Post Option
- Comment Setting
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
- Single Blog Post Template
Choose template for the single blog post. - Single Blog Post Layout
Choose layout for the single blog post. - 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. - 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. - 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
- Show Featured Image/Video
Turn on this option to show post featured image or video. - Show Post Meta
Turn on this option to show post meta. - 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. - 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. - 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. - Show Category
Turn on this option to show post category. Please note, this option will appear and work if Show Post Meta option enabled. - 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. - Share Position
Choose position of share button on single blog post. - 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. - 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. - 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. - Show Post Tag
Turn on this option to show post tag. - Show Prev / Next Post
Turn on this option to show prev and next post. - Show Popup Post
Turn on this option to show popup post. - 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. - Show Author Box
Turn on this option to show author box.
Single Thumbnail Setting
- Post Thumbnail Size
Choose your post single image thumbnail size. You can also override this behaviour on your Single Post editor. - 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.
- Related Post Filter
Choose how related post will filter your article. - Related Post Module Header Style
Choose header style for related post. - Related Pagination Style
Choose pagination style for related post. - Number of Post
Set the number of related post. - 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. - Related Post Template
Choose template for related post. - Excerpt Length
Set word length of post excerpt on related post. - Related Post Date Format
Choose date format for related post. - 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.
- Comment Type
Choose comment platform to use. - 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. - 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. - 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. - 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.
Image & Gallery Option
On Yo!Web : Image & Gallery Option, there are two section options that you will find :
- Gallery Shortcode
- Image Load & Generator Setting
- Image Popup
If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.
1. Gallery Shortcode
For more detail information about Gallery Shortcode setting, please visit our documentation about it on this page.
2. Image Load & Generator Setting
Image is one of important thing for your website. With Yo!Web, you will notice that image appears on several place such as on block post, hero, slider, carousel, etc.
In this part, you can setup the general image setting for your website. Each of the option listed below has its own pros and cons that you need to know, so you can choose wisely based on your need.
- Image Load Mechanism
We provide 3 kinds of image loading mechanism. You can compare pros and cons on each option based on the following information below.- Normal Load Image, this option will support retina, large size at first time load and good for SEO result.
- Lazy Load Image, this option will support retina, less number of image at first time load, better user experience and good for SEO result.
- Background Image, this option supports GIF image as featured thumbnail but bad for SEO result.
- Image Generator
We provide 2 kinds of image generator mechanism. You can compare pros and cons on each option based on the following information below.- Normal Image Generator, this option has the fastest load time, but require more space. Each image that you upload will generate into 12 image dimension.
If you switch this option, please regenerate image again. In this case you can use Regenerate Thumbnail plugin that fully supported by Yo!Web. - Dynamic Image Generator, this option has slower load time, but it will only happen when image is created for the first time. Image generated only when needed.
- Normal Image Generator, this option has the fastest load time, but require more space. Each image that you upload will generate into 12 image dimension.
3. Image Popup
In this part, you can setup image popup option for single post and page.
- Image Popup Script
This option will enable your image popup on Gallery Thumbnail, Single image, and WordPress default gallery.- Photoswipe
Zoomable, ability to go fullscreen, button for share on social network. - Magnific Popup
Simple Option, option to turn all single image into one gallery.
- Photoswipe
- Set Image as Gallery
Turn on this option to set images on a single post as one instance of gallery. Please note, this option will appear and work if you choose Magnific Popup on Image Popup Script option.
Search Option
On Yo!Web : Search Option, there are two section options that you will find :
- Search Content
- Live Search Setting
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.
- Enable Live Search Block
Turn on this option to enable live search block. - Live Search Number of Post
Set number of post for live search. - Live Search Date Format
Choose date format for live search. - 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 :
- Category : Global Template
- Category List Setting
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 :
- Background Color
Set background color for global category. - Text Color
Set text color for global category.
Category Sidebar :
- Show Sidebar
Turn on this option to show sidebar for global category. - 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 :
- Category Title Style
Choose title style for global category. - Title Background Color
Set background color for title of global category. - 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 :
- 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. - Category Hero Header
Choose hero header layout for global category. - Category Hero Header Style
Choose hero header style for global category. - Hero Margin
Set hero margin for global category. - Hero Date Format
Choose date format for hero on global category. - 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 :
- Category Content Layout
Choose content layout for global category. - Excerpt Length
Set word length of excerpt post content for global category. - Content Date Format
Choose date format post for global category. - 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. - Choose Pagination Mode
Choose pagination mode for global category. - 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. - Pagination Align
Choose pagination align for global category. - Show Navigation Text
Turn on this option to show navigation text for global category. - 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.
- Override Color
Turn on this option to override global category color. Please note, this option below will appear if this option enabled. - Category Background Color
Set background color for this category. - Text Color
Set text color for this category.
Other Template
On Yo!Web : Other Template, there’re several section option that you will find :
- Archive Template
- Search Template
- Author Template
- Attachment Template
- 404 (Not Found) Template
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 :
- Show Sidebar
Turn on this option to show sidebar. - 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 :
- Archive Content Layout
Choose content layout for archive page. - Excerpt Length
Set word length of excerpt post content on archive page. - Content Date Format
Choose date format post on archive page. - 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. - Choose Pagination Mode
Choose pagination mode on archive page. - Pagination Align
Choose pagination align on archive page. - Show Navigation Text
Turn on this option to show navigation text on archive page. - 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 :
- Show Sidebar
Turn on this option to show sidebar. - 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 :
- Search Content Layout
Choose content layout for search result page. - Excerpt Length
Set word length of excerpt post content on search result page. - Content Date Format
Choose date format post on search result page. - 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. - Choose Pagination Mode
Choose pagination mode on search result page. - Pagination Align
Choose pagination align on search result page. - Show Navigation Text
Turn on this option to show navigation text on search result page. - 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 :
- Show Sidebar
Turn on this option to show sidebar. - 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 :
- Author Content Layout
Choose content layout for author page. - Excerpt Length
Set word length of excerpt post content on author page. - Content Date Format
Choose date format post on author page. - 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. - Choose Pagination Mode
Choose pagination mode on author page. - Pagination Align
Choose pagination align on author page. - Show Navigation Text
Turn on this option to show navigation text on author page. - 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 :
- Show Sidebar
Turn on this option to show sidebar. - 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 :
- Show Sidebar
Turn on this option to show sidebar. - 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 :
- Not Found Content Layout
Choose content layout for not found page. - Excerpt Length
Set word length of excerpt post content on not found page. - Content Date Format
Choose date format post on not found page. - 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 :
- Show Sidebar on WooCommerce Archive
Turn on this option to show sidebar on WooCommerce archive. - 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 :
- Show Sidebar on WooCommerce Single
Turn on this option to show sidebar on WooCommerce single. - 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 :
- Show Sidebar on BBPress
Turn on this option to show sidebar on BBPress page. - 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 :
- Global Font
- Custom Font
- Type Kit Font
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).
- Font Family
Choose font family that you want to use. - Font Variant
Set font variant. Please note, this option may not available on certain font. - Font Subsets
Set font subsets. Please note, this option may not available on certain font. - Font Size
Set font size. - Line Height
Set line height. - 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).
- Font Name
Insert the name of your custom font. - Font Weight
Set font weight. - Font Style
Set font style. - EOT File
Upload EOT file of your font. - WOFF File
Upload WOFF file of your font. - TTF File
Upload TTF file of your font. - SVG File
Upload SVG file of your font.
3. Type Kit Font
In this part, you can setup type kit font.
- Type Kit ID
Insert your type kit id. - 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 :
- jQuery Migrate
- Loader Setting
- Post Date Setting
- GDPR Compliance
- Analytics / Tracking
- Custom Post Type
- Speed Optimization
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.
- 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. - Module Loader Style
Choose loader type that will be used on the module. - Mega Menu Loader Style
Choose loader type that will be used on the mega menu. - Sidefeed Loader Style
Choose loader type that will be used on the sidefeed. - 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
- 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. - 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.
Advertisement Option
On Yo!Web : Advertisement Option, there are several section option that you will find :
- Preview Slider Ads
- Header Ads
- Article Ads
- Global Ads
- Mobile Ads
- AMP Ads
If you’re not familiar with Yo!Web Customizer yet, you might need to check our Customizer Overview.
1. Preview Slider Ads
For more detail information about Preview Slider Ads setting, please visit our documentation about it on this page.
2. Header Ads
On this part, you can setup general option of header advertisement.
Above Header Advertisement :
- Enable Above Header Advertisement
Turn on this option to enable advertisement on above the header. Please note, the next option below will appear and work if you turn on this option first. - Above Header : Advertisement Type
Choose advertisement type on above the header. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Above Header : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 970×90 image size for best result. - Above Header : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Above Header : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Above Header : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Above Header : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Above Header : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Above Header : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Above Header : Tab Ads Size Google Ads.
Choose ads size for tablet device. We recommend you to use Auto on this option. - Above Header : Phone Ads Size Google Ads.
Choose ads size for mobile phone device. We recommend you to use Auto on this option. - Above Header : Script Code Script Code Ads.
Insert script code ads for above header. - Above Header : Advertisement Code Shortcode Ads.
Insert shortcode ads for above header.
Header 1 Advertisement
These options below will appear if you’re using Header Layout – Style 1.
- Enable Header 1 Advertisement
Turn on this option to enable advertisement on header. Please note, the next option below will appear and work if you turn on this option first. - Header 1 : Advertisement Type
Choose advertisement type on header. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Header 1 : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 728×90 image size for the best result. - Header 1 : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Header 1 : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Header 1 : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Header 1 : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Header 1 : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Header 1 : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Header 1 : Script Code Script Code Ads.
Insert script code ads for header. - Header 1 : Advertisement Code Shortcode Ads.
Insert shortcode ads for header.
Header 2 Advertisement
These options below will appear if you’re using Header Layout – Style 2.
- Enable Header 2 Advertisement
Turn on this option to enable advertisement on header. Please note, the next option below will appear and work if you turn on this option first. - Header 2 : Advertisement Type
Choose advertisement type on header. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Header 2 : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 728×90 image size for the best result. - Header 2 : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Header 2 : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Header 2 : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Header 2 : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Header 2 : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Header 2 : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Header 2 : Script Code Script Code Ads.
Insert script code ads for header. - Header 2 : Advertisement Code Shortcode Ads.
Insert shortcode ads for header.
Header 4 Advertisement
These options below will appear if you’re using Header Layout – Style 4.
- Enable Header 4 Advertisement
Turn on this option to enable advertisement on header. Please note, the next option below will appear and work if you turn on this option first. - Header 4 : Advertisement Type
Choose advertisement type on header. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Header 4 : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 970×90 image size for best result. - Header 4 : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Header 4 : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Header 4 : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Header 4 : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Header 4 : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Header 4 : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Header 4 : Script Code Script Code Ads.
Insert script code ads for header. - Header 4 : Advertisement Code Shortcode Ads.
Insert shortcode ads for header.
3. Article Ads
In this part, you can setup general option of article advertisement.
Above Article Advertisement :
- Enable Above Article Advertisement
Turn on this option to enable advertisement on above article. Please note, the next option below will appear and work if you turn on this option first. - Above Article : Advertisement Type
Choose advertisement type on above article. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Above Article : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 970×90 image size for best result. - Above Article : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Above Article : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Above Article : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Above Article : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Above Article : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Above Article : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Above Article : Tab Ads Size Google Ads.
Choose ads size for tablet device. We recommend you to use Auto on this option. - Above Article : Phone Ads Size Google Ads.
Choose ads size for mobile phone device. We recommend you to use Auto on this option. - Above Article : Script Code Script Code Ads.
Insert script code ads for above article. - Above Article : Advertisement Code Shortcode Ads.
Insert shortcode ads for above article.
Top Content Advertisement :
- Enable Top Content Advertisement
Turn on this option to enable advertisement on top content. Please note, the next option below will appear and work if you turn on this option first. - Top Content : Advertisement Type
Choose advertisement type on top content. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Top Content : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 970×90 image size for best result. - Top Content : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Top Content : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Top Content : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Top Content : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Top Content : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Top Content : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Top Content : Tab Ads Size Google Ads.
Choose ads size for tablet device. We recommend you to use Auto on this option. - Top Content : Phone Ads Size Google Ads.
Choose ads size for mobile phone device. We recommend you to use Auto on this option. - Top Content : Script Code Script Code Ads.
Insert script code ads for top content. - Top Content : Advertisement Code Shortcode Ads.
Insert shortcode ads for top content.
Inline Content Advertisement :
- Enable Inline Content Advertisement
Turn on this option to enable advertisement on inline content. Please note, the next option below will appear and work if you turn on this option first. - Inline Content : Advertisement Type
Choose advertisement type on inline content. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Random Ads Position
Turn on this option to enable random ads position feature. - Inline Content : After Paragraph
Determine after which paragraph you want this advertisement to show. - Inline Content : Advertisement Align
Choose align for ads. - Inline Content : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 970×90 image size for the best result. - Inline Content : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Inline Content : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Inline Content : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Inline Content : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Inline Content : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Inline Content : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Inline Content : Tab Ads Size Google Ads.
Choose ads size for tablet device. We recommend you to use Auto on this option. - Inline Content : Phone Ads Size Google Ads.
Choose ads size for mobile phone device. We recommend you to use Auto on this option. - Inline Content : Script Code Script Code Ads.
Insert script code ads for inline content. - Iniline Content : Advertisement Code Shortcode Ads.
Insert shortcode ads for inline content.
Bottom Content Advertisement :
- Enable Bottom Content Advertisement
Turn on this option to enable advertisement on bottom content. Please note, the next option below will appear and work if you turn on this option first. - Bottom Content : Advertisement Type
Choose advertisement type on bottom content. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Bottom Content : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 970×90 image size for best result. - Bottom Content : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Bottom Content : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Bottom Content : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Bottom Content : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Bottom Content : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Bottom Content : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Bottom Content : Tab Ads Size Google Ads.
Choose ads size for tablet device. We recommend you to use Auto on this option. - Bottom Content : Phone Ads Size Google Ads.
Choose ads size for mobile phone device. We recommend you to use Auto on this option. - Bottom Content : Script Code Script Code Ads.
Insert script code ads for bottom content. - Bottom Content : Advertisement Code Shortcode Ads.
Insert shortcode ads for bottom content.
Below Article Advertisement :
- Enable Below Article Advertisement
Turn on this option to enable advertisement on below article. Please note, the next option below will appear and work if you turn on this option first. - Below Article : Advertisement Type
Choose advertisement type on below article. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Below Article : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 970×90 image size for best result. - Below Article : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Below Article : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Below Article : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Below Article : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Below Article : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Below Article : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Below Article : Tab Ads Size Google Ads.
Choose ads size for tablet device. We recommend you to use Auto on this option. - Below Article : Phone Ads Size Google Ads.
Choose ads size for mobile phone device. We recommend you to use Auto on this option. - Below Article : Script Code Script Code Ads.
Insert script code ads for below article. - Below Article : Advertisement Code Shortcode Ads.
Insert shortcode ads for below article.
4. Global Ads
In this part, you can setup general option of global advertisement.
Background Ads
Please note, you can set your image background for advertisement on the Yo!Web : Global Option → Layout & Background
For more complete information about Layout & Background, you can follow this link.
- Background Ads URL
Insert url link for background image ads. - Open URL on New Tab
Turn on this option to enable open link on new tab when background image ads clicked.
Above Footer Advertisement
- Enable Above Footer Advertisement
Turn on this option to enable advertisement on above footer. Please note, the next option below will appear and work if you turn on this option. - Above Footer : Advertisement Type
Choose advertisement type on above footer. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Above Footer : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 970×90 image size for best result. - Above Footer : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Above Footer : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Above Footer : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Above Footer : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Above Footer : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Above Footer : Desktop Ads Size Google Ads.
Choose ads size for desktop device. We recommend you to use Auto on this option. - Above Footer : Tab Ads Size Google Ads.
Choose ads size for tablet device. We recommend you to use Auto on this option. - Above Footer : Phone Ads Size Google Ads.
Choose ads size for mobile phone device. We recommend you to use Auto on this option. - Above Footer : Script Code Script Code Ads.
Insert script code ads for above footer. - Above Footer : Advertisement Code Shortcode Ads.
Insert shortcode ads for above footer.
5. Mobile Ads
In this part, you can setup general option of mobile advertisement.
Sticky Mobile Advertisement
- Enable Sticky Mobile Advertisement
Turn on this option to enable advertisement on sticky mobile. Please note, the next option below will appear and work if you turn on this option first. - Sticky Mobile : Advertisement Type
Choose advertisement type on sticky mobile. Please note, the next option below will appear based on what kind of advertisement type that you’ve chosen for this option. - Sticky Mobile : Advertisement Image Image Ads.
Upload an image for advertisement. We recommend you to use 320×50 image size for best result. - Sticky Mobile : Advertisement Link Image Ads.
Insert url link where this advertisement image will be heading. - Sticky Mobile : Alternate Text Image Ads.
Insert alternate text for advertisement image. - Sticky Mobile : Open in New Tab Image Ads.
Turn on this option to enable open in new tab when advertisement image clicked. - Sticky Mobile : Publisher ID Google Ads.
Insert data ads client or Google ads client content. - Sticky Mobile : Ads Slot ID Google Ads.
Insert data ads slot or Google ads slot content. - Sticky Mobile : Phone Ads Size Google Ads.
Choose ads size for mobile phone device. We recommend you to use Auto on this option. - Sticky Mobile : Script Code Script Code Ads.
Insert script code ads for above footer. - Sticky Mobile : Advertisement Code Shortcode Ads.
Insert shortcode ads for above footer.
Adsense – Page Level Ads
If you’re not familiar with Page Level Ads yet, please follow this link for more complete information about them.
- Enable Page Level Ads
Turn on this option to enable page level advertisement. Please note, the next option below will appear and work if you turn on this option first. - Ad Client ID
Insert data ads client or Google ads client content. - Enable Page Level Anchor Ads
Turn on this option to enable page level anchor ads. - Page Level Anchor Ads Google Channel
Insert Google ads channel content. Please note, this option will appear and work if Enable Page Level Anchor Ads option above enabled. - Enable Page Level Vignette Ads
Turn this option to enable page level vignette ads. - Page Level Vignette Ads Google Channel
Insert Google ads channel content. Please note, this option will appear and work if Enable Page Level Vignette Ads option above enabled.
6. AMP Ads
In this part, you can setup general option of Google AMP advertisement.
Please note, you will need to install and activate both of WordPress AMP and Yo!Web AMP plugin to enable this feature. For more detail you can follow this link.
Above Header Advertisement :
- Enable Above Header Advertisement
Turn on this option to enable advertisement on above header. The next option below will appear and work if you turn on this option first. - Above Header : Publisher ID
Insert data ads client or Google ads client content. - Above Header : Ads Slot ID
Insert data ads slot or Google ads slot content. - Above Header : Ads Size
Choose ads size. We recommend you to use Auto on this option.
Above Article Advertisement :
- Enable Above Article Advertisement
Turn on this option to enable advertisement on above article. The next option below will appear and work if you turn on this option first. - Above Article : Publisher ID
Insert data ads client or Google ads client content. - Above Article : Ads Slot ID
Insert data ads slot or Google ads slot content. - Above Article : Ads Size
Choose ads size. We recommend you to use Auto on this option.
Above Content Advertisement :
- Enable Above Content Advertisement
Turn on this option to enable advertisement on above content. The next option below will appear and work if you turn on this option first. - Above Content : Publisher ID
Insert data ads client or Google ads client content. - Above Content : Ads Slot ID
Insert data ads slot or Google ads slot content. - Above Content : Ads Size
Choose ads size. We recommend you to use Auto on this option.
Inline Content Advertisement :
- Enable Inline Content Advertisement
Turn on this option to enable advertisement on inline content. The next option below will appear and work if you turn on this option first. - Inline Content : Random Ads Position
Turn on this option to enable random ads position feature. - Inline Content : After Paragraph
Determine after which paragraph you want this advertisement to show. - Inline Content : Publisher ID
Insert data ads client or Google ads client content. - Inline Content : Ads Slot ID
Insert data ads slot or Google ads slot content. - Inline Content : Ads Size
Choose ads size. We recommend you to use Auto on this option.
Below Content Advertisement :
- Enable Below Content Advertisement
Turn on this option to enable advertisement on below content. The next option below will appear and work if you turn on this option first. - Below Content : Publisher ID
Insert data ads client or Google ads client content. - Below Content : Ads Slot ID
Insert data ads slot or Google ads slot content. - Below Content : Ads Size
Choose ads size. We recommend you to use Auto on this option.
Below Article Advertisement :
- Enable Below Article Advertisement
Turn on this option to enable advertisement on below article. The next option below will appear and work if you turn on this option first. - Below Article : Publisher ID
Insert data ads client or Google ads client content. - Below Article : Ads Slot ID
Insert data ads slot or Google ads slot content. - Below Article : Ads Size
Choose ads size. We recommend you to use Auto on this 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)
Still stuck? How can we help?
How can we help?
A premium Web Scripts with an integrated Knowledge Base,
providing 24/7 community-based support.
Social, Like & View
On Yo!Web : Social, Like & View, there are several section options that you will find :
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
.