{"id":29123,"date":"2022-09-12T12:00:00","date_gmt":"2022-09-12T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29123"},"modified":"2024-01-10T17:01:26","modified_gmt":"2024-01-10T15:01:26","slug":"basic-layouts-using-the-container","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/","title":{"rendered":"Create basic layouts"},"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=\"Containers- Creating the layout\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/PAUvjHNAJRw?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<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>By using containers, you can achieve more optimized layouts in your design. Below are a few basic layouts. You may learn how to create each of these using our tutorials.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Intro Container<\/h3>\n\n\n\n<p>One of the most fundamental sections on websites is an intro\/splash section. This is generally a welcoming title with a tagline. It is also a good place to start interacting with the user by adding buttons to direct them to additional information or a purchase.&nbsp;Learn to create this <a href=\"https:\/\/elementor.com\/help\/creating-an-intro-container\/\" data-type=\"post\" data-id=\"29142\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1024x492.png\" alt=\"\" class=\"wp-image-29124\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Hero<\/h3>\n\n\n\n<p>A hero is generally composed of an image, and descriptive text. A button may also be used as a call to action. This could be a link to a bio, or a product in your shop. A parent container is created and set to the direction of row and center aligned\/justified. The image is placed in the container with a custom width (example: 40%-60%) A container is then placed to the left or right with a direction of column. Headings, text, and buttons are placed in the container and spaced to best fit the design. Learn how to make this <a data-type=\"post\" data-id=\"29152\" href=\"https:\/\/elementor.com\/help\/creating-a-hero-section-with-containers\/\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Container.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Container-1024x364.png\" alt=\"\" class=\"wp-image-29125\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Hero with image gallery<\/h3>\n\n\n\n<p>A hero may also feature descriptive text along with a gallery of images. Here, a child-container is used along with a Text Editor widget inside a large parent container. The child-container is used to display the images. Each image can then be adjusted to fit using the flex controls. Learn how to make this <a href=\"https:\/\/elementor.com\/help\/creating-a-hero-image-gallery-container\/\" data-type=\"post\" data-id=\"29193\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Gallery.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Hero-Gallery-1024x495.png\" alt=\"\" class=\"wp-image-29126\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Call To Action<\/h3>\n\n\n\n<p>A call to action is generally composed of text and a button that invites the user to interact with it. These can be used to fire a contact form popup, offer a subscription, or directed to a pricing page.<\/p>\n\n\n\n<p>Here a parent container is set to the direction of row, the items are aligned vertically, and the content is justified to space-between. a Text Editor, and a Button widget is placed within it. By adjusting the width of the text editor, the proper padding may be achieved (example: the text editor is set to 60% width) Learn how to create this <a data-type=\"post\" data-id=\"29161\" href=\"https:\/\/elementor.com\/help\/creating-a-call-to-action-container\/\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Call-to-Action.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Call-to-Action-1024x364.png\" alt=\"\" class=\"wp-image-29127\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Services&nbsp;<\/h3>\n\n\n\n<p>This is a rather basic design but still used frequently. The Heading widget, and the Icon Box widgets are used in the parent container. By adding the wrap property to the parent container, the child elements can be nested within by using their individual width properties.\u00a0 You may also use the Image Box widget in the same fashion. Learn more about how to make this section <a data-type=\"post\" data-id=\"29169\" href=\"https:\/\/elementor.com\/help\/creating-a-services-container\/\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Services-Container.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Services-Container-1024x540.png\" alt=\"\" class=\"wp-image-29128\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Next steps<\/h2>\n\n\n\n<p>After you\u2019ve checked how to build these layouts using containers, learn how you can use containers to create templates for your <a href=\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/\">website parts such as headers<\/a>.&nbsp;<\/p>\n\n\n\n<p>To get the most out of<strong> Elementor,<\/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 By using containers, you can achieve more optimized layouts in your design. Below are a few basic layouts. You may learn how to create each of these using our tutorials. Intro Container One of the most fundamental sections on websites is an intro\/splash section. This is generally a welcoming title with a tagline. It [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["659eb146614e3c455f5e503f"],"footnotes":""},"categories":[1443],"tags":[],"class_list":["post-29123","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>Create basic layouts | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Create basic layouts 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\/basic-layouts-using-the-container\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create basic layouts | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Create basic layouts in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-12T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T15:01:26+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\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\/basic-layouts-using-the-container\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Create basic layouts\",\"datePublished\":\"2022-09-12T09:00:00+00:00\",\"dateModified\":\"2024-01-10T15:01:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/\"},\"wordCount\":487,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1024x492.png\",\"articleSection\":[\"Flexbox containers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/\",\"url\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/\",\"name\":\"Create basic layouts | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1024x492.png\",\"datePublished\":\"2022-09-12T09:00:00+00:00\",\"dateModified\":\"2024-01-10T15:01:26+00:00\",\"description\":\"Learn everything about Create basic layouts in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#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\":\"Create basic layouts\"}]},{\"@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\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create basic layouts | Elementor","description":"Learn everything about Create basic layouts 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\/basic-layouts-using-the-container\/","og_locale":"en_US","og_type":"article","og_title":"Create basic layouts | Elementor","og_description":"Learn everything about Create basic layouts in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/","og_site_name":"Help","article_published_time":"2022-09-12T09:00:00+00:00","article_modified_time":"2024-01-10T15:01:26+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Create basic layouts","datePublished":"2022-09-12T09:00:00+00:00","dateModified":"2024-01-10T15:01:26+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/"},"wordCount":487,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1024x492.png","articleSection":["Flexbox containers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/","url":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/","name":"Create basic layouts | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Intro-Container-1024x492.png","datePublished":"2022-09-12T09:00:00+00:00","dateModified":"2024-01-10T15:01:26+00:00","description":"Learn everything about Create basic layouts in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/#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":"Create basic layouts"}]},{"@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\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29123","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=29123"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29123\/revisions"}],"predecessor-version":[{"id":44355,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29123\/revisions\/44355"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=29123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=29123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=29123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}