
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.
- Fresas
- Arándanos
- Moras
- Frambuesas
Porcentajes
Junto con los porcentajes.
- 20
- 40
- 10
- 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.
- Brócoli
- Apio
- Pepino
- col rizada
Porcentajes
Asigne un porcentaje a cada barra de mostrador.
- 20
- 40
- 20
- 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

Por Prunaestudio
Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.
* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)
Nuestras últimas entradas
Cómo crear una plantilla de página de producto inspirado en la estética japonesa con Divi
¿Está buscando un diseño de página de producto limpio y minimalista para su tienda online? Hoy tenemos un diseño inspirado en la estética japonesa. Este es un estilo común para revistas y sitios web japoneses. Hace que sea fácil leer el texto, ver los productos y no...
Cómo crear un encabezado vertical con el generador de temas de Divi
Desde que salió Divi Theme Builder, hemos tratado de guiarlo a través del proceso de creación de sus propios encabezados globales. Continuaremos haciéndolo mostrándole cómo crear un encabezado vertical que aparece en el lado izquierdo de sus páginas y...
Cómo reducir el tamaño de tu encabezado global al desplazarte con el generador de temas de Divi
Cuando diseñe un encabezado global fijo, es posible que desee reducir la altura del encabezado cuando sus visitantes se desplazan. Ayuda a reducir el espacio que ocupa el encabezado global en la altura de la ventana de visualización de sus visitantes. En este...