Unlimited nested sections in Elementor and other secrets
So, you’ve decided to use Elementor as a core of your WordPress building? Well, welcome to hell, my Friend) Why? Either installable CMS WordPress is so bad? No, sure – it’s fine… but due to the inborn MVC structure with concept: each native PHP-method should return tons of data on your call in a kind of array… you have to be ready that simple things are made heavy.
WP was not born for interactive landing-page building – it was a perfect blog platform, but folk has created an inertia and pushed individual developers/teams to develop bundles for extending WordPress functionality. For example, WooCommerce with its share around 42% of eCommerce market was not initially designed by Automattic (father-company of WP) – it was born in cabinets of enthusiasts heated by idea: “Common guys, WP is the most popular platform nowadays – let’s suggest eCommerce plugin for it and we will rock!”…
Yes, history has approved those guys were right – WooCommerce has become the product of Automattic as per now.
Ok, eCommerce issue is solved, but what about drug-and-drop builders for WordPress, where the kings are WIX, Squarespace, Shopify, etc? WordPress is not a competitor on this market and here is an open vacancy – who will conquer the status of king-builder in WordPress. Let’s be frankly – their attempt to suggest an inbuilt builder inside their “Twenty Twenty-Two” theme is far away of the same Elementor. So what we do have as per now if we need some builder for WordPress?
- Beaver Builder
- SeedProd
- Divi (mostly the theme)
- Visual Composer Website Builder
- Themify Builder
- SiteOrigin
- many others, which are not less decent…
We have garbage of code with weird numerous DIVs, strange classes and IDs, poor structure and many other optimization issues, when we will plan to pass Google’s pagespeed!
Let’s be short which options we have while developing the new WordPress template:
- either we code HTML/CSS/JS loyout in some “Visual Studio Code” editor manually and connect ACF plugin (Advanced Custom Fields https://www.advancedcustomfields.com) to manage the elements content.
or - we use any WordPress builder which is convenient and user-friendly for us + Flexbox CSS styles, which will be mandatory for any modern layout.
We will discuss few tricks of Elementor usage:
1) you don’t need to get checking the element’s class or ID via browser console if you need to add any styles. Instead just click on element in Elementor and refer to it using magic word – selector.
Here is a short example:
2) use Navigator actively to find necessary blocks (elements) easily especially, when they are small or being intermediate layers:
Right click on any element calls menu with option to open “Navigator”
3) if you can’t find some intermediate DIV among the layers (it could happen, when Elementor adds some wrapper on the code level), you can inspect it using browser console (best is Chrome) and refer to it in such a way:
selector > div
where:
- “selector” is the element you can select in Navigator
- “> div” is its first child
4) What should you do with the Elementor limitation to add unlimited sections inside of other sections?
To rephrase: you can’t create the new Inner Section inside of existing section in Elementor. Such stupid limitation prevents to develop layered layouts and add custom DIVs with the appropriate styles… “Inner Section” becomes red when you’re trying to drag and drop it inside of another section and prevents to complete the insertion:
So how to reach such unlimited nesting of sections? Example: is here:
Well, there are few approaches:
1) you can create separate section as a further template (with columns, blocks, etc) and copy-paste it inside of your actual section. You can do it unlimited times by following the next steps:
– select this template-separate section which we wish to copy for its further paste where we need. For example, let’s plan to copy the next section with 2 blocks one under another (shown below) and paste it to the left one:
– right click on the section we would like to copy and select “Copy”:
– select another left section inside of which we wish to insert the copied section and “paste” inside of menu:
– Pay attention that Elementor always creates extra column near – you can delete it simply via the same right click:
Attention! You can even copy section in one browser windows and paste it to another! Sure, Elementor needs to be opened in both windows (tabs)
2) you can install this perfect plugin “Unlimited Elementor Inner Sections By BoomDevs”: https://wordpress.org/plugins/unlimited-elementor-inner-sections-by-boomdevs/
It adds new function “Add nested section” inside of right-click menu, when you click on any element.
As the result you will be able to create numerous nested sections in Elementor and split them into columns if need:
One more useful plugin is “Elementor Header & Footer Builder”. It allows you to create the templates of header and footer and paste them inside of any page. Short code is created for any such template component, so it’s extremely easy to import in Elementor where you need:
Link to plugin: https://wordpress.org/plugins/header-footer-elementor/
Finally… Besides of these advices you need solid knowledges of Flexbox to bypass Elementor’s interface limitations and build flexible layouts, use @media styles…
Elementor is a perfect instrument to build simple solutions, but use these hints to start doing professional landings;)