publisher content blocks

Block Pagination & Slider

When you add a new content block as described in How to use content block?, a modal shows up with some tabs. Most of them are common between content blocks but there are exceptions like Slider content blocks. There is an option for showing more posts as slider in other blocks, so slider concept is some kind of common between all blocks. In this section we describe Pagination and Slider.

 We have “Slider” content block  and also “Slider pagination” for non-slider content blocks. Their options are similar.


Different type of content blocks pagination
Different type of content blocks pagination


When you use Ajax, new posts will be loaded in the same page without reloading the page. It saves time and increases performance. There are several paginations for Ajax content loading:

1- Next Prev buttons: Displaying a pair of simple buttons labeled Next and Prev. Click on them to load new content in the same page.

2- Load more button: The only different with the former is button. Here just one Load More button is displaying.

3- Load more button + infinity loading: Click the Load More button then scroll the page; the posts will load infinitely.

4- Infinity loading: Just scroll the page to load more content.


Slider content block pagination

By selecting slider pagination, new content will display as slider. We describe options in more detail.

1- Number of slides: How many slides you want to create and display.

Pay attention to number of selected posts. For example in Post Filter, you selected 4 posts by ID or selected a category which contains 4 posts, also each slider shows 4 posts; now there would be no slider show, because there are not enough posts for that.

2- Animation Speed: The time animation endures (in millisecond).

3- AutoPlay: If you set it off, changing slides is just possible by clicking next and previous buttons.

4- Slide Duration: The time every slide is displaying (in millisecond).

5- Display Dot Navigation: Show some dots on slider to notify which slider you are seeing.

6- Display Control Navigation: Show buttons for changing between sliders.

If you select “off” in option 3, and select “Don’t Show” for options 5 & 6, then switching between sliders in only possible by grabbing it and slide to right and left without any visual sign!


In simple mode, by loading new content, the page reloads too. It could be a little annoying and time consuming for visitors. By the way there are two options for that:

1- Simple Numbered Buttons: Shows an array of simple numbered buttons. Click on them, new content and new page will load.

2- Simple Next Previous Buttons: Show two buttons for loading newer and older posts.

When you select simple pagination, it navigates you to homepage archive, with a permalink like this It means, this page is archive page of all your posts. You may selected specific taxonomy for your content block but buttons navigate you to posts archive.

Slider Content Block

Slider tab for content blocks

If you select Slider content block you will see a tab labeled Slider. We describe its options.

1- Animation: Choose between two effect for changing slides: fade or slide.

2- Slideshow Speed: The time every slide is displaying (in millisecond).

3- Animation Speed: The time animation endures (in millisecond).

Other tabs in slider content block are the same as other content blocks.

Blocks Typography Setting

In theme panel you can easily manage typography of Publisher content blocks. Setting items are the same in all blocks typography but every block has its own panel.

In theme panel go to Publisher → Theme Options → Typography → Block & Listing Typography. Here you can see a list of all the blocks that have typography setting.

content blocks typography options

They all have the same options in three different parts:

  1. Heading
  2. Paragraph
  3. Divided

And options are:

  • Font Family: Select a font from existing ones or upload a custom font.
  • Font Weight
  • Font Character Set
  • Text Align
  • Text Transform
  • Font Size
  • Line Height
  • Letter Spacing
  • Color

If you don’t know what above options mean, read Typography Options. By changing above options, left hand-side text changes and shows you current typography.

Blocks Tabs

Multi Tabs

When you add a new content block as described in How to use content block?, a modal shows up with some tabs. One of them is Multi Tabs. Follow to know how to use multiple tabs this new content block.

Below image is an example of blocks tabs. When you select an option for multi tabs other than No Tab, one or more tabs appear on the header of the block. Keep reading, we describe it in more details.

This is how blocks tabs look like
This is how tabs look like

Categories as Tab:

Select categories as tab

1- Selected Categories as Tab: Select the category you want to display under the tab or select several categories by holding CTRL key (COMMAND in Mac). These categories have nothing to do with those selected in Posts Filter.

2- Tabs content type: When you select Differed Content, content of the tabs won’t be downloaded till the moment the visitor clicks on them. In this way the page loads faster because less content would be downloaded. There is a probability some of the visitors never click on these tabs, then why should they download the content?

However if you insist on downloading all the content by all visitors, select Preloaded Content.

Sub Categories as Tab:

Select sub categories as tab

When you select this, automatically sub-categories of primary category selected in the Posts Filter will be the tabs.

Taxonomies as Tab:

Select taxonomies as tab

You can select some taxonomies to show them as tabs. Enter custom taxonomies with “taxonomy:term_id” pattern also separate multiple taxonomies with commas. ( ex: genre:200,genre:212,writer:120 ). So you can use tags as a taxonomy for blocks tabs; enter it as “tag:99” which shows tag with ID 99. Read How to Find Post, Category or Tag ID.


1- When you want to show blocks tabs, “Heading” should be visible. See below image.

Show content block heading

2- If you select many tabs, some of them, depending on block width, go under “All” item.

Blocks Design

Design Options

When you add a new content block as described in How to Use Content Blocks?, a modal shows up with some tabs. One of them is Design options. Follow to know how to customize content blocks design.

Content blocks design

1- Show on Desktop: Show/hide this block on desktop computers.

2- Show on Tablet Portrait: Show/hide this block on Tablets Portrait.

3- Show on Phone: Show/hide this block on phones.

4- Custom CSS Class: If you want to define custom CSS rules for this block, you can assign a class to it then assign rules to this class in Publisher → Theme Options → Custom CSS. You can add as many as classes you want and separate them by spaces. Read more about Custom CSS.

5- Custom ID: If you want to define custom CSS rules for this block, you can assign an ID to it then assign rules to this ID in Publisher → Theme Options → Custom CSS. You can assign just one ID.

6- Override Listing Settings?: If you toggle this to on, you see block global settings previously described in Blocks Settings. Now in Blocks Design you can override global options for this specific block.

7- CSS box: Here is a very user friendly menu for customizing CSS options of this block. You can assign different CSS properties here; margin, border-width, padding, background, etc.

NOTE: When you select a border color, do not forget to select border width in left hand-side scheme.

How to Use content Blocks

How to Add a New Content Block?

Edit your page and add as many as content blocks you desire. If you don’t know how, follow steps below.

1- In theme panel go to Pages → All Pages, edit the page you want to customize or add a new page by clicking Add New at top of the page (I add a new page).

2- Here you see three Add items (red rectangular in image below). If you don’t know how to start working with Visual Composer(VC), there is a link knowledge base (yellow rectangular) click on that and read about working with VC on its website.

Add new items by Visual Composer

3- For adding content blocks, click on Add Element, then you will see a modal showing up like below

select content block

4- Scroll this list and select the block you want to use. If you didn’t select one, see Publisher Blocks.

5- Now a modal (pop-up) shows up (see below image). Every tab and option in this modal will be explained in next sections of Homepage blocks. So for more information read those sections.

content block setting modal

How to Manage Content Blocks Location?

Content blocks managing with VC is very user friendly (follow VC tutorials for learning more about working with VC or follow VC video tutorials).

Change location of a block: For changing location of a block, drag and drop it as showed in below gif

replacing content blocks in visual composer

Add blocks side by side: Hover the icon showed in below gif and select what the pattern you want

Change columns number in visual composer

Add an empty location: Click on + icon to add an empty column. Add a new content block to it or drag and drop an existing one.