tagDiv Composer is a page builder plugin designed specifically to create online magazines, news portals, and blogs. It has lots of design elements (called shortcodes) to make it easy for you to create the homepage of your website as well as other parts that display the content of your website dynamically such category pages, archives pages, and so on. One of the shortcodes offered by tagDiv Composer is Big Grid.
Big Grid is not a single shortcode. Instead, it is one of the shortcode groups available on tagDiv Composer. A Big Grid shortcode is used to display articles on your website in a grid style. The number of the boxes in a Big Grid shortcode is varied depending on the Big Grid you use. tagDiv Composer has about 33 Big Grid shortcodes.
Big Grid shortcodes are great to create the hero section of your online magazine or blog although you can also use it in any section. Articles displayed on a Big Grid shortcode are filterable. You can filter articles by category, tag, and author. You can also manually select articles to be displayed on a Big Grid shortcode by entering their post IDs.
How to use a Big Grid shortcode in tagDiv Composer
To get started, create a new page (Pages -> Add New) and edit it with tagDiv Composer by clicking the TAGDIV COMPOSER button. If you are new to tagDiv Composer, you can read this post to learn the basic use of tagDiv Composer.
Add a Big Grid shortcode you want to use and drag it to the canvas area. You can find a Big Grid shortcode on the Big Grid shortcodes section.
As you can see, the shortcode you have just added displays your articles in a grid style. By default, it displays the latest articles on your website. You can filter the articles.
Filtering the articles
To filter the article, you can go to the Filter tab. There are several parameters you can use to filter the articles. From post ID, category, author, slug to post type.
- Filtering articles by post ID
To filter the articles by post ID, you can paste the IDs or the articles you want to display and separating them by commas.
To get the post ID of an article, you can edit the concerned article and go to the address bar of your web browser to see the URL. Post ID is a random number between “=” and “&” signs of the URL.
Alternatively, you can also go to Post -> All Posts. Hover your mouse over the Edit link on the article you want to check the post ID of and check the URL on the bottom-left corner of the screen.
- Filtering articles by category
To filter the articles by category, you can simply select a category you want. Only articles under the selected category will be displayed on the Big Grid shortcode.
- Filtering articles by multiple categories
You can also filter articles by several categories. To do so, simply enter the IDs of the categories on the Multiple taxonomies filter field and separate them with commas.
Same as post, you can also find the ID of a category by editing it or by hovering your mouse the Edit link on the Categories page (Posts -> Categories).
If you want to display all articles from all categories with an exception, this is also possible. For instance, you want the articles under the “Windows” category not to be displayed. In such a case, you can select All categories on the Category filter option then add the ID of the category you want to exclude on the Multiple taxonomies filter field and “-” as the prefix. You can exclude multiple categories.
- Filtering articles by tags
To filter the articles by tags, you can simply enter the tags’ name to the Filter by tag slug field and separate them with commas.
- Filtering articles by authors
To filter the articles by authors, you can simply enter the IDs of the authors to the Multiple authors filter field. Separate the author IDs with commas.
- Filtering articles by post type
If you have custom post types on your WordPress site, you can also filter the articles on a Big Grid shortcode by post types. By default, WordPress has two post types: Post and Page. You can simply enter the post types to the Post Type field to filter them. Separate them with commas.
Customizing the Big Grid shortcode
Once done filtering the articles, you can start customizing the Big Grid shortcode. You can set things like typography, overlay color, the gap between boxes, and so on.
Boxes in a Big Grid shortcode are called modules so you will find the label “module” instead of “box” when customizing the Big Grid shortcode.
tagDiv Composer itself offers several premade style presets to allow you to instantly get a beautiful Big Grid shortcode. To use one, go to the General tab and click PRE-MADE STYLE PRESETS and select a style preset you like.
To set the length of the title, you can go to the CONTENT LENGTH block under the General tab.
Here some customization options you might want to set.
- Modules gap
To set the gap between modules (boxes), you can go to the Layout tab. Set the gap on the Modules gap option (you need to enter the number manually).
Below the Modules gap option, you can also set the horizontal alignment of the post meta as well as the horizontal alignment. You can also disable/enable the zoom effect.
- Module elements
Modules in a Big Grid shortcode are divided into two categories, no matter the number of modules (boxes) a Big Grid shortcode has. To customize the elements on each module category, you can go to the module category you want to customize the elements of:
You can set the image size, image alignment, meta info width, meta info margin, meta info padding, article title space, article title padding, and so on. You can also show/hide the author and date.
- Module typography, image effect, overlay
To set the typography of the elements on a module (meta and title), you can go to the Style tab. You can set the typography of each element (font family, font size, font style) on the MODULE FONTS block.
Read this post to learn more about how to customize a text in tagDiv Composer.
To set the color of the texts, you can go to the COLORS block, still under the Style tab.
To add effects to images on the modules, you can go to the IMAGE EFFECTS / BLEND MODES block. Select an image effect and blend mode you like and choose the colors by clicking the color selectors. Set the brightness, contrast, and saturation accordingly.
In addition to adding effects and blend modes to the image on the modules, you can also set the overlay of the modules. You can set a different module for each module. Go to the COLORS block to set the overlay.
To set the margin, padding, and background of the Big Grid shortcode, you can go the to Css tab.
The bottom line
Big Grid shortcodes are crucial enough when you are creating the homepage of an online magazine or blog with tagDiv Composer. A Big Grid shortcode is great to create the hero section of your online magazine as it instantly displays articles in a grid style. You can use a Big Grid shortcode to display the featured articles, headlines, and other crucial content.