fbpx

Plantilla de Cabecera y Pie de página en Elementor

> Introducción a Elementor, Plantillas

¿Qué es la Cabecera de página?

Cabecera de pagina

La cabecera de página de un sitio web es el área superior que se encuentra en cada página de tu sitio web. Por lo general, la cabecera de página es igual en todo el sitio web. Sin embargo, también hay sitios web que tienen diferentes cabeceras para diferentes secciones del sitio web.

La cabecera también puede desempeñar un papel importante en la promoción de la identidad de marca de tu empresa al incorporar elementos como el logotipo de la empresa, la tipografía, los colores y el lenguaje general de la marca.

La cabecera también contienen opciones funcionales como la navegación del sitio, la búsqueda en el sitio, un carrito de compras (para sitios de ventas), botones de llamada a la acción (CTA) y otras funciones que mejoran la experiencia del usuario y aumentan las tasas de conversión.

¿Qué es un Pie de página?

Pie de pagina

Un pie de página es un área ubicada en la parte inferior de una página web. Al igual que los encabezados, suelen aparecer de manera constante en todo el sitio web, en todas las páginas y publicaciones.

Los pies de página a menudo reciben una atención bastante marginal, lo que realmente es un potencial desperdicio ya que se repiten en cada página del sitio. Son tan importantes como los encabezados.

El diseño del pie de página, según la configuración que elijas, puede mostrar información útil e importante, como el formulario de suscripción a un boletín informativo, información de derechos de autor, términos de uso, privacidad, cookies, un mapa del sitio, información de contacto y mucho más.

Partes esenciales de un sitio web

La Cabecera y el Pie de página son dos elementos esenciales de un sitio web. Los usuarios ya dan por hecho que todo sitio web cuenta con estos dos bloques y tienen una idea clara del contenido que esperan encontrar en cada uno de ellos. Es por esto que no debemos inventar o pasarnos de originales cuando estemos creándolos, porque hay algo mucho más importante que el diseño o la originalidad y es la usabilidad. Carácterísticas comunes:

  • Se muestran en todas las páginas y publicaciones del sitio web excepto en las páginas de aterrizaje (landing pages).
  • Generalmente no varian de una página a otra aunque hay excepciones.
  • Ambas tienen una posición fija, la cabecera está al principio y el pie de página al final del documento.

WordPress cuenta con ello y todos los temas que se instalan por defecto incluyen plantillas que se pueden personalizar para la Cabecera y el Pie de página. Igualmente la gran mayoría de temas para WordPress incluyen estas dos plantillas. El problema es que este tipo de plantillas están muy limitadas en cuanto a personalización y nos tenemos que conformar con las opciones que haya incluido el creador del tema.

Por otro lado con la versión básica de Elementor podemos usar una estructura de página de lienzo en blanco (Elementor canvas), que no incluye la cabecera ni el pie de página que tenga el tema por defecto, crear nuestra propia Cabecera o Pie de página y copiarlos en todas las páginas del sitio web. El problema es que esto no es nada funcional, porque si tuvieramos que realizar algún cambio deberíamos hacerlo tantas veces como páginas tengamos.

Con Elementor Pro no tenemos ese problema porque va más allá y cuenta con un Maquetador de temas o Theme Builder propio que nos permite crear desde cero la Cabecera y el Pie de página y asignarla a todas las páginas y publicaciones del sitio web. De este modo cuando tengamos que modificarla solo lo haremos una vez.

Elementor Pro también nos permite tener diferentes cabeceras o pies de página en un mismo sitio web, pero eso lo veremos más adelante.

El Maquetador de temas o Theme Builder

¿Qué es el Maquetador de temas?

Con el Maquetador de temas de Elementor (Theme Builder) puedes agregar nuevas partes del sitio (por ejemplo, agregar una nueva Cabecera), editar partes del sitio existentes o eliminar partes del sitio. Las partes del sitio existentes incluyen un indicador visual para informarte si se aplica una condición a esa parte del sitio. 

Por ejemplo, una plantilla global para las entradas (Posts) puede tener una condición para mostrarse solo para una categoría en particular. Un indicador verde te permitirá ver de un vistazo que esta parte del sitio tiene una condición. Un indicador gris es una indicación de que una parte del sitio no tiene ninguna condición establecida por lo que no será mostrada hasta que no se establezca una.

Maquetador de temas de Elementor
El Maquetador de temas de Elementor (Theme Builder) cuenta con el menú lateral PARTES DEL SITIO, que te sirvirá de ayuda para saber cada una de las partes del sitio que necesitas crear para lograr un sitio web completo.

El Maquetador de temas de Elementor (Theme Builder) te permite personalizar a nivel global cada parte fundamental de tu sitio web y sin codificación:

  • Cabecera
  • Pie de página
  • Entrada individual
  • Página individual
  • Archivo
  • Resultados de búsqueda
  • Error 404

Elementor Pro cuenta con Widgets específicos para crear cada uno de estos tipos de plantillas, algunos de ellos solo se mostrarán cuando hayamos seleccionado ese ese tipo de contenidos. Veamos que widgets adicionales podemos usar para crear la Cabecera y el Pie de página.

Maquetar la Cabecera y el Pie de página

Cuando editamos una parte del sitio el constructor de Elementor Pro nos facilita el trabajo mostrándonos al principio del listado de wigets aquellos que están especialmente relacionados con la parte que vamos a crear. Por ejemplo en la siguiente imagen vemos los widgets que nos encontramos en primer lugar al crear la Cabecera o el Pie de página.

Widgets para Cabecera de pagina

Cómo acceder al Maquetador de temas

Hay varias formas de acceder al Maquetador de temas. Elige la que sea más conveniente para ti.

Desde el menú de administración de WordPress

Como acceder al Maquetador de temas de Elementor
  1. Desde el menú de administración de WordPress ve a Plantillas > Maquetador de temas.

Desde el editor de Elementor

Como acceder al Maquetador de temas de Elementor
  1. Desde cualquier página o pantalla del editor de Elementor, haz clic en el menú de hamburguesa en la esquina superior izquierda Menú de hamburguesa del Editor Elementor del  Panel de widgets,  luego selecciona Maquetador de temas en la pestaña Ajustes.

Mediante las teclas de atajo

Como acceder al Maquetador de temas de Elementor
  1. Acceso rápidamente al Maquetador de temas desde cualquier pantalla usando su combinación de teclas de acceso directo de teclado. En un Mac, haz clic en  CMD+SHIFT+E. En Windows, haz clic en  CTRL+MAYÚS+E para abrir de forma inmediata el Maquetador de temas.

Tablero principal del Maquetador de temas

Los usuarios gratuitos pueden ver qué partes del sitio estarían disponibles con Elementor Pro, pero no pueden añadir o modificar.

Elementor versión gratuita

Maquetador de temas version free

Elementor Pro sin plantillas creadas

Si aún no se han creado partes del sitio, se mostrarán las miniaturas predeterminadas para todas las partes del sitio disponibles.

Tablero del Maquetador de temas Elementor Pro

Elementor Pro con plantillas creadas

Para los usuarios Pro, se mostrarán las Partes del sitio existentes, si se ha creado alguna. Las miniaturas de cada parte del sitio se generarán de forma automática.

Tablero del Maquetador de temas Elementor Pro

Agregar una nueva parte del sitio

Para agregar una nueva parte del sitio, haz clic en el  enlace Agregar nuevo en la esquina superior derecha del tablero, o en el signo MÁS que aparece al pasar el mouse sobre la etiqueta de la barra lateral de una parte del sitio, o en el signo MÁS en su miniatura.

Añadir nueva parte con el Maquetador de temas

Editar el diseño de una parte del sitio existente

Editar parte del maquetador de temas
  1. Para editar una parte del sitio existente, haz clic en la etiqueta de la parte del sitio en la barra lateral. Esto abrirá el panel de detalles de la parte del sitio.
  2. Haga clic en el enlace Editar en la esquina superior derecha de la parte del sitio que desees editar. Esto abrirá el editor de Elementor para esa parte del sitio.

Exportar una parte del sitio

Exportar plantilla del maquetador de temas
  1. Haz clic en los … tres puntos horizontales en la parte superior derecha de la parte de la plantilla que quieras exportar. 
  2. Elige Exportar para abrir un cuadro de diálogo Guardar y guarda un archivo .json en tu computadora.

Importar una parte del sitio

También puedes agregar una nueva parte del sitio importando una plantilla.

Importar plantilla del maquetador de temas
  1. Haz clic en el  icono Importar Importar plantilla en la esquina superior derecha del Theme Builder.
  2. Arrastre y suelte o seleccione un archivo .JSON o .zip que contenga la plantilla que deseas importar.
  3. La plantilla ahora se agregará a tu panel de control de Partes del sitio.

Importante: para que las plantillas se importen correctamente, las cargas sin filtrar deben estar activadas. Para activarlas, ve a Elementor > Ajustes > Avanzado y cambia la opción Permitir carga de archivos sin filtrar a Activar.

Eliminar una parte del sitio

Mover plantilla maquetador de temas a la papelera
  1. Haz clic en los … tres puntos horizontales en la parte superior derecha de la parte del sitio que quieres eliminar. 
  2. Elige Papelera, lo que abrirá un cuadro de diálogo de confirmación Move Item To Trash (mover pieza a la papelera).
  3. Haz clic en Cancelar si cambias de opinión y decides que no deseas eliminar la parte del sitio, o haga clic en Move to Trash (Mover a la papelera) para confirmar que quieres mover esta parte del sitio a la papelera.

Cuando movemos un documento a la papelera podemos restaurarlo o borrarlo definitivamente desde el menú Plantillas > clic en Papelera

Renombrar una parte del sitio

  1. Haz clic en los … tres puntos horizontales en la parte superior derecha de la parte del sitio a la que quieras cambiar de nombre. 
  2. Elige Rename (Renombrar), lo que abrirá el cuadro de diálogo Rename Site Part (Renombrar parte del sitio).
  3. Ingresa el nuevo nombre y haz clic  en Change (Cambiar) para completar el proceso de cambio de nombre, o haz clic en Cancelar si cambias de opinión y decides que no quieres cambiar el nombre de esta parte del sitio.

Importante: Elementor está pasando gradualmente del modo Ajax tradicional (usando admin-ajax.php) para obtener datos en la plataforma Elementor al sistema API REST de WordPress y esto se usa dentro del nuevo Maquetador de temas (Theme Builder). Si un sitio web ha deshabilitado la API REST de WordPress, entonces el nuevo generador de temas no funcionará y el contenido, como plantillas o cualquier cosa, no se mostrará. Aparecerá un error que dice “Error: no tiene permiso para hacer eso”.

Editar condiciones de visualización

En este mismo tema más adelante veremos que son y como establecer las condiciones de visualización. Ahora vamos a ver como modificar las de una plantilla de parte desde el Maquetador de temas y desde el Constructor de Elementor.

Modificar condiciones de visualización desde el Maquetador de temas

Modificar condiciones desde el maquetador de temas
  1. Entra en el Maquetador de temas y haz clic en la plantilla a la que quieras cambiar las condiciones.
  2. En la parte de abajo del cuadro donde pone Instancias podrás ver las condiciones que tenga ya asignadas, para editarlas haz clic en Edit conditions (Editar condiciones).
  3. Aquí puedes añadir nuevas haciendo clic en el boton Añadir condición, y también modificar o eliminar las ya existentes.

Modificar condiciones de visualización desde el constructor de elementor

Modificar condiciones desde el constructor de elementor
  1. Dentro del construtor de Elementor Pro haz clic en la flechita que está junto al botón Actualizar (abajo a la izquierda) del menú emergente haz clic en Condiciones de visualización.
  2. Aquí puedes añadir nuevas haciendo clic en el boton Añadir condición, y también modificar o eliminar las ya existentes.

Cómo crear una plantilla de Cabecera o Pie de página desde el Maquetador de temas de Elementor Pro

Podemos crear una Cabecera o un Pie de página fácilmente desde el Maquetador de temas siguiendo estos pasos:

Crear cabecera
  1. Panel de administración de de WordPress en el menú Plantillas > clic en Maquetador de temas
  2. Puedes hacer clic en el botón Añadir nueva que se encuentra junto a cada categoría o bien haz clic en Add new (Añadir nueva) y elige Cabecera o Pie de página
  3. Ahora podrád elegir una plantilla de Cabecera o Pie de página prefabricada o crear una desde cero.
  4. Una vez que haya realizado los cambios necesarios en el diseño de la Cabecera o Pie de página, haz clic en el botón Publicar y elige dónde publicar la Cabecera o Pie de página. El valor predeterminado es Todo el sitio.
  5. ¡Eso es todo! Ahora puede ver su Cabecera o Pie de página hecho a mano en vivo en tu sitio.

Podemos usar las plantillas prediseñadas que nos ofrece Elementor Pro o bien diseñar desde cero con el constructor. También podemos usar una plantilla prediseñada y luego modificarla a nuestro gusto.

Condiciones de visualización para plantillas globales del Maquetador de temas

Más arriba hemos visto como establer o modificar las condiciones de visualización, en este punto vamos a explicar que son y como podemos usarlas. A partir de la versión 2.0 Elementor agregó plantillas globales como la Cabecera y el Pie de página. Estas plantillas se visualizarán en todo tu sitio o en cualquier combinación de páginas de tu elección.

Con las Condiciones, podemos establecer exactamente dónde se visualizará cada plantilla, ya sea en todo el sitio, en todas las páginas, en todas las entradas, en una determinada categoría, taxonomía o en una página específica. Cada configuración de condición le permite incluir o excluir una condición.

Por ejemplo, tenemos una plantilla de Cabecera con la condición Incluir Todo el sitio. Podemos agregar una segunda condición de Excluir para una página específica: usemos la Página de portada. De este modo esta Cabecera estará en todo el sitio web excepto en la Página de portada.

Condicion todo el sitio y pagina de portada

Nota: las condiciones de visualización se pueden usar solo en las plantillas del Maquetador de temas. Puedes crear más de una cabecera y asignarlo a diferentes áreas en su sitio.

Esquema de condiciones

Dependiendo si seleccionamos INCLUIR o EXCLUIR estas condiciones harán que una plantilla global del maquetador de temas se muestre (INCLUIR) o no se muestre (EXCLUIR).

¿Qué es un Archivo en WordPress? Los archivos son todos los listados de publicaciones que tienen algo en común. Por ejemplo el archivo de entradas es un listado con todas las entradas publicadas. Puedes listar un archivo basado en una fecha de publicación, tipo de contenido, autor o taxonomía.

  • General
    • Todo el sitio (se muestra en todo el sitio)
    • Archivos
      • Todos los archivos
      • Archivo de autor
        • Todo (en el archivo de cualquier autor)
        • Permite seleccionar un autor existente (solo en el archivo del autor seleccionado)
      • Fecha de archivo (por ejemplo cuando listas las entradas del mes de enero 2022 – https://dominio.com/2022/07/)
      • Resultados de búsqueda (en el archivo que se muestra cuando hacemos una búsqueda por palabra clave)
      • Archivo de entradas
        • Archivo de entradas
        • Categorías
          • Todo (todos los archivos de categorías)
          • Permite seleccionar una categoría existente (solo en archivos de la categoría seleccionada – https://dominio.com/category/noticias/)
        • Categoría hija directa de (archivos de subcategorías hijas directas de una categoría pero no en las subcategorías hijas de estas subcategorías)
          • Todo (archivos de todas las subcategorías de cualquier categoría pero no en las hijas de estas subcategorías)
          • Permite seleccionar una categoría existente (solo en archivos de subcategorías de la categoría seleccionada, pero no en las subcategorías hijas de estas subcategorías)
        • Cualquier categoría hija de
          • Todo (archivos de todas las subcategorías de cualquier categoría y también en las hijas de estas subcategorías)
          • Permite seleccionar una categoría existente (solo en arhivos de subcategorías de la categoría seleccionada y también en las subcategorías hijas de estas subcategorías)
        • Etiquetas
          • Todo (el archivo de cualquier etiqueta)
          • Permite seleccionar una etiqueta existente (solo archivos de la etiqueta seleccionada – https://dominio.com/tag/oferta/)
    • Única (con única se refiere a paginas individuales o post individuales, o sea una publicación única como una entrada o una página)
      • Todas las únicas (todas las páginas individuales, posts y también si tenemos Custom Post Types)
      • Página de portada (se refiere a la página que hayamos seleccionado como página de inicio en Ajustes > Lectura)
      • Entrada
        • Entradas
          • Todo (todas las entradas)
          • Permite seleccionar una entrada existente (solo se mostrará en la entrada seleccionada)
        • En categoría
          • Todo (se mostrará en todas las entradas que tengan asignada al menos una categoría)
          • Permite seleccionar una categoría existente (solo se mostrarán las entradas que tengan asignada la categoría seleccionada)
        • En un hijo de Categorías
          • Todo (entradas que tengan asignada cualquier subcategoría)
          • Permite seleccionar una categoría existente (solo se mostrarán las entradas que tengan asignada la cualquier subcategoría hija directa o no de la categoría seleccionada)
        • En Etiqueta
          • Todo (entradas que tengan asignada cualquier etiqueta)
          • Permite seleccionar una categoría existente (solo se mostrarán las entradas que tengan asignada la etiqueta seleccionada)
        • Entradas por autor
          • Todo (entradas de cualquier autor)
          • Permite seleccionar un autor existente (solo se mostrarán las entradas del autor seleccionado)
      • Página
        • Páginas
          • Todo (todas las páginas)
          • Permite seleccionar una página existente (solo se mostrará en la página seleccionada)
        • Páginas por autor
          • Todo (páginas de cualquier autor)
          • Permite seleccionar un autor existente (solo se mostrarán las páginas del autor seleccionado)
      • Páginas de destino
        • Todo (todas las páginas de destino)
        • Permite seleccionar una página de destino existente (solo se mostrará en la página de destino seleccionada)
      • Medios
        • Medios
          • Todo (en todos los documentos de medios)
          • Permite seleccionar un medio existente (solo se mostrará en el documento del medio seleccionado)
        • Medios por autor
          • Todo (en los documentos de medios de cualquier autor)
          • Permite seleccionar un autor existente (solo se mostrarán los documentos de medios del autor seleccionado)
      • Hijo directo de
        • Todo (en todas páginas y CPTs si existen jerárquicos que sean hijos directos de otro/a)
        • Permite seleccionar una página o CPT (las páginas o CPTs hijos directos de la página o CPT seleccionado)
      • Cualquier hijo de
        • Todo (en todas las páginas o CPTs que sean hijos, nietos, …)
        • Permite seleccionar una página o CPT (las páginas o CPTs hijos, nietos, … de la página o CPT seleccionado)
      • Por autor
        • Todo (en todos los documentos de cualquier autor)
        • Permite seleccionar un autor (en la página, entrada, medio, CPT, … del autor seleccionado)
      • Página 404 (solo en la página 404 que se muestra por defecto cuando la URL a la que está intentando acceder no existe)

Ejemplos de condiciones de visualización

Establecer una Cabecera o un Pie de página para todo nuestro sitio web

Condicion: Todo el sitio

Todas las asignaciones que podemos hacer en Única, por ejemplo Única > Entradas > Todo, Única > Páginas > Todo, prevalecen sobre Todo el sitio, es decir si creamos una Cabera o Pie de página y la asignamos a Única > Entradas > Todo, esta prevalece sobre la Cacecera o Pie de página que asignamos a Todo el sitio y todas las Entradas tendrán una Cabecera o Pie de página diferente a la del resto del sitio web.


Establecer una Cabecera o un Pie de página para todo nuestro sitio web excepto para la página de inicio

Condicion: Todo el sitio excepto pagina de inicio

Con esta configuración deberíamos crear otra Cabecera o Pie de página diferente y asignarla a la Página de portada.


Establecer una Cabecera o un Pie de página diferente a las Entradas del blog.

Condicion para entradas del blog

Si hacemos esto debemos tener ya asiginada una Cabecera o Pie de página para el resto del sitio web o sea a Todo el sitio.


Establecer una Cabecera o Pie de página para una página en concreto.

Condicion para una pagina concreta

En este caso asignamos esta Cabecera o Pie de página a una página que tiene como título «Página 1».


Establecer una Cabecera o Pie de página para las entradas que tengan asignada la categoría «Noticias».

Cómo puedes ver hay configuraciones muy específicas que te permitirán personalizar tu sitio al máximo.

Suscríbete a Elementor Academy

Suscríbete y recibe avisos de nuevos contenidos

Temas relacionados

Configuración global con el Kit por defecto de Elementor
Kit por defecto de Elementor
 
08:00
0.0/5
Ajustes del sitio, Introducción a Elementor
Ancla en Elementor enlaces a la propia página
Ancla en Elementor enlaces a la propia página
 
41:00
0.0/5
Introducción a Elementor, Pestaña Avanzado
Plantillas de sección de Elementor
Plantillas de sección de Elementor
 
16:07
0.0/5
Plantillas
Plantilla Global Elementor
Plantilla global de widgets de Elementor
 
07:00
0.0/5
Introducción a Elementor, Plantillas
Navigator de Elementor
Navegador de Elementor
 
08:56
0.0/5
Introducción a Elementor
Plantillas de página de destino
Añadir una plantilla de página de destino en Elementor
 
03:16
0.0/5
Plantillas
Cuál es la diferencia entre PX, EM, REM,%, VW y VH
¿Cuál es la diferencia entre PX, EM, REM,%, VW y VH?
 
10:56
0.0/5
Introducción a Elementor
Caja de Tipografía de los widgets de Elementor
Caja de Tipografía de Elementor
 
16:48
0.0/5
Introducción a Elementor
Colores globales, Fuentes globales y Estilos del tema en Elementor
Colores globales, Fuentes globales y Estilos del tema en Elementor
 
10:31
0.0/5
Ajustes del sitio, Introducción a Elementor
Cómo activar el modo oscuro o dark mode
Cómo activar el modo oscuro o dark mode
 
01:20
0.0/5
Introducción a Elementor
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
Ir arriba

Esto es un mensaje emergente

Elementor cuenta con un constructor de mensajes emergentes que puedes encontrar en el menú Plantillas.

Plantillas > Mensajes emergentes

¡hola!

Ingresa tus datos de acceso