Each file name starts with the current post ID, followed by either -layout, -layout-draft, or -layout-preview.
Beaver Builder’s markup is based on a grid system that consists of five types of responsive elements. Each element gets a unique class name (for example,
.fl-node-530d81d3093f5), which developers can style accordingly. Here are the five responsive elements and their corresponding CSS classes:
There is only one layout element per page. It contains all of the other Beaver Builder elements.
Rows are child elements of the main layout and contain column groups.
Column groups can be thought of as rows within rows. A column group can contain any number of columns, but column groups cannot be nested.
Columns come in many shapes and sizes and can contain as many modules as you want to put in them. As the screen size becomes smaller, a row of columns will be stacked vertically. Larger columns become 100% width when viewed on smaller screens, while smaller columns have a max width of 400 px.
Modules are the last level of elements that can be added to a builder layout. They contain the dynamically generated markup for each unique module.