Alter Post Grid Layout

—

## 1. **Modify Existing Post Grid Templates**
WPBakery provides pre-designed **Grid Templates** that can be customized. Here’s how to alter them:

### Steps:
1. Go to your WordPress Dashboard.
2. Navigate to **WPBakery Page Builder** → **Grid Builder**.
3. Here, you’ll see the available grid templates (like **Post Grid**, **Media Grid**, etc.).
4. Find the **Post Grid** template you want to edit.
– If you want to create a new one, click **Add New**.
5. In the Grid Builder:
– You can drag and drop elements like **Title**, **Image**, **Meta**, and **Content**.
– Use the settings for each element to adjust spacing, font styles, and colors.
6. Save the changes and return to your page editor.

—

## 2. **Apply Custom Grid Templates**
Once you’ve customized or created a grid layout:

1. Edit the page using WPBakery Page Builder.
2. Add the **Post Grid** or **Custom Grid** element.
3. In the element settings, under the **Grid Template** dropdown, select the custom grid template you just modified or created.
4. Save and preview your changes.

—

## 3. **Use Custom CSS for Styling**
If you need finer control over the layout and design of the Post Grid, you can add custom CSS.

### Steps:
1. Go to **WPBakery Page Builder** → **Custom CSS** in your WordPress Dashboard.
2. Add your custom CSS. Example:

.vc_grid-item .vc_gitem-post-data {
       background-color: #f5f5f5;
       padding: 15px;
       border-radius: 10px;
   }
   .vc_grid-item .vc_gitem-zone-img {
       margin-bottom: 10px;
   }
   .vc_grid-item .vc_gitem-post-title {
       font-size: 18px;
       font-weight: bold;
       color: #333;
   }

3. Save the CSS and check the Post Grid on the front end.

—

## 4. **Override Grid Layout Using Theme Files**
For developers who want more control, you can override the grid layout templates in your theme.

### Steps:
1. Locate the **WPBakery grid templates** in the plugin directory:

wp-content/plugins/js_composer/include/templates/

2. Find the relevant grid template file:
– For example, `vc_grid_item.php` or similar.
3. Copy the file into your theme:

wp-content/themes/your-theme/vc_templates/

4. Modify the file to add your custom HTML structure or classes.

—

## 5. **Add Hooks or Filters (Advanced)**
If you need to modify the output programmatically, use WordPress hooks or filters.

Example filter to alter the Post Grid query:

function custom_post_grid_query( $query ) {
    $query['post_type'] = 'custom_post_type'; // Change post type
    $query['posts_per_page'] = 6; // Change number of posts
    return $query;
}
add_filter( 'vc_grid_item_shortcodes_query', 'custom_post_grid_query' );

Add this to your theme’s `functions.php` file.

—

### Summary
– Use the **Grid Builder** to visually customize post grid templates.
– Apply **custom CSS** for layout tweaks.
– Override template files in your theme for full control.
– Use hooks and filters for advanced query modifications.

Let me know if you need more guidance on any specific method! 🚀