Columns in Columns ?

In Elementor (and many other page builders) 2 levels deep is the limitation.

However, sometimes themes come with their own set of shortcodes that allow you to add your own columns to text areas. Something like:

[one_half]Your first 50% content here[/one_half]
[one_half]Your second 50% content here[/one_half]

If I don’t have that option and get stuck in a jam, here’s what I do:

1. Build out the 50% columns in a separate Elementor section
2. View the results on the front end and use my browser’s inspector to copy the resulting html
3. Use a text editor to inspect the copied html and remove any unique auto-generated classes (just the unique ones, they look like elementor-element-kmrqpeh) *as soon as you delete the original, any associated css rules in Elementor will be lost anyway
4. Add the copied html to the Elementor text area where it’s needed (or use an Elementor html block if you find WordPress filters stripping out part of your html)
5. Don’t delete the original 50/50 section yet, save and view on the front end again to compare results side by side
6. Adjust any necessary custom css in the child theme style.css (comparing to the original)
7. Go back and delete the original, save and back to the front end you should have the desired result.

* keep in mind this approach requires some knowledge of html and css to a small degree.

• This reply was modified 8 years, 4 months ago by pingram.

Ok thanks, i did manage to solve it, but it is a little tricky, because dragging a column in a column will not always work, so it’s a little frustrating, it’s easier to add with the + button on the column menu to add columns and delete to minus it.