Introduction
Building a website with containers allows you to group and manage items on a page. This allows you to add and modify the properties of multiple items, and quickly update the overall layouts. You can nest one container inside another to create complex layouts and create reusable templates to streamline your workflow.
One of the main benefits of using containers is that you can speed up page loading times. A fast-loading page enhances the user experience. Improved page loading performance will also cause search engines to rank your page higher in the search results.
To maximize the benefits containers provide, you need to optimize the number of times you group objects. In this article, we’ll discuss how many containers you should use for your webpages.
First, let’s take a look at how you can design a webpage efficiently using containers.
Design the page you want efficiently
In designing your webpage, your objective is to create exactly what you want above all other priorities. That said, and within that scope, you want to use as few Containers as possible to reduce the number of server requests and downloads required to build the page. In brief, the more containers, the less efficient your webpage is.
A web page’s structure and content is defined as a Document Object Model (DOM), which defines each part of a website as an object to enable programming languages to interact with them. With Elementor you don’t need to know about how all this works, but it’s useful to know that a website’s DOM groups and arranges each object node hierarchically similar to headings and subheads of a book.
Containers make it easier than ever to design a web page how you want, allowing you to control the arrangement of items and their style and assign animations. With Flexbox Containers, you’re effectively creating a DOM node that makes it easy for browsers to call the right data as it’s needed from the server hosting the website. This makes the page faster to load and increases responsiveness.
How do I know when I need a new container?
Several factors determine how many containers you’ll need to use for a webpage:
Direction
A container’s direction determines whether the widgets inside will be laid out in rows or columns. If you need to arrange some elements in rows and others in columns, you’ll need two separate containers.
Example: Alex wants a container to contain a list of artworks in column with images of the paintings in a row. They create a container with the direction set to column and a nested container with the direction set to row.
Ease of use
Sometimes, it’s just easier to use a separate container than trying to find a workaround. For instance, if you’re designing a hero section with a large background, it may be easier to create that section as it’s own container.
Design
You may want to group some widgets together, based on their commonalities or for design purposes. For example, the widgets have the same background, hover effect, border, or scrolling effect. In this case, you can put them in the same container.
Functionality
It’s often better to create a new container for functional purposes. For instance, you can put your go-to widgets into a single container and save it as a template. After that, you can use that template as often as you need on future projects.
You can also create a separate container for widgets that you want to move as a group.
A container turns into a clickable button (a-tag) after you select it with a click. The anchor tag, also known as the a-tag, consists of an opening and closing tag that surrounds the anchor text. As such, you can’t have an a-tag inside an a-tag, Meaning, you can’t have a button inside a clickable Container. In that case, you’ll need a separate Container to house the button.
Responsiveness
By separating containers per breakpoint, you get a much more optimized way to manage responsiveness in your designs as you can easily have the elements of one container appear before the elements of the second. You may need to create nested Containers to ensure your widgets appear in the right order on different screen sizes.
Note: Keep in mind that you can add elements to containers without nested containers. If your nested container only contains one element, there’s a good chance you don’t need a container.
Next steps
Building a page with as few containers as possible is an important way to increase your site’s load times. Learn more about creating efficient pages with our article on improving performance by using containers.
To get the most out of Elementor, check out the Elementor Academy for helpful learning resources. If you come across any issues or need help, please contact our Support Center.