Creación de un diseño de pantalla completa con transiciones de imagen de fondo Parallax en Divi

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 de 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 desea ser un poco creativo, puede agregar alguna funcionalidad de paralaje a sus imágenes de fondo para crear algunas transiciones bastante únicas cuando se desplaza 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 puede crear algunos resultados poderosos.

Vistazo

Eche un vistazo a algunos de los diseños que crearemos 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 del blog con este paquete de diseño. Simplemente haga clic en el botón "Descargar los activos de imagen de resolución completa".

Preparando su nueva página

Una vez que tengas tus imágenes listas. Crea una nueva página y dale un título. Luego, implemente Divi Builder y seleccione "Construir desde cero". Luego haga clic en el botón para construir en la interfaz.

¡Ahora estás listo para rodar!

La idea básica

La idea básica detrás de este concepto implica apilar múltiples secciones de ancho completo, cada una con un módulo de encabezado de ancho completo. A cada módulo de encabezado se le asigna un ancho personalizado que se puede alinear a la izquierda, centrada o 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 la imagen de fondo a medida que se desplaza hacia abajo en la página.

He aquí 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"
Texto del enlace del botón n. ° 1: "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 mide 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: 50px

Fuente del cuerpo: Lato
Tamaño del texto del cuerpo: 16px
Espaciado entre letras del cuerpo: 1 px

Tamaño del texto del botón uno: 16px
Botón fUn color de texto: #ffffff
Color de fondo del botón uno: # 222222
Radio del borde del botón uno: 50px
Espaciado de una letra del botón: 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 alto de la ventana del navegador en todo momento. Y el ancho personalizado encoge 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 la imagen de fondo de nuestra 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 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, necesitamos 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.

Crear una imagen de fondo estática usando la misma imagen de fondo de 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 paralaje para las cuatro secciones, el resultado es una imagen de fondo estática que permanece en su lugar mientras se desplaza 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 CSS paralaje) 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, vea el resultado.

Uso de diferentes imágenes de fondo con verdaderas transiciones de paralaje

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 cuatro imágenes de fondo de la sección.

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 derecho en la opción Método Parallax y seleccionar "Extender Método Parallax" 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 haya establecido 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.

A continuación se muestra 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 verdadero paralaje.

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 sencilla de crear fondos estáticos para su contenido. ¡Siéntase libre de explorar diseños más avanzados utilizando degradados de fondo, fuentes e imágenes!

Espero tener noticias tuyas en los comentarios.

¡Salud!