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 pueden requerir, como una dirección comercial o información de contacto, por mencionar algunos ex amp les.
Los encabezados y pies de página son proporcionados por el tema actual del usuario en WordPress. Suelen estar bien diseñados y son adecuados para la mayoría de sus usos. Sin embargo, si desea personalizar sus temas, deberá cambiar el código; Aquí es cuando los plugin Page Builder son ú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 para un sitio web. Se utilizará Elementor Pro (ya que la versión básica de Elementor no incluye las características más importantes para crear estos componentes). Así que descarga Elementor Pro y asegúrate de que esté encendido.
- ¿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 qué hace?
- ¿Qué es un pie de página, exactamente?
- 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
- Desarrollo de una plantilla de pie de página
- Modificaciones de pie de página
- Producto terminado
- Examine las secciones de encabezado y pie de página para determinar la capacidad de respuesta.
- Cerrando las cosas
¿Por qué debería elegir Elementor como su creador de páginas?
Elementor es el creador de páginas más avanzado, lo que permite a los usuarios emplear elementos premium para crear diseños y diseños magníficos. Es muy beneficioso para los 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ía del trabajo se puede completar sin costo. Su edición gratuita es más que capaz de proporcionar capacidades de edición de sitios adecuadas. Sin embargo, repasaremos las versiones gratuitas y de pago para que pueda elegir la que mejor se adapte a sus 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.
- Las opciones para rehacer y deshacer están disponibles.
- Autoguardado está disponible.
Elementor le permite elegir el diseño principal de su encabezado y pie de página personalizados.
Sería útil si decidiera 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 prefabricado puede proporcionarle muchas opciones.
Puede elegir entre varias secciones de encabezado; el encabezado más común y de aspecto moderno presenta un logotipo del sitio en la esquina más a la izquierda, una barra de navegación en el medio y una sección de la barra de búsqueda a la derecha.
Hay infinitas posibilidades y puede construir cualquier diseño que desee.
Elegí la plantilla de encabezado prefabricada No. 7; Este es el enfoque más común y simple para usar un encabezado en un sitio web de WordPress. Copie y pegue el nombre de la plantilla del 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 se lo dirigirá a la sección de creación de encabezados de Elementor Pro.
Vamos a empezar esta fiesta.
¿Qué es un encabezado y qué hace?
La parte superior de su página web se denomina "encabezado de sitio web". El encabezado suele ser el mismo en todo su sitio web. Sin embargo, algunos sitios web utilizan diferentes encabezados para distintas partes del sitio.
El diseño de su encabezado les dará a sus usuarios la primera impresión de su sitio web, ya sea que hayan llegado a su página de inicio, acerca de la página u otro contenido individual. Y, si está bien diseñado, captará la atención del usuario y lo incitará a seguir leyendo y desplazándose.
El encabezado también puede ayudar en la promoción de la identidad de marca de su empresa.
Estoy usando características como el logotipo de la empresa, la fuente, los colores y el lenguaje general de la marca.
La navegación del sitio, la búsqueda del sitio, un carrito de compras (para sitios de ventas), botones de llamada a la acción (CTA) y otras características que mejoran la experiencia del usuario y aumentan las tasas de conversión se encuentran en los encabezados.
¿Qué es un pie de página, exactamente?
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 forma similar a los encabezados.
Los pies de página se pasan por alto con frecuencia, lo que es una pérdida 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 el registro del boletín, 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 se preocupe si eso le 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 construir 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 lanzará el editor de Elementor. Después de eso, se le presentará una lista de plantillas entre las que elegir. Elija uno que le guste:
Debería aparecer en la parte superior de la sección de edición de Elementor una vez que haya elegido una plantilla:
Creación de un logotipo: el primer paso es crear un logotipo. Configure el logotipo en el Editor en vivo del sitio para ponerlo en el encabezado. Elija un logotipo haciendo clic en Identidad del sitio.
Una vez que haya decidido un 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 ha generado un menú, la plantilla lo incorporará automáticamente:
Aquí está nuestra estructura de menú, que puede 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, puede realizar los cambios que desee. Así es como resultó nuestra edición:
Publicación del encabezado
Ahora puede publicar el encabezado una vez que haya terminado de modificarlo. Usaremos el encabezado en todo nuestro sitio en el ejemplo a amp , por lo que seleccionaremos esa opción después de seleccionar Agregar condición:
Y aquí es un ex amp le de una página de nuestro sitio en vivo:
Cómo hacer un pie de página
Desarrollo de una plantilla de pie de página
El proceso de hacer un pie de página es bastante similar al de construir un encabezado. Para hacer uno, cree una nueva plantilla de pie de página como esta:
Luego, decida una plantilla. Los pies de página vienen en una variedad de formas y tamaños. Algunos incluyen información firme, mientras que otros tienen formularios de contacto. Seleccione una plantilla que se adapte a sus necesidades.
La plantilla que elegimos para nuestro sitio web es la siguiente:
Modificaciones de 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:
Publique el pie de página después de que esté terminado:
Producto terminado
Así es como se ve el resultado final. Tanto el encabezado como el pie de página ahora se utilizan en nuestro sitio web:
Examine las secciones de encabezado y pie de página para determinar 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 no suele adaptarse a la vista móvil, debe saber cómo aparecerá su diseño en la pantalla del móvil. Los interruptores de respuesta 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 formas. Para ex amp le, puede utilizar herramientas como Browserstack, pruebas crossbrowser, y Google Resizer para asegurarse de que sus páginas web son tan sensibles como sea posible. También puede hacerlo manualmente experimentando con diferentes dispositivos.
Cerrando las cosas
Espero que esta guía lo haya ayudado a desarrollar rápidamente sus secciones de encabezado y pie de página únicas con Elementor Pro. WordPress tiene muchas características, pero solo permite algunas modificaciones en las secciones de encabezado y pie de página, finalmente arregladas 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.
