{"id":30943,"date":"2022-02-03T12:38:00","date_gmt":"2022-02-03T10:38:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=30943"},"modified":"2023-07-18T11:55:46","modified_gmt":"2023-07-18T08:55:46","slug":"elements-that-make-up-webpage","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/","title":{"rendered":"Understanding Elements in a web page"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/Featured.png\" alt=\"Screenshot of the homepage of a website.\" class=\"wp-image-30944\"\/><figcaption class=\"wp-element-caption\">Adding or editing a header is easy with Elementor!<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Introduction<\/strong><\/h2>\n\n\n\n<p>Creating your first website can feel like a daunting task. You\u2019ll need to design several site parts and sections to build a professional and stunning website.<\/p>\n\n\n\n<p>In this article, we\u2019ll take a look at these essential site elements: the<strong> header<\/strong>, <strong>footer<\/strong>, <a href=\"https:\/\/elementor.com\/blog\/hero-image\/\"><strong>hero<\/strong><\/a><strong>,<\/strong> and<strong> <\/strong><a href=\"https:\/\/elementor.com\/help\/creating-a-menu-with-the-hello-theme-customizer\/\"><strong>menu<\/strong><\/a>. We\u2019ll also discuss why each part is important and what information you should include for a successful website design.<\/p>\n\n\n\n<p>Let\u2019s get started!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the header site part?<\/strong><\/h2>\n\n\n\n<p>The <a href=\"https:\/\/elementor.com\/academy\/how-to-create-a-wordpress-header-using-elementor-theme-builder\/\"><strong>header <\/strong><\/a>part is located at the top of the web page and its content rarely changes. The header section typically contains the business <strong>title<\/strong>, <a href=\"https:\/\/elementor.com\/academy\/how-to-change-and-style-your-site-logo-site-title\/\"><strong>logo<\/strong><\/a>, <strong>login information<\/strong>, and a <a href=\"https:\/\/elementor.com\/help\/dropdown-menu\/\"><strong>menu<\/strong><\/a><strong>, <\/strong>often with navigation drop-down links. You can use these elements to navigate to other parts of the website.<br><\/p>\n\n\n\n<p>The header defines the color scheme for the whole website with a stylish heading and logo. The image below shows the header section from the <strong>Elementor<\/strong> website to give you some perspective.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/image-3.jpeg\" alt=\"Screenshot of the Elementor website with the header highlighted at the top.\" class=\"wp-image-30945\" title=\"Screenshot of the Elementor website with the header highlighted at the top\"\/><figcaption class=\"wp-element-caption\">Every site has a header, even Elementor!<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the footer site part?<\/strong><\/h2>\n\n\n\n<p>Like the header site part, the footer site part rarely changes. Unlike the header site part, , the <a href=\"https:\/\/elementor.com\/help\/footer-site-part\/\"><strong>footer section<\/strong><\/a> is located at the bottom of your website. The footer section contains content like <a href=\"https:\/\/elementor.com\/help\/sitemap-widget-pro\/\">links to various pages on the site <\/a>and other information that you won\u2019t change regularly. This can include copyright<strong> information<\/strong>, <strong>business details<\/strong>, <strong>resources<\/strong>, and <strong>career opportunities<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/image-4.jpeg\" alt=\"Screenshot of Elementor's footer section.\" class=\"wp-image-30946\" title=\"Screenshot of the Elementor website's footer.\"\/><figcaption class=\"wp-element-caption\">Footers contain a lot of useful information and links to other pages or social media sites!<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the hero section?<\/strong><\/h2>\n\n\n\n<p>The hero section is the first thing visitors see when they open your website. The hero section starts below the header section and contains content that you may want to change periodically.&nbsp;<\/p>\n\n\n\n<p><br>The hero section contains<strong> images<\/strong>, <strong>videos<\/strong>, or <strong>animations <\/strong>that can encourage users to take certain actions, describe the benefits of using your product or service, or buttons that lead to the next page.&nbsp;<\/p>\n\n\n\n<p><br>Not every page of your website requires a hero section. A hero section is best suited for situations where you have to build trust or offer something to customers. In scenarios where a customer is visiting your website for particular information by typing a specific URL into their browser, you won\u2019t want a hero section. In that case, having a hero section would only distract visitors.<\/p>\n\n\n\n<p>Hero designs are not a \u201cone size fits all\u201d solution, so you\u2019ll have to find your own style for your unique website.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/image-5.jpeg\" alt=\"Screenshot of the hero section of the Elementor website. This contains a call-to-action that asks the visitor to choose a plan using a button to conduct the action.\" class=\"wp-image-30947\" title=\"Screenshot of the hero section of the Elementor website. This contains a call-to-action which asks the visitor to choose a plan using a button to conduct the action\"\/><figcaption class=\"wp-element-caption\">The hero section often contains a call-to-action for the visitor!\n<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the menu?&nbsp;<\/strong><\/h2>\n\n\n\n<p>You can find the navigation menu section at different places on the header depending on the style of your webpage. The menu selection often contains a collection of links like <a href=\"https:\/\/elementor.com\/help\/dropdown-menu\/\">drop-down menus<\/a> or list menus.&nbsp;<\/p>\n\n\n\n<p>Elementor\u2019s menu system is designed to keep the page clean. This leads to better aesthetics and helps users find what they need.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/08\/image-11.png\" alt=\"Screenshot of the Elementor Resources tab\" class=\"wp-image-30948\" title=\"Screenshot of Elementor's navigation menu system in the header section\"\/><figcaption class=\"wp-element-caption\">Elementor&#8217;s menu system hides navigation tools to keep the page clean!<\/figcaption><\/figure>\n\n\n\n<p>If you want to create your website from scratch, both the <a href=\"https:\/\/elementor.com\/pricing-plugin\/\">Elementor Pro<\/a> and the <a href=\"https:\/\/elementor.com\/pricing\/\">Elementor hosted website<\/a> subscriptions come with the theme builder.&nbsp;<\/p>\n\n\n\n<p>Next, you may want to check out the <a href=\"https:\/\/elementor.com\/help\/elementors-theme-builder\/\">Theme Builder to learn how to <\/a>create essential site parts like the header and footer yourself or discover how to use the headers and footers available from the Theme Builder\u2019s template library. Alternatively, discover how you can use a <a href=\"https:\/\/elementor.com\/help\/why-should-i-start-with-an-elementor-website-kit\/\">website kit <\/a>with ready-to-use headers, footers and professionally designed pages.&nbsp;<\/p>\n\n\n\n<p>To get the most out of Elementor, check out the <a href=\"https:\/\/elementor.com\/academy\/\">Elementor Academy<\/a> for more 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 Creating your first website can feel like a daunting task. You\u2019ll need to design several site parts and sections to build a professional and stunning website. In this article, we\u2019ll take a look at these essential site elements: the header, footer, hero, and menu. We\u2019ll also discuss why each part is important and what [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":30944,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65ba36d2d4b202038e09d6c2"],"footnotes":""},"categories":[1436],"tags":[],"class_list":["post-30943","post","type-post","status-publish","format-standard","has-post-thumbnail","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>Understanding Elements in a web page | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Understanding Elements in a web 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\/elements-that-make-up-webpage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Elements in a web page | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Understanding Elements in a web 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\/elements-that-make-up-webpage\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-03T10:38:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T08:55:46+00:00\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Understanding Elements in a web page\",\"datePublished\":\"2022-02-03T10:38:00+00:00\",\"dateModified\":\"2023-07-18T08:55:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/\"},\"wordCount\":626,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Building your first page or post\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/\",\"url\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/\",\"name\":\"Understanding Elements in a web page | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2022-02-03T10:38:00+00:00\",\"dateModified\":\"2023-07-18T08:55:46+00:00\",\"description\":\"Learn everything about Understanding Elements in a web page in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#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\":\"Understanding Elements in a web 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":"Understanding Elements in a web page | Elementor","description":"Learn everything about Understanding Elements in a web 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\/elements-that-make-up-webpage\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Elements in a web page | Elementor","og_description":"Learn everything about Understanding Elements in a web page in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/","og_site_name":"Help","article_published_time":"2022-02-03T10:38:00+00:00","article_modified_time":"2023-07-18T08:55:46+00:00","author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Understanding Elements in a web page","datePublished":"2022-02-03T10:38:00+00:00","dateModified":"2023-07-18T08:55:46+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/"},"wordCount":626,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#primaryimage"},"thumbnailUrl":"","articleSection":["Building your first page or post"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/","url":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/","name":"Understanding Elements in a web page | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#primaryimage"},"thumbnailUrl":"","datePublished":"2022-02-03T10:38:00+00:00","dateModified":"2023-07-18T08:55:46+00:00","description":"Learn everything about Understanding Elements in a web page in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/elements-that-make-up-webpage\/#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":"Understanding Elements in a web 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\/30943","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=30943"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/30943\/revisions"}],"predecessor-version":[{"id":36769,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/30943\/revisions\/36769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=30943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=30943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=30943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}