Home Newspaper 7 Documentation Block settings tutorial

Block settings tutorial

Original article: http://forum.tagdiv.com/block-settings-guide/ - copied here for convenience

When you start building a website is important to use a structure that is suited for your content and delivers an optimal impact on your visitors. For each domain, there are some best practices accepted by developers. One such rule for News, Magazine, and other related sites is to display featured posts at the top of the page using large images and big, bold titles. In our themes, you can do this using the Big Grid blocks. They come in multiple formats and color styles.

In this guide, we will show you how to use and set the theme available Big Grid blocks. Each block can be added to the page using Visual Composer, for more information, please check the Page Builder documentation.
How to access the block settings area

When you add a Visual Composer block to a page, the block settings window will automatically pop-up. For better accessibility, the options are divided into sections (tabs) like General, Filter, Ajax or Pagination. If an element was previously added on the page, you could access its settings by pressing the Edit icon.

block-settings-pencil2

1) Big Grid Settings

All Big Grids have 2 Settings Tabs (General and Filter) from where you can customize them.

1. General Tab

  • Big Grid style - Each big grid comes in different styles. This option will change the appearance of the grid (including the hover effect).Big Grid Style Demo: click here to see a live demo of each style.
  • Offset posts - Start the count with an offset for the posts that will be displayed on the grid. If you have a block that shows 5 posts before this one, you can make this one start from the 6'th post (by using offset 5). This means you can make the big grid jump over a set number of posts to avoid duplication.
    The Big Grid Style Demos are available here.

td_block_settings_biggrid_gen

2. Filter TabFilter in depth using individual Posts ids, Categories, Tags, Authors, Post Types that you want to display on the Big Grid and a variety of custom sort order options.td_block_settings_biggrid_filter

  •  Post ID filter - Specific posts can be filtered to your block by using the post ID. You can get the post ID by accessing WP-admin > Posts section, hover the post title and check the link displayed on the browser left-bottom area. The IDs can be extracted from this URL. In order to exclude posts from a Big grid just add a ‘-’ symbol in front of each ID.

    Post_ID
    How to find the Post-ID
  •  Category filterChoose a specific category for the block from a drop-down menu containing all the existing categories.
  •  Multiple categories filterThis option allows you to filter the posts by multiple categories.
    The procedure is similar to the one used on Post Id filter. Add the category IDs separated by commas (ex: 13,23,18). If you want to exclude categories,  just add a ‘-’ symbol in front of each ID. If you want to display posts from a category and remove the posts included in one of it’s sub-categories, first add the parent category ID (ex. Fashion category: 341) and after it place the sub-category ID (ex. Daily subcategory id: 342) with a ‘-’ symbol in front, like it’s shown in the image. If you decide to use the ‘multiple categories filter’, the standard Category Filter will be ignored.
  •  Filter by tag slugFilter the grid posts by their tags and enter the tag slugs separated by commas (ex: tag1,tag2,tag3).
  •  Multiple authors filter - This allows you to filter the posts by author(s). Enter the author IDs separated by commas (ex: 13,23,18).
  •  Post type - Use this filter if you want to display custom post types. Add the name of the post type, this is provided by the plugin used to create the CPT, or by the user, if it’s custom-made. Usage: post, page, event - write 1 or more post types delimited by commas.
  •  Sort orderThis option lets you order the posts inside the grid. Most of these options are self-explanatory, but there are a few options that have requirements:
    • Popular (all time), or the 'random posts from the last 7 days' will require the post views to be active. If views are disabled, these options will not work.
    • Popular (last 7 days) - you have to enable this feature from Theme Panel > Block Settings > 7 Days Post Sorting - Please read this guide
    • Popular (jetpack + stats module required) Does not work with other settings/pagination and it requires Jetpack - Stats Module to be installed.
    • Featured - it displays posts included in the Featured category which is automatically created by the theme. If you delete this category and you want to restore it, simply create a new category with the name of 'Featured' and a slug 'featured'.
    • Highest rated - requires review posts, to see how you can set a review please check the following guide.
    • Most commented - requires comments to be active on posts. You can enable/disable the comments from Theme Panel > Post Settings > Post and Custom Post Types

td_block_sort_order_options

2. Block Settings

All blocks have 4 Settings Tabs from where you can customize them.

1. General Tab

  • Custom title for this block (optional) - set a title for this block, if you leave it blank the block will not have a title.
  • Title url (optional) - set a custom url for the block title, when the block title is clicked the page is redirected.
  • Title text color (optional) - choose a custom title text color for this block.
  • Title background color (optional) - choose a custom title background color for this block. The title background color also affects the hover color of the posts displayed as well as the Ajax filter hover color.
  • Border top (optional) - By default all the blocks have a border at the top. You may wish to remove that in some cases (like when the block it's the first in a sidebar)
  • *Color preset (background style) - Choose a color preset for this block. You can customize the presets in Theme panel -> Block settings. (*Newsmag only)
  • Limit post number - If the field is empty the limit post number will be the number from Wordpress settings -> Reading
  • Offset posts - Start the count with an offset. If you have a block that shows 5 posts before this one, you can make this one start from the 6'th post (by using offset 5)

td_block_settings_general

2. Filter Tab

td_block_settings_filter

  • Post ID filter - Specific posts can be filtered to your block by using the post ID. You can get the post ID by accessing WP-admin > Posts section, hover the post title and check the link displayed on the browser left-bottom area. The IDs can be extracted from this URL. In order to exclude posts from a Big grid just add a ‘-’ symbol in front of each ID.

    Post_ID
    How to find the Post-ID
  • Category filter - Choose a specific category for the block from a drop-down menu containing all the existing categories.
  • Multiple categories filter - This option allows you to filter the posts by multiple categories. The procedure is similar to the one used on Post Id filter. Add the category IDs separated by commas (ex: 13,23,18). if you want to exclude categories,  just add a ‘-’ symbol in front of each ID. If you want to display posts from a category and remove the posts included in one of it’s sub-categories, first add the parent category ID (ex. Fashion category: 341) and after it place the sub-category ID (ex. Daily subcategory id: 342) with a ‘-’ symbol in front, like it’s shown in the image. If you decide to use the ‘multiple categories filter’, the standard Category Filter will be ignored.
  • Filter by tag slug - Filter the grid posts by their tags and enter the tag slugs separated by commas (ex: tag1,tag2,tag3).
  • Multiple authors filter - This allows you to filter the posts by author(s). Enter the author IDs separated by commas (ex: 13,23,18).
  • Post type - Use this filter if you want to display custom post types. Add the name of the post type, this is provided by the plugin used to create the CPT, or by the user, if it’s custom-made. Usage: post, page, event - write 1 or more post types delimited by commas.
  • Sort order - This option lets you order the posts inside the grid. Most of these options are self-explanatory, but there are a few options that have requirements:
    • Popular (all time), or the 'random posts from the last 7 days' will require the post views to be active. If views are disabled, these options will not work.
    • Popular (last 7 days) - you have to enable this feature from Theme Panel > Block Settings > 7 Days Post Sorting - Please read this guide
    • Popular (jetpack + stats module required) Does not work with other settings/pagination and it requires Jetpack - Stats Module to be installed.
    • Featured - it displays posts included in the Featured category which is automatically created by the theme. If you delete this category and you want to restore it, simply create a new category with the name of 'Featured' and a slug 'featured'.
    • Highest rated - requires review posts, to see how you can set a review please check the following guide.
    • Most commented - requires comments to be active on posts. You can enable/disable the comments from Theme Panel > Post Settings > Post and Custom Post Types

td_block_sort_order_options

3. Ajax Filter Tab

  • Ajax dropdown - filter type - Display a list with Categories, Authors or Tags next to the title. The user will be able to see posts filtered on this block, that will be dynamical loaded with Ajax without leaving the page. The Ajax filters (except by popularity) require an additional parameter.
  • Ajax dropdown - show the following IDs - the Ajax drop down shows only the (author ids, categories IDs or tag IDs) that you enter here separated by commas. If no IDs are provided in the input below, the filter will show all the available items (ex: all authors, all categories etc..)
  • Ajax dropdown - Filter default text - lets you choose the name for the first item from the drop down Ajax list. By default this is named 'All'.
  • Ajax dropdown - content preloading - When the preloading section is active, the theme will load the first page content for each of the Ajax filters at the initial page load. You can read more about preloading here.

block-settings_05

 

td_block_settings_ajax_filter

4. Pagination Tab

  • Pagination Tab
  • Pagination - You can choose to add pagination to your block.
    • Next Prev - adds two navigation arrows that can be used to navigate through posts
    • Load More - the “Load more” button appears at the block bottom allowing users to load more posts
    • Infinite Load - automatically loads more posts when the user gets to the end of the post list displayed by the block
  • Infinite load show 'Load more' after x pages -  if you select infinite load you can use this option to make it stop after a number of pages, the “Load more” button will appear at the page bottom allowing users to load more posts.Notice: For the Infinite Load you will need to specify after how many pages a button will show up, otherwise it will load posts until they are finished.

Click here to see how pagination works.

 

td_block_settings_pagination

Blocks and Big Grids are the main tools in designing your website. Now you have the necessary information about how to style your website with hover effects, manage to filter posts and sort them to display in your own creative way.