Masonry Grid Resize Builder – WordPress Add-on VisualComposer

Introduction to Masonry Grid Resize Builder in Visual Composer

The Masonry Grid Resize Builder is a powerful WordPress add-on for Visual Composer, a popular page builder plugin. This feature allows you to create stunning masonry grid layouts that are highly customizable and responsive. With the Masonry Grid Resize Builder, you can easily create complex grid layouts with varying column sizes, and even resize the grid elements on the fly. In this tutorial, we will guide you through the step-by-step process of using the Masonry Grid Resize Builder in Visual Composer.

Prerequisites

Before you start, make sure you have:

• WordPress installed on your website
• Visual Composer installed and activated on your website
• The Masonry Grid Resize Builder add-on installed and activated on your website

Getting Started with the Masonry Grid Resize Builder

To get started with the Masonry Grid Resize Builder, follow these steps:

1. Log in to your WordPress dashboard and navigate to the Visual Composer page builder.
2. Click on the "Add Element" button to add a new element to your page.
3. In the Element Library, search for "Masonry Grid" and click on the "Insert" button to add the element to your page.

Step 1: Configure the Masonry Grid Element

Once you have added the Masonry Grid element to your page, you will see a range of settings and options to customize the grid. Let's go through each of these settings:

• Grid Columns: This setting allows you to set the number of columns in your masonry grid. You can choose from a range of preset column settings, or create your own custom columns.
• Grid Gutters: This setting allows you to set the gap between each column in your masonry grid. You can choose from a range of preset gutter settings, or create your own custom gutters.
• Grid Item Size: This setting allows you to set the size of each grid item. You can choose from a range of preset item sizes, or create your own custom item sizes.
• Grid Resize: This setting allows you to enable or disable the grid resize feature. When enabled, the grid items will resize automatically as you adjust the grid columns.

Step 2: Add Grid Items

To add grid items to your masonry grid, follow these steps:

1. Click on the "Add Item" button to add a new grid item.
2. Choose the type of grid item you want to add (e.g. image, text, etc.).
3. Configure the grid item settings, such as the image URL, text content, etc.
4. Click "Insert" to add the grid item to the grid.

Step 3: Customize the Grid Items

To customize the grid items, follow these steps:

1. Hover over a grid item and click on the three vertical dots that appear.
2. Click on "Edit" to edit the grid item settings.
3. Make any necessary changes to the grid item settings, such as changing the image URL, text content, etc.
4. Click "Update" to save the changes.

Step 4: Resize the Grid

To resize the grid, follow these steps:

1. Click on the "Resize" button to enable the grid resize feature.
2. Drag the grid columns to resize the grid items.
3. Adjust the grid columns to create the desired layout.

Conclusion

And that's it! With these steps, you should now have a comprehensive understanding of how to use the Masonry Grid Resize Builder in Visual Composer. With this feature, you can create stunning masonry grid layouts that are highly customizable and responsive. Happy building!