In the latest version Bricksof this young page builder for WordPress, there is finally an announced change, with the introduction of containers. Not the shipping containers you may be facing, although these are also spaces within which you can store various page objects.
The container, is another widget available in the builder menu, so you can arrange widgets in any way you like.
The new widget replaces the old layout: section > row > column layout, which is used by most page builders currently on the market including those for WordPress.
The problem with the old approach to content layout in Bricks had to do with design flexibility, which was overly limited with the previous method, as well as the DOM structure of the published site being unnecessarily bloated (a pain of most builders including Elementora). The use of a container, which can have multiple columns and free positioning of its elements inside, largely eliminates this problem.
You can nest containers inside other containers up to five levels. Creating a complex structure now becomes a much simpler task and, most importantly, does not unnecessarily increase the DOM structure.
Two ways to add a container. The first, standard one is grab, drag and drop, and there is the rest of the second way. Take a look at the screenshot above. In the first position is the Container, but its icon is slightly different from the others. There is an extra one in the top left corner. It's not an ornament 🙂 You can click on this little guy to bring up a modal window with the initial settings of the container:
You can define the layout of the elements inside, the direction (columns, row), you can specify the number of columns and other parameters like margins and spacing. With the above configuration, the added container looks like this:
You can see two columns into which you can insert further widgets. Once the widgets are placed, you have a lot of room for manoeuvre in terms of their position. You can make changes to the settings of the entire container, column or individual objects. You can style everything exactly the way you want, and the final effect doesn't have to be as simple as the one below 🙂
Quick benchmark test (performance)
I haven't done extensive benchmarking related to the performance of pages generated in Bricks and in Elementor. There will be time for that yet, but today one simple test that surprised me.
Same machine, same environment zero caching mechanisms both on the server side and WP installation. Analogous appearance of the tested page: only two columns with header and icon.
The result of this simple test shows clear differences. Maybe not the DOM structure, although this one is also visible, but above all as far as overall performance is concerned. Take a look:
Elementor needs to perform so many tasks that for such a simple page the response of the main document is over 400 ms without caching mechanisms. Maybe not a tragedy, but also not little considering how simple a page I'm testing.
When I performed an analogous test for Bricks, the result positively surprised me:
Note how much faster operations are performed on the server with the Bricks page, reducing the response time of the main documents to around 100ms without any caching or optimisation.
The Elementor page in this test took 1.2 seconds to fully load, while the equivalent page on Bricks took 0.4 seconds. I did a few tests to make sure that these differences are not accidental.
What does the above result suggest? Nothing else but that pages created on Bricks are simply faster, lighter and better optimized. What surprised me is that with such a monstrously simple test page, the differences are so pronounced. I didn't suspect a big gap, I expected it rather with a more complex document structure. But it turned out that even with something so simple you can see significant differences.
I'll do a more precise test at the next opportunity to verify today's hypothesis as to the superiority of Bricks over Elementor and other builders in terms of page performance. I'm curious myself if what we saw today will be confirmed with similar power when the test is extended.
Subscribe to the mailing list below to be notified when such a test appears on How to Make a Website.
Most of my clients and PoznajWP students who set up an online shop, after a short time wonder how much the ordering page can be customised. It turns out,
Elementor in its nearly four-year career has lived to see an exceptionally sizable library of extensions written by independent developers. I wrote about the ones I personally like in the article "10
The upcoming version of Elementor, numbered 3.1, will bring several new features. Among them, a section that allows you to manage landing pages. Sounds good, doesn't it? Yes, but from my point of view
Free information on JZS news
I invite you to become a subscriber! Thousands of readers already subscribe to news from JZS.
You can unsubscribe at any time. Your address is safe here.
Featured LifeTime Offers!
Do you sell subscription-based services? Check out this offer from LTD.
One of the best chat rooms for websites. Mature with lots of...
Use WebPush notifications to increase traffic and sales