Cabecera y pie de página personalizadas con Elementor Pro

Simplicidad / Elementor PRO / Deja un comentario / Por

Siempre nace la pregunta como personalizar la cabecera y footer de mi sitio web en WordPress, por lo general realizar este tipo de cosas en WordPress es un poco tedioso; algunas plantillas traen limitaciones, así como hay miles de plugins que te ofrecen soluciones interesantes; hoy vamos a usar Elementor Pro, para crear cualquier tipo de cabecera para tu sitio web.

Construiremos de una forma sencilla y divertida porque Elementor Pro nos brinda una paleta de Widgets muy variada a la hora de personalizar nuestros diseños.

Guarden la calma, porque les prepare vídeos explicando como hacerlo, sin embargo también me gustaría explicarles textualmente lo que he realizado.
Ahora si ¡manos a la obra!:

Ejemplo 1: Crear una cabecera personalizada usando una plantilla de Elementor Pro.

¿Qué es una cabecera?

Una cabecera es la parte más importante un sitio web, porque contiene el menú de enlaces de todo el sitio web y un logotipo de una marca. Como también es lo primero que se observa al entrar a un sitio web.

Creando una plantilla para la cabecera y pie de página con WooWeb

Si estas usando WordPress con WooWeb, tienes esta opción previamente creada y lista para darle los toques de diseño que deseas ó adicionarle alguna opción. ¿Cómo?, simplemente accede a tu escritorio de WooWeb, y encontrarás dos iconos accesos directos llamados Cabecera y otro Pie de Página, al hacer clic en cualquiera de las dos, te llevará directamente a construir tu cabecera ó pie de página, como puedes ver en la siguiente imagen:

Creando la cabecera desde WordPress

Iniciamos en el escritorio de WordPress y accede a:

  1. Plantillas / Theme Builder
  2. Clic Header / Añadir nueva
  3. Seleccionamos una plantilla Pro de Elementor
  4. Clic sobre el botón insertar.
Reproducir vídeo

Personalizando nuestra cabecera.

A partir de esta ventana podemos empezar a construir nuestra cabecera, haciendo uso de algunos widgets que permiten facilmente tener una cabecera personalizada, te muestro en el siguiente video como hacerlo:

Reproducir vídeo

Personalizando la cabecera para tables y móviles (A nivel responsive)

Cuando hablamos de una personalización en responsive, donde nos imaginamos que la cabecera debe estar ajustada visualmente para un equipo móvil y tableta; pensamos algo complicado y que toma mucho tiempo.

¡Pues no! Elementor Pro nos brinda una configuración muy fácil y personalizada a la hora construir la vista para estos dispositivos (escritorio, móviles y tableta). Te muestro en el siguiente video:

Reproducir vídeo

Configurar las condiciones de visualización de la cabecera.

Esa opción es súper útil, porque permite visualizar la cabecera en cualquier parte de nuestro sitio o excluir otras zonas, ¿te imaginas tener diferentes cabeceras según la landing page o zona de tu sitio web?.
 
Cuando nos ubicamos en las condiciones de visualización, tenemos las siguientes opciones:
 
  • a) Incluir: Esta opción nos muestra donde deseamos mostrar nuestra cabecera puede ser en una sola página, articulo o todo el sitio web.
  • b) Excluir: Esta opción nos muestra donde no queremos mostrar la cabecera puede ser una página, articulo o todo el sitio web
Y resalto nuevamente la posibilidad de crear múltiples cabeceras en un sitio web y personalizar al estilo que se desea, basta con añadir otra cabecera según los pasos que te explique y indicar donde deseas que se visualice.
Reproducir vídeo

Ver el vídeo tutorial completo.

Aquí les muestro el vídeo completo donde se crea la cabecera personalizada con Elementor Pro:
Reproducir vídeo

Ejemplo 2: Crear una cabecera desde cero personalizada con Elementor Pro.

Este ejemplo es muy parecido al anterior, solo que esta vez no usaremos ninguna plantilla.

Creando cabecera desde cero.

Iniciamos en el escritorio de WordPress, ubicamos la opción Plantillas / Theme Builder, luego de ingresar seleccionamos Header / Añadir nueva. Ahora cerramos el selector de cabeceras ya que vamos a crear una cabecera desde cero con Elementor Pro.
Reproducir vídeo

Personalizando estilos y responsive de nuestra cabecera personalizada

Como vemos creamos la plantilla de la cabecera desde cero, por lo tanto faltan crear las secciones, columnas y elemetos como el logo, menú de enlaces del sitio y extras como iconos de redes sociales y otros enlaces.
 
En paralelo a esto vamos a realizar la personalización para móviles, con la finalidad que nuestra cabecera logre adaptarse tanto a equipos de escritorio, móvil y tableta.
 
Te muestro en el siguiente video como empezar:
Reproducir vídeo

Configurar las condiciones de visualización de la cabecera.

Solo para este ejemplo configuramos la condición en incluir que solo se muestre nuestra cabecera en «Todos los Archivos», de tal forma que la cabecera se mostrará en los listados de entradas del blog. Te recuerdo nuevamente que es posible crear múltiples cabeceras en un sitio web y personalizar al estilo que se desea.
Reproducir vídeo

Ver el vídeo tutorial completo.

Aquí les muestro el vídeo completo donde se crea la cabecera desde cero y como se personaliza con Elementor Pro
Reproducir vídeo
Es un elemento de un sitio web el cual indica su parte final; el footer puede contener enlaces del sitio web, preguntas frecuentes, copyright, enlaces a redes sociales, un pequeño formulario de suscripción, ubicación, contacto, entre otros…

Del mismo modo que en el ejemplo de la cabecera personalizada, iniciamos en el escritorio de WordPress, ubicamos la opción:

  1. Plantillas / Theme Builder
  2. Clic en Footer / Añadir nueva 
  3. Seleccionamos la opción footer
  4. Clic en crear

Ahora que estamos en el selector de footers; podemos elegir un diseño de footer en base a una plantilla pre-diseñada por Elementor pro ó simplemente cerramos la ventana para empezar a construir desde cero nuestro pie de página, te muestro en el siguiente video los pasos:

Reproducir vídeo
Ahora vamos a editar el footer agregando un fondo de tipo vídeo, editando secciones, color de la tipografía y agregar iconos de redes sociales, como en el siguiente video:
Reproducir vídeo
Vamos a personalizar el pie de página para móvil y tableta de manera sencilla con el editor de Elementor Pro.
Reproducir vídeo
Cuando vamos a publicar nuestro footer, usamos las siguientes condiciones:
  • Incluir: En «Todo el Sitio» esto quiere decir que el footer se va a observar en todo nuestro sitio web.
  • Excluir: Vamos a probar una exclusión única en una página.
Recuerden que puede mostrar y ocultar un footer en cualquier zona del sitio web, además de crear mas de un footer personalizado y mostrarlos en cualquier zona de tu sitio web, usando las condiciones a la hora de publicar.
Reproducir vídeo
Aquí va el vídeo tutorial completo:
Reproducir vídeo

Conclusión y recomendaciones.

Vemos que Elementor Pro es versátil a la hora de personalizar visualmente la cabecera y footer, te permite
  • Construir cabeceras y pies de página para cualquier zona de tu sitio web,
  • Usar sus condiciones de visualización para excluir cabeceras y pies de página para cualquier zona de tu sitio web.
  • Con WooWeb ya tienes una cabecera y pie de página que puedes modificarla directamente desde tu escritorio, como te mostramos al inicio.
Estas listo para realizar una cabecera y footer personalizado, te recomiendo lo siguiente:
  • En el footer  y cabecera parte con una plantilla de Elementor Pro y luego ve que bloques te van a ser útiles con la información que deseas mostrar.
  • Aunque si tienes un diseño en photoshop o illustrator, te recomiento partir desde cero.

Suscríbase a las novedades de WooWeb

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *