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:
- Build out the 50% columns in a separate Elementor section
- View the results on the front end and use my browser’s inspector to copy the resulting html
- 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
- 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)
- Don’t delete the original 50/50 section yet, save and view on the front end again to compare results side by side
- Adjust any necessary custom css in the child theme style.css (comparing to the original)
- 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, 3 months ago by
pingram.