Did You Know?

Stay Ahead In Digital Economy

General Guidelines

Author: admin 82 views

Post

There’re a few things that we’ll explain to you on this section :

  1. Post Format
  2. Post Subtitle
  3. Post Editor
  4. Primary Category
  5. Single Post Setting
  6. Sponsored Post

 

1. Post Format


With Yo!Web, we provide 3 kinds of post format that you can use for your post. There are Standard FormatGallery Format, and Video Format.

Before that, please make sure that you have installed and activated required plugins for Yo!Web. For more complete information about required plugins, you can follow this link.

As seen on image above, you can choose standard, gallery, or video post format. Please check the following explanation below about post format :

  1. Standard Format
    This is the default option for post format. With this format, you can also add featured image for your post.
  2. Gallery Format
    If you want to show image gallery on featured post, this post format will fit in your need. With this format, you just need to simply select several images as gallery items and everything’s set.
  3. Video Format
    You can also use video for featured post by using video post format. Nothing complicated is required, just paste your video url and it’s done.

 

2. Post Subtitle


Beside post title, we also provide post subtitle a.k.a. secondary post title. You can insert some text for post subtitle normally just like inserting a post title.

Where it’s done, the post subtitle will be shown below the post title. Leave post subtitle field blank if you don’t want to use it.

 

3. Post Editor


On post editor, you will notice something different as you can see on the image below.

We added sidebar area on the right side of post editor. This area is where your sidebar will show up. With this feature you will know how your post content will look on the front end preview.

Also, as you can see on the image above. We provide additional element and formatting tools on the toolbar. You need to click Toggle Toolbar button to expand this toolbar, so you can use the additional element and formatting tools easily.

Here’s the list of additional element and formatting tools that we’ve provided for you (from left to right based on image on above) :

  • Grid Builder
    You can create custom grid column for your content with Grid Builder. On the grid builder panel, you will have three buttons.
    Green (+) button for increasing grid width, yellow (-) button for decreasing grid width and red (+) button for removing the current grid.


  • Intro
    You can use Intro format into certain important content of your post to attract the readers for focusing more on this content. Intro format also have different style compared to the default format.
  • Dropcap
    You can use Dropcap format to insert an interesting starting letter of a paragraph in your post content. We also provide several options that can be used to customize default dropcap style.
    Please note, you need to make selection or block the letter that you want to use as dropcap.

  • Highlight
    You can use Highlight format to highlight certain word on your content. There are several options that you can choose to customize the default highlight style.
    Please note, firstly you need to make selection of word(s) which want to be highlighted.

  • Pullquote
    You can use Pullquote element to insert pullquote into your content. We also provide alignment option for pullquote.
    Please note, you will need to make selection or put the cursor pointer of sentence that you want to use as pullquote.

  • Alert
    You can use Alert element to insert alert message into your content. We also provide several option to customize your alert element.

  • Button
    You can use Button element to insert custom button into your content. We also provide several button style that you can use.

  • Spacing
    You can use Spacing to insert additional space on your post content. Just simply to input size of spacing that you need into input field.

 

4. Primary Category


A category is one of important thing for post. With Yo!Web, you will notice post category appears on several place such as on block post, hero, slider, breadcrumb and etc.

On certain post, you might use more than one categories. In this case, only the first post category will be used by default. However, if you personally want to use a certain category instead of the one selected by the system, you can setup Primary Category manually for your post.

Primary category will show on several place as category badge on post block module, hero element, post slider and breadcrumb category on single blog post.

As you can see on the image above, you can setup primary category on Yo!Web : Primary Category metabox on the right side.

 

5. Single Post Setting


In some cases, you might want to have individual setting for certain post. To achieve that, we provide Single Post Setting that you can find on each post. With this feature you will be able to override Global Single Post Setting. So each post on your site can have its own personal setting.

If you are not familiar with Global Single Post Setting yet, you can follow this link and jump into Single Post Option part.

Please check the following explanation about Yo!Web : Single Post Setting below :

Override Default Template :

  • Override Global Template Setting
    Turn on this option to override global template setting for the current post only.

This option list below will appear if Override Global Template Setting option above is enabled.

  1. Post Header Template
    Choose post header template that you want to use for the current post. Please note, several template may not work for certain post format.

     

    • Standard Format : This format will work best on all template.
    • Gallery Format : This format will works best with Template 1Template 2Template 3Template 7Template 8 and Template 9.
    • Video Format : This format will works best with Template 1Template 2Template 3Template 7Template 8 and Template 9.
  2. Enable Parallax Effect
    Turn on this option to enable parallax effect of featured image. Please note, this option will appear and work if you use Template 4 or Template 5 on Post Header Template option above.
  3. Enable Fullscreen Featured Image
    Turn on this option to enable fullscreen featured image. Please note, this option will appear and work if you use Template 4 or Template 5 on Post Header Template option above.
  4. Single Blog Post Layout
    Choose layout type for the current post.
  5. Single Post Sidebar
    Choose sidebar that you want to use for the current post. Please note, this option will appear and work if you use Left Sidebar or Right Sidebar on Single Blog Post Layout option above.
  6. Single Post Share Position
    Adjust the position of the share button for the current post.
  7. Float Share Style
    Adjust the style of float share for the current post. Please note, this option will appear and work if you use Only Float or Float + Bottom on Single Post Share Position option above.
  8. Show Share Counter
    Turn on this option to show share counter for the current post. Please note, this option will appear and work if you use Only Top or Top + Bottom on Single Post Share Position option above.
  9. Show View Counter
    Turn on this option to show view counter for the current post. Please note, this option will appear and work if you use Only Top or Top + Bottom on Single Post Share Position option above.
  10. Show Featured Image/Video
    Turn on this option to show featured image, gallery or video for the current post.
  11. Show Post Meta
    Turn on this option to show post meta on header for the current post.
  12. Show Post Author
    Turn on this option to show post author on  post meta container for the current post. Please note, this option will appear and work if Show Post Meta option enabled.
  13. Show Post Author Image
    Turn on this option to show post author image on  post meta container for the current post. Please note, this option will appear and work if Show Post Meta option enabled.
  14. Show Post Date
    Turn on this option to show post date on  post meta container for the current post. Please note, this option will appear and work if Show Post Meta option enabled.
  15. Show Category
    Turn on this option to show post category on  post meta container for the current post. Please note, this option will appear and work if Show Post Meta option enabled.
  16. Show Post Tag
    Turn on this option to show post tag on the below article for the current post.
  17. Show Prev/Next Post
    Turn on this option to show previous and next post navigation on the below article for the current post.
  18. Show Popup Post
    Turn on this option to show popup post on the bottom right side for the current post.
  19. Number of Post
    Set the number of popup post to show for the current post. Please note, this option will appear and work if Show Popup Post option enabled.
  20. Show Author Box
    Turn on this option to show author box on the below article for the current post.
  21. Show Post Related
    Turn on this option to show related post on the below article for the current post.

 

Override Image Size :

  • Override Image Thumbnail Size
    Turn on this option to override default image thumbnail size. Please note, if you’re using post template with image full size, this option will be ignored. 

This option list below will appear if Override Global Template Setting option above is enabled.

  1. Post Thumbnail Size
    Choose image thumbnail size for the current post.
  2. Post Gallery Thumbnail Size
    Choose image gallery thumbnail size for the current post.

 

6. Sponsored Post


In some cases, you might want to publish a sponsored post on certain posts. To achieve that, we provide Sponsored Post option in Single Post Setting that you can find on each post. With this feature, you will be able to set posts to a sponsored post.

Please check the following explanation about Sponsored Post below :

  • Sponsored Post
    Turn on this option to set the current post as a sponsored post.
  • Sponsored Post Label
    Fill this field to set sponsored post label. Please note, this option will appear and work if Sponsored Post option enabled.
  • Sponsored Post Name
    Fill this field to set the name of sponsor. Please note, this option will appear and work if Sponsored Post option enabled.
  • Sponsored Post URL
    Fill this field to set the url of sponsor. Please note, this option will appear and work if Sponsored Post option enabled.
  • Show Sponsor Logo
    Turn on this option to show the sponsor logo instead of sponsor name. Please note, this option will appear and work if Sponsored Post option enabled.
  • Sponsored Post Logo
    Choose image for the sponsor logo. Please note, this option will appear and work if Sponsored Post and Show Sponsor Logo option enabled.
  • Sponsored Description
    Fill this field to set sponsored post description. Please note, this option will appear and work if Sponsored Post option enabled.

Page

With Yo!Web, you are provided by two kinds of page template which areDefault Template and Landing Page.

There are few things that we’ll explain to you on this section :

  1. Default Page Template
  2. Landing Page Template
  3. Choose Homepage

 

1. Default Page Template


Default Template is the original page template that is assigned when you create a new page. This template is a standard page template that comes from WordPress.

We also provide several options so that you can configure and customize your page. You can find the option list on the Yo!Web : Single Page Layout metabox at the bottom page area.

Please check the following explanation about Yo!Web : Single Page Layout below :

  1. Single Page Layout
    Choose layout for the current page.
  2. Single Page Sidebar
    Choose page sidebar for the current page. Please note, this option will appear and work if you choose Right Sidebar or Left Sidebar on Single Page Layout option above.
  3. Show Page Meta
    Turn on this option to show page meta for the current page.
  4. Share Position
    Adjust the position of share button for the current page.
  5. Float Share Style
    Choose float share style for the current page. Please note, this option will appear and work if you choose Only Float or Float + Bottom on Share Position option above.

 

2. Landing Page Template


Landing Page is specific page template for landing page or homepage purpose. With this template you can create your landing page layout with Visual Composer backend editor or frontend editor.

You also can use Yo!Web ElementYo!Web ModuleYo!Web HeroYo!Web Slider and Yo!Web Carousel on your page. For more detail about Visual Composer element, you can follow this link.

On the landing page template, we also provide Page Loop feature. With this feature, you will be able to index your post into several pages (pagination).

Not only that, we also provide filter option for your post, header option, and template option to customize your page loop looks. You can find the option list on the Yo!Web : Page Loop metabox at the bottom page area.

Please check the following explanation about Yo!Web : Page Loop below :

Page Loop :

  • Enable Page Loop
    Turn on this option to enable page loop for the current page.

Page Loop Header :

  1. First Header Title
    Insert text for main title of header.
  2. Second Title
    Insert text for secondary title of the header.
  3. Header Style
    Choose header style of page loop.
  4. Header Background
    Set background color for header. Please note, this option may not work on certain header style.
  5. Header Text Color
    Set text color for header. Please note, this option may not work on certain header style.

Content Template :

  1. Page Loop Layout
    Choose layout for page loop.
  2. Page Loop Sidebar
    Choose sidebar for page loop. Please note, this option will appear and work if you choose Right Sidebar or Left Sidebar on Page Loop Layout option above.
  3. Page Loop Module Template
    Choose module template for page loop post.
  4. Excerpt Length
    Set the word length of excerpt for page loop post.
  5. Date Format for Content
    Choose date format for post content of page loop.
  6. Custom Date Format for Content
    Insert custom date format for post content of page loop. Please note, this option will appear and work if you choose Custom Format on Date Format for Content option above.
    For more detail about this format, please refer to Developer Codex.
  7. Pagination Mode
    Choose pagination mode for page loop.
  8. Pagination Align
    Choose pagination alignment for page loop.
  9. Show Navigation Text
    Turn on this option to show navigation text on page loop navigation.
  10. Show Page Info
    Turn on this option to show page info on page loop navigation.

Content Filter :

  1. Include Post ID
    Choose post id that you want to include for post content on page loop.
  2. Exclude Post ID
    Choose post id that you want to exclude for post content on page loop.
  3. Include Category
    Choose post category that you want to include for post content on page loop.
  4. Exclude Category
    Choose post category that you want to exclude for post content on page loop.
  5. Author
    Choose post author that you want to show for post content on page loop.
  6. Include Tags
    Choose post tags that you want to include for post content on page loop.
  7. Exclude Tags
    Choose post tags that you want to exclude for post content on page loop.
  8. Sort By
    Choose sorting method of post content on page loop.

 

3. Choose Homepage


After creating page, you might want to set that page as Homepage of your website.

In this case, you can setup your homepage from WordPress Admin → Setting → Reading → Front page displays

Then select A static page option and after that you can choose a certain page as the Front page (Homepage) of your website .

Widget

There are few things that we will explain to you on this part :

  1. Widget Area
  2. Add / Remove Widget Area
  3. Additional Widget

 

1. Widget Area


Yo!Web comes with 5 pre-defined widget areas that you can use to decorate your website. Here’s the list of pre-defined widget areas :

  1. Sidebar Widget
    This is widget area for sidebar that will be visible on Blog & Page that enable sidebar.
  2. Footer Widget 1
    This is widget area for footer at the first column. Please note, this widget area will work if you’re using Footer Style 1Footer Style 2Footer Style 3Footer Style 5 and Footer Style 6.
  3. Footer Widget 2
    This is widget area for footer at the second column. Please note, this widget area will work if you’re using Footer Style 1Footer Style 2Footer Style 3 and Footer Style 5.
  4. Footer Widget 3
    This is widget area for footer at the third column. Please note, this widget area will work if you’re using Footer Style 1Footer Style 2Footer Style 3 and Footer Style 5.
  5. Footer Widget 4
    This is widget area for footer at the fourth column. Please note, this widget area will work if you’re using Footer Style 2 and Footer Style 3.

 

2. Add / Remove Widget Area


We also provide an option to add and remove the widget area. To create new widget area, you just need to go to WordPress Admin → Appereance → Widgets then you will notice Add or Remove Widget Area button in there.

As you can see on the image above, you can create new widget area by clicking Create Widget Area button or remove certain widget area by clicking red ban icon ().

Don’t forget to hit Save Widget button after you’ve done.

As seen on the image above, this panel will show up when you create a new widget. You just need to insert the name of the new widget and don’t forget to hit Add Widget button to finish the process.

 

3. Additional Widget


We provide several additional widgets which have been included in Yo!Web. Here’s the list of the additional widgets:

  1. Yo!Web – Ads Block
    A widget to display advertisement.
  2. Yo!Web – Header Module
    A widget to display header module.
  3. Yo!Web – Module 1
    A widget to display module block 1.
  4. Yo!Web – Module 2
    A widget to display module block 2.
  5. Yo!Web – Module 3
    A widget to display module block 3.
  6. Yo!Web – Module 4
    A widget to display module block 4.
  7. Yo!Web – Module 5
    A widget to display module block 5.
  8. Yo!Web – Module 6
    A widget to display module block 6.
  9. Yo!Web – Module 7
    A widget to display module block 7.
  10. Yo!Web – Module 8
    A widget to display module block 8.
  11. Yo!Web – Module 9
    A widget to display module block 9.
  12. Yo!Web – Module 10
    A widget to display module block 10.
  13. Yo!Web – Module 11
    A widget to display module block 11.
  14. Yo!Web – Module 12
    A widget to display module block 12.
  15. Yo!Web – Module 13
    A widget to display module block 13.
  16. Yo!Web – Module 14
    A widget to display module block 14.
  17. Yo!Web – Module 15
    A widget to display module block 15.
  18. Yo!Web – Module 16
    A widget to display module block 16.
  19. Yo!Web – Module 17
    A widget to display module block 17.
  20. Yo!Web – Module 18
    A widget to display module block 18.
  21. Yo!Web – Module 19
    A widget to display module block 19.
  22. Yo!Web – Module 20
    A widget to display module block 20.
  23. Yo!Web – Module 21
    A widget to display module block 21.
  24. Yo!Web – Module 22
    A widget to display module block 22.
  25. Yo!Web – Module 23
    A widget to display module block 23.
  26. Yo!Web – Module 24
    A widget to display module block 24.
  27. Yo!Web – Module 25
    A widget to display module block 25.
  28. Yo!Web – Module 26
    A widget to display module block 26.
  29. Yo!Web – Module 27
    A widget to display module block 27.
  30. Yo!Web – Slider 3
    A widget to display slider 3.
  31. Yo!Web – Video Playlist
    A widget to display video playlist.
  32. Yo!Web – Youtube / Vimeo Playlist
    A widget to display youtube or vimeo playlist.
  33. Yo!Web – About
    A widget to display information about you and your site.
  34. Yo!Web – Behance
    A widget to display your portfolio on Behance.
  35. Yo!Web – Dribbble
    A widget to display your portfolio shot on Dribbble.
  36. Yo!Web – Facebook Page
    A widget to display Facebook page likes.
  37. Yo!Web – Flickr
    A widget to display your latest photostream on Flickr.
  38. Yo!Web – Google+
    A widget to display Google+ badge.
  39. Yo!Web – Instagram
    A widget to display Instagram feed.
  40. Yo!Web – Pinterest
    A widget to display your Pins.
  41. Yo!Web – Popular Post
    A widget to display most popular post of your website.
  42. Yo!Web – Recent News
    A widget to display recent post of your website.
  43. Yo!Web – Separator Line
    A widget to display separator line.
  44. Yo!Web – Social Counter
    A widget to display your social account fans, followers and subscribers.
  45. Yo!Web – Social Icon
    A widget to display your social account with nice icon.
  46. Yo!Web – Tab Post
    A widget to display your post with trending, comment and latest tab.
  47. Yo!Web – Twitter
    A widget to display your recent Twitter feed.

Visual Composer Integration

There are few things that we will explain to you on this section :

  1. Yo!Web – Element
  2. Yo!Web – Module
  3. Yo!Web – Hero
  4. Yo!Web – Slider
  5. Yo!Web – Carousel

 

1. Yo!Web – Element


As you can see on the image below, on Yo!Web – Element group tab we provide several Visual Composer elements that you can use to optimize your website’s look.

Please check the following explanation below about Visual Composer element on Yo!Web – Element group tab :

Yo!Web – Ads Block

General Tab

  1. Ads Type
    Choose ads type that you want to use.
  2. [Image Ads] Ads Image
    Choose an image for image ads.
  3. [Image Ads] Ads Image Link
    Insert url link for image ads.
  4. [Image Ads] Image Alternate Text
    Insert alternate text for image ads.
  5. [Image Ads] Open New Tab
    Check this option to open the page in new tab when image ads clicked.
  6. [Google Ads] Publisher ID
    Insert data-ad-client / google_ad_client content.
  7. [Google Ads] Ads Slot ID
    Insert data-ad-slot / google_ad_slot content.
  8. [Google Ads] Desktop Ads Size
    Choose ads size to show on desktop.
  9. [Google Ads] Tab Ads Size
    Choose ads size to show on tablet.
  10. [Google Ads] Phone Ads Size
    Choose ads size to show on phone.
  11. [Script Code] Ads Code
    Insert ads script code.

Design Tab

  1. Block / Column Width
    Please choose width of the column you want to use on this ads block. 1 Block represents  4 column.
  2. CSS Box
    Set css attributes for ads block.

 

Yo!Web – News Ticker

General Tab

  1. News Ticker Title
    Insert title for news ticker.
  2. Choose Date Format
    Choose date format for content of news ticker.
  3. Custom Date Format
    Set custom date format for content of news ticker. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.
  4. News Ticker Icon
    Choose which font icon that is best to describe your news ticker.
  5. Enable Autoplay
    Check this option to enable auto play news ticker.
  6. Autoplay Delay
    Set auto play delay of news ticker in mili second. Please note, this option will appear and work if you enable auto play slider option above.
  7. Animation Direction
    Choose news ticker animation direction.
  8. News Ticker Title Background
    Choose news ticker title background. If you leave it empty, default theme scheme color will be used.
  9. News Ticker Text Color
    Choose news ticker title text color. If you leave it empty, default theme scheme color will be used.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of the news ticker.
  2. Number of Post
    Set number of post for content of the news ticker.
  3. Post Offset
    Set number of post offset (start of content) of news ticker.
  4. Include into Unique Content Group
    If you choose unique content option, this news ticker will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content of the news ticker. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content of news ticker. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for the content of news ticker.
  8. Exclude Category
    Exclude which post category that you don’t want to show for the content of news ticker.
  9. Author
    Choose which post author that you want to show for the content of news ticker.
  10. Include Tags
    Include which post tags that you want to show for the content of news ticker.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for the content of news ticker.
  12. Sort By
    Choose the sorting method for the content of news ticker.

Design Tab

  1. Block / Column Width
    Please choose width of the column you want to use on this news ticker. 1 Block represents  4 column.
  2. CSS Box
    Set css attributes for news ticker.

 

Yo!Web – Header Module

General Tab

  1. Title
    Insert text for the main title of header module.
  2. Second Title
    Insert text for the secondary title of header module.
  3. Title URL
    Insert url link for the title of header module.
  4. Header Type
    Choose a header type for header module.
  5. Header Align
    Choose the alignment of header module.
  6. Header Background
    Set the background color of header module. Please note, this option may not work on certain header type.
  7. Header Text Color
    Set the text color of header module. Please note, this option may not work on certain header type.

Design Tab

  1. Block / Column Width
    Please choose width of the column you want to use on this header module. 1 Block represents  4 column.
  2. CSS Box
    Set css attributes for header module.

 

Yo!Web – Video Playlist

General Tab

  1. Video Playlist Layout
    Choose video playlist layout.
  2. Video Playlist Scheme
    Choose video scheme color.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of the video playlist.
  2. Number of Post
    Set number of post for content of the video playlist.
  3. Post Offset
    Set number of post offset (start of content) of the video playlist.
  4. Include into Unique Content Group
    Choose unique content option, and this video playlist will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content of video playlist. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content of video playlist. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for content of video playlist.
  8. Exclude Category
    Exclude which post category that you don’t want to show for content of video playlist.
  9. Author
    Choose which post author that you want to show for content of video playlist.
  10. Include Tags
    Include which post tags that you want to show for content of video playlist.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for content of video playlist.
  12. Sort By
    Choose sorting method for content of video playlist.

Design Tab

  1. Block / Column Width
    Please choose width of the column you want to use on this video playlist. 1 Block represents  4 column.
  2. CSS Box
    Set css attribute for video playlist.

 

Yo!Web – YouTube / Vimeo Playlist

General Tab

  1. Video Playlist Layout
    Choose video playlist layout.
  2. Video Playlist Scheme
    Choose video scheme color.
  3. YouTube / Vimeo Video
    Enter your youtube / vimeo video separated by comma (Ex : https://www.youtube.com/watch?v=IvcE4o36cAo, https://vimeo.com/180337696).

Design Tab

  1. Block / Column Width
    Please choose width of the column you want to use on this playlist block. 1 Block represents  4 column.
  2. CSS Box
    Set css attribute for this playlist block.

 

Yo!Web – Block Link

General Tab

  1. Title
    Insert text for main title of block link.
  2. Second Title
    Insert text for secondary title of block link.
  3. Title URL
    Insert url link for title of block link.
  4. Open New Tab
    Check this option to open link on a new tab.
  5. Background Image
    Choose an image for block background.
  6. Use Video Background
    Check this option to use video as block background.
  7. YouTube Link
    Add YouTube video link to used as video background.

Design Tab

  1. Block / Column Width
    Please choose width of the column you want to use on this block. 1 Block represents  4 column.
  2. CSS Box
    Set css attribute for block link.

 

Yo!Web – Split Navigation

General Tab

  • Menu to Include
    Include menu into split navigation.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this split navigation. 1 Block represent 4 column.
  2. CSS Box
    Set css attribute for split navigation.

 

2. Yo!Web – Module


As you can see on the image below, on Yo!Web – Module group tab we provide several Visual Composer elements that you can use.

Please check the following explanation below about Visual Composer element on Yo!Web – Module group tab :

General Option of Yo!Web – Module Block

Header Tab

  1. Title
    Insert text for main title of module block.
  2. Second Title
    Insert text for secondary title of module block.
  3. Title URL
    Insert url link for title of module block.
  4. Header Type
    Choose header type for module block.
  5. Header Background
    Set background color of header module block. Please note, this option may not work on certain header type.
  6. Header Text Color
    Set text color of header module block. Please note, this option may not work on certain header type.

Header Filter Tab

  1. Category
    Add category filter for header module block.
  2. Author
    Add author filter for header module block.
  3. Tags
    Add tag filter for header module block.
  4. Default Text
    Insert text for first filter item of heading filter.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of module block.
  2. Number of Post
    Set number of post for content module block.
  3. Post Offset
    Set number of post offset (start of content) of module block.
  4. Include into Unique Content Group
    Choose unique content option, and this module will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content module block. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content module block. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for content module block.
  8. Exclude Category
    Exclude which post category that you don’t want to show for content module block.
  9. Author
    Choose which post author that you want to show for content module block.
  10. Include Tags
    Include which post tags that you want to show for content module block.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for content module block.
  12. Sort By
    Choose sorting method for content of module block.

Content Setting Tab

  1. Content Date Format
    Choose date format for content of module block.
  2. Custom Date Format
    Set custom date format for content of module block. Please note, this option will appear and work if you choose Custom Format on Content Date Format option above.
  3. Excerpt Length
    Set the number of word length for post excerpt.

Pagination Tab

  1. Choose Pagination Mode
    Choose pagination mode for module block.
  2. Pagination Post
    Set the number of post to load during pagination request. Please note, this option will appear and work if you’re not choose No Pagination on Choose Pagination Mode option above.
  3. Auto Load Limit
    Set the limit of auto load when scrolling. Set to zero (0) to always load until end of content. Please note, this option will appear and work if you’re not choose Auto Load on Scroll on Choose Pagination Mode option above.

Design Tab

  1. Block / Column Width
    Please choose width of the column you want to use on this block. 1 Block represents 4 column.
  2. CSS Box
    Set css attribute for slider.

 

3. Yo!Web – Hero


As you can see on the image below, on Yo!Web – Hero group tab we provide several Visual Composer element that you can use.

Please check the following explanation below about Visual Composer element on Yo!Web – Hero group tab :

General Option of Yo!Web – Hero Block

Hero Setting Tab

  1. Hero Margin
    Set margin for each hero item. Please note, this option not available for Yo!Web – Hero 14.
  2. Hero Style
    Choose style for the current hero. Please note, this option not available for Yo!Web – Hero 14.
  3. Choose Date Format
    Choose date format for content of slider.
  4. Custom Date Format
    Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of hero block.
  2. Number of Post
    Set number of post for content hero block.
  3. Post Offset
    Set number of post offset (start of content) of hero block.
  4. Include into Unique Content Group
    Choose unique content option, and this hero will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content hero block. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content hero block. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for content hero block.
  8. Exclude Category
    Exclude which post category that you don’t want to show for content hero block.
  9. Author
    Choose which post author that you want to show for content hero block.
  10. Include Tags
    Include which post tags that you want to show for content hero block.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for content hero block.
  12. Sort By
    Choose sorting method for content of hero block.

Hero Design Tab

  1. Hero Height on Desktop
    Set height on pixel in px for desktop, leave empty to use default number.
  2. Hero Height on 1024px Width Screen
    Set height on pixel in px for 1024px width screen, leave empty to use default number.
  3. Hero Height on 768px Width Screen
    Set height on pixel in px for 768px width screen, leave empty to use default number.
  4. Hero Height on 667px Width Screen
    Set height on pixel in px for 667px width screen, leave empty to use default number.
  5. Hero Height on 568px Width Screen
    Set height on pixel in px for 568px width screen, leave empty to use default number.
  6. Hero Height on 480px Width Screen
    Set height on pixel in px for 480px width screen, leave empty to use default number.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this hero block. 1 Block represents 4 column.
  2. CSS Box
    Set css attribute for hero.

 

4. Yo!Web – Slider


As you can see on the image below, on Yo!Web – Slider group tab we provide several Visual Composer element that you can use.

Please check the following explanation below about Visual Composer element on Yo!Web – Slider group tab :

Yo!Web – Slider 1 – 2

General Tab

  1. Enable Autoplay
    Check this option to enable auto play slider.
  2. Autoplay Delay
    Set auto play delay of slider in mili second. Please note, this option will appear and work if you enable auto play slider option above.
  3. Choose Date Format
    Choose date format for content of slider.
  4. Custom Date Format
    Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of slider.
  2. Number of Post
    Set number of post for content slider.
  3. Post Offset
    Set number of post offset (start of content) of slider.
  4. Include into Unique Content Group
    Choose unique content option, and this slider will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for content slider.
  8. Exclude Category
    Exclude which post category that you don’t want to show for content slider.
  9. Author
    Choose which post author that you want to show for content slider.
  10. Include Tags
    Include which post tags that you want to show for content slider.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for content slider.
  12. Sort By
    Choose sorting method for content of slider.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this slider. 1 Block represents 4 column.
  2. CSS Box
    Set css attribute for slider.

 

Yo!Web – Slider 3

General Tab

  1. Number of Column
    Set number of carousel item column on each slide.
  2. Enable Autoplay
    Check this option to enable auto play slider.
  3. Autoplay Delay
    Set auto play delay of slider in mili second. Please note, this option will appear and work if you enable auto play slider option above.
  4. Choose Date Format
    Choose date format for content of slider.
  5. Custom Date Format
    Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of slider.
  2. Number of Post
    Set number of post for content slider.
  3. Post Offset
    Set number of post offset (start of content) of slider.
  4. Include into Unique Content Group
    Choose unique content option, and this slider will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for content slider.
  8. Exclude Category
    Exclude which post category that you don’t want to show for content slider.
  9. Author
    Choose which post author that you want to show for content slider.
  10. Include Tags
    Include which post tags that you want to show for content slider.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for content slider.
  12. Sort By
    Choose sorting method for content of slider.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this slider. 1 Block represents 4 column.
  2. CSS Box
    Set css attribute for slider.

 

Yo!Web – Slider 4

General Tab

  1. Enable Autoplay
    Check this option to enable auto play slider.
  2. Use Full-Size Image
    Check this option to enable full-size image instead of cropped version.
  3. Autoplay Delay
    Set auto play delay of slider in mili second. Please note, this option will appear and work if you enable auto play slider option above.
  4. Choose Date Format
    Choose date format for content of slider.
  5. Custom Date Format
    Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of slider.
  2. Number of Post
    Set number of post for content slider.
  3. Post Offset
    Set number of post offset (start of content) of slider.
  4. Include into Unique Content Group
    Choose unique content option, and this slider will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for content slider.
  8. Exclude Category
    Exclude which post category that you don’t want to show for content slider.
  9. Author
    Choose which post author that you want to show for content slider.
  10. Include Tags
    Include which post tags that you want to show for content slider.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for content slider.
  12. Sort By
    Choose sorting method for content of slider.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this slider. 1 Block represents 4 column.
  2. CSS Box
    Set css attribute for slider.

 

Yo!Web – Slider Overlay

General Tab

  1. Enable Fullscreen
    Check this option to enable full screen slider.
  2. Show Navigation
    Check this option to show next and prev button to navigate slider.
  3. Overlay Option
    Choose overlay type that you want to use for slider.
  4. Normal Overlay Color
    Set overlay color for slider. Please note, this option will appear and work if you choose Normal Overlay on Overlay Option above.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of slider.
  2. Number of Post
    Set number of post for content slider.
  3. Post Offset
    Set number of post offset (start of content) of slider.
  4. Include into Unique Content Group
    Choose unique content option, and this slider will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for content slider.
  8. Exclude Category
    Exclude which post category that you don’t want to show for content slider.
  9. Author
    Choose which post author that you want to show for content slider.
  10. Include Tags
    Include which post tags that you want to show for content slider.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for content slider.
  12. Sort By
    Choose sorting method for content of slider.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this slider. 1 Block represents 4 column.
  2. CSS Box
    Set css attribute for slider.

 

5. Yo!Web – Carousel


As you can see on the image below, on Yo!Web – Carousel group tab we provide several Visual Composer element that you can use.

Please check the following explanation below about Visual Composer element on Yo!Web – Carousel group tab :

General Option of Yo!Web – Carousel

General Tab

  1. Show Nav
    Check this option to show navigation on carousel.
  2. Number of Item
    Set number of carousel item to show on each slide.
  3. Item Margin
    Set margin for each slider item.
  4. Enable Autoplay
    Check this option to enable auto play slider.
  5. Autoplay Delay
    Set auto play delay of slider in mili second. Please note, this option will appear and work if you enable auto play slider option above.
  6. Choose Date Format
    Choose date format for content of slider.
  7. Custom Date Format
    Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of carousel.
  2. Number of Post
    Set number of post for content carousel.
  3. Post Offset
    Set number of post offset (start of content) of carousel.
  4. Include into Unique Content Group
    Choose unique content option, and this carousel will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
  5. Include Post ID
    Include post id that you want to show for content carousel. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  6. Exclude Post ID
    Exclude post id that you don’t want to show for content carousel. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
  7. Include Category
    Include which post category that you want to show for content carousel.
  8. Exclude Category
    Exclude which post category that you don’t want to show for content carousel.
  9. Author
    Choose which post author that you want to show for content carousel.
  10. Include Tags
    Include which post tags that you want to show for content carousel.
  11. Exclude Tags
    Exclude which post tags that you don’t want to show for content carousel.
  12. Sort By
    Choose sorting method for content of carousel.

Design Tab

  1. Block / Column Width
    Please choose width of the column you want to use on this carousel. 1 Block represents 4 column.
  2. CSS Box
    Set css attribute for carousel.

 

Author Box

With Yo!Web, we allow you to add nice author box that contains the information of the post author (user profile). This author box will be shown on each single blog post at the bottom of the content.

To modify the content of this author box, please go to WordPress Admin → Users → Your Profile then you can insert your information on the Contact Info and About Yourself section. You also can setup your Profile Picture on Gravatar.

If you don’t want it, Author Box can be disabled on certain post or even for all post. Please follow the instruction below about disabling the Author Box :

  • Disable Author Box on Certain Post
    To disable author box on certain post, you will need to disable Show Post Author option on Single Post Setting.
    For more complete information, you can follow this link and jump into Single Post Setting section.
  • Disable Author Box on All Post
    To disable author box for all post, you will need to disable Show Post Author option on Single Post Option.
    For more complete information, you can follow this link and jump into Single Post Option section.

Shortcode Builder

We also have a shortcode generator feature that you can use to generate the shortcode elements of Yo!Web. Please check the following images below:

Classic Editor


 

Gutenberg


 

We provide you System Status report on Yo!Web Dashboard. In there you can check your theme information, WordPress environment, server environment and currently activated plugins on your site.

When you want to ask for support in our support forum, you could attach this information. Also please note, we highly recommend you to follow Yo!Web system requirements to make all process running as expected for better site performance.

There’re a few things that we’ll explain to you on this part :

  1. WP Debug
  2. Memory Limit
  3. Max File Upload

1. WP Debug


WP_DEBUG is a PHP constant that can be used to trigger the “debug” mode throughout WordPress. WP_DEBUG provides a handy way to troubleshoot problems when something goes wrong on your site.

Also, it’s important to know that WP_DEBUG should not be used on a live site.

You can find WP_DEBUG on wp-config.php file that located in the WordPress root directory. WP_DEBUG is set to false by default.

2. Memory Limit


In case to avoid exhausted memory size error in WordPress, you need to increase memory limit value. This thing also recommended from WooCommerce plugin when you’re using them on your site. You can setting the memory limit to at least 64MB (recommended: 128M).

Custom Post Template

There are a few things that we will explain to you on this section that related to creating a custom post template:

  1. Create New Template
  2. Global Post Template
  3. Override Post Template

 

1. Create New Template


Firstly you will need to create a new template. You just need to go to WordPress Dashboard > Post Template > Add New. We already provide specify elements for custom post template. You can find the element under Post Template element category.

 

You can use this WPBakery content as an example:

 

2. Global Post Template


After making a custom post template for the single post then you need to set up the Single Post Setting option. Firstly you need to go to Customizer > Yo!Web : Single Post Option > Single Post Option. In there, you will find Single Blog Post Template section. Please check this image below for detail:

 

3. Override Post Template


You can set the custom post template for specific post. Firstly you need to go edit a certain post. On the post editor dashboard, you will find Yo!Web : Single Post Setting meta box. Please check this image below for detail:

Custom Archive Template

There are a few things that we will explain to you on this section that related to creating a custom category template:

  1. Create New Template
  2. Global Category Template
  3. Override Category Template
  4. Archive Template

 

1. Create New Template


Firstly you will need to create a new template. You just need to go WordPress Dashboard > Archive Template > New Archive Template. We already provide specify elements for custom category template. You can find the element under Archive Template element category.

 

You can use this WPBakery content as an example:

 

2. Global Category Template


After making a custom archive template for the category then you need to set up the Global: Category Template option. Firstly you need to go to Customizer > Yo!Web: Category Template > Category: Global Template . In there, you will find Category Page Layout option. Please check this image below for detail:

 

3. Override Category Template


You can set the custom archive template for a specific category. If you are using Yo!Web – Customize Detail Category plugin, Firstly you need to go to Customizer > Yo!Web: Category Template, select the category. In there, you will find the Category Page Layout option. Please check this image below for detail:

If you are using the Yo!Web – Extended Category Option plugin, Firstly you need to go edit certain post categories. On the category dashboard, you will find Override Category Setting meta box. Please check this image below for detail:

 

4. Other Archive Template


You can set the custom archive template for another archive template (Author Template, Archive Template). Firstly you need to go to Customizer > Yo!Web: Other Template. In there, you will notice a list of other archive template. Please check this image below for detail:

Loading...