{"id":177,"date":"2022-08-01T11:01:00","date_gmt":"2022-08-01T08:01:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=177"},"modified":"2023-12-13T14:12:19","modified_gmt":"2023-12-13T12:12:19","slug":"build-your-first-page","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/build-your-first-page\/","title":{"rendered":"Use sections to build your first page"},"content":{"rendered":"\n

Build your first page in Elementor<\/h2>\n\n\n\n

Introduction<\/strong><\/h2>\n\n\n\n

After you\u2019ve set up your site, one of the first things you\u2019ll want to do is build your first page. Even if you chose to start with a kit, this is a great way to understand the editor, which will help you customize your kit. Before starting, you\u2019ll need to create a new page<\/a>.  <\/p>\n\n\n\n

You should also familiarize yourself with the layout of the Elementor Editor<\/a> if you haven\u2019t already.<\/p>\n\n\n\n

Building blocks<\/h2>\n\n\n\n

Pages in Elementor are built using three primary building blocks:  <\/p>\n\n\n\n

    \n
  1. Sections:<\/strong> the largest building blocks, which house the content inside columns.<\/li>\n\n\n\n
  2. Columns:<\/strong> sit inside of Sections and house Widgets.<\/li>\n\n\n\n
  3. Widgets:<\/strong> are placed inside Columns and are functional site components.<\/li>\n<\/ol>\n\n\n\n

    Let\u2019s start building<\/strong><\/h2>\n\n\n\n

    Now it\u2019s time to get your hands \u201cdirty\u201d \u2013 so we\u2019ll start by building what\u2019s called a \u201cHero section\u201d.  Hero sections<\/a> 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

    A good hero section starts with a great image, video or slideshow. In this case we\u2019ll start with a photo. Right-click on the image below and save it to your desktop, we\u2019ll be putting it on your site soon. <\/p>\n\n\n\n

    \"\"
    Right-click on this image and save it for the hero section.<\/figcaption><\/figure>\n\n\n\n

    Creating the section<\/strong><\/h2>\n\n\n\n

    Now let\u2019s create the section you\u2019re going to hero up.<\/p>\n\n\n\n

    1. Click the  icon to create a section. (Clicking the folder icon would start the process of importing a template, but we\u2019re going to build this section from scratch).<\/p>\n\n\n\n

    2. Select the Column<\/strong> structure. In this case, choose one column.<\/p>\n\n\n\n

    \"\"
    Create a new section by clicking the \u201c+\u201d icon.<\/figcaption><\/figure>\n\n\n\n

    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 section but, in this case, we\u2019ll add the image as a background to the section. This way we\u2019ll make sure the image fills up the entire section. <\/p>\n\n\n\n

    When you created the new section, The panel on the left side of the screen should have turned into an Edit Section<\/strong> panel. <\/p>\n\n\n\n

    If it didn\u2019t, click the dot icon in the blue tab above the section. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    We want this section to take up the entire screen, so let\u2019s use the dropdown menus to change the width to Full Width<\/strong> and set the height to a minimum of 91 VH (Learn more about why measuring in VH or VW is better than measuring in pixels<\/a>).<\/p>\n\n\n\n

    \"\"
    The Layout tab of the Edit Section menu.<\/figcaption><\/figure>\n\n\n\n

    Now it\u2019s time to add the background image. For sections and columns, the background image can be found in the Style tab. <\/p>\n\n\n\n

    Select the Style tab and choose the Classic background type.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Once you\u2019ve done that, you\u2019ll be able to add an image by clicking the image icon.<\/p>\n\n\n\n

    \"\"
    Opening the media library to insert the background image.<\/figcaption><\/figure>\n\n\n\n

    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. <\/p>\n\n\n\n

    To add the image you downloaded to your media library click Upload Files<\/strong>.<\/p>\n\n\n\n

    \"\"
    Uploading an image to the media library.<\/figcaption><\/figure>\n\n\n\n

    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 SEO <\/a>and make your site more accessible. Then click Insert Media<\/strong>. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Probably doesn\u2019t look too heroic yet does it? Let\u2019s fix that.<\/p>\n\n\n\n

    Change the Position <\/strong>of the background image to position it at the top center, set Repeat <\/strong>to No-repeat and the Size <\/strong>to Cover. Now one big image will cover the entire section.<\/p>\n\n\n\n

    \"\"
    Setting up the image for a hero section.<\/figcaption><\/figure>\n\n\n\n

    Now let\u2019s add a heading to complete our hero section. Click the widget icon so that you can select a widget. <\/p>\n\n\n\n

    \"\"
    Opening up the widget panel.<\/figcaption><\/figure>\n\n\n\n

    Drag and drop the Heading widget into the section.<\/p>\n\n\n\n

    \"\"
    Now we\u2019ll add a heading to the hero section.<\/figcaption><\/figure>\n\n\n\n

    Let\u2019s give our hero section a proper title. Type \u201cThe Art of Baking\u201d in the Title box and change the alignment so the text is centered. <\/p>\n\n\n\n

    \"\"
    Adding text to the heading.<\/figcaption><\/figure>\n\n\n\n

    Now one final step. We want this text to appear at the top of the section, not in the middle. And here we\u2019ll look at one of the trickier concepts in Elementor \u2013 negative margins<\/a>. We\u2019re going to move the text up, by lowering the margin between the heading widget and the top of the section.<\/p>\n\n\n\n

    In Elementor, margins are controlled through the Advanced tab. So click the Advanced <\/strong>tab. By default the margins are linked, so that they are all the same. We\u2019ll have to unlink the margins and then change the Top <\/strong>margin to -300. <\/p>\n\n\n\n

    \"\"
    Using negative margins to place the text.<\/figcaption><\/figure>\n\n\n\n

    That\u2019s more like it. <\/p>\n\n\n\n

    Click Publish <\/strong>to save your page.<\/p>\n\n\n\n

    \"\"
    Click Publish to save your work.<\/figcaption><\/figure>\n\n\n\n

    The bottom line<\/strong><\/h2>\n\n\n\n

    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 applying a website kit<\/a> 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 Theme Builder<\/a>. <\/p>\n\n\n\n

    To get the most out of <\/strong>Elementor<\/strong><\/a>, head over to the Elementor Academy<\/a> for more learning resources. If you have any issues or need help, please contact our Support Center<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Learn how to build your first page using Elementor – Beginner’s guide<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65ba361542bc8d72464b4641"],"footnotes":""},"categories":[1436],"tags":[],"class_list":["post-177","post","type-post","status-publish","format-standard","hentry","category-building-your-first-page-or-post"],"acf":[],"yoast_head":"\nHow to Build Your First Page in Elementor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn how to get started with Elementor and build your first page. Read our full guide to create your first Elementor pages.\" \/>\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-your-first-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Your First Page in Elementor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn how to get started with Elementor and build your first page. Read our full guide to create your first Elementor pages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/build-your-first-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-01T08:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-13T12:12:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1022\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Use sections to build your first page\",\"datePublished\":\"2022-08-01T08:01:00+00:00\",\"dateModified\":\"2023-12-13T12:12:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/\"},\"wordCount\":1023,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1-1024x545.jpg\",\"articleSection\":[\"Building your first page or post\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/build-your-first-page\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/\",\"url\":\"https:\/\/elementor.com\/help\/build-your-first-page\/\",\"name\":\"How to Build Your First Page in Elementor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1-1024x545.jpg\",\"datePublished\":\"2022-08-01T08:01:00+00:00\",\"dateModified\":\"2023-12-13T12:12:19+00:00\",\"description\":\"Learn how to get started with Elementor and build your first page. Read our full guide to create your first Elementor pages.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/build-your-first-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1.jpg\",\"width\":1920,\"height\":1022},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/build-your-first-page\/#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 sections 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\/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":"How to Build Your First Page in Elementor | Elementor","description":"Learn how to get started with Elementor and build your first page. Read our full guide to create your first Elementor pages.","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-your-first-page\/","og_locale":"en_US","og_type":"article","og_title":"How to Build Your First Page in Elementor | Elementor","og_description":"Learn how to get started with Elementor and build your first page. Read our full guide to create your first Elementor pages.","og_url":"https:\/\/elementor.com\/help\/build-your-first-page\/","og_site_name":"Help","article_published_time":"2022-08-01T08:01:00+00:00","article_modified_time":"2023-12-13T12:12:19+00:00","og_image":[{"width":1920,"height":1022,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1.jpg","type":"image\/jpeg"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/build-your-first-page\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/build-your-first-page\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Use sections to build your first page","datePublished":"2022-08-01T08:01:00+00:00","dateModified":"2023-12-13T12:12:19+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/build-your-first-page\/"},"wordCount":1023,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/build-your-first-page\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1-1024x545.jpg","articleSection":["Building your first page or post"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/build-your-first-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/build-your-first-page\/","url":"https:\/\/elementor.com\/help\/build-your-first-page\/","name":"How to Build Your First Page in Elementor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/build-your-first-page\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/build-your-first-page\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1-1024x545.jpg","datePublished":"2022-08-01T08:01:00+00:00","dateModified":"2023-12-13T12:12:19+00:00","description":"Learn how to get started with Elementor and build your first page. Read our full guide to create your first Elementor pages.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/build-your-first-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/build-your-first-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/build-your-first-page\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1.jpg","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/1.jpg","width":1920,"height":1022},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/build-your-first-page\/#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 sections 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\/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\/177","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=177"}],"version-history":[{"count":7,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":43592,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/177\/revisions\/43592"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}