How To Add Elements Within Elements

Last Update: March 14, 2023

There are several elements in Avada that allow you to add further content inside them, through the WordPress editor. For example, there is the Toggle Element, the Modal Element, the Tabs Element, and the Content Boxes Element, to name a few. If you wish to add further Avada Builder content inside these elements, we have a few tips here on the best way to achieve this. Read on…

Now, not every element that has the WordPress editor in it, and therefore the Avada Builder Shortcode Generator, is designed to have extra shortcode content. For example, the Title Element has an editor, but you can’t add a Gallery into a Title. So, common sense is required here.

Using The Avada Builder Element Generator within an Element

But anytime you have access to the Avada Builder Shortcode Generator, you can theoretically at least, add further Avada Builder elements inside the parent element. There are a few golden rules with this process.

If you are just adding a single element, then you can use the Avada Builder Shortcode Generator, configure the element and insert the shortcode directly into the containing element. But if you want a more complex layout involving columns, there is one important thing to remember.

The Easy Solution

But there is a very easy way to do this. Simply create a new page, and using your preferred interface of the Avada Builder, create your desired layout using nested columns. When you are finished, you simply need to copy the nested columns element itself (using the right click feature) to copy the code into memory.

Copying A Nested Column

Then you can return to your original page and paste your shortcode content into the editor of the containing element. This way, you will be inserting the nested column shortcodes that are needed, as well as the elements inside them, but not the container and column they are in.

The resultant shortcode pasted into the editor in the element then generates the desired layout, without needing to edit any code.

Nested Columns Inside Toggle Element