Diseñe encabezados y pies de página personalizados con este complemento gratuito de Elementor

¿Alguna vez ha notado que, cuando usa un tema de WordPress o un creador de páginas, no tiene tanto control sobre el encabezado o el pie de página como le gustaría? Claro, puede seleccionar entre diferentes opciones de alineación y tal vez incrustar un ícono de carrito de compras o activar la función de búsqueda, pero ¿es eso suficiente?

Cuando está en el negocio de crear sitios web para clientes, lo último que quiere hacer es darles un sitio web que parezca un cortador de galletas. Debes hacer todo lo que esté a tu alcance para desarrollar diseños totalmente personalizados y de aspecto impresionante para ellos. De arriba a abajo.

Pero hacer eso significa alterar el código en los archivos header.php y footer.php... ¿y es algo con lo que realmente quieres jugar? ¿No sería mucho más fácil si pudiera usar las herramientas que ya tiene a su disposición para darle a su sitio de WordPress encabezados y pies de página únicos?

Gracias a Elementor y otro práctico complemento: Elementor Header & Footer Builder, ¡puede hacerlo!

Cómo usar el complemento Elementor Header & Footer Builder para una mayor personalización

No se puede negar lo increíble que es tener temas de WordPress disponibles para acelerar los procesos de desarrollo y diseño de sitios web. Sin embargo, cada tema de WordPress viene con una limitación cuando se trata del encabezado y el pie de página. Así es como se construye WordPress.

La mayoría de los temas brindan a los usuarios opciones para elegir el diseño del encabezado:

También ofrecen la opción de agregar diferentes widgets al pie de página junto con barras informativas adicionales:

Si desea crear algo personalizado aquí, especialmente si desea que las primeras impresiones de los visitantes del sitio estén fuera de serie, entonces tiene dos opciones:

1. Crea un tema hijo. Luego, edite el código en los archivos header.php o footer.php para crear sus diseños y diseños personalizados.

2. Use el generador de páginas Elementor junto con el complemento Elementor Header & Footer Builder para simplificar todo.

Ilustración paso a paso para lograr un encabezado y pie de página profesional utilizando todos los recursos gratuitos:

1. Activar complementos

Para comenzar, asegúrese de que los complementos estén activados:

Para aclarar, necesitará los dos complementos de la captura de pantalla anterior.

El complemento Elementor Header & Footer Builder funciona con todos los temas. Pocos de los temas tienen soporte incorporado para este complemento, mientras que para algunos necesitará elegir un método de compatibilidad.

En caso de que después de activar el complemento, vea un aviso:

Su tema actual no es compatible con el complemento Elementor Header & Footer Builder, haga clic aquí para verificar los métodos de compatibilidad disponibles.

Vaya a Apariencia > Generador de encabezado y pie de página de Elementor > Compatibilidad con temas. Seleccione un método para agregar compatibilidad con temas. En caso de que estos métodos no funcionen, comuníquese con el autor de su tema y solicítele que agregue soporte para el complemento.

2. Configure la plantilla de encabezado o pie de página.

En el menú Apariencia en WordPress, haga clic en Elementor Header & Footer Builder.

• Seleccione Agregar nuevo.
• Asigne un nombre a la plantilla.
• Elija si desea crear una plantilla de encabezado o pie de página.
• Seleccione las ubicaciones de destino con la 'Regla de visualización' donde debería aparecer la plantilla.
• Establezca roles de usuario para quienes se mostrará la plantilla.

Presiona el botón Publicar cuando hayas terminado.

3. Cree la plantilla de encabezado o pie de página en Elementor

A continuación, vaya a Editar con Elementor. Desde aquí, puede crear su plantilla de encabezado o pie de página desde cero.

Primero, arrastre y suelte el elemento de columnas en la interfaz de la derecha. Luego establezca el número de columnas con las que desea trabajar.

Una vez que haya establecido el marco, complete los elementos restantes. Nuevamente, simplemente encuéntrelos a la izquierda y arrástrelos y suéltelos en su lugar.

4. Agregue el elemento de navegación a su plantilla

Algo a tener en cuenta aquí es que el complemento gratuito de Elementor no viene con un widget de menú. Pero Elementor: el complemento de encabezado, pie de página y bloques sí lo hace

El complemento agrega los siguientes widgets en el editor de Elementor.

• Logotipo del sitio
• Título del sitio
• Lema del sitio
• Menú de Navegación
• Título de la página
• Imagen de la retina
• Derechos de autor

Al igual que con otros elementos en Elementor, todo lo que necesita hacer es arrastrar y soltar el widget del menú de navegación. Siempre que tenga un menú creado en la pestaña Apariencia > Menús en WordPress, su nuevo menú ahora se completará dentro de la plantilla.

Si no, regresa a WordPress y crea uno nuevo para que tengas una barra de navegación para incluir en la plantilla:

Con su conjunto de navegación, su plantilla finalizada y todos los elementos personalizados a su gusto, haga clic en el botón Actualizar.

5. Preste atención a la capacidad de respuesta

Una cosa más que querrá hacer aquí antes de volver al panel de control de WordPress es verificar la capacidad de respuesta de su nuevo elemento de encabezado. Como sabe, los menús móviles realmente no pueden acomodar los elementos horizontales de ancho completo que usamos en un escritorio. Por lo tanto, asegúrese de personalizar eso antes de continuar.

Puede diseñar las versiones móviles de sus plantillas de encabezado y pie de página utilizando los interruptores de respuesta en la parte inferior del menú de widgets:

Esto le dará una idea de cómo aparecerá su nuevo elemento de encabezado o pie de página en tabletas y teléfonos inteligentes. Si desea editar cualquiera de los elementos para tamaños de pantalla de dispositivos específicos, busque los iconos junto a los elementos:

Cambie al dispositivo para el que desea personalizar la configuración, aplique el cambio y luego repita para todos los demás tamaños de pantalla. Haga clic en el botón Actualizar para guardar todos sus cambios.

6. Verifica el Diseño

En Elementor, su plantilla ahora se verá así:

( Nota : esta es una maqueta de encabezado rudimentaria. Solo incluimos este ejemplo para que pueda ver que es posible borrar la configuración predeterminada del tema y crear la suya propia).

Regrese a WordPress, publique los cambios en su sitio y luego presione el botón Vista previa para asegurarse de que todo se vea bien en la parte frontal del sitio:

Para aplicar este nuevo encabezado y/o pie de página que ha creado para el resto de su sitio, complete el paso final.

7. Aplicar la plantilla en todo el sitio (opcional)

Si usa uno de los temas compatibles de WordPress, tendrá menos trabajo aquí, ya que sus nuevos elementos de encabezado y pie de página personalizados se completan automáticamente en todo el sitio web al momento de la publicación. En realidad, no hay un cuarto paso para usted en ese caso (que es un argumento aún mayor para usar estos temas).

Sin embargo, si el sitio web de su cliente tiene un tema diferente y aún desea agregarle un encabezado o pie de página personalizado, esto es lo que necesita saber:

Cuando cree una nueva página en WordPress, seleccione la plantilla Elementor Canvas si está utilizando un tema no compatible.

Cuando esa casilla está marcada, le da la posibilidad de agregar rápidamente su plantilla al atributo de página de Elementor Canvas. Simplemente seleccionando ese atributo de página, su página web ahora se completará automáticamente con la plantilla de encabezado o pie de página que ha generado:

Terminando

Mira, WordPress es una herramienta fantástica. Pero a veces tiene sus limitaciones. Cuando se trata de diseñar elementos de encabezado y pie de página, eso es muy claro. Sin embargo, con este complemento de WordPress de Elementor, ahora puede demostrar un mayor control sobre estas partes de su sitio y dar a los sitios de sus clientes una apariencia totalmente propia.