WPBakery Column Layout Guide

—

### **Option 1: Nesting Rows**
You can **nest rows** to divide the content further:

1. **Create a Main Row**: Add a row (this will initially be one of the 12 columns).
2. **Split the Main Row into Columns**: Divide it into 4 equal sections (3 columns each).
3. **Nest New Rows Inside Each Column**:
– Within each of the 4 main columns, add a new row.
– Inside these nested rows, further divide content into additional columns as needed.

**Steps:**
1. Add a **Row** and set 4 columns (3/12 each).
2. Inside each 3/12 column, add another **Row**.
3. Use these nested rows to create 3 smaller columns inside each.

—

### **Option 2: Custom Column Widths Using Custom CSS**
If you want to directly override the grid system and have more flexibility:

1. **Edit the Row**: Go to the WPBakery Row Settings.
2. **Add Custom CSS Classes**: In the row or column settings, add a custom CSS class, e.g., `custom-cols`.
3. **Apply Custom CSS**: Add the following CSS to your theme’s stylesheet or the WPBakery **Custom CSS** editor:

.custom-cols .vc_column_container {
    width: 8.33% !important; /* Adjust for more columns */
    float: left;
    padding: 0 10px; /* Add spacing */
    box-sizing: border-box;
}

– **Explanation**:
– **`8.33%`** sets each column's width so 12 columns (8.33% * 12 = 100%) fit perfectly.
– Adjust spacing or padding to fine-tune the layout.

—

### **Option 3: Use a Custom Grid System (Custom Row & Columns)**
If you require a grid beyond the 12-column structure:

1. Install and integrate a CSS framework like **Bootstrap 5** or **TailwindCSS** that supports custom grids.
2. Use **WPBakery’s "Raw HTML"** or "Custom Content" elements to add a custom grid structure manually.

Example of a 24-column grid for greater flexibility:

<div class="row">
    <div class="col-1">1</div>
    <div class="col-1">2</div>
    <div class="col-1">3</div>
    <div class="col-1">4</div>
    ...
</div>

—

### **Conclusion**
– For simplicity, use **nested rows** for smaller grids.
– For complete control, customize column widths with **CSS**.
– For advanced grids, integrate a custom grid system like **Bootstrap** or write raw HTML.

Let me know which option you’d like to explore further!

—

### **Step 1: Install Owl Carousel Plugin**
1. Download and include **Owl Carousel** from the CDN in your WordPress theme:
Add this in your theme’s **header.php** or enqueue it via `functions.php`:

<!-- Owl Carousel CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

   <!-- jQuery (required for Owl Carousel) -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

   <!-- Owl Carousel JS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

—

### **Step 2: Add the Carousel Markup**
In WPBakery, you can use the **Custom HTML** or **Raw HTML** block to add the carousel structure.

<div class="owl-carousel owl-theme">
    <div class="item"><h4>Content 1</h4></div>
    <div class="item"><h4>Content 2</h4></div>
    <div class="item"><h4>Content 3</h4></div>
    <div class="item"><h4>Content 4</h4></div>
    <div class="item"><h4>Content 5</h4></div>
    <div class="item"><h4>Content 6</h4></div>
</div>

—

### **Step 3: Initialize Owl Carousel**
Add the following script in the **Custom JS** section of WPBakery or include it in your theme’s JS file:

jQuery(document).ready(function($){
    $(".owl-carousel").owlCarousel({
        loop: true,             // Infinite loop
        margin: 20,             // Space between columns
        nav: true,              // Show navigation arrows
        dots: true,             // Show pagination dots
        autoplay: true,         // Auto-scroll
        autoplayTimeout: 3000,  // Auto-scroll duration
        responsive: {
            0: {
                items: 1        // 1 column on mobile
            },
            768: {
                items: 2        // 2 columns on tablet
            },
            992: {
                items: 3        // 3 columns on desktop
            }
        }
    });
});

—

### **Step 4: Style the Carousel (Optional)**
To customize spacing and appearance, add CSS to your theme's stylesheet or Customizer:

.owl-carousel .item {
    background: #f5f5f5;
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 8px;
}
.owl-nav button {
    background-color: #333 !important;
    color: #fff !important;
    border-radius: 50%;
    padding: 10px;
}
.owl-dots .owl-dot {
    background: #ccc !important;
    margin: 5px;
}
.owl-dots .owl-dot.active {
    background: #333 !important;
}

—

### **Step 5: Save and Test**
1. Save all changes.
2. Reload your page to see the **3-column Owl Carousel** scroll in action.

—

### **Result**
– The carousel will display **3 columns** on desktop, **2 columns** on tablets, and **1 column** on mobile.
– It will auto-scroll, and users can navigate with arrows or dots.

Let me know if you need help implementing this in a specific way in WPBakery! 😊