How To Add Content To Content-Based Elements

27/07/2020

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 Fusion 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 Fusion 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.

Shortcode Generator inside Element

But anytime you have access to the Fusion Builder Shortcode Generator, you can theoretically at least, add further Fusion 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 Fusion 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.

IMPORTANT NOTE: Elements are already inside a column by default, so any further shortcode content inside an element needs to be inside nested columns.

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 Fusion 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 shortcodes into memory.

Copying Nested Columns

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.

Pasting Nested Columns Shortcode

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