Los encabezados y pies de página de un sitio web son elementos esenciales. En la mayoría de los casos, el encabezado proporciona enlaces de navegación que simplifican la navegación a diferentes partes de un sitio web. Por otro lado, el pie de página contiene información vital que los visitantes del sitio web pueden necesitar, como una dirección comercial o información de contacto, por mencionar algunos amp .
Los encabezados y pies de página los proporciona el tema actual del usuario en WordPress. Suelen estar bien diseñados y ser adecuados para la mayoría de sus usos. Sin embargo, si deseas personalizar tus temas, tendrás que cambiar el código; Aquí es cuando los plugin de Page Builder resultan útiles. Puede usarlos para crear y cambiar componentes de páginas web sin conocer ningún código.
Este tutorial nos enseñará cómo hacer un encabezado y pie de página de un sitio web. Se utilizará Elementor Pro (ya que la versión básica de Elementor no incluye las funciones más importantes para crear estos componentes). Así que descarga Elementor Pro y asegúrate de que esté activado.
- ¿Por qué debería elegir Elementor como su creador de páginas?
- Elementor le permite elegir el diseño principal de su encabezado y pie de página personalizados.
- ¿Qué es un encabezado y para qué sirve?
- ¿Qué es exactamente un pie de página?
- Cómo hacer un encabezado
- Desarrollar una plantilla de encabezado
- Realizar cambios en el menú de encabezado
- Publicación del encabezado
- Cómo hacer un pie de página
- Desarrollar una plantilla de pie de página
- Modificaciones del pie de página
- Producto terminado
- Examine las secciones de encabezado y pie de página para verificar la capacidad de respuesta.
- Poniendo fin a las cosas
¿Por qué debería elegir Elementor como su creador de páginas?
Elementor es el creador de páginas más avanzado, que permite a los usuarios emplear elementos premium para crear diseños y diseños magníficos. Es muy beneficioso para principiantes que no tienen conocimientos previos de codificación. El editor de arrastrar y soltar en Elementor permite a los usuarios mover widgets y elementos.
Elementor es un creador de páginas visual que permite a los usuarios ver cómo aparecen sus páginas sin cambiar de modo.
Otro argumento convincente para usar Elementor es que la mayor parte del trabajo se puede completar sin costo. Su edición gratuita es más que capaz de proporcionar capacidades adecuadas de edición de sitios. Sin embargo, repasaremos las versiones gratuita y de pago para que puedas elegir la que mejor se adapte a tus necesidades.
Los siguientes son algunos de los aspectos importantes de Elementor que hacen que valga la pena:
- Se admite la funcionalidad de arrastrar y soltar.
- Tiene una gran cantidad de plantillas.
- Hay más de 90 widgets en total.
- No se requiere codificación para un soporte receptivo.
- Hay opciones de rehacer y deshacer disponibles.
- El guardado automático está disponible.
Elementor le permite elegir el diseño principal de su encabezado y pie de página personalizados.
Sería útil decidir la disposición general de las secciones de encabezado y pie de página deseadas antes de desarrollar un encabezado único. Mirar el diseño de la sección de encabezado prediseñado puede brindarle muchas opciones.
Puede elegir entre varias secciones de encabezado; el encabezado más común y de aspecto moderno presenta el logotipo del sitio en la esquina izquierda, una barra de navegación en el medio y una sección de barra de búsqueda a la derecha.
Hay infinitas posibilidades y puedes construir cualquier diseño que desees.
Elegí la plantilla de encabezado prefabricada número 7; Este es el enfoque más común y sencillo para utilizar un encabezado en un sitio web de WordPress. Copie y pegue el nombre de la plantilla de encabezado en Plantillas > Encabezado > plantilla de búsqueda > pegue el nombre del encabezado copiado .
Cuando haya encontrado la plantilla de encabezado que desea, seleccione "Editar con Elementor" y accederá a la sección del generador de encabezados de Elementor Pro.
Empecemos esta fiesta.
¿Qué es un encabezado y para qué sirve?
La parte superior de su página web se llama "encabezado del sitio web". El encabezado suele ser el mismo en todo el sitio web. Sin embargo, algunos sitios web utilizan encabezados diferentes para diferentes partes del sitio.
El diseño de su encabezado brindará a sus usuarios la primera impresión de su sitio web, ya sea que hayan llegado a su página de inicio, a su página de información u otro contenido individual. Y, si está bien diseñado, captará la atención del usuario y lo incitará a seguir desplazándose y leyendo.
El encabezado también puede ayudar a promover la identidad de marca de su empresa.
Utilizo funciones como el logotipo, la fuente, los colores y el lenguaje general de la marca de la empresa.
La navegación del sitio, la búsqueda del sitio, un carrito de compras (para sitios de ventas), botones de llamado a la acción (CTA) y otras funciones que mejoran la experiencia del usuario y aumentan las tasas de conversión se encuentran en los encabezados.
¿Qué es exactamente un pie de página?
Un pie de página es una sección de una página web que aparece en la parte inferior de la página. Por lo general, se muestran constantemente en todo el sitio web, en todas las páginas y publicaciones, de manera similar a los encabezados.
Los pies de página suelen pasarse por alto, lo que supone un desperdicio de potencial, dado que aparecen en todas las páginas del sitio. Son igualmente cruciales para los encabezados.
El diseño de su pie de página puede mostrar información útil y vital, como registro al boletín informativo, información de derechos de autor, términos de uso y privacidad, un mapa del sitio, información de contacto, mapas, navegación del sitio web y mucho más, según la configuración que elija.
Cómo hacer un encabezado
Vamos a crear un encabezado personalizado en esta sección. No te preocupes si eso parece intimidante; No empezaremos de cero. En su lugar, usaremos las plantillas de Elementór Pro, diseñadas por el equipo de diseño de Elementor.
Desarrollar una plantilla de encabezado
En el panel de administración de WordPress, coloque el cursor sobre Plantillas y haga clic en Agregar nuevo para crear nuestro encabezado.
Aparecerá una ventana modal una vez que haya sido enrutado. Seleccione Encabezado en el menú desplegable, asigne un nombre al encabezado y haga clic en " Crear plantilla ":
Esto iniciará el editor Elementor. Después de eso, se le presentará una lista de plantillas para elegir. Así que elige uno que te atraiga:
Debería aparecer en la parte superior de la sección de edición de Elementor una vez que hayas elegido una plantilla:
Creación de un logotipo: el primer paso es crear un logotipo. Configure el logotipo en el Live Editor del sitio para colocarlo en el encabezado. Elija un logotipo haciendo clic en Identidad del sitio.
Una vez que haya decidido el logotipo, haga clic en Publicar .
El logotipo de su sitio ahora debería estar en el encabezado si actualiza la interfaz de Elementor:
Después de eso, puede realizar los cambios que desee.
Realizar cambios en el menú de encabezado
Lo siguiente que debemos hacer es cambiar el menú. Si has generado un menú, la plantilla lo incorporará automáticamente:
Aquí está nuestra estructura de menú, que puedes ver reflejada en la plantilla de encabezado:
Si tiene más de un menú, puede actualizar el contenido si es necesario.
Puede editar sus propiedades como cualquier otro widget.
Si necesitamos agregar más elementos, podemos agregar más secciones a nuestro encabezado:
Comencemos agregando un encabezado y algunos íconos de redes sociales:
Después de eso, puedes realizar los cambios que desees. Así es como resultó nuestra edición:
Publicación del encabezado
Ahora puedes publicar el encabezado una vez que hayas terminado de modificarlo. Usaremos el encabezado en todo nuestro sitio en el amp , por lo que seleccionaremos esa opción después de seleccionar Agregar condición:
Y aquí hay un amp de una página de nuestro sitio en vivo:
Cómo hacer un pie de página
Desarrollar una plantilla de pie de página
El proceso de crear un pie de página es bastante similar al de crear un encabezado. Para crear uno, cree una nueva plantilla de pie de página como esta:
Luego decide sobre una plantilla. Los pies de página vienen en una variedad de formas y tamaños. Algunos incluyen información de la empresa, mientras que otros tienen formularios de contacto. Seleccione una plantilla que sea apropiada para sus requisitos.
La plantilla que elegimos para nuestro sitio web es la siguiente:
Modificaciones del pie de página
Verá el encabezado tan pronto como comience a editar (si establece la condición de que aparezca en todas las páginas).
Cambie el pie de página según sea necesario; Así es como se ve nuestra revisión:
Publicar el pie de página una vez finalizado:
Producto terminado
Así es como se ve el resultado final. Tanto el encabezado como el pie de página se utilizan ahora en nuestro sitio web:
Examine las secciones de encabezado y pie de página para verificar la capacidad de respuesta.
Esta es la fase más importante y debe asegurarse de que las secciones de encabezado y pie de página respondan. Debido a que un menú de ancho completo generalmente no se adapta a la vista móvil, debes saber cómo aparecerá tu diseño en la pantalla del móvil. Los interruptores receptivos en la parte inferior de la sección de la barra lateral de Elementor pueden cambiar las versiones móviles y de pestañas.
Puede probar la capacidad de respuesta de su encabezado y pie de página de varias maneras. Por amp , puede utilizar herramientas como Browserstack, CrossBrowser Testing y Google Resizer para asegurarse de que sus páginas web respondan lo mejor posible. También puedes hacerlo manualmente experimentando con diferentes dispositivos.
Poniendo fin a las cosas
Espero que esta guía le haya ayudado a desarrollar rápidamente sus secciones únicas de encabezado y pie de página utilizando Elementor Pro. WordPress tiene muchas características, pero solo permite algunas modificaciones en las secciones de encabezado y pie de página, finalmente solucionadas con el creador de páginas Elementor Pro. Con un control mucho mejor sobre los elementos de su sitio, ahora puede demostrar mejor la visión de su sitio. Además, la funcionalidad de Elementor se ha mejorado mediante el uso de complementos gratuitos, lo que permite a los usuarios personalizar sus sitios web con capacidades más avanzadas.
