{"id":43848,"date":"2023-11-23T15:00:39","date_gmt":"2023-11-23T14:00:39","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=43848"},"modified":"2023-11-23T12:04:12","modified_gmt":"2023-11-23T11:04:12","slug":"guide-to-elementor-container","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/guide-to-elementor-container\/","title":{"rendered":"Everything You Need to Know About the Elementor Container"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you\u2019ve recently updated your copy of the Elementor page builder, you may have noticed a few changes, among which is a new widget called Container. Perhaps you\u2019ve only just mastered Elementor and you\u2019re freaking out that this new feature is something that will make everything you know obsolete, but don\u2019t worry. <strong>The new Elementor Container is just a new and improved way of laying out pages in WordPress, and an easier one, too.<\/strong> In this article, we\u2019re going through everything you need to know to master this new feature.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll discuss:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-the-elementor-container\">What Is the Elementor Container?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-benefits-of-containers\">The Benefits of Containers<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-use-the-elementor-container\">How to Use the Elementor Container?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-the-elementor-container\"><\/a>What Is the Elementor Container?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Container.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Container\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Container.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Container-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Container-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Container-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Elementor Container is a new functionality or element based on the concept of CSS Flexboxes. Flexbox is a CSS layout model for web pages that <strong>allows the elements within a box to be laid out automatically according to the viewport size and type<\/strong>. It\u2019s an interface item in which the elements can align in relation to each other along the vertical and horizontal axes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Elementor adopted this concept and developed an element called Container with the goal of making it more efficient for the users to design their pages.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The Container basically replaces sections and columns, as well as inner columns.<\/strong> One container is one section, and its inner layout replaces the columns you would add to an element. You get to pick the layout or create your own, thanks to the underlying flexbox concept.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The purpose of an Elementor Container is to hold other elements &#8211; these can be widgets (titles, images, paragraphs, sliders, whatever) or other containers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The containers within containers are called \u201cnested\u201d or \u201cchild\u201d containers and they basically work as Russian nesting dolls.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Elementor Container was initially been introduced as a test feature, and after quite positive feedback from the users, it has been introduced as a stable feature, along with Additional Custom Breakpoints, Optimized DOM Output, and several others.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-benefits-of-containers\"><\/a>The Benefits of Containers<\/h2>\n<p>[\/vc_column_text][vc_column_text]If Elementor chose to introduce a new functionality and modify the old way of designing page layout, it obviously had a couple of very good reasons. The containers are meant to facilitate designing page elements and entire pages, especially for users who don\u2019t want to dabble with CSS and want to handle everything from the front end in their page builder, and it offers a couple other advantages, too:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Containers reduce the number of inner sections and columns used. This means less code in the back end, which, in turn, means <strong>better site performance and faster page loading.<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">The purpose of flexbox containers is to make the sections responsive by aligning all the elements within them depending on the viewport. The elements shift and scale up and down dynamically, and for the user, this means less worrying about how the page will behave on different screen sizes. Sure, they\u2019ll still have to check a few responsivity settings on the page level, but <strong>responsiveness is now more flexible and more efficient.<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Inner sections can be clunky and adding a section within a section used to get a bit frustrating. With Elementor Container, you no longer need inner sections. You simply place a container within a container and customize each one the way you want. The flexbox functionality makes sure <strong>nested containers fit well and work well with each other<\/strong>. Not to mention that, before, we were limited to one inner section per section. Now, <strong>we can add as many nested containers as we want.<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Containers also offer <strong>greater freedom and flexibility in designing sections<\/strong>. You can set the direction in which the elements will be arranged, their alignment, order, length, and placement.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">After you\u2019ve created a complex container with a number of inner containers within it, each containing its own widgets, you can easily <strong>save it and reuse it for other purposes<\/strong>, which is a massive time-saver.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-use-the-elementor-container\"><\/a>How to Use the Elementor Container?<\/h2>\n<p>[\/vc_column_text][vc_column_text]The first thing to do is <strong>make sure your copy of Elementor is up to date<\/strong>. If you look for the functionality in your backend and you can\u2019t find it, it\u2019s probably because you haven&#8217;t updated Elementor or because the feature hasn\u2019t rolled out to you just yet. However, as of late 2023, all Elementor users should be able to activate the Flexbox Container feature.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note that the feature is available for the free and premium Elementor users alike.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After updating your copy of Elementor, head over to your Dashboard menu and, under <em><strong>Elementor<\/strong><\/em>, click on <em><strong>Settings<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019ll notice a brand new tab there, called <em><strong>Features<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Features.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Features\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Features.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Features-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Features-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Elementor-Features-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In there, you\u2019ll find a selection of experiments and features, divided into <em><strong>Ongoing Experiments<\/strong><\/em> and <strong><em>Stable Features<\/em><\/strong>. You\u2019ll find various experiments under different statuses (alpha, beta\u2026) that you can toggle on and try out.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Scroll down to Stable Features and look for <em><strong>Flexbox Container<\/strong><\/em>. It will probably be activated by default, but make sure to check anyway.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Flexbox-Container.jpg\" class=\"attachment-full size-full\" alt=\"Flexbox Container\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Flexbox-Container.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Flexbox-Container-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Flexbox-Container-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Flexbox-Container-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Save your changes and go create a new page or post.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you first start editing, you\u2019ll notice a new element in your left-hand side menu, called Container. You don\u2019t need to drag and drop it into your work canvas. Instead, you can simply click on the plus sign that will automatically add a new container to your page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"573\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Drag-Container-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Drag Container Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Drag-Container-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Drag-Container-Widget-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Drag-Container-Widget-768x454.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Drag-Container-Widget-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will now be prompted to select the structure of your container &#8211; the direction in which the content will be arranged, as well as the columns (which are, in fact, other containers, not columns, but let\u2019s not complicate things for now). You can also drag the container from the left and drop it where you want it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"577\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Select-Structure.jpg\" class=\"attachment-full size-full\" alt=\"Container Select Structure\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Select-Structure.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Select-Structure-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Select-Structure-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Select-Structure-620x369.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now this is the part where we can really appreciate the flexibility of these containers. The same interface, the same canvas basically, allows you to edit different parts of your layout in an efficient and flexible way. If you click on the six dots above the largest container, you get to edit that particular container (the parent container). You can specify the width and height, the direction of items, justify and align the items the way you want, and so on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can do the same with the child containers, too, by clicking on the rectangle in the upper left corner of each container, which will bring up the edit screen for that particular container.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, you can add more nested containers within containers by clicking on the plus sign.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"539\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Add-More-Containers.jpg\" class=\"attachment-full size-full\" alt=\"Add More Containers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Add-More-Containers.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Add-More-Containers-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Add-More-Containers-768x427.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Add-More-Containers-620x345.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, you can also move the edges of the containers left or right to adjust their arrangement within the main container in a what-you-see-is-what-you-get way, without having to adjust the values manually.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"543\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Move-Edges.jpg\" class=\"attachment-full size-full\" alt=\"Container Move Edges\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Move-Edges.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Move-Edges-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Move-Edges-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Move-Edges-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you\u2019ve set the layout, it\u2019s time to add the widgets. We won\u2019t get into details here since it\u2019s the same process as adding widgets to columns. If you need a quick reminder on this, check out our <a href=\"https:\/\/qodeinteractive.com\/magazine\/elementor-tutorial-for-beginners\/\">Comprehensive Elementor tutorial for beginners<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After adding your widgets, you can go ahead and tweak the layout and the style of your container. To access the <em><strong>Edit Container<\/strong><\/em> panel, click on the six dots above the container. The process is the same as for what we previously called <em>Edit Section<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Edit-Container.jpg\" class=\"attachment-full size-full\" alt=\"Edit Container\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Edit-Container.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Edit-Container-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Edit-Container-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Edit-Container-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <em>Layout<\/em>, you can set the content width, arrange the items, set their direction, align them and so on. And to edit each of the inner containers, simply click on the rectangle in their upper left corner. To edit the content itself, click on the pencil icon in the upper right corner.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"599\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Edit.jpg\" class=\"attachment-full size-full\" alt=\"Container Edit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Edit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Edit-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Edit-768x475.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Edit-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]At this point, it\u2019s worth explaining what the <em>Direction<\/em> and <em>Align Items<\/em> options do.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Direction-Align-Items.jpg\" class=\"attachment-full size-full\" alt=\"Container Direction Align Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Direction-Align-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Direction-Align-Items-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Direction-Align-Items-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/11\/Container-Direction-Align-Items-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <em><strong>Direction<\/strong><\/em>, you\u2019ll notice you can set your items to behave as Row (horizontal left to right), Column (vertical up to down), Reversed Row (horizontal right to left) and Reversed Column (vertical down to up). When opting for either of the column settings, all the inner containers will behave as different columns.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under <em><strong>Align Items<\/strong><\/em>, you can set your container element at the start point or in the center. It can also be set at the end, which means all the inner containers will be on the bottom. The stretch option allows the inner containers to take up any extra space. Note that these are only applicable if the direction you\u2019ve set is Row.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you choose Column for the direction, the start and center values will behave as a row, and with the end value, the containers will shift to the right. If you opt for scratch, the containers will take up any space on the left.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]The best way to master these new flexible options and new behavior is to create a sandbox or a test page and play around with the containers. Try nesting several of them and adjusting the values to see how the output will perform. You\u2019ll soon realize that Elementor Container offers a whole new level of customizability and flexibility to the way you design your pages and with a little practice you\u2019ll quickly master this great new Elementor feature.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Elementor is a page builder that&#8217;s always keen on improving. One of the latest additions to the functionality roster is the Elementor Container, a widget designed to replace sections and columns, allowing for greater flexibility in designing pages and parts of pages, while optimizing the overall site performance. If containers are a new thing for you, you&#8217;re in the right place<\/p>\n","protected":false},"author":3,"featured_media":43870,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[361,193,15,62],"class_list":["post-43848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-container","tag-elementor","tag-plugins","tag-widgets"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/43848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=43848"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/43848\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/43870"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=43848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=43848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=43848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}