Nest and combine shortcodes safely

Container elements expect particular child shortcodes. Preserve this hierarchy when reviewing or moving raw builder content.

Core page structure

[vc_row]
    [vc_column]
        [web_title title="Section title"]
        [vc_column_text]Section copy[/vc_column_text]
    [/vc_column]
[/vc_row]

A Row contains Column elements. An Inner Row belongs inside a column and contains Inner Column elements. Visible content belongs inside a column rather than directly inside a row.

Component families

Finder compatibility elements have their own finder, row, column, content and field hierarchy. Preserve builder-generated nesting when maintaining an existing Finder; use Faceted Search for new filtering experiences.

Edit nested content

1. Duplicate the current content before a large raw edit.
2. Identify every opening and closing shortcode.
3. Keep child tags inside their documented parent.
4. Keep rows and columns balanced.
5. Update the page.
6. Reopen the component in Page Builder.
7. Verify both the builder canvas and the public page.

Avoid fragile combinations

• Do not place the same modal, off-canvas or slider ID more than once.
• Avoid placing one interactive container inside another unless the visitor interaction remains clear.
• Do not use repeated empty gaps or text blocks to create layout.
• Do not wrap a complete results component in another component that also owns pagination or filtering.
• Keep script-only or data-only helper elements beside the visible component that consumes them.

Troubleshooting

If raw shortcode text appears publicly, first check the exact tag spelling and closing tag. If a child disappears, confirm it remains inside the expected parent and that its parent is not hidden by device visibility.

Related guides

• Rows, columns, and components
• Troubleshoot shortcode output
• Element and shortcode reference