skip to Main Content

Cómo crear encabezados y pies de página personalizados con Elementor

¿No te gusta cómo tu tema actual de WordPress maneja su encabezado o pie de página principal? ¿Qué tal si lo personalizas con Elementor? En esta guía, te decimos cómo crear encabezados y pies de página personalizados con Elementor, paso a paso, y sin necesidad de tener conocimientos de codificación.
Cómo crear cabeceras y pies personalizados con #Elementor

¿Por qué Elemental?

Elementor es nuestro plugin favorito para construir páginas para WordPress y, de hecho, una de las mejores herramientas que puedes usar para personalizar tu sitio web de WordPress sin saber cómo codificar.

Elementor es también tu mejor apuesta si no te gusta cómo se ve tu actual encabezado o pie de página pero tampoco quieres cambiar tu tema por completo.

Puedes aprender más sobre Elementor aquí en nuestra revisión a fondo de Elementor.

Lo que necesitas para crear cabeceras y pies de página personalizados con Elementor

Dos cosas:

  • el plugin principal de Elementor – el libre
  • Elementor Pro – la actualización premium de la edición gratuita de Elementor

Para obtener el Pro, necesitas suscribirte aquí. La versión básica de Elementor Pro (para un sitio) cuesta 49 dólares al año, pero es un dinero bien invertido, ya que te ofrece numerosas características emocionantes que van más allá de los encabezados o los pies de página. Compruébalo.

1. Instalar Elementor gratis y pro

El proceso de instalación de Elementor free es como cualquier otro plugin:

  1. Simplemente vaya a su wp-admin → Plugins → Agregar nuevo , e introduzca «Elementor» en la casilla.
  2. Instalar y activar.

Aquí hay una guía separada sobre cómo instalar cualquier plugin de WordPress en caso de que necesites más orientación.

Para instalar el complemento profesional, primero tienes que ir a Elementor.com y comprar una suscripción. Después de eso, podrá descargar el complemento desde su perfil de cliente.

También necesitas generar una nueva llave API para tu copia de Elementor Pro. Para ello, haz clic en el botón ver sitios web en la misma página (captura de pantalla anterior), y luego agrega la dirección de tu sitio web allí. Obtendrás una clave de licencia que deberás introducir al activar Elementor Pro en tu sitio web.

Vuelve a tu wp-admin y procede a Plugins → Añade el nuevo una vez más. Esta vez sube el archivo de Elementor Pro manualmente.

Proceda a instalarlo y activarlo.

Una vez hecho esto, desde la barra lateral primaria de wp-admin, ir a Elementor → License . Introduce tu código de licencia allí.

Elementor y Elementor Pro están ahora activos!

2. Crear una plantilla de encabezado o pie de página en blanco

Desde la barra lateral de tu wp-admin, ve a Plantillas . Probablemente no hay nada allí todavía.

Haga clic en el botón grande AÑADIR NUEVO TEMPLO .

En la ventana emergente, selecciona Header o Footer en función de lo que quieras crear, y también nombra tu plantilla si lo deseas.

¡Aquí es donde comienza la diversión! Verán a Elementor lanzarse y podrán ponerse a trabajar.

Para agilizar las cosas, Elementor te mostrará una lista de plantillas de encabezado y pie de página ya preparadas. Puedes elegir una de ellas o empezar a trabajar en tu propio encabezado o pie de página desde cero.La elección depende de ti.

3. Establecer la disposición general de su cabecera/pie de página

Primero, para crear encabezados y pies de página personalizados con Elementor necesitas decidir cuál será el diseño principal de tu encabezado o pie de página.

Como ejemplo, voy a construir un encabezado de aspecto moderno con el logo en el centro, un menú a la izquierda y un cuadro de búsqueda a la derecha. Sin embargo, eres libre de construir cualquier otro tipo de encabezado, ya que no hay limitaciones en cuanto al diseño o a lo que puedes incluir en tus encabezados o pies de página.

Para empezar, haz clic en el botón de personalización principal de tu cabecera para ver la sección Layout en la barra lateral:

Escoge la estructura que parezca más optimizada. Yo sólo elegiré tres columnas iguales. Si quieres, también puedes decidir estirar el diseño o establecer un ancho fijo al crear encabezados y pies de página personalizados con Elementor. Los ajustes específicos aquí dependerán de tu tema. Elige lo que se vea mejor

4. Añadir un logotipo

Añadir un logo es un paso muy simple, pero sólo si su tema actual maneja el logo de acuerdo con las directrices oficiales de WordPress.

Cómo asignar un logo en cualquier tema de WordPressPara asegurarte de que tu logo esté correctamente configurado, primero tienes que ir a WordPress Customizer → Site Identify y asignar el logo desde allí.

Con eso hecho, Elementor va a ser capaz de recogerlo correctamente.

En Elementor, escoge el bloque Logotipo del Sitio de la barra lateral. Ponlo donde quieras. Debería obtener tu logotipo actual automáticamente.

En los ajustes, puede seleccionar cómo debe comportarse el logo cuando se hace clic en él, y también ajustar su tamaño y alineación.

5. Añadir un menú

Agarra el bloque Menú de navegación de la barra lateral de Elementor y arrástralo hasta donde quieras dentro del encabezado.

Aquí están las principales cosas que hay que ajustar:

  • Menú – escoge el menú específico que quieras presentar (puedes elegir entre lo que hayas establecido en Apariencia → Menús ).
  • DisposiciónHorizontal , Vertical , o Descendente
  • Alinearizquierda , centro , derecha , o estirar para llenar toda el área disponible
  • Puntero – cómo quieres resaltar el enlace activo
  • Animación – cómo quieres que aparezca el puntero

También puedes entrar en las otras dos pestañas – Estilo y Avanzado para ajustar otros detalles sobre el diseño de tu menú.

¿Quieres más opciones de personalización? Consigue un plugin gratuito llamado NavMenu Addon para Elementor. Te ofrece bloques de menú adicionales que puedes usar para crear encabezados y pies de página personalizados con Elementor. El bloque Mega Menú es particularmente interesante.

6. Añadir un campo de búsqueda

Para finalizar mi diseño, voy a seleccionar el bloque Formulario de búsqueda y arrastrarlo a la columna derecha de mi diseño de cabecera.

Un par de opciones interesantes:

  • PielClásico , Mínimo , Pantalla completa
  • Marcador de posición – puede dejarlo vacío, o poner algo como «buscar» allí
  • Alineación , Tamaño – ambos son bastante auto-explicativos

7. Agregar otros elementos adicionales

También hay un par de bloques más que puedes usar mientras averiguas cómo crear encabezados y pies de página personalizados con Elementor. Puedes experimentar con ellos libremente para obtener el efecto que deseas.

Elementor también te permite poner cualquier otro bloque de Elementor en tus cabeceras o pies. Esto incluye texto personalizado, imágenes, iconos, cualquier cosa que pueda mejorar tu encabezado aún más.

8. Publica tu encabezado/pie de página

Lo último que hay que hacer es publicar su creación en el sitio y asignarla ya sea para reemplazar su encabezado/pie de página predeterminado en todo el sitio o sólo en páginas específicas. Hay muchas posibilidades.

Para ello, haz clic en el botón principal PUBLICAR en Elementor. Verás una ventana emergente que te preguntará dónde quieres mostrar tu nuevo encabezado o pie de página.

La condición más básica es «Todo el sitio»:

También puedes experimentar con este escenario y seleccionar páginas individuales, publicaciones, categorías y más. Por ejemplo, aquí hay una condición para que el nuevo encabezado aparezca sólo en la página Contacto :

Cuando termine, haga clic en SAVE & CLOSE .

¡Tu nuevo encabezado o pie de página está ahora en vivo! Ejemplo:

Ir a la parte superior

¿Listo para construir tus cabeceras y pies de página personalizados con Elementor?

Espero que este tutorial haya sido útil y que ya estés en camino a un nuevo e increíble encabezado o pie de página!

Si tiene alguna pregunta, no dude en hacerla en los siguientes comentarios. También tenemos otros contenidos relacionados con Elementor en el blog para ayudarte a mejorar tu diseño:

  • Revisión de los elementos: ¿Cómo se acumula este constructor de páginas de WordPress?
  • ️ Cómo construir una página de lanzamiento de productos con Elementor
  • ✨ Los mejores complementos gratuitos para los elementos

Cómo crear cabeceras y pies personalizados con @elemntor

Deja un comentario

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

Pin It on Pinterest

Share This
Back To Top