Crear una página web con secciones de pantalla completa es una excelente manera de mejorar la experiencia del usuario con transiciones suaves y diseños de sección limpios que abarcan todo el ancho y alto del navegador. Por lo general, esto funciona bien para mostrar productos o servicios en una sección a la vez, lo que permite al usuario concentrarse fácilmente en cada uno mientras se desplaza hacia abajo en la página. Este tipo de diseño también funciona muy bien con imágenes de fondo que hablan del contenido y brindan un hermoso acento de diseño. Y si quiere ser un poco creativo, puede agregar alguna funcionalidad de paralaje a sus imágenes de fondo para crear algunas transiciones bastante únicas al desplazarse de una sección de pantalla completa a otra.
En este tutorial, le mostraré cómo agregar algunas transiciones de imagen de fondo de paralaje a un diseño de página de pantalla completa en Divi . El proceso es simple y con él puedes crear algunos resultados poderosos.
Echa un vistazo a algunos de los diseños que construiremos juntos.
Empezando
Suscríbete a nuestro canal de Youtube
Para este tutorial, todo lo que necesita es Divi y una colección de imágenes para usar en las diferentes imágenes de productos e imágenes de fondo. Estoy usando las imágenes de nuestro paquete de diseño de tienda de jugos . Puede descargar el archivo zip con estas imágenes en la parte inferior de la publicación de blog que presenta este paquete de diseño . Simplemente haga clic en el botón «Descargar los activos de imagen de resolución completa».
Preparando tu nueva página
Una vez que tengas tus imágenes listas. Crea una nueva página y dale un título a tu página. Luego implemente Divi Builder y seleccione «Construir desde cero». Luego haga clic en el botón para construir en la parte delantera.
¡Ahora estás listo para rodar!
La idea básica
La idea básica detrás de este concepto consiste en apilar varias secciones de ancho completo, cada una con un módulo de encabezado de ancho completo. Cada módulo de encabezado tiene un ancho personalizado que se puede alinear a la izquierda, al centro o a la derecha mientras se expone el fondo de la sección. Luego, a cada sección se le da una imagen de fondo con un cierto método de paralaje. Esto crea diferentes efectos de transición de imagen de fondo a medida que se desplaza hacia abajo en la página.
Aquí está cómo hacerlo.
Creación de la sección de encabezado de ancho completo
Primero, deberá crear una nueva sección de ancho completo y luego agregar un módulo de encabezado de ancho completo a la sección.
Actualice la configuración del encabezado de ancho completo con algo de contenido con lo siguiente:
Título: “Jugo de tomate”
Botón #1 Texto del enlace: “Ver receta”
Contenido: “Tu contenido va aquí. Edite o elimine este texto en línea o en la configuración de Contenido del módulo”.
Imagen del logotipo: [ver captura de pantalla] (La imagen es de 240 px por 300 px)
Ahora continúe actualizando el diseño de su encabezado de la siguiente manera:
Color de fondo: rgba(255,255,255,0.92)
Hacer pantalla completa: SÍ
Mostrar botón de desplazamiento hacia abajo: SÍ
Icono: ver captura de pantalla
Color del icono de desplazamiento hacia abajo: #222222
Color del texto: oscuro
Nivel de encabezado del título: H2
Fuente del título: Raleway
Tamaño del texto del título: 50 px
Fuente del cuerpo: Lato
Tamaño del texto del cuerpo: 16 px
Espaciado entre letras del cuerpo: 1 px
Tamaño del texto del botón uno: 16px
Color del texto del
botón uno: #ffffff Color de fondo del botón uno: #222222
Radio del borde del botón uno: 50px
Espaciado entre letras del botón uno: 2px
Estilo de fuente del botón uno: TT
Ancho: 45 % (escritorio), 60 % (tableta), 100 % (teléfono inteligente)
Guardar ajustes.
Los principales elementos de diseño clave aquí son la opción «Hacer pantalla completa» y el «Ancho: 45%». Esto permitirá que la sección abarque todo el ancho y el alto de la ventana del navegador en todo momento. Y el ancho personalizado reduce el módulo de encabezado para exponer el fondo de la sección que agregaremos a continuación.
Agregar el fondo de la sección
Ahora que tenemos nuestro módulo de encabezado diseñado, podemos agregar nuestra imagen de fondo de sección. Vaya a la configuración de la sección de ancho completo y agregue una imagen de fondo. Asegúrese de que sea lo suficientemente grande como para abarcar todo el ancho y alto de la ventana del navegador. Luego seleccione usar el método CSS Parallax.
Duplicar las secciones
Dado que cada sección mostrará contenido nuevo, debemos duplicar nuestra sección de ancho completo tres veces para que tenga un total de cuatro secciones en su página, cada una con un módulo de encabezado.
Creación de una imagen de fondo estática utilizando la imagen de fondo de la misma sección con CSS Parallax
Ahora que tenemos cuatro secciones idénticas, podemos actualizar el contenido del encabezado de ancho completo con nuevas imágenes de logotipos y títulos para tener una mejor idea del diseño. Sin embargo, si mantenemos la misma imagen de fondo usando CSS parallax para las cuatro secciones, el resultado es una imagen de fondo estática que permanece en su lugar mientras te desplazas a las diferentes secciones de pantalla completa. Y dado que estamos usando un botón de desplazamiento hacia abajo en cada encabezado, los usuarios tienen la opción de hacer clic en la flecha para desplazarse limpiamente a cada nueva sección.
Mira el resultado.
Uso de diferentes imágenes de fondo con transiciones CSS Parallax
El uso de una imagen de fondo diferente (con paralaje CSS) para cada sección cambiará la sensación del diseño a medida que se desplaza. Como ya tenemos habilitado el paralaje CSS para nuestras imágenes de fondo de cuatro secciones, todo lo que tenemos que hacer es cambiar cada una de las imágenes a algo diferente. En este caso, simplemente agrego una versión grande del producto como imagen de fondo para cada sección.
Una vez que tenga una imagen de fondo diferente (con CSS Parallax) para cada una de las cuatro secciones, compruebe el resultado.
Uso de diferentes imágenes de fondo con transiciones True Parallax
Si desea cambiar el efecto de transición de la imagen de fondo, puede cambiar el método de paralaje de CSS a True Parallax para las imágenes de fondo de las cuatro secciones.
Abra una de las configuraciones de la sección y cambie el método CSS a «True Parallax».
Luego deberá hacer lo mismo con las tres secciones restantes. O simplemente puede hacer clic con el botón derecho en la opción Método de paralaje y seleccionar «Extender el método de paralaje» a todos los módulos de encabezado de ancho completo en toda la página.
Una vez hecho esto, verifique el efecto de transición de la imagen de fondo.
Explorando diferentes alineaciones de módulos
Cambiar la alineación de su módulo de encabezado de ancho completo es muy sencillo. Dado que nuestro módulo de encabezado de ancho completo tiene un ancho personalizado del 45 %, puede ajustar fácilmente la alineación del módulo hacia la izquierda, el centro o la derecha para obtener un diseño diferente. Me gusta especialmente la alineación centrada con un fondo estático.
Para centrar el módulo, abra la configuración del encabezado de ancho completo y actualice la Alineación del módulo a Centrado .
Para alinear el módulo a la derecha de la página, simplemente actualice la alineación del módulo a alineado a la derecha.
Una vez que se haya decidido por una alineación, simplemente puede extender el estilo de «alineación de módulo» al resto de los módulos de encabezado en toda la página.
Aquí hay un ejemplo de una alineación centrada con un fondo estático (la misma imagen de fondo para cada uno con paralaje CSS).
Aquí hay un ejemplo de una alineación centrada con diferentes imágenes de fondo usando el método CSS Parallax.
Aquí hay un ejemplo de la alineación centrada con diferentes imágenes de fondo utilizando el método True Parallax.
Aquí hay un ejemplo de una alineación correcta con diferentes imágenes de fondo usando una combinación de css y parallax verdadero.
Pensamientos finales
Estas transiciones de imagen de fondo realmente se ven muy bien cuando se usan en combinación con secciones de pantalla completa y módulos de encabezado personalizados. La funcionalidad es limpia y el diseño es sutil y único. En todo caso, es una forma rápida y fácil de crear fondos estáticos para su contenido. ¡Siéntete libre de explorar diseños más avanzados usando gradientes de fondo, fuentes e imágenes!
Espero escuchar de usted en los comentarios.
¡Salud!