Grid Master widget allows you to create any post loop you want from any custom post type. You can use your grid on a page individually or as a template for your archive pages combining with WPBits Templates.
Query
- Select your source post type to display.
- Use the include/exclude/filter terms to specify your query.
- Change the order logic.
Grid Layout
- Change the layout style, column size, etc. to customize the grid layout.
- Use the “Custom” option from the “Output Format” select box to take the control of the final HMTL output if you need to customize it.
Elements
- Elements are a group of elements that is available to build the content of the grid.
- Use the “ADD ITEM” button to add a new element to your output.
- Every element has its own set of options. Expand an element to reach the options.
- You can customize the style of these elements from the “Style” tab.
Content Injections
You can inject your content such as Google Adsense code to be displayed between the post loop boxes. Some of the use-cases of this feature might be advertising banners or a “call to action” content.
Filter Navigations
The filter navigation can be used for many purposes.
- Dynamic Query: The grid content (posts) will be replaced by sending a new query to the server when the user clicks on a navigation item. Note that, this option won’t work when the grid used as an archive template. Use this option to increase your page loading speed if you have more than 30 posts to show on the page.
- Use Styling Tab / Filter Navigation to change the navigation location and customize the styling.
Box Style
Use the “Box Style” settings to customize the box and the items globally. Select a global font, set colors for all elements, change the box background, align elements, etc. Remember, almost every element have their own styling section and the font type, and color settings.
Element Wrappers
Use Element Wrappers to distribute your grid elements into separate containers. There are 3 wrappers available to use. Let’s say, you have “Post Thumbnail”, “Post Title” and “Excerpt” elements and you want to display the post thumbnail on the left side and others to the right. In this case, you can use Element Wrapper 1 to wrap the post thumbnail and Element Wrapper 2 to wrap the others. Then, change the orientation of the two elements from the “Box Style” section.
You can import Grid Master templates from the WPBits Template Library and study how we used the element wrappers to create hover effects and advanced layouts.
