{"id":33236,"date":"2023-01-17T15:36:26","date_gmt":"2023-01-17T13:36:26","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=33236"},"modified":"2025-10-08T12:55:20","modified_gmt":"2025-10-08T09:55:20","slug":"build-first-page-containers","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/build-first-page-containers\/","title":{"rendered":"Use containers to build your first page"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"289\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png\" alt=\"\" class=\"wp-image-40223\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1-300x85.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1-768x217.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now that you know how to&nbsp;<a href=\"https:\/\/elementor.com\/help\/create-new-page\/\">create a new page<\/a>, we\u2019ll show you how to build your first page in&nbsp;<a href=\"https:\/\/elementor.com\/pricing\/\">Elementor<\/a>&nbsp;using flexbox containers. Containers replace the previous system of sections and columns, providing an easier and more flexible way to build a web page.<\/p>\n\n\n\n<p>Before starting, you should familiarize yourself with the layout of the&nbsp;<a href=\"https:\/\/elementor.com\/help\/the-elementor-editor-structure-and-layout\/\">Elementor Editor<\/a>&nbsp;if you haven\u2019t already.<\/p>\n\n\n\n<p>You may also want to familiarize yourself with the concept of&nbsp;<a href=\"https:\/\/elementor.com\/help\/container-element\/\">containers<\/a>.&nbsp;<\/p>\n\n\n\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=\"Create your first Elementor page\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/-rmAPLLewEY?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\"><strong>Let\u2019s start building<\/strong><\/h2>\n\n\n\n<p>Now it\u2019s time to get your hands \u201cdirty\u201d \u2013 so we\u2019ll start by building what\u2019s called a \u201cHero section\u201d.&nbsp;&nbsp;<a href=\"https:\/\/elementor.com\/blog\/hero-image\/\">Hero sections<\/a>&nbsp;are big prominent elements, usually found at the top of the page. They\u2019re designed to attract visitors and keep them on your site.<\/p>\n\n\n\n<p>We\u2019ll be building a hero section based on one that can be found in our template library, available for all Elementor Pro and Cloud users.&nbsp;<\/p>\n\n\n\n<p>A good hero section starts with a great image, video or slideshow. In this case we\u2019ll start with a photo. If you want to follow along, you can click the image below and save it to your desktop, for use as the background image.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Creating the hero section<\/strong><\/h2>\n\n\n\n<p>First thing we\u2019ll need to do is create a container to hold your hero section.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the&nbsp;<img decoding=\"async\" width=\"20\" height=\"20\" src=\"https:\/\/lh4.googleusercontent.com\/HN0Hu26WrZjIK_oVTfxej6GSVjAD4kflJvjY1Vu-rQdjB2oG6RchENB_AUE30R34qrLMsm-4xIuS7Rb4f6MUldzq8AY7HoqOQ3WYMHvA5YuGMAX9LUItJiSK66k2Zn2bZIthC-PNkIyhQ8GIKj33L9gLRKWExgbDoHE4aCbllrTIax_8xlzNj5waGPic\">&nbsp;icon to create a layout for your container. (Clicking the folder icon would start the process of importing a template, but we\u2019re going to build this section from scratch).<\/li>\n\n\n\n<li>Now we need to select a container structure. For now, we\u2019ll keep it simple and use one container \u2013 however, we still need to choose if the container will have a row or column structure. In our case, the elements are going to be arranged vertically, so we\u2019ll choose the column layout.&nbsp;<br><img decoding=\"async\" width=\"680\" height=\"156\" class=\"wp-image-40225\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/2.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/2.png 1131w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/2-300x69.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/2-1024x235.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/2-768x177.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>Okay, now it\u2019s time to shine. Let\u2019s add the image to your Hero section. There are several ways to add an image to a container but, in this case, we\u2019ll add the image as a background This way we\u2019ll make sure the image fills up the entire container.&nbsp;<br>When you created the new container, The panel on the left side of the screen should have turned into an&nbsp;<strong>Edit Section<\/strong>&nbsp;panel.&nbsp;<br>If it didn\u2019t, click the dot icon in the blue tab above the container.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"90\" class=\"wp-image-40226\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/3.png\" alt=\"\"><\/li>\n\n\n\n<li>We want our hero section to take up the entire screen, so we\u2019ll keep the content width set to&nbsp;<strong>Boxed&nbsp;<\/strong>with a&nbsp;<strong>Width<\/strong>&nbsp;of 1140 PX and a Min. Height of 540PX. (Learn more about the&nbsp;<a href=\"https:\/\/elementor.com\/help\/whats-the-difference-between-px-em-rem-vw-and-vh\/\">different measuring units<\/a>).&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"378\" class=\"wp-image-40227\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/4.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/4.png 311w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/4-300x298.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/4-150x150.png 150w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>The text in our Hero section is in the middle of the screen, so let\u2019s set&nbsp;<strong>Justify Content<\/strong>&nbsp;and&nbsp;<strong>Align Items<\/strong>&nbsp;to Center.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"222\" class=\"wp-image-40228\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/5.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/5.png 306w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/5-300x175.png 300w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><br>Now it\u2019s time to add the background image. For containers, the background image can be found in the&nbsp;<strong>Style&nbsp;<\/strong>tab.&nbsp;<br>Learn more about all the&nbsp;<a href=\"https:\/\/elementor.com\/help\/container-element\/\">options available to you with flexbox containers<\/a>.<\/li>\n\n\n\n<li>Select the&nbsp;<strong>Style&nbsp;<\/strong>tab and choose the Classic background type.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"296\" class=\"wp-image-40229\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/6.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/6.png 311w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/6-300x233.png 300w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><br>Once you\u2019ve done that, you\u2019ll be able to add an image by clicking the image icon.<br>This will open your media library. In WordPress, best practice is to add media through the media library so that\u2019s what we\u2019ll do.&nbsp;<\/li>\n\n\n\n<li>To add the image you downloaded to your media library click&nbsp;<strong>Upload Files&nbsp;<\/strong>and then<strong>&nbsp;Select Files<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"312\" class=\"wp-image-40230\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/7.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/7.png 1600w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/7-300x137.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/7-1024x469.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/7-768x352.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/7-1536x704.png 1536w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Navigate to the file you selected and click Open. This will add the image to your media library. Although it\u2019s optional, best practice is to add Alt Text and a caption. This will help your&nbsp;<a href=\"https:\/\/elementor.com\/blog\/elementor-seo\/\">SEO&nbsp;<\/a>and make your site more accessible. Then click&nbsp;<strong>Insert Media<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"312\" class=\"wp-image-40231\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/8.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/8.png 1600w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/8-300x137.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/8-1024x469.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/8-768x352.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/8-1536x704.png 1536w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>Probably doesn\u2019t look too heroic yet does it? Let\u2019s fix that.<\/li>\n\n\n\n<li>We\u2019ll change the following options:\n<ol class=\"wp-block-list\">\n<li><strong>Position&nbsp;<\/strong>of the background image: Center-Center<\/li>\n\n\n\n<li><strong>Attachment<\/strong>:<strong>&nbsp;<\/strong>Scroll<\/li>\n\n\n\n<li><strong>Repeat<\/strong>:<strong>&nbsp;<\/strong>No-repeat<\/li>\n\n\n\n<li><strong>Size<\/strong>:<strong>&nbsp;<\/strong>Cover<br>&nbsp;Now one big image will cover the entire section.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"424\" class=\"wp-image-40232\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/9.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/9.png 295w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/9-269x300.png 269w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><br>&nbsp;<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p>Let\u2019s add the text to our hero section.<br>In this case, we are using two different styles of text so we\u2019ll use two Heading widgets.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>&nbsp;Click the widget icon so that you can select a widget.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"296\" class=\"wp-image-40233\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/10.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/10.png 311w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/10-300x233.png 300w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>Drag and drop a Heading widget into the container.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"505\" class=\"wp-image-40234\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/11.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/11.png 382w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/11-226x300.png 226w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>In the Content tab, enter \u201cTotal Body Fitness\u201d into the&nbsp;<strong>Title&nbsp;<\/strong>box.<\/li>\n\n\n\n<li>Change the&nbsp;<strong>Alignment&nbsp;<\/strong>to Center.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"702\" class=\"wp-image-40236\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/13.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/13.png 281w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/13-162x300.png 162w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n<\/ol>\n\n\n\n<p>Now, we need to style the heading.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the&nbsp;<strong>Style&nbsp;<\/strong>tab.<\/li>\n\n\n\n<li>Change the&nbsp;<strong>Text Color<\/strong>&nbsp;of the text to #F8F812 (Learn more about&nbsp;<a href=\"https:\/\/elementor.com\/help\/?p=129\">picking colors<\/a>).<\/li>\n\n\n\n<li>Change the&nbsp;<strong>Typography<\/strong>&nbsp;to:\n<ol class=\"wp-block-list\">\n<li><strong>Family<\/strong>: Montserrat&nbsp;<\/li>\n\n\n\n<li><strong>Size<\/strong>: 22PX<\/li>\n\n\n\n<li><strong>Weight<\/strong>:<strong>&nbsp;<\/strong>400<\/li>\n\n\n\n<li><strong>Transform<\/strong>: Normal<\/li>\n\n\n\n<li><strong>Style<\/strong>: Normal<\/li>\n\n\n\n<li><strong>Decoration<\/strong>: None<\/li>\n\n\n\n<li><strong>Line Height<\/strong>: 26PX<br>(Learn more about&nbsp;<a href=\"https:\/\/elementor.com\/help\/what-is-typography\/#\">typography<\/a>)<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"702\" class=\"wp-image-40238\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/13-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/13-1.png 281w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/13-1-162x300.png 162w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p>Learn more about all these&nbsp;<a href=\"https:\/\/elementor.com\/help\/heading-widget\/\">options for the Heading widget<\/a>.<\/p>\n\n\n\n<p>To add the second headline:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag a Heading widget under the first widget.<\/li>\n\n\n\n<li>In the&nbsp;<strong>Content&nbsp;<\/strong>tab change the text to \u201cCHALLENGE YOURSELF.&lt;BR&gt;TAKE IT TO THE NEXT LEVEL and the&nbsp;<strong>Alignment&nbsp;<\/strong>to center. (The &lt;br&gt; in the text indicates a line break.)<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"551\" class=\"wp-image-40239\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/14-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/14-1.png 306w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/14-1-207x300.png 207w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>Go to the&nbsp;<strong>Style&nbsp;<\/strong>tab.<\/li>\n\n\n\n<li>Change the&nbsp;<strong>Text Color<\/strong>&nbsp;of the text to #FFFFFF.<\/li>\n\n\n\n<li>Change the&nbsp;<strong>Typography&nbsp;<\/strong>to:\n<ol class=\"wp-block-list\">\n<li><strong>Family<\/strong>: Archivo&nbsp;<\/li>\n\n\n\n<li><strong>Size<\/strong>: 65PX<\/li>\n\n\n\n<li><strong>Weight<\/strong>:<strong>&nbsp;<\/strong>800<\/li>\n\n\n\n<li><strong>Transform<\/strong>: Uppercase<\/li>\n\n\n\n<li><strong>Style<\/strong>: Normal<\/li>\n\n\n\n<li><strong>Decoration<\/strong>: None<\/li>\n\n\n\n<li><strong>Line Height<\/strong>: 1EM<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"521\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/15.png\" alt=\"\" class=\"wp-image-40240\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/15.png 281w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/15-162x300.png 162w\" sizes=\"(max-width: 281px) 100vw, 281px\" \/><\/figure>\n\n\n\n<p>Finally, we\u2019ll add a button that will quickly convert interested visitors into customers by taking them straight to a registration page. To do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag a Button widget under the second header.<\/li>\n\n\n\n<li>In the&nbsp;<strong>Content&nbsp;<\/strong>tab change the&nbsp;<strong>Text&nbsp;<\/strong>to \u201csee pricing&gt;\u201d<\/li>\n\n\n\n<li>Change th<strong>e Alignment&nbsp;<\/strong>to Center.&nbsp;<\/li>\n\n\n\n<li>Go to the&nbsp;<strong>Style&nbsp;<\/strong>tab.<\/li>\n\n\n\n<li>Change the&nbsp;<strong>Typography&nbsp;<\/strong>to:\n<ol class=\"wp-block-list\">\n<li><strong>Family<\/strong>: Archivo<\/li>\n\n\n\n<li><strong>Size<\/strong>:<strong>&nbsp;<\/strong>18PX<\/li>\n\n\n\n<li><strong>Weight<\/strong>: 800<\/li>\n\n\n\n<li><strong>Transform<\/strong>: Uppercase<\/li>\n\n\n\n<li><strong>Style<\/strong>: Normal<\/li>\n\n\n\n<li><strong>Decoration<\/strong>: None<\/li>\n\n\n\n<li><strong>Line Height<\/strong>: 1EM<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>Change the&nbsp;<strong>Text Color<\/strong>&nbsp;to #1B252F.<\/li>\n\n\n\n<li>Change the background color to #F8F812.<\/li>\n\n\n\n<li>In the&nbsp;<strong>Padding&nbsp;<\/strong>section, click the lock icon to unlink the values.<\/li>\n\n\n\n<li>Change the values to:\n<ol class=\"wp-block-list\">\n<li><strong>Top<\/strong>: 20<\/li>\n\n\n\n<li><strong>Right<\/strong>: 55<\/li>\n\n\n\n<li><strong>Bottom<\/strong>: 20<\/li>\n\n\n\n<li><strong>Left<\/strong>: 55<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p>(Learn more about&nbsp;<a href=\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\">padding and margins<\/a>)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"641\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/16.png\" alt=\"\" class=\"wp-image-40242\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/16.png 297w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/16-139x300.png 139w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/figure>\n\n\n\n<p>Your container should now look like the one at the top of the page. If it doesn\u2019t, look at what\u2019s different and try to figure out which values you may have skipped or entered incorrectly.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Click&nbsp;<strong>Publish&nbsp;<\/strong>to save your page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"792\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/17.png\" alt=\"\" class=\"wp-image-40243\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/17.png 301w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/17-114x300.png 114w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Next steps<\/strong><\/h2>\n\n\n\n<p>Of course we\u2019ve only just scratched the surface of what you can do with Elementor. Next, you can create more sections below the hero to finish up your page. Or you can try&nbsp;<a href=\"https:\/\/elementor.com\/help\/selecting-an-elementor-site-kit\/\">applying a website kit<\/a>&nbsp;to your site and customizing it for your needs. You can also apply a kit just to examine it and see how experts use Elementor. If you prefer to work from scratch, you can learn more about creating an entire site structure with the&nbsp;<a href=\"https:\/\/elementor.com\/help\/what-is-the-elementor-theme-builder\/\">Theme Builder<\/a>.&nbsp;To get the most out of<strong>&nbsp;<\/strong><a href=\"https:\/\/elementor.com\/pricing\/\"><strong>Elementor<\/strong><\/a>, head over to the&nbsp;<a href=\"https:\/\/elementor.com\/academy\/\">Elementor Academy<\/a>&nbsp;for more learning resources. If you have any issues or need help, please contact our&nbsp;<a href=\"https:\/\/elementor.com\/support\/\">Support Center<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Now that you know how to&nbsp;create a new page, we\u2019ll show you how to build your first page in&nbsp;Elementor&nbsp;using flexbox containers. Containers replace the previous system of sections and columns, providing an easier and more flexible way to build a web page. Before starting, you should familiarize yourself with the layout of the&nbsp;Elementor Editor&nbsp;if you [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65ba33cb1870bb69bd2795cf"],"footnotes":""},"categories":[1436],"tags":[],"class_list":["post-33236","post","type-post","status-publish","format-standard","hentry","category-building-your-first-page-or-post"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Use containers to build your first page | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Use containers to build your first page 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\/build-first-page-containers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use containers to build your first page | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Use containers to build your first page in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/build-first-page-containers\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-17T13:36:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-08T09:55:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"289\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Use containers to build your first page\",\"datePublished\":\"2023-01-17T13:36:26+00:00\",\"dateModified\":\"2025-10-08T09:55:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/\"},\"wordCount\":1236,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png\",\"articleSection\":[\"Building your first page or post\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/build-first-page-containers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/\",\"url\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/\",\"name\":\"Use containers to build your first page | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png\",\"datePublished\":\"2023-01-17T13:36:26+00:00\",\"dateModified\":\"2025-10-08T09:55:20+00:00\",\"description\":\"Learn everything about Use containers to build your first page in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/build-first-page-containers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-containers\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png\",\"width\":1024,\"height\":289},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/build-first-page-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\":\"Building your first page or post\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/building-your-first-page-or-post\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Use containers to build your first page\"}]},{\"@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":"Use containers to build your first page | Elementor","description":"Learn everything about Use containers to build your first page 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\/build-first-page-containers\/","og_locale":"en_US","og_type":"article","og_title":"Use containers to build your first page | Elementor","og_description":"Learn everything about Use containers to build your first page in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/build-first-page-containers\/","og_site_name":"Help","article_published_time":"2023-01-17T13:36:26+00:00","article_modified_time":"2025-10-08T09:55:20+00:00","og_image":[{"width":1024,"height":289,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Use containers to build your first page","datePublished":"2023-01-17T13:36:26+00:00","dateModified":"2025-10-08T09:55:20+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/"},"wordCount":1236,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png","articleSection":["Building your first page or post"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/build-first-page-containers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/","url":"https:\/\/elementor.com\/help\/build-first-page-containers\/","name":"Use containers to build your first page | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png","datePublished":"2023-01-17T13:36:26+00:00","dateModified":"2025-10-08T09:55:20+00:00","description":"Learn everything about Use containers to build your first page in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/build-first-page-containers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/build-first-page-containers\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/01\/1.png","width":1024,"height":289},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/build-first-page-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":"Building your first page or post","item":"https:\/\/elementor.com\/help\/elementor-editor\/building-your-first-page-or-post\/"},{"@type":"ListItem","position":4,"name":"Use containers to build your first page"}]},{"@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\/33236","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=33236"}],"version-history":[{"count":21,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/33236\/revisions"}],"predecessor-version":[{"id":154354,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/33236\/revisions\/154354"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=33236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=33236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=33236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}