Wiloke Grid – For WPBakery Page Builder (Visual Composer)

Introduction to Wiloke Grid

Wiloke Grid is a powerful and highly customizable plugin that allows you to create a wide range of grid-based layouts with ease using the popular WordPress page builder, WPBakery Page Builder (formerly Visual Composer). With Wiloke Grid, you can design complex grid layouts without requiring extensive coding knowledge, making it an essential tool for both beginners and advanced users alike.

In this tutorial, we will cover the ins and outs of using Wiloke Grid, including its features, how to create and customize a grid, and how to use it with WPBakery Page Builder.

Prerequisites

Before starting this tutorial, you should have the following:

1. A WordPress website installed on your local machine or online hosting
2. WPBakery Page Builder (formerly Visual Composer) installed and activated on your WordPress website
3. Wiloke Grid plugin installed and activated on your WordPress website

Step 1: Installing and Activating Wiloke Grid

To install Wiloke Grid, follow these steps:

1. Go to the WordPress dashboard of your website
2. Click on the "Plugins" menu and then click on "Add New"
3. Search for "Wiloke Grid" in the search bar
4. Click on the "Install Now" button to install the plugin
5. Activate the plugin by clicking on the "Activate" button

Once installed and activated, Wiloke Grid will add a new row type and grid-related settings to WPBakery Page Builder.

Step 2: Creating a New Grid

To create a new grid, follow these steps:

1. Go to the WPBakery Page Builder interface and create a new row
2. Click on the "Row" button and select "Wiloke Grid" from the list of available row types
3. Set the row width, margin, and padding to your liking
4. Click on the "Insert" button to insert the row

You will now see the Wiloke Grid settings interface. This is where you can customize the grid settings, such as the number of columns, gutters, and row height.

Step 3: Customizing the Grid Settings

To customize the grid settings, follow these steps:

1. Click on the "Grid" tab to access the grid settings
2. Set the number of columns by dragging the slider or typing a value in the field
3. Adjust the gutter size by dragging the slider or typing a value in the field
4. Set the row height by typing a value in the field
5. Use the "Advanced" settings to adjust more granular grid settings, such as margin, padding, and responsive behavior

You can also use the "Grid Mode" dropdown menu to choose from pre-designed grid layouts, such as "Grid with Gutters" or "Masonry Grid".

Step 4: Adding Elements to the Grid

To add elements to the grid, follow these steps:

1. Drag and drop elements from the WPBakery Page Builder elements library into the grid row
2. Adjust the element's settings, such as its position within the grid and its layout settings
3. Repeat this process to add more elements to the grid

You can also use the "Element Positioning" dropdown menu to set the position of elements within the grid, such as "Top-Left" or "Center".

Step 5: Styling the Grid

To style the grid, follow these steps:

1. Use the CSS editor in WPBakery Page Builder to customize the grid's CSS settings
2. Use the "Advanced" settings to adjust the grid's CSS properties, such as "width", "height", and "background-color"
3. Use the "Responsive" settings to customize the grid's behavior on different devices and screen sizes

Conclusion

Congratulations! You have now successfully installed, created, and customized a Wiloke Grid using WPBakery Page Builder. With this powerful plugin, you can create complex grid-based layouts without requiring extensive coding knowledge. In this tutorial, we covered the basics of using Wiloke Grid, including creating and customizing a grid, adding elements to the grid, and styling the grid. By following this tutorial, you should be able to create a wide range of grid-based layouts for your WordPress website.