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

¿No le gusta cómo su tema actual de WordPress maneja su encabezado o pie de página principal? ¿Qué tal personalizarlo con Elementor? En esta guía, le explicamos cómo crear encabezados y pies de página personalizados con Elementor, paso a paso y sin necesidad de habilidades de codificación. ��

Por que Elementor?

Elementor es nuestro complemento de creación de páginas favorito para WordPress y, de hecho, una de las mejores herramientas que puede utilizar para personalizar su sitio web de WordPress sin saber cómo codificar.

Elementor también es su mejor opción si no le gusta cómo se ve su encabezado o pie de página actual, pero tampoco desea cambiar su tema por completo.

Puede obtener más información sobre Elementor aquí �� en nuestra revisión detallada de Elementor.

Lo que necesita para crear encabezados y pies de página personalizados con Elementor

Dos cosas:

• el complemento principal de Elementor – el gratuito
• Elementor Pro: la actualización premium además de la edición gratuita de Elementor

�� Para obtener el Pro, debe suscribirse aquí. La versión base de Elementor Pro (para un sitio) es de $ 49 / año, pero es un dinero bien gastado, ya que le brinda numerosas funciones interesantes que van más allá de sus encabezados o pies de página. Echale un vistazo.

1. Instalar Elementor gratis y pro

El proceso de instalación de Elementor gratis es como el de cualquier otro complemento:

1. Simplemente ve a tu wp-admin → Complementos → Agregar nuevo, e ingrese “Elementor” en el cuadro.
2. Instalar y activar.

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

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

También debe generar una nueva clave API para su copia de Elementor Pro. Para eso, haga clic en el ver sitios web botón en la misma página (captura de pantalla anterior), y luego agregue la dirección de su sitio web allí. Obtendrá una clave de licencia que deberá ingresar al activar Elementor Pro en su sitio.

Regrese a su wp-admin y proceda a Complementos → Agregar nuevo una vez más. Esta vez carga el archivo Elementor Pro manualmente.
Proceda a instalarlo y activarlo.

Una vez hecho esto, desde la barra lateral principal de wp-admin, vaya a Elementor → Licencia. Ingrese su código de licencia allí.

Elementor y Elementor Pro ahora están activos!

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

Desde su barra lateral de wp-admin, vaya a Plantillas. Probablemente no haya nada allí todavía.

Haga clic en el grande AGREGAR NUEVA PLANTILLA botón.

En la ventana emergente, seleccione Encabezamiento o Pie de página basado en lo que desea crear, y también nombrar su plantilla si desea.

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

Para agilizar las cosas, Elementor le mostrará una lista de plantillas de encabezado y pie de página listas para usar. Puede elegir uno de ellos o comenzar a trabajar en su propio encabezado o pie de página desde cero. La elección depende de ti.

3. Establezca el diseño general de su encabezado / pie de página

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

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

Para comenzar, haga clic en el menú principal. botón de personalización de su encabezado para ver el Diseño sección en la barra lateral:

Elija la estructura que parece más optimizada. Iré con tres columnas iguales.

Si lo desea, también puede decidir estirar el diseño o establecer un ancho fijo cuando cree encabezados y pies de página personalizados con Elementor. La configuración específica aquí dependerá de su tema. Elige lo que se ve mejor.

4. Agregar un logotipo

Agregar un logotipo es un paso muy simple, pero solo si su tema actual maneja el logotipo de acuerdo con las pautas oficiales de WordPress.

En Elementor, elige el Logo del sitio bloque de la barra lateral. Ponlo donde quieras. Debería buscar su logotipo real automáticamente.

En la configuración, puede seleccionar cómo debe comportarse el logotipo al hacer clic y también ajustar su tamaño y alineación.

5. Agregar un menú

Toma el Menú de navegación bloquee desde la barra lateral de Elementor y arrástrelo a donde desee dentro del encabezado.

Estas son las principales cosas para ajustar:

• Menú – elija el menú específico que desea incluir (puede elegir entre lo que haya configurado en Apariencia → Menús).
• Diseño – Horizontal, Vertical, o Desplegable
• Alinear – izquierda, centrar, Correcto, o tramo para llenar toda el área disponible
• Puntero – cómo desea resaltar el enlace activo
• Animación – cómo quieres que aparezca el puntero

También puede ir a las otras dos pestañas: Estilo y Avanzado para ajustar otros detalles sobre el diseño de su menú.

�� ¿Quieres aún más opciones de personalización? Obtenga un complemento gratuito llamado NavMenu Addon para Elementor. Le proporciona bloques de menú adicionales que puede usar al crear encabezados y pies de página personalizados con Elementor. los Mega menú el bloque es particularmente interesante.

6. Agregar un campo de búsqueda

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

Un par de opciones interesantes allí:

• Piel – Clásico, Mínimo, Pantalla completa
• Marcador de posición – puede dejar en blanco, o poner algo como “buscar” allí
• Alineación, Talla – ambos son bastante explicativos

7. Agregar otros elementos extra

También hay un par de otros bloques que puedes usar mientras descubres 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 le permite poner cualquier otro bloque Elementor en sus encabezados o pies de página. Esto incluye texto personalizado, imágenes, íconos, cualquier cosa que pueda mejorar aún más su encabezado.

8. Publique su encabezado / pie de página

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

Para hacer esto, haga clic en el menú principal PUBLICAR botón en Elementor. Verá una ventana emergente que le preguntará dónde desea mostrar su nuevo encabezado o pie de página.

La condición más básica es “Sitio completo”:

También puede experimentar con esta configuración y seleccionar páginas individuales, publicaciones, categorías y más. Por ejemplo, esta es una condición para que el nuevo encabezado aparezca solo en el Contacto página:

Cuando termine, haga clic en GUARDAR CERRAR.

¡Tu nuevo encabezado o pie de página ya está disponible! Ejemplo:

Listo para construir sus encabezados 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 encabezado o pie de página increíble!

Si tiene alguna pregunta, no dude en preguntar en los comentarios a continuación. También tenemos otro contenido relacionado con Elementor en el blog para ayudarlo a mejorar su diseño:

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.

follow me