{"id":6440,"date":"2022-08-07T14:06:52","date_gmt":"2022-08-07T12:06:52","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/header-and-footer-template-in-elementor\/"},"modified":"2026-09-02T19:30:57","modified_gmt":"2026-09-02T17:30:57","slug":"header-and-footer-template-in-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/header-and-footer-template-in-elementor\/","title":{"rendered":"Header and Footer Template in Elementor"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"0-%C2%BFqu%C3%A9-es-la-cabecera-de-p%C3%A1gina\">What is the header?<\/h2>\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cabecera-de-pagina.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1488\" height=\"811\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cabecera-de-pagina.jpg\" alt=\"Page header\" class=\"wp-image-4760\" style=\"width:543px;height:295px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cabecera-de-pagina.jpg 1488w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cabecera-de-pagina-500x273.jpg 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cabecera-de-pagina-1024x558.jpg 1024w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cabecera-de-pagina-768x419.jpg 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cabecera-de-pagina-600x327.jpg 600w\" sizes=\"auto, (max-width: 1488px) 100vw, 1488px\" \/><\/a><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">A website header is the top area that appears on every page of your website. Generally, the header is the same across the entire site. However, some websites also have different headers for different sections of the site.  <\/p>\n\n<p class=\"wp-block-paragraph\">The header can also play an important role in promoting your company\u2019s brand identity by incorporating elements such as the company logo, typography, colors, and the brand\u2019s overall language.<\/p>\n\n<p class=\"wp-block-paragraph\">The header also includes functional options such as site navigation, on-site search, a shopping cart (for eCommerce sites), call-to-action (CTA) buttons, and other features that improve the user experience and increase conversion rates.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"1-%C2%BFqu%C3%A9-es-un-pie-de-p%C3%A1gina\">What is a footer?<\/h2>\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pie-de-pagina.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1475\" height=\"851\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pie-de-pagina.jpg\" alt=\"Footer\" class=\"wp-image-4761\" style=\"width:568px;height:328px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pie-de-pagina.jpg 1475w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pie-de-pagina-500x288.jpg 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pie-de-pagina-1024x591.jpg 1024w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pie-de-pagina-768x443.jpg 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pie-de-pagina-600x346.jpg 600w\" sizes=\"auto, (max-width: 1475px) 100vw, 1475px\" \/><\/a><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">A footer is an area located at the bottom of a web page. Like headers, they usually appear consistently across the website, on all pages and posts. <\/p>\n\n<p class=\"wp-block-paragraph\">Footers often get very little attention, which is really a missed opportunity since they repeat on every page of the site. They\u2019re just as important as headers. <\/p>\n\n<p class=\"wp-block-paragraph\">Depending on the settings you choose, the footer design can display useful and important information such as a newsletter subscription form, copyright information, terms of use, privacy, cookies, a sitemap, contact information, and much more.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"2-partes-esenciales-de-un-sitio-web\">Essential parts of a website<\/h2>\n\n<p class=\"wp-block-paragraph\">The <strong>Header<\/strong> and the <strong>Footer<\/strong> are two essential elements of a website. Users already assume every website has these two blocks and have a clear idea of what they expect to find in each one. That\u2019s why we shouldn\u2019t reinvent the wheel or try to be overly original when creating them, because there\u2019s something much more important than design or originality: <strong>usability<\/strong>. Common characteristics:   <\/p>\n\n<ul class=\"wp-block-list\">\n<li>They appear on all pages and posts on the website except landing pages.<\/li>\n\n\n\n<li>They generally don\u2019t vary from one page to another, although there are exceptions.<\/li>\n\n\n\n<li>Both have a fixed position: the header is at the beginning and the footer at the end of the document.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">WordPress is built around this, and all themes installed by default include templates that can be customized for the <strong>Header<\/strong> and the <strong>Footer<\/strong>. Likewise, the vast majority of <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> themes include these two templates. The problem is that these types of templates are very limited in terms of customization, and we have to settle for the options the theme author included.  <\/p>\n\n<p class=\"wp-block-paragraph\">On the other hand, with the basic version of Elementor we can use a blank canvas page layout (Elementor Canvas), which doesn\u2019t include the theme\u2019s default header or footer, create our own <strong>Header<\/strong> or <strong>Footer<\/strong>, and copy them across all the pages on the website. The problem is that this isn\u2019t practical at all, because if we needed to make a change, we\u2019d have to do it as many times as we have pages. <\/p>\n\n<p class=\"wp-block-paragraph\">With <a href=\"https:\/\/lacolmenatecnologica.com\/unirse\/1-licencia-de-elementor-pro-10-e-ano\/\"><\/a>With <a href=\"https:\/\/lacolmenatecnologica.com\/en\/product\/elementor-pro\/\">Elementor Pro<\/a> we don\u2019t have that problem because it goes further and includes its own <em><a href=\"https:\/\/lacolmenatecnologica.com\/maquetador-de-temas-de-elementor\/\">Theme Builder<\/a><\/em> or <em><a href=\"https:\/\/lacolmenatecnologica.com\/maquetador-de-temas-de-elementor\/\">Theme Builder<\/a><\/em>, which lets us create the Header and Footer from scratch and assign them to all pages and posts on the website. That way, when we need to edit them, we only do it once. <\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/lacolmenatecnologica.com\/unirse\/1-licencia-de-elementor-pro-10-e-ano\/\"><\/a><a href=\"https:\/\/lacolmenatecnologica.com\/unirse\/1-licencia-de-elementor-pro-10-e-ano\/\"><\/a><a href=\"https:\/\/lacolmenatecnologica.com\/en\/product\/elementor-pro\/\">Elementor Pro<\/a> also lets us have different headers or footers on the same website, but we\u2019ll look at that later.<\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\" id=\"como-crear-una-plantilla-de-cabecera-o-pie-de-pagina-desde-el-maquetador-de-temas-de-elementor-pro-503b678b-efc8-4a0e-80c7-6eb8bb89facf\">How to create a Header or Footer template from Elementor Pro\u2019s Theme Builder<\/h2>\n\n<p class=\"wp-block-paragraph\">We can easily create a Header or Footer from the <em><a href=\"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/maquetador-de-temas-de-elementor\/\"><em><a href=\"https:\/\/lacolmenatecnologica.com\/maquetador-de-temas-de-elementor\/\">Theme Builder<\/a><\/em><\/a><\/em> by following these steps:<\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/crear-cabecera-1.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1838\" height=\"907\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/crear-cabecera-1.gif\" alt=\"Create header\" class=\"wp-image-4762\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>In the WordPress <em>admin panel<\/em>, go to the <strong>Templates<\/strong> menu &gt; click <strong>Theme Builder<\/strong><\/li>\n\n\n\n<li>You can click the <figure><img decoding=\"async\" class=\"wp-image-18355\" style=\"width: 20px\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/08\/anadir-nueva.png\" alt=\"Add new\"\/><\/figure> button next to each category, or click <strong>Add new<\/strong> and choose <em>Header<\/em> or <em>Footer<\/em>.<\/li>\n\n\n\n<li>Now you can choose a pre-made <em>Header<\/em> or <em>Footer<\/em> template, or create one from scratch.<\/li>\n\n\n\n<li>Once you\u2019ve made the necessary changes to the Header or Footer design, click the <strong>Publish<\/strong> button and choose where to publish the <em>Header<\/em> or <em>Footer<\/em>. The default value is <strong>Entire Site<\/strong>. <\/li>\n\n\n\n<li>That\u2019s it! You can now see your custom <em>Header<\/em> or <em>Footer<\/em> live on your site. <\/li>\n<\/ol>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">We can use the <strong>pre-designed templates<\/strong> offered by <a href=\"https:\/\/lacolmenatecnologica.com\/en\/product\/elementor-pro\/\">Elementor Pro<\/a>, or design from scratch with the builder. We can also use a pre-designed template and then customize it to our liking. <\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>What is the header? A website header is the top area that appears on every page of your website. Generally, the header is the same across the entire site. However, some websites also have different headers for different sections of the site. The header can also play an important role in promoting your company\u2019s brand [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Create Header and Footer Templates in Elementor: Guide","_seopress_titles_desc":"What is the header? A website header is the top area that appears on every page of your website. Generally, the\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[374],"tags":[379,380],"class_list":["post-6440","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-elementor-templates","tag-wordpress-themes"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6440"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6440\/revisions"}],"predecessor-version":[{"id":6442,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6440\/revisions\/6442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6441"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}