La página de inicio forma la puerta de entrada de tu página web para la mayoría de tus visitantes, que llegarán directamente al encabezado situado en la parte superior de dicha página. Por lo tanto, el encabezado es un elemento de diseño web importante. Todas las funciones del editor SiteW se pueden utilizar para agregar un encabezado original a tu página web. A efectos de este tutorial, vamos a estudiar un ejemplo sencillo. ¡Pero es sólo un ejemplo y esperamos que libere tu propia creatividad!
La página de fondo
La pestaña Páginas lista las páginas de tu sitio web. Una página específica que se titula Página de fondo se encuentra en la parte superior del listado. Todos los módulos agregados a esta página específica son visibles en todas las páginas del sitio web. De algún modo, son módulos comunes a todas las páginas. La página de fondo de hecho es el lugar privilegiado para crear el encabezado de tu página web.
El siguiente video muestra este principio:
Puedes reconocer los módulos agregados al fondo gracias a su marco de selección rosado.
Entonces vamos a utilizar la página de fondo en este tutorial, para crear un ejemplo de encabezado.
Ejemplo de banner
Muchas páginas web utilizan un banner como encabezado, con una imagen panorámica de pantalla completa y un texto sobreimprimido. ¡Entonces sigamos este ejemplo!
Imagen de pantalla completa
Algunos módulos se pueden configurar para ocupar toda la anchura disponible del navegador de manera sistemática. Es el caso del módulo de Imagen con la opción de Pantalla completa.
Encuentras esta opción en la pestaña Contenido del módulo de Imagen. Si un módulo está configurado para ocupar la pantalla completa, la anchura ocupada por el módulo en el editor no tiene ningún efecto. La configuración de la altura sólo es efectiva:
Dado que la altura del módulo es fija y la anchura variable, la configuración de la imagen en el módulo no será siempre idéntica puesto que depende de la anchura disponible.
Filtro de imagen
Es usual poner un título de bienvenida por encima de la imagen del banner. Sin embargo, en función de los colores que se superponen, la legibilidad del texto puede ser degradada. La solución más usual consiste en aclarar la imagen si el texto es oscuro u oscurecer la imagen si el texto es claro.
¡Es inútil iniciar tu programa preferido para editar fotos puesto que puedes crear un filtro directamente en la pestaña Diseño del módulo de Imagen!
El filtro Color o Degradado permite crear degrados con diferentes niveles de transparencia. Encontrarás más detalles sobre la definición de los degradados en esta guía.
Antes de utilizar un filtro
Después de utilizar un filtro
Ejemplo de menú
El módulo de Menú no tiene fondo, es transparente. Pero a menudo se necesita poner un menú sobre un fondo colorido. ¡Por lo tanto, es el momento de descubrir el módulo de Franja!
Módulo de Franja
El módulo de Franja se encuentra en la sección Diseño de la pestaña Contenido
Con el módulo de Franja, puedes optar por efectos de inclinación u ola pero en este ejemplo nos contentaremos con una franja.
Puesto que el módulo de Menú pertenece a la página de fondo, el módulo de Franja creado para colocarse por encima del menú también debe pertenecer a la página de fondo.
Superponiendo el módulo de Franja al nivel del módulo de Menú, el color de la franja ofrecerá un fondo al módulo de Menú. Para que la franja ocupe toda la anchura disponible en la ventana del navegador, es posible marcar la casilla Pantalla completa en la pestaña Diseño del módulo de Franja.
Posición fija y posición pegajosa
Como su nombre indica, accionando la barra de desplazamiento vertical, los módulos se desplazan por la página. Por lo tanto, el módulo de Menú se desplaza como los demás módulos por defecto.
Sin embargo, es usual desear conservar la visibilidad del menú mientras la página se desplaza, para evitar que el visitante vuelva a la parte superior de la página si quiere cambiar de sección. Para ello, hay dos posibilidades en materia de diseño web: la posición fija y la posición pegajosa.
Puedes activar ambas opciones en el menú contextual de los módulos.
Posición fija
Un módulo fijo ya no es sensible al desplazamiento y permanece en el mismo lugar en la ventana del navegador. Fijando el módulo de Franja así como el módulo de Menú, obtienes el siguiente efecto:
Posición pegajosa
Un módulo pegajoso es sensible al desplazamiento hasta que alcance la parte superior de la pantalla. Una vez que el módulo alcance la parte superior de la pantalla, el módulo se fija para seguir siendo visible. Aquí tienes el resultado obtenido:
