docs

Remove tab filter on section of pagebuilder

Remove tab filter on a section of page builder:

  1. Navigate to page builder setting.
  2. Chose a section and click Edit
  3. Tab to FilterSettings.
  4. In “Navigation Type” select “I do not want to use this feature”

docs

How to setup HsBlog Sidebar for Homepage Layouts?

HsBlog supported Right Sidebar, Left Sidebar option. If you don’t want to use any sidebar on a layout, You can select No Sidebar option.

A Common Sidebar is a special Sidebar option, It allows you to use a sidebar on multiple-layouts.

Please watch the following video to learn more about HsBlog Sidebar:

Please watch the video below:

docs

Discovering Layout Section Settings

Editing a layout in HsBlog Web Builder

Navigate to: Appearance > Page > All Pages > HsBlog Builder

Select Section > Click to Edit Section

1 – General Settings

Select Section > Click to Edit Section > GeneralSettings

  1. Heading: Here, you can enter in the Heading of this section
  2. Description: It’s for Web version only.
  3. Lazy load?: Web Only. What’s Lazy Load? Please read https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video

Backend Editing

Frontend View

2 – Filter Settings

Select Section > Click to Edit Section > FilterSettings

  1. Post type: Pickup a post type you want to use
  2. Number of posts: Maximum posts can be shown up on this section
  3. Oder By: Specify a type of post order.
  4. Category/Tag/Type: If you specify Category, Tag, HsBlog will get posts in these categories, tags only.
  5. Mark Navigation: Specify what Taxonomy will be used on Navigation. (Category, Tags, Type are called Taxonomy)
  6. Navigation Type: You can enable/disable Navigation here. If you want to Enable the navigation, there are 2 options: Categories / Tags that picked up at step 4 will be used or its children will be used.

3 – Sidebar Settings

Select Section > Click to Edit Section > SidebarSettings

  1. Sidebar Position. There are 5 options:
    – Nosidebar
    – Right sidebar
    – Left sidebar
    – Open common sidebar: We will setup a sidebar here and all sections that below this section will use this sidebar if they are using Inherit common sidebar
    – Inherit common sidebar: Using the sidebar that defined above section
  2. Select Sidebar: Select sidebar want to use

Back-end Edittings

Front-end

4 – Slider Settings

Select Section > Click to Edit Section > SliderSettings

  1. Auto play: Enable autoplay mode
  2. Infinite: Infinite slides
  3. Arrows: Enable next, prev arrows for slider
  4. Dots: Enable slider dots
  5. Swipe: Allow swipe
  6. Center mode
  7. Center padding
  8. Slides to Show: How many slides to show in one frame
  9. Slide to Scroll: How many slides to scroll at once
  10. Speed: Animation speed in milliseconds
  11. Autoplay Speed: Delay between each auto scroll (in milliseconds)

Please click on https://kenwheeler.github.io/slick/ to know more about the above settings

Back-end:

Front-end

5 – Style Settings

Select Section > Click to Edit Section > StyleSettings

docs

Building your Home Page with HsBlog Web Builder

In HsBlog, We created a page builder ourselves. It helps you can easily set up a Home page for website and Home screen for App.

Step 1: Creating a new page builder.

  1. From the sidebar, Click on Pages
  2. Then, Click on Add New
  3. Now, enter in a page name (EG: Homepage)
  4. In “Page Attributes“ box, set Page Template to Blog builder template
  5. Click on Publish button
  6. Finally, Click on Edit With HSBlog Web Builder

Step 2: Adding a new section to page builder and setting up for it.

  1. There are 2 areas on HsBlog builder: Left Side and Right Side. All pre-built Sections are shown up on Left Side. The Right Side contains Sections that are using on that page.
  2. Select a Section that you want to use and Drag to Right Side area. Notice that you can re-order a Section by using the Drag-Drop feature.
  3. Click Edit Section to modify section setting.
  4. After finishing your setting, Click on OK and then click on Save button
  5. You can click on Preview button (Bottom Left corner) to preview your page builder

Warning: In order to use HsBlog Builder, the Page Attributes must be set to Blog Builder and It should always be open

docs

How to settings Navigation Header?

Please do the following steps to setup Navigation and Sub Navigation on header layout:

  1. Click Appearance
  2. Click Theme Options
  3. Click Header settings

Setting up Navigation Header:

  1. Click Appearance
  2. Then, click on Theme Options
  3. Navigate to Header settings
  4. Click on Navigation settings

Setting up Sub Navigation Header:

  1. Click on Appearance
  2. Then, click on Theme Options
  3. Navigate to Header settings
  4. Click on Navigation settings
  5. Here you can setup Sub Navigation on the footer section

docs

What is Post Block And How to settings Post Block?

This Step we will answer for the question: What is Post Block Header And How To Settings Post Block?

Please click Appearance > Theme Options > Header settings > Post blog settings

1 – What is Post Block?

  • Post block is a block on Header.
  • Post block is a Post-Slider.
  • Post block – maybe show Popular posts, Trending posts, The most comments posts, The most views posts, The most view on week…. or Some Specify post (you can choose any post).

– Post Block style 1

– Post Block style 2

2 – How to settings Post Block ?

  1. Title – Setting title for post block (ex: Trending Posts).
  2. Get Posts By: Entry posts or Specify posts – Entry Posts: We will filter posts with ‘Order By’ settings end ‘Order’ settings. Specify Posts: You can choose any posts on store and settings theme on ‘Pickup Posts’ settings under.
  3. Order By, Order: Settings post filter if ‘Get Posts By’ settings is Entry posts.
  4. Post Number: Settings number of Post block.
  5. Background Color, Border…: settings style for Post block.

3 – How to change the type of Post on Post Block

  1. Click Appearance.
  2. Click Theme Options.
  3. Click Header settings.
  4. Click Post Block Settings.
  5. On Block style chose a type of post you want to use.

docs

How to settings Logo Block Header?

This Step is settings Logo block Header:

  1. Click Appearance
  2. Click Theme Options
  3. Click Header settings

Steps to settings:

Note: Logo Image is settings on the General settings logo.

Advertisement: Enable/ Disable setting Advertisement. Leave empty if you want to disable image Advertisement and logo image has a center alignment of the block.

docs

What is Featured Block Header And How To Settings it?

What is the “Featured Block Header” And How To Settings Featured Block?

Header Block

To setup Header Block, please do the following steps:

  1. Click Appearance
  2. Then click on Theme Options
  3. Navigate to the Header settings tab
  4. Click to Header Block

1 – What is Featured Block?

  • The featured block is a block on Header.
  • Featured block maybe a Slider posts or an Advertisement Image or an Advertisement Video.
  • Featured block – Slider posts maybe show: Popular posts, trending posts, the most comments posts, the most views, the most view on the week

1. Featured Block type: Slider Post

2. Featured Block type: Ads Image

3. Featured Block type: Ads Video

2 – How to setup Featured Block?

  1. Click Appearance
  2. Click Theme Options
  3. Click Header settings
  4. Click Featured Block Settings

3 – How to change the type of Featured Block?

  1. Click Appearance.
  2. Click Theme Options.
  3. Click Header settings.
  4. Click Featured Block Settings.
  5. On Layout type chose a type of Featured block you want to use.

docs

How to add/remove header block?

Please do the following steps to add/remove one or more header layout and setting background for the header:

  1. Click on Appearance
  2. Then, click on Theme Options
  3. Navigate to Header settings

How to add /remove one or more header blocks?

  • Drag items you want to use to Enable area 
  • To remove an item from Header, drag it to Disable area

How to set the background for the header?

  • Background: Choose a background image or background color for the header.
  • RGBA Background Overlay: Choose a color is an overlay for the background image of the header.