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.

Pagination

Ajax

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

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!

Simple

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 www.domain.com/page/2/. 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

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 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:

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:

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

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.

Remember

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

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.

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.

Blocks Settings

Publisher exclusive content blocks have a global setting panel. This panel assigns default options for blocks; for all the same blocks. However these settings can be overridden for every block in pages. Here we describe the global blocks settings, in the Blocks Design section we talk about overriding global setting in single block.

How to Change Global Blocks Settings?

In theme panel go to Publisher → Theme Options → Blocks and Listings, here you can see the list of all blocks. Most of the options are common between blocks. Regardless of what block has which options, we describe all of them briefly in one place, if your desired block has the option, then you know about it if it hasn’t, just leave it and go ahead.

Content blocks settings — These options are nearly the same in all content blocks

1- Title Length: Set the length of post title. Some of blocks display posts in several sizes, then title length of every post could be assigned individually (ex: Modern Grid 1).

2- Post Excerpt: There are two options for it: Displaying excerpt or not. If it displays, set the length of it.

3- Post Format Icon: Show/hide post format icon (Standard, Video, Gallery, Audio, Aside, Image, Quote, Status, Chat, Link).

4- Category Badge: Select to display category or tag badge(s); also select number of badges to display (up to 15). (It is possible to select custom taxonomy as badge)

5- Post Meta: If you select to display post meta, there are items for displaying:

Author: Author’s name
Date: Date of publishing
Views: Number of views (require “Better Post Views” plugin)
Shares: Number of shares (require “Better Social Counter” plugin)
Comments: Number of comments
Review: Reviews score (require “Better Reviews” plugin)

6- Read More Button: Display a button for reading complete article. Some blocks have this option.

Blocks Query Settings (Post Filter)

Post Filter

When you add a new content block as described in previous section, a modal shows up with some tabs. The most important one is Post Filter. Keep reading to know how to customize contents of this new block.

1- Categories: Select categories or sub-categories you want to show (green check) or which ones you want to hide (red cross). If no category is marked, all of them will be considered as selected.

2- Tags: Select tags you want to show. Combination of tags and categories are allowed (rules describe in options number 14, 15 and 16 on this page)

3- Number of Posts: Select how many posts you want to show in this block. If the field left empty, automatically selects the number from WordPress Setting → Reading.

4- Post ID filter: If you want to show some specific posts in this block, enter post IDs here separated by commas (ex: 10,27,233). If you want to exclude some posts from this block, enter their IDs here with “-” (ex: -7,-16). To find IDs read How to Find Post, Category or Tag ID.

5- Offset posts: Start the count with an offset. If you have a block that shows 4 posts before this one, you can make it starts from the 5’th post (by using offset 4).

6- Only Posts With Featured Image? Select on then just posts with featured image show up.

7- Remove Sticky Posts? By enabling this, sticky posts wouldn’t be sticky anymore in this block. They just show in ordinary order.

8- Post Author ID filter: Enter IDs of authors you want to show their posts. Separate IDs by comma (ex: 10,27,233). Exclude one or some authors from this block by entering “-” before ID(s) (ex: -7,-16).

9- Disable Duplicate Posts Removal: By enabling this option, duplicate posts removal feature will be disabled only for this block.

10- Time Filter: Select among posts published in specific period (Today Posts, Today + Yesterday Posts, This Week Posts, This Month Posts, This Year Posts).

11- Order: Select order of showing posts (Descending, Ascending)

12- Order By: Select a factor to order posts by. Options are: Published Date, Modified Date, Random, Number of Comments, Title, Popular, 7 Days Popular.

“Popular” and “7 Days Popular” are only available if you activated “Better Posts View” plugin. You don’t have this plugin? read Publisher Plugins.

Custom Post type and Taxonomy

13- Custom Post Type: Enter post type IDs separated by commas ( ex: book,movie,product ). With this option you can add, for example, WooCommerce products to your content block.

14- Custom Taxonomy: Enter custom taxonomies with “taxonomy:term_id” pattern, also you can separate multiple taxonomies with commas. ( ex: genre:200,genre:212,writer:120 ). “Category” & “Tag” are two taxonomies supported by default; if you have another taxonomies, enter their name with “term_id”. Finding “term_id” is similar to finding tags and categories IDs.

Query Conditions

15- Between Cats & Tags: Set a relation between tags and categories. If you choose And (both Cats & Tags) all Cats and Tags selected in options 1 & 2 should be included in the post. By choosing OR (One or more cat/tag), it’s enough for the post to just obey Cats rule (option 15) or Tags rule (option 16).

16- Between Cats: Set a relation between categories. If you choose And (All Cats) all Cats selected in option 1 should be included in the post. By choosing OR (One or more cat), it’s enough for the post to just include one of them.

17- Between Tags: Set a relation between tags. If you choose And (All Tags) all Tags selected in option 2 should be included in the post. By choosing OR (One or more tag), it’s enough for the post to just include one of them.

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.

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

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.

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

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

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.

Publisher Blocks

What are Publisher Blocks and Listings?

Publisher uses content blocks for making pages. This is a very flexible method for creating awesome pages and provides a wide customizability. Use Visual Composer(VC) plugin to manage these content blocks in your pages; “Pages” means all post types. Most of Publisher blocks are exclusively designed for Publisher theme.

Publisher provides you nearly 80 exclusive add-ons for free (58 content blocks and 19 widgets). Publisher add-ons cover large range of styles and functionalities and also are fully customizable.

Here is the list of Publisher content blocks:

Mix Listing (18 item)
Modern Grid Listing (10 item)
Slider Listing (3 item)
Blogs Listing (5 item)
Classic Listing (3 item)
Tail Listing (2 item)
Grid Listing (2 item)
Thumbnail Listing (3 item)
Text Listing (4 item)
Box Block (4 item)
YouTube and Vimeo Block (4 item)

If you want to see demos of the Publisher content blocks, go to http://demo.betterstudio.com/publisher/ and in main menu go to Features → Content Blocks, look at below image

Now by clicking on every block, you see a demo of that. For example click on Blog 4.

At the top of the page you see a full list of content blocks.

Take a tour in these content blocks and choose which one you want to use for your homepage (or other pages). Then read How to use content blocks.

A Note About “Mix” Blocks

“Mix” blocks are mixture of other blocks. Knowing this is important when you want to change, for example, typography in these blocks. There is no separate option for “Mix” blocks typography and changes should be applied to original blocks. For example in “Mix 1”, big item inherited from “Grid Listing 1” and small items are from “Thumbnail listing 1”. So change typography options for those blocks to apply changes in “Mix 1” block.

Block name	Big item	Small item
Mix 1	Grid Listing 1	Thumbnail listing 1
Mix 2	Grid Listing 1	Thumbnail listing 2
Mix 3	Grid Listing 1	Text listing 2
Mix 4	Grid Listing 1	Thumbnail listing 2
Mix 5	Grid Listing 1	Thumbnail listing 1
Mix 6	Grid Listing 1	Text listing 2
Mix 7	Grid Listing 1	Thumbnail listing 1
Mix 8	Grid Listing 1	Thumbnail listing 2
Mix 9	Grid Listing 1	Text listing 2
Mix 10	Modern Grid 3	Thumbnail listing 1
Mix 11	Classic Listing 3	Grid Listing 1
Mix 12	Classic Listing 3	Grid Listing 1
Mix 13	Classic Listing 2	Grid Listing 1
Mix 14	Classic Listing 2	Grid Listing 1
Mix 15	Classic Listing 2	Classic Listing 2
Mix 16	Classic Listing 2	Classic Listing 2
Mix 17	Classic Listing 3	Blog listing 1
Mix 18	Classic Listing 2	Thumbnail listing 1

Sticky Sidebar

What is Sticky Sidebar?

Let’s say you have a 500px high sidebar and your page height is 2000px, what happens if you scroll the page 1000px? Yes there would be no sidebar and just a blank space at side of the page. By activating Sticky Sidebar, your sidebars become intelligent, stick to the page and never leave it! Scroll through Publisher Demo and observe sidebars behavior.

How to Activate Sticky Sidebar?

Go to Publisher → Theme Options → General → General → Sticky Sidebar, click on the drop-down menu and select Enable.

Click Save Options and you are done, sidebars are sticky now.

Sticky Columns in Visual Composer

For adding this feature to Visual Composer columns, click on edit icon in top of columns and in opened popup add sticky-column class to the Extra class name field and save changes.

NOTE: Be careful when your make Visual Composer blocks sticky; Sticky is for sidebars, if you make main content block sticky, it may interfere with other elements.

Caution: Do not use Google Adsense in sticky blocks. If Google knows about it, your website gets penalty; the penalty could be banning your website from Google Ads system. Decreasing your organic search percent might be another consequence (not confirmed). Generally, make sure your ad system is OK with using ads in sticky blocks. Otherwise, do not use ads in sticky blocks.

Blocks and Listings

What are Blocks and Listings?

Publisher uses Visual Composer(VC) plugin as page builder to build awesome pages. The most sophisticated feature of VC is its add-ons. Add-ons increase VC abilities and options. You can buy VC add-ons on its website but Publisher provides you 80+ add-ons for free. Publisher add-ons (i.e blocks and listings) cover large range of styles and functionalities and also are fully customizable.

How Can I Customize Blocks and Listings?

There is a general option panel for Block and Listing; when you change these options, you see the changes in every where that block or listing is using. There is another option for every single widget that you create with VC in your page. The latter could override the first. OK we divide this customization into two parts:

General Options
Specific Options

A. General Options of Publisher Blocks and Listings

For example when you want to make changes to all Modern Grid 1 block in your website, go to general options. Options differs here block to block or listing to listing but generally these are the options:

Title Length
Excerpt Length (Subtitle Length for some blocks)
Post format icon (Standard, Video, Gallery, Audio, Aside, Image, Quote, Status, Chat, Link)
Category Badge
Post Meta (Author, Date, Views, Shares, Comments, Review)

General options are described in details in Block Settings.

B. Specific Options of Publisher Blocks and Listings

For specific options of a content block in Publisher, read Homepage Blocks to know more about all specific options.