Match heights of adjacent content (panels or blocks)

If you would like for the heights of adjacent panels to be equal, you can simply add one class in WP Bakery to the enclosing row.

panels with different heights


How to match panel heights

1. Login to your site
2. Click the Edit the page in WP Bakery
3. Hover over the top left of the Inner Row of panels and click on the CaratEdit Inner Row (Pencil)

  • This feature only works with Inner Rows

4. Click on the Match Heights tab and set a unique ID for this group of matched items. You can make up anyname but avoid using spaces or special characters. For this example, I need every row to have a unique id so I created my first row as rowOne.

5. Click Save changes

6. Next, close the inner row settings and edit the individual panels inside of the inner row.

7. Once again, click on the Match Heights tab and use the same unique ID that you used on the inner row its in. For this example, I would set the ID as rowOne again

8. This this for all items inside the inner row. Create multiple inner rows if you need the objects to match only on a row by row basis.

9. Lastly, Click Update and then close out of WP Bakery Editing Mode.

Panel height matching only works when viewing the page. It will not work when you are editing in WP Bakery mode.

Final Result


Article ID: 85004
Thu 8/15/19 1:21 PM
Fri 10/2/20 4:47 PM