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.

    Pagination

    Different type of content blocks pagination
    Different type of content blocks 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

    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!

    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

    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.

        Remember

        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.

          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).

            Some blocks have more than one title length

            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)

            Category badge

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

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

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

            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.