Cómo alternar entre imágenes en un impresionante diseño de sección dividida Divi

Publicado: 2019-10-31

Los diseños interactivos pueden hacer brillar cualquier sitio web. En este tutorial, le mostraremos cómo alternar entre imágenes en un impresionante diseño de sección dividida. Al colocar el cursor sobre una imagen, pasará al frente y cubrirá la otra. Siga los pasos a continuación para recrear el diseño o descargar el archivo JSON a través del enlace de registro. Asegúrese de utilizar imágenes con fondos transparentes para que pueda controlar los colores de fondo de cada columna.

¡Hagámoslo!

Avance

Echemos un vistazo al diseño en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga el diseño de imagen de alternancia GRATIS

Para poner sus manos en el diseño de imagen de alternancia gratuita, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Empecemos a recrear

Agregar nueva sección

Espaciado

Crea una nueva página o abre una existente. Agregue una sección normal, abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.

Acolchado superior + inferior: 0vw

Visibilidad

Luego, configure los desbordamientos de la sección como ocultos.

Desbordamiento horizontal + vertical: oculto

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Antes de agregar módulos, ajuste el tamaño de la fila.

Ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%

Espaciado

Elimine también el relleno superior e inferior predeterminado de la fila.

Acolchado superior e inferior: 0vw

Configuración de la columna 1

Fondo

Abra la configuración de la columna 1 a continuación y agregue un color de fondo.

Color: rosa pálido # E7BAC6

Frontera

Luego, ajuste la configuración del borde de la columna en diferentes tamaños de pantalla.

Esquinas redondeadas: arriba a la derecha + abajo a la derecha
- Escritorio: 10vw
- Tableta y teléfono: 0vw

Visibilidad

Vaya a la pestaña avanzada y ajuste la configuración de visibilidad de la siguiente manera:

Desbordamiento horizontal + vertical
- Escritorio: predeterminado
- Hover: Visible
Índice Z:
- Escritorio: 10
- Flotar: 11

Configuración de la columna 2

Fondo

Ahora, agregue el fondo de color a la columna 2.

Color: Verde pálido # bfd5a5

Frontera

Cambie la configuración del borde de la segunda columna de la siguiente manera:

Esquinas redondeadas: arriba a la izquierda + abajo a la izquierda
- Escritorio: 10vw
- Tableta y teléfono: 0vw

Visibilidad

Por último, pero no menos importante, cambie la configuración de visibilidad en consecuencia:

Desbordamiento horizontal + vertical
- Escritorio: predeterminado
- Hover: Visible
Índice Z:
- Escritorio: 9
- Flotar: 11

Agregar módulo de imagen a la columna 1

Añadir imagen

¡Es hora de comenzar a agregar módulos! Agregue un módulo de imagen a la columna 1 y cargue una imagen semitransparente de su elección.

Fondo

Utilice el color de fondo de la columna como color de fondo de la imagen.

Color: rosa pálido # E7BAC6

Dimensionamiento

Luego, en la pestaña de diseño, ajuste la configuración de tamaño.

Forzar ancho completo: Sí

Espaciado

Agregue un poco de relleno personalizado también.

Acolchado derecho:
- Tableta: 18vw
- Teléfono: 20vw

Transformar

Por último, pero no menos importante, ajuste la configuración de traducción de transformación del módulo.

Transformación de traducción: eje x 19vw

Agregar módulo de texto a la columna 1

Agregar contenido

Pasemos al siguiente módulo, que es un módulo de texto. Agregue algo de contenido H2 y de párrafo de su elección.

Texto

Vaya a la pestaña de diseño y cambie la configuración del texto de la siguiente manera.

Fuente: Verdana
Color: Blanco #ffffff
Tamaño:
- Escritorio: 2vw
- Tableta: 3vw
- Teléfono: 3.5vw
Espaciado entre letras: 1px
Alineación: centrada

Texto de encabezado

A continuación, aplique estilo al texto del título.

Nivel de encabezado: H2
Fuente: Verdana
Peso: negrita
Alineación: Centro
Color: Magenta # 9d3056
Tamaño:
- Escritorio: 6vw
- Tableta + Teléfono: 8vw

Dimensionamiento

Luego, ajuste el tamaño del módulo.

Ancho:
- Escritorio: 56%
- Tableta + Teléfono: 43%

Espaciado

Complete la configuración del módulo modificando la configuración de espaciado en diferentes tamaños de pantalla.

Margen superior:
- Escritorio: -55vw
- Tableta: -70vw
- Teléfono: -90vw
Acolchado inferior:
- Escritorio + Tableta: 0vw
Acolchado izquierdo: 2vw

Agregar módulo de contadores de barras a la columna 1

Ajustes del contador de barras 1-4

Títulos

El siguiente y último módulo que necesitamos en la columna 1 es el módulo de contadores de barras. Agregue títulos a los mostradores de la barra.

Fresas
Arándanos
Moras
Frambuesas

Porcentajes

Junto con los porcentajes.

Dimensionamiento

Haga clic en la primera barra y establezca la altura. Repita este paso para las cuatro barras.

Altura: 1.5vw

Configuración general de los contadores de barras

Elementos

En la configuración general del mostrador de barras, abra la configuración de elementos. Cambie el porcentaje a "No".

Mostrar porcentaje: No

Fondo

Ahora, agregue un fondo semitransparente.

Color: Rosa pálido con transparencia rgba (157,48,86,0.18)

Bar

En la pestaña de diseño, dale a las barras un color de barra magenta.

Color de fondo: Magenta # 9d3056

Texto del título

A continuación, aplique estilo a la configuración del texto del título.

Fuente: Verdana
Color: Blanco #ffffff
Tamaño:
- Escritorio: 1vw
- Tableta: 2vw
- Teléfono: 3vw

Dimensionamiento

Continúe ajustando la configuración de tamaño del módulo.

Ancho:
- Escritorio: 49%
- Tableta + Teléfono: 33%

Espaciado

Modifique también la configuración de espaciado.

Margen superior:
- Tableta + Teléfono: -3vw
Margen inferior:
- Escritorio: 21vw
- Tableta + Teléfono: 28vw
Margen izquierdo:
- Escritorio: 3vw
- Tableta + Teléfono: 6vw
Acolchado inferior + izquierdo: 0vw

Frontera

A continuación, modifique la configuración del borde.

Esquinas redondeadas: 1vw en las cuatro esquinas

Visibilidad

Finalmente, ajuste el índice z y los desbordamientos en la pestaña de visibilidad.

Desbordamiento horizontal: visible
Desbordamiento vertical: oculto
Índice Z: 11

Agregar módulo de imagen a la columna 2

Añadir imagen

¡A la segunda columna! Agregue un nuevo módulo de imagen y cargue una imagen semitransparente de su elección.

Fondo

Utilice el color de fondo de la columna 2 como color de fondo de la imagen a continuación.

Color: Verde pálido # bfd5a5

Dimensionamiento

En la pestaña de diseño, ajuste el tamaño del módulo.

Forzar ancho completo: Sí

Espaciado

Agregue un poco de relleno izquierdo personalizado en tamaños de pantalla más pequeños también.

Acolchado izquierdo:
- Tableta: 16vw
- Teléfono: 18vw

Transformar

Por último, pero no menos importante, cambie la configuración de traducción de transformación.

Transformación de traducción: eje x -19.6vw

Agregar módulo de texto a la columna 2

Agregar contenido

Continúe agregando un módulo de texto a la columna 2 con algo de contenido H2 y de párrafo.

Texto

Luego, en la pestaña de diseño, aplique estilo al texto.

Fuente: Verdana
Color: Blanco #ffffff
Tamaño:
- Escritorio: 2vw
- Tableta: 3vw
- Teléfono: 3.5vw
Espaciado entre letras: 1px
Alineación: Centro

Texto de encabezado

Cambie también la configuración del texto del título.

Nivel de encabezado: H2
Fuente: Verdana
Peso: negrita
Alineación: Centro
Color: Verde # 2c5b00
Tamaño:
- Escritorio: 6vw
- Tableta + Teléfono: 8vw

Dimensionamiento

Y ajuste la configuración de tamaño del módulo.

Ancho: 60%
Alineación: Derecha

Espaciado

Por último, pero no menos importante, use algunos valores de espaciado personalizados en diferentes tamaños de pantalla.

Margen superior:
- Escritorio: -55vw
- Tableta: -63vw
- Teléfono: -90vw
Acolchado inferior:
- Escritorio + Tableta: 37vw
Acolchado izquierdo:
- Escritorio: 0vw
- Tableta + Teléfono: 16vw
Acolchado derecho:
- Tableta + Teléfono: 2vw

Agregue el módulo de contadores de barras a la columna 2

Ajustes del contador de barras 1-4

Títulos

El último módulo que necesitamos en la columna 2 es el módulo de contadores de barras. Agregue cuatro barras de bar.

Brócoli
Apio
Pepino
col rizada

Porcentajes

Asigne un porcentaje a cada barra.

Dimensionamiento

Abra la configuración individual de la primera barra y modifique la altura en la configuración de tamaño. Repita este paso para las cuatro barras.

Altura: 1.5vw

Configuración general de los contadores de barras

Elementos

En la configuración general del contador de barras, cambie el porcentaje de alternancia a "No".

Mostrar porcentaje: No

Fondo

A continuación, agregue un color de fondo semitransparente.

Color: Verde pálido con transparencia rgba (17,119,3,0.18)

Bar

Luego, en la pestaña de diseño, agregue color a la barra del mostrador.

Color de barra: verde # 9d3056

Texto del título

Continúe aplicando estilo al texto.

Fuente: Verdana
Color: Blanco #ffffff
Tamaño:
- Escritorio: 1vw
- Tableta: 2vw
- Teléfono: 3vw

Dimensionamiento

Modifique también el ancho en diferentes tamaños de pantalla.

Ancho:
- Escritorio: 49%
- Tableta + Teléfono: 33%

Espaciado

Pase a la configuración de espaciado y agregue algunos valores de espaciado personalizados en diferentes tamaños de pantalla.

Margen superior:
- Escritorio: -37vw
- Tableta + Teléfono: -40vw
Margen inferior:
- Escritorio: 21vw
- Tableta + Teléfono: 28vw
Margen izquierdo:
- Escritorio: 23vw
- Tableta + Teléfono: 60vw
Acolchado inferior + izquierdo: 0vw

Frontera

También estamos agregando algunas esquinas redondeadas.

Esquinas redondeadas: 1vw en las cuatro esquinas

Visibilidad

Complete la configuración del módulo ajustando los desbordamientos y el índice z en la pestaña de visibilidad.

Desbordamiento horizontal: visible
Desbordamiento vertical: oculto
Índice Z: 11

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Es una envoltura!

En esta publicación, le mostramos cómo alternar entre imágenes en un hermoso diseño. Esta es una excelente manera de crear un diseño interactivo y utilizar el índice z integrado de Divi para determinar qué imagen aparece. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!