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

Los diseños interactivos pueden hacer que cualquier sitio web brille. En este tutorial, le mostraremos cómo alternar entre imágenes en un impresionante diseño de sección dividida. Al pasar el cursor sobre una imagen, aparecerá al frente mientras cubre 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 poder 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

Comencemos a recrear

Agregar nueva sección

Espaciado

Cree una nueva página o abra una existente. Agregue una sección regular, abra la configuración de la sección y elimine todos los rellenos superiores e inferiores predeterminados.

• Relleno superior + inferior: 0vw

Visibilidad

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

• Desbordamiento horizontal + vertical: oculto

Agregar nueva fila

Estructura de columna

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

Dimensionamiento

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

• Ancho de canal: 1
• Ancho: 100%
• Ancho Máx .: 100%

Espaciado

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

• Relleno superior e inferior: 0vw

Configuración de columna 1

Antecedentes

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

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

• Desbordamiento horizontal + vertical
  • Escritorio: predeterminado
  • Desplazamiento: visible
• Índice Z:
  • Escritorio: 10
  • Flotar: 11

Configuración de columna 2

Antecedentes

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: superior izquierda + inferior 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
  • Desplazamiento: 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.

Antecedentes

Use el color de fondo de la columna como el color de fondo de su 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 también un relleno personalizado.

• Relleno derecho:
  • Tableta: 18vw
  • Teléfono: 20vw

Transformar

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

• Transformar Traducir: eje x 19vw

Agregar módulo de texto a la columna 1

Agregar contenido

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

Texto

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

• Fuente: Verdana
• Color: blanco #ffffff
• Talla:
  • Escritorio: 2vw
  • Tableta: 3vw
  • Teléfono: 3.5vw
• Espaciado de letras: 1px
• Alineamiento: centrado

Encabezado de texto

Dale estilo al texto del título a continuación

• Nivel de rumbo: H2
• Fuente: Verdana
• Peso: negrita
• Alineamiento: centro
• Color: Magenta # 9d3056
• Talla:
  • Escritorio: 6vw
  • Tableta + Teléfono: 8vw

Dimensionamiento

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

• Anchura:
  • 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

Configuración 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 contadores de barras.

1. Fresas
2. Arándanos
3. Moras
4. Frambuesas

Porcentajes

Junto con los porcentajes.

1. 20
2. 40
3. 10
4. 20

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 contadores de barras

Elementos

En la configuración general del contador de barras, abra la configuración de los elementos. Cambie el porcentaje a «No».

• Mostrar porcentaje: no

Antecedentes

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, dele a las barras un color de barra magenta.

• Color de fondo: Magenta # 9d3056

Texto del título

Dale estilo a la configuración del texto del título a continuación.

• Fuente: Verdana
• Color: blanco #ffffff
• Talla:
  • Escritorio: 1vw
  • Tableta: 2vw
  • Teléfono: 3vw

Dimensionamiento

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

• Anchura:
  • Escritorio: 49%
  • Tableta + teléfono: 33%

Espaciado

Modifique la configuración de espaciado también.

• 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

Modifique la configuración del borde a continuación.

• Esquinas redondeadas: 1vw 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.

Antecedentes

Use el color de fondo de la columna 2 como el color de fondo de su 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 también un relleno izquierdo personalizado en tamaños de pantalla más pequeños.

• Acolchado Izquierdo:
  • Tableta: 16vw
  • Teléfono: 18vw

Transformar

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

• Transformar Traducir: 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 contenido de H2 y párrafo.

Texto

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

• Fuente: Verdana
• Color: blanco #ffffff
• Talla:
  • Escritorio: 2vw
  • Tableta: 3vw
  • Teléfono: 3.5vw
• Espaciado de letras: 1px
• Alineamiento: centro

Encabezado de texto

Cambie la configuración del texto del encabezado también.

• Nivel de rumbo: H2
• Fuente: Verdana
• Peso: negrita
• Alineamiento: centro
• Color: verde # 2c5b00
• Talla:
  • Escritorio: 6vw
  • Tableta + Teléfono: 8vw

Dimensionamiento

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

• Ancho: 60%
• Alineamiento: derecho

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
• Relleno derecho:
  • Tableta + Teléfono: 2vw

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

Configuración 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 contadores de barra.

1. Brócoli
2. Apio
3. Pepino
4. col rizada

Porcentajes

Asigne un porcentaje a cada barra de mostrador.

1. 20
2. 40
3. 20
4. 30

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 contadores de barras

Elementos

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

• Mostrar porcentaje: no

Antecedentes

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 de contador.

• Color de la barra: verde # 9d3056

Texto del título

Continúa estilizando el texto.

• Fuente: Verdana
• Color: blanco #ffffff
• Talla:
  • Escritorio: 1vw
  • Tableta: 2vw
  • Teléfono: 3vw

Dimensionamiento

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

• Anchura:
  • 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 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

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas