{"id":31619,"date":"2022-09-22T12:00:00","date_gmt":"2022-09-22T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=31619"},"modified":"2024-01-10T16:59:28","modified_gmt":"2024-01-10T14:59:28","slug":"how-many-containers-page","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/how-many-containers-page\/","title":{"rendered":"How many containers should my page contain?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Introduction&nbsp;<\/strong><\/h2>\n\n\n\n<p>Building a website with <a href=\"https:\/\/elementor.com\/help\/the-container\/\">containers<\/a> 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 <a href=\"https:\/\/elementor.com\/help\/creating-a-single-page-template-with-the-container\/\">create reusable templates<\/a> to streamline your workflow. <\/p>\n\n\n\n<p>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.&nbsp;<\/p>\n\n\n\n<p>To maximize the benefits containers provide, you need to optimize the number of times you group objects. In this article, we\u2019ll discuss how many containers you should use for your webpages.&nbsp;<\/p>\n\n\n\n<p>First, let\u2019s take a look at how you can design a webpage efficiently using containers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Design the page you want efficiently&nbsp;&nbsp;&nbsp;&nbsp;<\/strong><\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>A web page\u2019s 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\u2019t need to know about how all this works, but it\u2019s useful to know that a website\u2019s DOM groups and arranges each object node hierarchically similar to headings and subheads of a book.&nbsp;&nbsp;<\/p>\n\n\n\n<p>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\u2019re effectively creating a DOM node that makes it easy for browsers to call the right data as it\u2019s needed from the server hosting the website. This makes the page faster to load and increases responsiveness.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How do I know when I need a new container?\u00a0<\/strong><\/h2>\n\n\n\n<p>Several factors determine how many containers you\u2019ll need to use for a webpage:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Direction&nbsp;<\/strong><\/h3>\n\n\n\n<p>A container\u2019s 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\u2019ll need two separate containers.&nbsp;<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ease of use&nbsp;<\/strong><\/h3>\n\n\n\n<p>Sometimes, it\u2019s just easier to use a separate container than trying to find a workaround. For instance, if you\u2019re <a href=\"https:\/\/elementor.com\/help\/creating-a-hero-section-with-containers\/\">designing a hero section<\/a> with a large background, it may be easier to create that section as it\u2019s own container.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Design&nbsp;<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Functionality<\/strong><\/h3>\n\n\n\n<p>It\u2019s often better to create a new container for functional purposes. For instance, you can put your go-to widgets into a single container and <a href=\"https:\/\/elementor.com\/help\/reusing-containers\/\">save it as a template<\/a>. After that, you can use that template as often as you need on future projects.&nbsp;<\/p>\n\n\n\n<p>You can also create a separate container for widgets that you want to move as a group.&nbsp;<\/p>\n\n\n\n<p>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\u2019t have an a-tag inside an a-tag, Meaning, you can\u2019t have a button inside a clickable Container. In that case, you\u2019ll need a separate Container to house the button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Responsiveness&nbsp;<\/strong><\/h3>\n\n\n\n<p>By separating containers per breakpoint, you get a much more <a href=\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\">optimized way to manage responsiveness<\/a> 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.<\/p>\n\n\n\n<p>Note: Keep in mind that you can add elements to containers without nested containers. If your nested container only contains one element, there\u2019s a good chance you don\u2019t need a container.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Next steps<\/strong><\/h2>\n\n\n\n<p>Building a page with as few containers as possible is an important way to increase your site&#8217;s load times. Learn more about creating efficient pages with our article on <a href=\"https:\/\/elementor.com\/help\/improve-performance-with-containers\/\">improving performance by using containers<\/a>. <\/p>\n\n\n\n<p><br>To get the most out of<strong> <\/strong>Elementor<strong>,<\/strong> check out the <a href=\"https:\/\/elementor.com\/academy\/\">Elementor Academy<\/a> for helpful learning resources. If you come across any issues or need help, please contact our <a href=\"https:\/\/elementor.com\/support\/\">Support Center<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction&nbsp; 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 [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["659eb0d1b08ba4560acbda4f"],"footnotes":""},"categories":[1445],"tags":[],"class_list":["post-31619","post","type-post","status-publish","format-standard","hentry","category-containers-faqs"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How many containers should my page contain? | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about How many containers should my page contain? in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/how-many-containers-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How many containers should my page contain? | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about How many containers should my page contain? in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/how-many-containers-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-22T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T14:59:28+00:00\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/how-many-containers-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/how-many-containers-page\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"How many containers should my page contain?\",\"datePublished\":\"2022-09-22T09:00:00+00:00\",\"dateModified\":\"2024-01-10T14:59:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/how-many-containers-page\/\"},\"wordCount\":851,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"articleSection\":[\"Containers FAQs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/how-many-containers-page\/\",\"url\":\"https:\/\/elementor.com\/help\/how-many-containers-page\/\",\"name\":\"How many containers should my page contain? | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"datePublished\":\"2022-09-22T09:00:00+00:00\",\"dateModified\":\"2024-01-10T14:59:28+00:00\",\"description\":\"Learn everything about How many containers should my page contain? in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/how-many-containers-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/how-many-containers-page\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/how-many-containers-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Layout\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Containers FAQs\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/containers-faqs\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How many containers should my page contain?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How many containers should my page contain? | Elementor","description":"Learn everything about How many containers should my page contain? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/how-many-containers-page\/","og_locale":"en_US","og_type":"article","og_title":"How many containers should my page contain? | Elementor","og_description":"Learn everything about How many containers should my page contain? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/how-many-containers-page\/","og_site_name":"Help","article_published_time":"2022-09-22T09:00:00+00:00","article_modified_time":"2024-01-10T14:59:28+00:00","author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/how-many-containers-page\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/how-many-containers-page\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"How many containers should my page contain?","datePublished":"2022-09-22T09:00:00+00:00","dateModified":"2024-01-10T14:59:28+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/how-many-containers-page\/"},"wordCount":851,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"articleSection":["Containers FAQs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/how-many-containers-page\/","url":"https:\/\/elementor.com\/help\/how-many-containers-page\/","name":"How many containers should my page contain? | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"datePublished":"2022-09-22T09:00:00+00:00","dateModified":"2024-01-10T14:59:28+00:00","description":"Learn everything about How many containers should my page contain? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/how-many-containers-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/how-many-containers-page\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/how-many-containers-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Layout","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/"},{"@type":"ListItem","position":4,"name":"Containers FAQs","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/containers-faqs\/"},{"@type":"ListItem","position":5,"name":"How many containers should my page contain?"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/31619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=31619"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/31619\/revisions"}],"predecessor-version":[{"id":44352,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/31619\/revisions\/44352"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=31619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=31619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=31619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}