Sea creativo con las nuevas opciones de sustitución de imagen de Divi


Las nuevas opciones de sustitución de imagen de Divi le dan a sus proyectos un nivel completamente nuevo de creatividad. En esta publicación, le mostraremos cómo crear una sección hermosa con imágenes que cambian al pasar el mouse. Esperamos que este diseño lo inspire a crear sus propias secciones creativas con las opciones de desplazamiento de reemplazo de imagen de Divi. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargar The Image Replacement Layout GRATIS

Para poner sus manos en el diseño de reemplazo de imagen gratuito, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=9giBrbkLgkw (/ incrustar)

Suscríbase a nuestro canal de Youtube

Comencemos a recrear

Agregar nueva sección

Espaciado

Comience creando una nueva página o agregando una nueva sección a una página existente. Antes de agregar una fila, ajuste la configuración de espacio de la sección.

  • Margen superior e inferior: 2vw
  • Margen izquierdo y derecho: 2vw

Frontera

Luego, agregue un poco de radio de borde.

  • Esquinas redondeadas: 10px

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Antecedentes

Antes de agregar cualquier módulo, agregue un fondo degradado de salmón pálido.

  • Fondo: gradiente
  • Gradient Color 1: Pale Salmon # f4e9de
  • Gradient Color 2: Even Paler Salmon # fff0e8

Dimensionamiento

Continúe ajustando el ancho de la fila.

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

Espaciado

Finalmente, ajuste el espacio.

  • Relleno superior:
    • Escritorio + Tableta: 5vw
  • Acolchado Izquierdo:
    • Tableta + Teléfono: 5vw
  • Relleno derecho:
    • Escritorio: 7vw
    • Tableta + Teléfono: 5vw

Agregar módulo de texto a la columna 1

Añadir contenido H2

¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto a la columna 1 e inserte algún contenido H2 de su elección.

Encabezado de texto

Pase a la pestaña de diseño y aplique estilo a la configuración del texto H2 en consecuencia:

  • Nivel de texto del encabezado: H2
  • Fuente H2: Annie usa tu telescopio
  • Peso de fuente H2: negrita
  • Alineación de texto H2: centro
  • Color de texto H2: Marrón # 793715
  • Color de texto H2:
    • Escritorio: 7.2vw
    • Tableta: 12vw
    • Teléfono: 11vw

Dimensionamiento

Modifique el ancho en el escritorio a continuación.

  • Anchura:
    • Escritorio: 45vw
    • Tableta + teléfono: 100%

Transformar

Por último, pero no menos importante, gire el texto y cambie su posición utilizando la configuración de transformación.

  • Transformar Rotar:
    • Escritorio: 270 grados
  • Transformar Traducir:
    • eje x: -10vw
    • eje y: 19vw

Agregue el primer módulo de imagen a la columna 1

Agregar una ilustración transparente

Agregue un nuevo módulo de imagen justo debajo del módulo de texto y cargue una ilustración de su elección. Puede encontrar las imágenes que estamos usando en este tutorial descargando la carpeta comprimida al comienzo de esta publicación.

Dimensionamiento

Ahora, fuerce el tamaño de la imagen a ancho completo.

  • Ancho completo: sí

Espaciado

Luego, ajuste la configuración de espaciado.

  • Margen superior:
    • Escritorio + Tableta: -11vw
  • Margen izquierdo:
    • Escritorio: -2vw
    • Tableta + Teléfono: -36vw
  • Relleno izquierdo y derecho:
    • Escritorio: 10vw
    • Tableta + Teléfono: 34vw

Agregue el segundo módulo de imagen a la columna 1

Agregar una ilustración transparente

Justo debajo del primer módulo de imagen, agregue otro. Inserte una ilustración de su elección.

Dimensionamiento

Forzar el módulo a ancho completo.

  • Ancho completo: sí

Espaciado

Luego, ajuste la configuración de espaciado.

  • Margen superior:
    • Escritorio: -2vw
    • Tableta + Teléfono: -10vw
  • Margen izquierdo:
    • Escritorio + Tableta: -14vw
  • Relleno izquierdo y derecho:
    • Escritorio: 7vw
    • Tableta + Teléfono: 35vw

Agregue el tercer módulo de imagen a la columna 1

Agregar una imagen

Agregue otro módulo de imagen a la columna e inserte una ilustración.

Dimensionamiento

Luego, fuerce el módulo a ancho completo.

  • Ancho completo: sí

Espaciado

Finalmente, ajuste el espacio.

  • Margen superior:
    • Tableta + Teléfono: -18vw
  • Margen izquierdo:
    • Escritorio: -13vw
    • Tableta + Teléfono: 10vw
  • Relleno izquierdo y derecho:
    • Escritorio: 7vw
    • Tableta + Teléfono: 35vw

Agregue el cuarto módulo de imagen a la columna 1

Agregar una imagen

El módulo final en la columna 1 es otro módulo de imagen. Insertar una ilustración.

Dimensionamiento

Forzar el módulo a ancho completo.

  • Ancho completo: sí

Espaciado

Luego, ajuste el espacio.

  • Margen superior:
    • Escritorio: 3vw
    • Tableta + Teléfono: -15vw
  • Margen izquierdo:
    • Escritorio: -3vw
    • Tableta + teléfono: 30vw
  • Relleno izquierdo y derecho:
    • Escritorio: 10vw
    • Tableta + Teléfono: 35vw

Transformar

Por último, pero no menos importante, gire la ilustración.

  • Transformar Rotar: 84 grados

Agregue el primer módulo de texto a la columna 2

Agregar contenido

¡A la siguiente columna! Agregue un módulo de texto con algún contenido H3 de su elección.

Añadir enlace

Luego, agregue un enlace al módulo.

Antecedentes

Vaya a la configuración de fondo y agregue un color de fondo a continuación.

  • Color de fondo
  • Color de fondo: Marrón # 793715

Encabezado de texto

Luego, diseñe el texto H3 en la pestaña de diseño.

  • Nivel de texto de encabezado: H3
  • Fuente H3: Annie usa tu telescopio
  • Color H3: Blanco #ffffff
  • Tamaño de fuente H3:
    • Escritorio: 2vw
    • Tableta: 5vw
    • Teléfono: 6vw

Dimensionamiento

Ahora, ajuste la configuración de tamaño.

  • Ancho: 33%
  • Alineación del módulo: centro

Espaciado

Luego, agregue algunos valores de espaciado en diferentes tamaños de pantalla.

  • Margen inferior: 1vw
  • Relleno superior:
    • Escritorio: 0.5vw
    • Tableta + Teléfono: 2.3vw
  • Acolchado inferior:
    • Escritorio + Tableta: 1.1vw

Frontera

Continúe agregando algo de radio de borde.

  • Esquinas redondeadas: 1vw todas las esquinas

Sombra de la caja

Finalmente, agregue un cuadro de sombra.

  • Box Shadow: primera opción
  • Posición horizontal: 7px
  • Fuerza de desenfoque: 25px

Agregue el primer módulo de imagen a la columna 2

Añadir imagen

El siguiente módulo que necesitamos en la columna 2 es un módulo de imagen. Cargue dos imágenes diferentes: una para el estado estático y otra para el desplazamiento.

  • Estática: primera imagen
  • Desplazamiento: segunda imagen

Dimensionamiento

Forzar la imagen a ancho completo.

  • Ancho completo: sí

Espaciado

Luego, ajuste los valores de espaciado.

  • Margen superior:
    • Escritorio: -2vw
    • Tableta + Teléfono: 20vw
  • Margen inferior:
    • Escritorio + Tableta: 4vw
  • Margen izquierdo:
    • Escritorio: -5vw

Frontera

Agregue esquinas redondeadas a continuación.

  • Esquinas redondeadas: 10 px en todas las esquinas

Sombra de la caja

Dale a la imagen una sombra de cuadro sutil también.

  • Box Shadow: segunda opción
  • Posición vertical: 20px
  • Fuerza de desenfoque: 80 px

Transformar

Finalmente, ajuste los valores de la escala de transformación al pasar el ratón por encima.

  • Escala de transformación al pasar el mouse: 110%

Módulos de texto e imagen duplicados en la columna 2

Clone ambos módulos y coloque los duplicados en el orden correcto.

Ajuste el segundo módulo de texto en la columna 2

Cambiar contenido y enlace

Cambie el contenido en el módulo de texto duplicado.

Ajuste el segundo módulo de imagen en la columna 2

Cambiar imágenes

Cambie las imágenes tanto en la configuración estática como en la de desplazamiento.

Clonar columna 2

Eliminar la columna 3 y duplicar la columna 2

Vuelva a la configuración de la fila y elimine la tercera columna. Luego, duplica la segunda columna.

Ajuste el primer módulo de texto en la columna 3

Cambiar contenido y enlace

Después de duplicar la segunda columna, ajuste el texto y el enlace en el primer módulo de texto de la columna 3.

Ajuste el primer módulo de imagen en la columna 3

Cambiar imágenes

Cambie las imágenes en el módulo de imagen también.

Espaciado

Luego, ajuste el espacio.

  • Margen superior:
    • Escritorio: -2vw
    • Tableta + Teléfono: 11vw
  • Margen inferior
    • Escritorio + Tableta: 5vw

Ajuste el segundo módulo de texto en la columna 3

Cambiar contenido y enlace

Cambie el texto y el enlace del último módulo de texto en la columna 3.

Ajuste el segundo módulo de imagen en la columna 3

Cambiar imágenes

Cambie también las imágenes estáticas y de desplazamiento del último módulo de imagen.

Espaciado

Finalmente, ajuste el espacio del módulo de imagen y ¡listo!

  • Margen superior:
    • Escritorio: -3vw
    • Tableta + Teléfono: 7vw

Avance

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

Escritorio

Móvil

Conclusión

En esta publicación, le mostramos cómo crear un diseño con las nuevas opciones de reemplazo de imagen de Divi. Esta funcionalidad puede conducir a muchas posibilidades creativas. Esperamos que los use en sus propios proyectos. Recuerde usar los mismos tamaños de imagen tanto para las imágenes estáticas como para las de desplazamiento. Si tiene alguna pregunta o sugerencia, ¡no dude en dejarla en la sección de comentarios a continuación!