Personalización del encabezado y pie de página

Personalización del encabezado y pie de página

Los encabezados y pies de página son elementos cruciales que aparecen en cada página de su sitio web. Un encabezado bien diseñado proporciona una navegación clara e identidad de marca, mientras que un pie de página bien pensado ofrece enlaces importantes, información de contacto y señales de confianza. Esta guía cubre todo lo que necesita para crear encabezados y pies de página profesionales.

Comprender los encabezados

El encabezado es la sección superior de su sitio web que normalmente contiene:

• Logotipo: El identificador de su marca, generalmente vinculado a la página de inicio
• Menú de navegación: Enlaces a las páginas y secciones principales
• Llamada a la acción: Botones como "Contáctenos" o "Comenzar"
• Búsqueda: Funcionalidad de búsqueda en todo el sitio
• Selector de idioma: Para sitios multilingües
• Cuenta de usuario: Inicio de sesión/registro o menú de cuenta

Opciones de diseño del encabezado

Personalizar el encabezado

Cambiar el logotipo

1. Haga clic en el logotipo actual en el encabezado
2. Haga clic en Reemplazar o en el icono de imagen
3. Suba su logotipo (recomendado: SVG o PNG transparente)
4. Ajuste el tamaño usando las esquinas de control
5. Establezca el destino del enlace (generalmente la página de inicio)

Mejores prácticas para el logotipo

Configuración del menú de navegación

Estructura del menú

El menú de navegación se gestiona a través del editor de menú del sitio web:

1. Vaya a Sitio web → Sitio → Configurar menú
2. O haga clic en Editar y luego en el icono del menú en el encabezado
3. Arrastre y suelte para reordenar los elementos
4. Anide los elementos para crear submenús

Tipos de elementos de menú

Crear menús desplegables

1. Añada un elemento de menú principal (por ej., "Servicios")
2. Arrastre los elementos secundarios debajo e indéntelos
3. Los elementos secundarios aparecen en el menú desplegable al pasar el ratón
4. Establezca la alineación del menú desplegable (izquierda, derecha, centro)

Configuración del mega menú

Los mega menús muestran contenido enriquecido en columnas:

1. Cree un elemento de menú y establezca el tipo en Mega menú
2. Haga clic en Editar contenido del menú
3. Use bloques de construcción para crear columnas
4. Añada imágenes, iconos, descripciones y enlaces
5. Guarde el contenido del mega menú

Ajustes de comportamiento del encabezado

Establecer el comportamiento del encabezado

1. Haga clic en el encabezado en modo Edición
2. Abra el panel de Opciones a la derecha
3. Encuentre la sección Comportamiento del encabezado
4. Elija su comportamiento preferido
5. Ajuste la configuración adicional (disparador de desplazamiento, animación)

Llamada a la acción del encabezado

Añada botones destacados para generar conversiones:

Ubicación del botón CTA

• Lado derecho: El más común, fácil de encontrar
• Después de la navegación: Flujo natural después de los elementos del menú
• Color contrastante: Destacarse de los enlaces de navegación

Opciones del botón CTA

• Contáctenos: Enlace al formulario de contacto
• Comenzar / Registrarse: Flujo de registro
• Solicitar demo: Consulta comercial
• Comprar ahora: Tienda e-commerce
• Descargar: Recurso gratuito o aplicación

Comprender los pies de página

El pie de página aparece en la parte inferior de cada página y normalmente incluye:

• Información de la empresa: Acerca de, misión, dirección
• Enlaces de navegación: Enlaces rápidos a páginas importantes
• Datos de contacto: Teléfono, correo electrónico, dirección
• Redes sociales: Enlaces a perfiles sociales
• Enlaces legales: Política de privacidad, términos, cookies
• Suscripción al boletín: Formulario de suscripción por correo electrónico
• Señales de confianza: Certificaciones, métodos de pago, premios

Opciones de diseño del pie de página

Secciones de contenido del pie de página

Sección Empresa

• Logotipo (generalmente más pequeño que el del encabezado)
• Breve descripción de la empresa (1-2 oraciones)
• Iconos de redes sociales

Sección Enlaces rápidos

Organice los enlaces importantes por categoría:

• Empresa: Acerca de, Equipo, Carreras, Prensa
• Productos/Servicios: Ofertas principales
• Recursos: Blog, Centro de ayuda, Preguntas frecuentes
• Soporte: Contacto, Documentación

Sección Contacto

• Número de teléfono (pulsable en móvil)
• Dirección de correo electrónico (enlace mailto:)
• Dirección física
• Horario comercial
• Enlace al formulario de contacto

Sección Boletín informativo

1. Añada un bloque de formulario al pie de página
2. Configuérelo para suscripción por correo electrónico
3. Conéctelo a su lista de correo
4. Añada un texto de aviso de privacidad

Sección legal

Generalmente en una fila separada en la parte inferior:

• Aviso de copyright: © 2024 Nombre de la empresa
• Enlace a la política de privacidad
• Enlace a los términos de servicio
• Enlace a la política de cookies
• Aviso de cumplimiento del RGPD (si corresponde)

Añadir enlaces a redes sociales

Iconos sociales en el encabezado

1. Haga clic en el encabezado mientras está editando
2. Añada un bloque de Enlaces a redes sociales
3. Seleccione las plataformas a mostrar
4. Introduzca las URL de sus perfiles
5. Elija el estilo de icono (color, monocromo, contorno)

Opciones de iconos sociales

Optimización móvil del encabezado/pie de página

Consideraciones para el encabezado móvil

• Menú hamburguesa: La navegación se colapsa automáticamente
• Tamaño del logotipo: Puede necesitar una versión más pequeña para móvil
• Botón CTA: Asegúrese de que sea visible y pulsable
• Comportamiento fijo: Considere el impacto de la altura en móvil

Consideraciones para el pie de página móvil

• Las columnas se apilan verticalmente en móvil
• Mantenga el contenido conciso
• Haga que los enlaces de teléfono/correo sean pulsables
• Asegúrese de que los botones ocupen todo el ancho para facilitar la pulsación

Estilo del encabezado/pie de página

Opciones de fondo

• Color sólido: Colores del tema o personalizados
• Degradado: Transiciones sutiles
• Imagen: Imagen de fondo con superposición
• Transparente: El contenido se ve a través

Bordes y sombras

• Borde inferior: Línea sutil que separa del contenido
• Sombra: Añade profundidad en modo fijo
• Sin borde: Apariencia uniforme

Espaciado

• Relleno: Espacio interno alrededor del contenido
• Compacto: Relleno menor para un encabezado menos prominente
• Espacioso: Relleno mayor para dar más énfasis

Mejores prácticas