Encabezado de una pagina web

Encabezado html

Todo el mundo lo sabe: no hay una segunda oportunidad para causar la primera impresión. En el ámbito de los productos digitales, esta eterna verdad funciona en términos de alta competencia y de increíble diversidad. Sin duda, algunas zonas de la página web o de la pantalla del móvil son especialmente importantes y eficaces en este aspecto. Hoy vamos a hablar de una de ellas en profundidad: la cabecera de la página web.

En el número del glosario UI/UX dedicado a los términos de diseño web, ya hemos ofrecido una breve descripción de lo que es una cabecera. Hoy vamos a profundizar un poco más en el tema y a discutir cuáles son las funciones de una cabecera y las recomendaciones para su diseño. Además, mostraremos un montón de conceptos de diseño web aplicando diferentes enfoques al diseño de cabeceras.

En el diseño de páginas web, la cabecera es la parte superior de la página. Es definitivamente una parte estratégica de la página como el área que la gente ve antes de desplazarse por la página en los primeros segundos de introducción al sitio web. Siendo de alguna manera un signo de invitación, la cabecera debe proporcionar la información principal sobre el producto digital para que los usuarios puedan escanearla en fracciones de segundo. Desde el punto de vista del diseño, la cabecera es también el área que abre un amplio campo para las soluciones creativas de diseño que deben ser pegadizas, concisas y útiles. Las cabeceras suelen denominarse “menús del sitio” y se sitúan como elemento clave de navegación en el diseño del sitio web.

  Shareware ventajas y desventajas

Encabezados de buen aspecto

Preste atención cuando cambie el ancho de su imagen de cabecera.  Si utiliza el método anterior para reducir el ancho, SiteBuilder puede estirar su imagen y reducir su calidad.  Esto se debe a que el ancho de la cabecera está configurado al 100% para el diseño responsivo para múltiples pantallas.  Puede cambiar el ancho de forma segura de la siguiente manera:

En el menú lateral, vaya a la pestaña SEO.  Haga clic en ella para mostrar la configuración de la optimización para motores de búsqueda.  Encontrará el campo de código html de la cabecera en el menú Código de la cabecera o Código de la cabecera.  Coloque el siguiente código.

Si este código no da el resultado deseado, es posible que el identificador sea incorrecto: los distintos diseños suelen tener identificadores diferentes.  Descubrirá lo que necesita viendo el código fuente a través del navegador.

Mueva el cursor sobre los trozos de código hasta que sólo se ilumine la cabecera en el diseño.  Copie este identificador.  En este ejemplo, su identificador es ‘header-image’, por lo que la línea de código que necesita encontrar debería tener este aspecto:

Si ve un identificador o clase diferente, cambie el código anterior en el menú de Código de cabecera.  Utilice ‘#’ cuando describa el objeto a través del identificador -el valor ‘id’- y utilice ‘.’ en lugar de ‘#’ cuando describa el objeto a través del valor de la clase.

Cabecera ux

La cabecera de un sitio web es lo primero que ven los visitantes cuando visitan un sitio, y aparece en todas las páginas del mismo. Un buen encabezado de sitio web equilibra un diseño limpio y una navegación clara hacia las páginas más profundas de un sitio web. Por lo tanto, es importante concentrarse en las mejores prácticas para diseñar un encabezado de sitio web para sus clientes que ayude a sus clientes a llegar rápidamente a la información que necesitan. Para ayudarle a construir grandes cabeceras para sus sitios, aquí hay 11 consejos para guiarle.

  Definición de folleto

Piense en lo principal que quiere que hagan los visitantes de un sitio y asegúrese de que este elemento sea claramente visible en la cabecera. Por ejemplo, para los sitios sin ánimo de lucro, tenga un icono de Donar Ahora; para los sitios de restaurantes, tenga un icono de Reservar una Mesa.En general, las cabeceras contienen información que facilita a los visitantes la interacción con el sitio, incluyendo:

El texto de la cabecera debe ser legible de un vistazo. Utilice palabras cortas, siempre que sea posible, y elija fuentes claras y de tamaño relativamente grande. Las cabeceras no suelen ser el lugar adecuado para las fuentes estilizadas, ya que pueden ser más difíciles de leer.

Cabecera del blog

La siguiente imagen ilustra algunos de los términos más comunes utilizados para describir las diversas partes de una típica página web de la Universidad de Houston. Algunos de ellos se relacionan directamente con la estructura subyacente de las “Regiones” de la página, otros con los diálogos de edición y otros con la jerga general de la web.

  Ejemplo de boletines

Una concantenación de los nombres de sistema de las carpetas anidadas relevantes, incluyendo todas las carpetas ancestrales directas de una página hasta la carpeta de inicio del sitio (o del área) – más el nombre del sistema de la página/archivo – más la extensión del archivo (por ejemplo, “.php” para los activos de tipo página). Dentro del CMS puede ver los IDs de CMS de los activos mostrados en la barra de direcciones de su navegador.    Consulte las notas adicionales que siguen a este cuadro.

Basado en la configuración de los metadatos de la carpeta de inicio de un sitio o área y en el texto del título de la carpeta correspondiente; basado en la configuración de Mostrar como cabecera de la carpeta. “Reinicia” la herencia del menú de navegación izquierdo para mostrar sólo los elementos descendientes de la carpeta elegida. Para cambiar, edite los metadatos de la carpeta correspondiente: Editar carpeta >> Diálogo de metadatos >> Título Editar carpeta >> Diálogo de metadatos >> ¿Mostrar como cabecera?

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad