{"id":11690,"date":"2023-07-05T11:39:24","date_gmt":"2023-07-05T11:39:24","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=11690"},"modified":"2023-07-25T12:01:07","modified_gmt":"2023-07-25T12:01:07","slug":"flexbox-containers-what-you-need-to-know-for-a-smooth-transition","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/","title":{"rendered":"Flexbox Containers: What you need to know for a smooth transition"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"11690\" class=\"elementor elementor-11690\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b156e5a thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b156e5a\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-562cd080\" data-id=\"562cd080\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4acffa2c elementor-widget elementor-widget-video\" data-id=\"4acffa2c\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/RkAXKKb6iXE&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b0d76cd thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b0d76cd\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7d86c32d\" data-id=\"7d86c32d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7fbdc56b elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"7fbdc56b\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2141\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2141\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2142\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2142\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2141\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2141\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2141\" tabindex=\"0\" hidden=\"false\"><p>Discover how Flexbox containers can benefit your website, and learn how to make a smooth transition from sections to containers on your Elementor website.<\/p><p>The video will cover:<br \/>\u2714\ufe0e Advantages of using containers to create complex layouts and faster loading websites<br \/>\u2714\ufe0e Tips for a smooth transition, without the need to rebuild your entire website<br \/>\u2714\ufe0e A handy trick for adding new sections even after activating containers<br \/>\u2714\ufe0e The step-by-step process of activating containers in Elementor<br \/>\u2714\ufe0e And more!<\/p><p>See Also:<br \/><a href=\"https:\/\/playground.elementor.com\/demo\/flexbox\" target=\"_blank\" rel=\"noopener\">Containers Playground<\/a><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2142\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2142\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2142\" tabindex=\"0\" hidden=\"hidden\"><p>Containers are a relatively new way to work in Elementor and have been the subject of much discussion in our community. So what\u2019s all the hype about, anyway?<\/p><p>I\u2019m Aviva from Elementor, and today I\u2019m answering your questions about switching from sections to flexbox containers. I&#8217;ll share tips for making a smooth transition on your website, so you can make the switch with confidence.<\/p><ol><li><strong>Question #1: Why should I use containers?\u00a0<\/strong><br \/>In short, containers allow you to create more advanced layouts faster. They let you change the layout, distribution, and order of elements for any screen size. Using containers also improves your website performance. Win win!<\/li><li>Question #2: Will activating containers affect any of my existing layouts in Elementor?<br \/>The answer is no! After activating containers, your existing sections remain as sections, and you\u2019ll still be able to duplicate and edit them as usual.<p>That brings us to:<\/p><\/li><li>Question #3: Will I need to rebuild my whole website in containers?<br \/>No, again. If you choose to convert specific sections, Elementor will create a copy of the section in the form of a container. You can tweak your converted container, if necessary, following your original section as a guide. Then, delete the section.<\/li><li>Question #4: Can I still add new sections to my page after activating containers?<br \/>You can&#8217;t add a new section or inner section directly to your page layout once you&#8217;ve activated containers. But if you\u2019d still like to use sections after activating containers, I have a tip for you:<p>Before activating containers, save an empty section with an inner section inside, as a template. Then you can insert your section template whenever you&#8217;d prefer to use a section.<\/p><\/li><li>Question #5: Anything else I should know before activating containers on my site?<p>Yes. As always, create a backup before making any big changes to your website. And if possible, test first in a staging environment.<br \/>And note that if you deactivate containers, any existing containers on your site will disappear.<\/p><\/li><\/ol><p>Question #6: Ok, I\u2019m ready. How do I activate containers?<\/p><p>From the WordPress admin go to Elementor &gt; Settings &gt; Features and set Flexbox Containers to Active. Save changes, and you\u2019re good to go.<\/p><p>We&#8217;ve also launched a <a href=\"https:\/\/playground.elementor.com\/demo\/flexbox\" target=\"_blank\" rel=\"noopener\">containers playground<\/a> where you can practice \u200ccreating all types of layouts. You can access it from the link in the description.<\/p><p>So are you ready to make the switch? Do you have any questions about activating containers? Let me know in the comments below.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Discover how Flexbox containers can benefit your website, and learn how to make a smooth transition from sections to containers on your Elementor website. The video will cover: \u2714\ufe0e Advantages of using containers to create complex layouts and faster loading websites \u2714\ufe0e Tips for a smooth transition, without the need to rebuild [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":11725,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,27],"tags":[],"class_list":["post-11690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-workflow"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Flexbox Containers: What you need to know for a smooth transition - Academy<\/title>\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\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexbox Containers: What you need to know for a smooth transition - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Discover how Flexbox containers can benefit your website, and learn how to make a smooth transition from sections to containers on your Elementor website. The video will cover: \u2714\ufe0e Advantages of using containers to create complex layouts and faster loading websites \u2714\ufe0e Tips for a smooth transition, without the need to rebuild [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-05T11:39:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-25T12:01:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2023\/07\/containers-QA.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aviva Darab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aviva Darab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flexbox Containers: What you need to know for a smooth transition - Academy","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\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/","og_locale":"en_US","og_type":"article","og_title":"Flexbox Containers: What you need to know for a smooth transition - Academy","og_description":"Overview Transcript Overview Discover how Flexbox containers can benefit your website, and learn how to make a smooth transition from sections to containers on your Elementor website. The video will cover: \u2714\ufe0e Advantages of using containers to create complex layouts and faster loading websites \u2714\ufe0e Tips for a smooth transition, without the need to rebuild [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/","og_site_name":"Academy","article_published_time":"2023-07-05T11:39:24+00:00","article_modified_time":"2023-07-25T12:01:07+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2023\/07\/containers-QA.jpg","type":"image\/jpeg"}],"author":"Aviva Darab","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aviva Darab","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/"},"author":{"name":"Aviva Darab","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449"},"headline":"Flexbox Containers: What you need to know for a smooth transition","datePublished":"2023-07-05T11:39:24+00:00","dateModified":"2023-07-25T12:01:07+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/"},"wordCount":518,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2023\/07\/containers-QA.jpg","articleSection":["Design \/ Layout","Workflow"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/","url":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/","name":"Flexbox Containers: What you need to know for a smooth transition - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2023\/07\/containers-QA.jpg","datePublished":"2023-07-05T11:39:24+00:00","dateModified":"2023-07-25T12:01:07+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2023\/07\/containers-QA.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2023\/07\/containers-QA.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/flexbox-containers-what-you-need-to-know-for-a-smooth-transition\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Flexbox Containers: What you need to know for a smooth transition"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/6ce87fcf655168e5ac55e43148a99449","name":"Aviva Darab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5456d642d6417c9b72a48f8fbec624cc1336f934ce83732b6fa2358ab0c31bfe?s=96&d=mm&r=g","caption":"Aviva Darab"},"description":"Aviva is a Designer and Educator at Elementor. She\u2019s experienced in web and graphic design and enjoys sharing her knowledge with others. She stays fueled with coffee, dark chocolate, and Pinterest.","url":"https:\/\/elementor.com\/academy\/author\/user-5e36e0380be94\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/11690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=11690"}],"version-history":[{"count":17,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/11690\/revisions"}],"predecessor-version":[{"id":11707,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/11690\/revisions\/11707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/11725"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=11690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=11690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=11690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}