Skip to content

Data Structure: Add visuals for traditional/modern structure #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 18, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 13 additions & 5 deletions src/data-structure/page-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,19 +40,27 @@ If the page has content, the `content` contains a list of objects:

## Page Elements

Elements are simple objects contaning element data. Some elements can have nested elements inside of them, others don't.
Elements are simple objects containing element data. Some elements can have nested elements inside of them, others don't.

This is important as in the past, Elementor had a strict data structure. The page had "section" elements, sections had nested "column" elements, and the columns had "widget" elements.
This is important as in the past Elementor had a strict data structure - the traditional structure. The page had "section" elements, sections had nested "column" elements, and the columns had "widget" elements.

With the introduction of containers, Elementor replaced the traditional data structure, allowing the user to nest multiple elements one inside the other.
With the introduction of containers, Elementor replaced the traditional data structure with a modern structure, allowing the user to nest multiple elements one inside the other.

Originally, Elementor widgets didn't support nested capabilities. More recently Elementor has started exploring new ways to allow nesting capabilities. The new "Menu" widget already supports nested capabilities and we plan to release nested "Accordion", "Tabs", "Carousels" and other widgets with nested capabilities.
Traditional structure:

<img :src="$withBase('/assets/img/data-structure-traditional.png')" alt="Traditional structure">

Modern structure:

<img :src="$withBase('/assets/img/data-structure-modern.png')" alt="Modern structure">

With the adoption of nested layout elements, Elementor introduced widgets with nested capabilities. Widgets like the nested "Tabs", nested "Accordion", nested "Carousel", and nested "Menu" (mega menu).

## Examples

### A Page with a Section and a Column

An example of a page that uses the old section-column-widget structure:
An example of a page that uses the traditional section-column-widget structure:

```json
{
Expand Down