{"id":38850,"date":"2023-08-24T17:45:57","date_gmt":"2023-08-24T14:45:57","guid":{"rendered":"https:\/\/help-center-reorg.site.strattic.io\/?p=38850"},"modified":"2023-09-11T16:22:59","modified_gmt":"2023-09-11T13:22:59","slug":"transitioning-from-sections-to-containers","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/","title":{"rendered":"Transitioning from sections to containers"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"From Sections to Containers\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/PIsBuFOADUU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The default layout element in Elementor is the <strong>container<\/strong>. However, before the development of containers, Elementor used <strong>sections <\/strong>and <strong>columns <\/strong>for layout, so many creators are used to creating with sections.&nbsp;<\/p>\n\n\n\n<p>When moving from designing webpages with sections to design with containers, there are a few things to keep in mind:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sections <\/strong>and <strong>columns <\/strong>work vertically. When you add an element to a section, that element will be placed under or above any existing elements. With containers, you select whether elements will line up vertically or horizontally.<\/li>\n\n\n\n<li><strong>Containers <\/strong>allow you to create more sophisticated designs with a greater level of customization. For example, the <strong>Icon Box<\/strong> widget allows designers using sections to combine an icon, a heading, and text within a contained area. Using a <strong>container\u2019s <\/strong>nested elements, creators can combine elements to create their own customized widgets, for example, combining an icon with a heading and an animated headline.&nbsp;<\/li>\n\n\n\n<li>With <strong>sections <\/strong>and <strong>columns<\/strong>, the columns will always take up 100% of the <strong>section\u2019s <\/strong>width, for example, two <strong>columns <\/strong>that are each 50% of the total width. Alternatively, nested elements in <strong>containers <\/strong>can take up either more than 100% of a <strong>container\u2019s <\/strong>width, or less than 100% of its width. For example, two nested <strong>containers <\/strong>that are each 60% of the parent <strong>container\u2019s <\/strong>width.&nbsp;<\/li>\n\n\n\n<li>One of the greatest advantages <strong>containers <\/strong>have over <strong>sections <\/strong>is their flexibility in responsive design. For more details, see <a href=\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\">Responsive design using containers<\/a>. To check out examples of responsive design, see <a href=\"https:\/\/elementor.com\/help\/spacing-identical-elements-in-a-container\/\">Spacing identical elements in a container<\/a>, and <a href=\"https:\/\/elementor.com\/help\/identical-elements-nested-containers\/\">Spacing identical elements in a container with nested elements<\/a>.&nbsp;&nbsp;<\/li>\n\n\n\n<li>When creating <strong>sections <\/strong>in a design, you can also specify a minimum height for them. But the individual <strong>columns <\/strong>within the <strong>section <\/strong>cannot do this. With <strong>containers<\/strong>, both the parent <strong>container <\/strong>and the nested elements can be set to a minimum height. In fact, it is often better not to give the parent <strong>container <\/strong>a minimum height, and just assign a minimum height to the nested elements.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>To learn more about the differences between <strong>sections <\/strong>and <strong>containers<\/strong>, see <a href=\"https:\/\/elementor.com\/help\/difference-between-containers-and-section-column\/\">What is the difference between containers and the traditional section\/column<\/a>?&nbsp;<\/p>\n\n\n\n<p>For a more detailed look at how to convert <strong>sections <\/strong>into <strong>containers<\/strong>, see <a href=\"https:\/\/elementor.com\/help\/convert-sections-to-containers\/\">Convert sections into containers<\/a>.<\/p>\n\n\n\n<p>For a more detailed understanding of <strong>containers <\/strong>and their <strong>benefits<\/strong>, and to see a list of videos and articles about using containers, check out <a href=\"https:\/\/elementor.com\/help\/container-element\/\">How to learn about containers<\/a>.&nbsp;&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The default layout element in Elementor is the container. However, before the development of containers, Elementor used sections and columns for layout, so many creators are used to creating with sections.&nbsp; When moving from designing webpages with sections to design with containers, there are a few things to keep in mind: To learn more about [&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":["65b0f199452a2b1211b931b5"],"footnotes":""},"categories":[1443],"tags":[],"class_list":["post-38850","post","type-post","status-publish","format-standard","hentry","category-flexbox-containers"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Transitioning from sections to containers | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Transitioning from sections to containers 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\/transitioning-from-sections-to-containers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transitioning from sections to containers | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Transitioning from sections to containers in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-24T14:45:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-11T13:22:59+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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Transitioning from sections to containers\",\"datePublished\":\"2023-08-24T14:45:57+00:00\",\"dateModified\":\"2023-09-11T13:22:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/\"},\"wordCount\":413,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"articleSection\":[\"Flexbox containers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/\",\"url\":\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/\",\"name\":\"Transitioning from sections to containers | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"datePublished\":\"2023-08-24T14:45:57+00:00\",\"dateModified\":\"2023-09-11T13:22:59+00:00\",\"description\":\"Learn everything about Transitioning from sections to containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/#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\":\"Flexbox containers\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/flexbox-containers\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Transitioning from sections to containers\"}]},{\"@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":"Transitioning from sections to containers | Elementor","description":"Learn everything about Transitioning from sections to containers 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\/transitioning-from-sections-to-containers\/","og_locale":"en_US","og_type":"article","og_title":"Transitioning from sections to containers | Elementor","og_description":"Learn everything about Transitioning from sections to containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/","og_site_name":"Help","article_published_time":"2023-08-24T14:45:57+00:00","article_modified_time":"2023-09-11T13:22:59+00:00","author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Transitioning from sections to containers","datePublished":"2023-08-24T14:45:57+00:00","dateModified":"2023-09-11T13:22:59+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/"},"wordCount":413,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"articleSection":["Flexbox containers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/","url":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/","name":"Transitioning from sections to containers | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"datePublished":"2023-08-24T14:45:57+00:00","dateModified":"2023-09-11T13:22:59+00:00","description":"Learn everything about Transitioning from sections to containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/transitioning-from-sections-to-containers\/#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":"Flexbox containers","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/flexbox-containers\/"},{"@type":"ListItem","position":5,"name":"Transitioning from sections to containers"}]},{"@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\/38850","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=38850"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/38850\/revisions"}],"predecessor-version":[{"id":39392,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/38850\/revisions\/39392"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=38850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=38850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=38850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}