{"id":34663,"date":"2022-08-07T14:06:52","date_gmt":"2022-08-07T12:06:52","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/header-and-footer-template-in-elementor\/"},"modified":"2023-03-30T12:19:33","modified_gmt":"2023-03-30T10:19:33","slug":"header-and-footer-template-in-elementor","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/header-and-footer-template-in-elementor\/","title":{"rendered":"Header and Footer template in Elementor"},"content":{"rendered":"\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#0-%C2%BFqu%C3%A9-es-la-cabecera-de-p%C3%A1gina\">What is the Page Header?<\/a><\/li><li class=\"toc-level-1\"><a href=\"#1-%C2%BFqu%C3%A9-es-un-pie-de-p%C3%A1gina\">What is a Footer?<\/a><\/li><li class=\"toc-level-1\"><a href=\"#2-partes-esenciales-de-un-sitio-web\">Essential parts of a website<\/a><\/li><li class=\"toc-level-1\"><a href=\"#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 the Elementor Pro Theme Designer<\/a><\/li><li class=\"toc-level-1\"><a href=\"#establecer-las-condiciones-de-visualizacion-1d778165-71a8-413d-89b9-7db72ad51b17\">Display conditions for global templates in the Theme Designer<\/a><\/li><li class=\"toc-level-2\"><a href=\"#esquema-de-condiciones-f5113146-da32-460f-87ff-d4bf220cb4a9\">Outline of conditions<\/a><\/li><li class=\"toc-level-3\"><a href=\"#ejemplos-de-condiciones-de-visualizacion-02e13760-b50e-4db8-bdf8-5754e34a8e43\">Examples of display conditions<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"0-%C2%BFqu%C3%A9-es-la-cabecera-de-p%C3%A1gina\">What is the Page Header?<\/h2>\n\n<figure class=\"wp-block-image alignright size-full is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Top of page\" class=\"wp-image-18336\" width=\"543\" height=\"295\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 1488w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina-300x164.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina-768x419.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 768w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=595 595w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=892 892w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=1190 1190w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/cabecera-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=450 450w\" sizes=\"(max-width: 543px) 100vw, 543px\" \/><\/a><\/figure>\n<p>The page header of a website is the top area found on each page of your website. Generally, the page header is the same throughout the website. However, there are also websites that have different headers for different sections of the website.<\/p>\n\n<p>The masthead can also play an important role in promoting your company&#8217;s brand identity by incorporating elements such as company logo, typography, colors and general brand language.<\/p>\n\n<p>The header also contains functional options such as site navigation, site search, a shopping cart (for sales sites), call-to-action (CTA) buttons and other features that enhance 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\n<figure class=\"wp-block-image alignright size-full is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Footer\" class=\"wp-image-18335\" width=\"568\" height=\"328\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 1475w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina-300x173.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina-768x443.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 768w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=590 590w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=885 885w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=1180 1180w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/07\/pie-de-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=450 450w\" sizes=\"(max-width: 568px) 100vw, 568px\" \/><\/a><\/figure>\n<p>A footer is an area located at the bottom of a web page. Like headers, they tend to appear consistently throughout the website, on all pages and posts.<\/p>\n\n<p>Footers often receive fairly marginal attention, which is really a potential waste as they are repeated on every page of the site. They are as important as the headings.<\/p>\n\n<p>The footer design, depending on the settings you choose, can display useful and important information, such as a newsletter subscription form, copyright information, terms of use, privacy, cookies, a sitemap, contact information and 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>The <strong>Header<\/strong> and <strong>Footer<\/strong> are two essential elements of a website. Users already take it for granted that every website has these two blocks and have a clear idea of the content they expect to find in each of them. This is why we should not invent or be too original when we are creating them, because there is something much more important than design or originality and that is <strong>usability<\/strong>. Common characteristics:<\/p>\n\n<ul class=\"wp-block-list\"><li>They are displayed on all pages and posts on the website except landing pages.<\/li><li>Generally they do not vary from one page to another, although there are exceptions.<\/li><li>Both have a fixed position, the header is at the beginning and the footer at the end of the document.<\/li><\/ul>\n<p>WordPress features this and all themes that are installed by default include customizable templates for the <strong>header<\/strong> and <strong>footer<\/strong>. The vast majority of <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a> themes also include these two templates. The problem is that this type of templates are very limited in terms of customization and we have to settle for the options included by the creator of the theme.<\/p>\n\n<p>On the other hand with the basic version of Elementor we can use a blank canvas page structure (Elementor canvas), which does not include the header and footer that the default theme has, create our own  <strong>Header<\/strong>  o  <strong>Footer<\/strong>  and copy them to all pages of the website. The problem is that this is not functional at all, because if we had to make any change we would have to do it as many times as pages we have.<\/p>\n\n<p>With <a href=\"https:\/\/lacolmenatecnologica.com\/ar\/unirse\/1-%d8%aa%d8%b1%d8%ae%d9%8a%d8%b5-elementor-pro\/\">Elementor Pro<\/a> we do not have that problem because it goes further and has a <em>\n  <a href=\"https:\/\/lacolmenatecnologica.com\/ar\/elementor-academy-temas\/%d9%85%d9%86%d8%b4%d8%a6-%d9%85%d9%88%d8%b6%d9%88%d8%b9-%d8%a7%d9%84%d8%b9%d9%86%d8%b5%d8%b1\/\">Theme Layout Designer<\/a>\n<\/em> o <em>\n  <a href=\"https:\/\/lacolmenatecnologica.com\/ar\/elementor-academy-temas\/%d9%85%d9%86%d8%b4%d8%a6-%d9%85%d9%88%d8%b6%d9%88%d8%b9-%d8%a7%d9%84%d8%b9%d9%86%d8%b5%d8%b1\/\">Theme Builder<\/a>\n<\/em> that allows us to create from scratch the header and footer and assign it to all pages and publications of the website. This way when we have to modify it we will only do it once.  <\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/lacolmenatecnologica.com\/ar\/unirse\/1-%d8%aa%d8%b1%d8%ae%d9%8a%d8%b5-elementor-pro\/\">Elementor Pro<\/a> also allows us to have different headers or footers in the same website, but we will see that later.<\/p><\/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 Theme Designer<\/h2>\n\n<p>We can create a Header or Footer easily from the <em>\n  <a href=\"https:\/\/lacolmenatecnologica.com\/ar\/elementor-academy-temas\/%d9%85%d9%86%d8%b4%d8%a6-%d9%85%d9%88%d8%b6%d9%88%d8%b9-%d8%a7%d9%84%d8%b9%d9%86%d8%b5%d8%b1\/\">Theme Layout Designer<\/a>\n<\/em> following these steps:<\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/crear-cabecera.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"1838\" height=\"907\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/crear-cabecera.gif?strip=all&quality=92&webp=92&avif=92&resize=1838%2C907\" alt=\"Create header\" class=\"wp-image-18356\"\/><\/a><\/figure>\n<ol class=\"wp-block-list\"><li>WordPress <em>administration panel<\/em> in the <strong>Templates<\/strong> menu &gt; click on <strong>Theme Builder<\/strong><\/li><li>You can either click on the <img loading=\"lazy\" decoding=\"async\" width=\"20\" height=\"19\" class=\"wp-image-18355\" style=\"width: 20px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/anadir-nueva.png?strip=all&quality=92&webp=92&avif=92&resize=20%2C19\" alt=\"Add new\"\/> button next to each category or click on <strong>Add new<\/strong> and choose <em>Header<\/em> or <em>Footer<\/em>.<\/li><li>You can now choose a pre-made <em>Header<\/em> or <em>Footer<\/em> template or create one from scratch.<\/li><li>Once you have 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>All site<\/strong>.<\/li><li>That&#8217;s all! You can now see your handmade <em>header<\/em> or <em>footer<\/em> live on your site.<\/li><\/ol>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>We can use the <strong>predesigned templates<\/strong> offered by <a href=\"https:\/\/lacolmenatecnologica.com\/ar\/unirse\/1-%d8%aa%d8%b1%d8%ae%d9%8a%d8%b5-elementor-pro\/\">Elementor Pro<\/a> or design from scratch with the builder. We can also use a predesigned template and then modify it to our liking.<\/p><\/blockquote>\n","protected":false},"featured_media":32682,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-34663","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/plantilla-de-cabecera-y-pie-de-pagina-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1900,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/plantilla-de-cabecera-y-pie-de-pagina-en-elementor-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/plantilla-de-cabecera-y-pie-de-pagina-en-elementor-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/08\/plantilla-de-cabecera-y-pie-de-pagina-en-elementor-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/plantilla-de-cabecera-y-pie-de-pagina-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1900,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/plantilla-de-cabecera-y-pie-de-pagina-en-elementor-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/08\/plantilla-de-cabecera-y-pie-de-pagina-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1900,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/en\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"What is the Page Header? The page header of a website is the top area found on each page of your website. Generally, the page header is the same throughout the website. However, there are also websites that have different headers for different sections of the website. The masthead can also play an important role&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy\/34663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/32682"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=34663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}