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

Avance

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

Escritorio

Móvil

Descargue el diseño de reemplazo de imagen 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Suscríbete a nuestro canal de Youtube

Empecemos 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 espaciado de la sección.

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

Borde

Luego, agregue algo de radio de borde.

• Esquinas redondeadas: 10px

Agregar nueva fila

Estructura de la columna

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

Fondo

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

• Fondo: Gradiente
• Color de degradado 1: Salmón pálido #f4e9de
• Color degradado 2: Salmón aún más pálido #fff0e8

Dimensionamiento

Continúe ajustando el ancho de la fila.

• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Finalmente, ajuste el espaciado.

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

Agregar módulo de texto a la columna 1

Agregar 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.

Texto de encabezado

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

• Nivel de texto de encabezado: H2
• Fuente H2: Annie usa tu telescopio
• Peso de fuente H2: Negrita
• Alineación de texto H2: Centro
• H2 Color del texto: 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.

• Ancho:
  
  • Escritorio: 45vw
  • Tableta +Teléfono: 100%

Transformar

Por último, pero no menos importante, gire el texto y cambie su posición usando 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

Añadir 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 espaciado.

• 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

Añadir una imagen

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

Dimensionamiento

Forzar el módulo a ancho completo.

• Ancho completo: Sí

Espaciado

Luego, ajuste el espaciado.

• 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.

Fondo

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

Texto de encabezado

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

• Nivel de texto de encabezado: H3
• Fuente H3: Annie usa tu telescopio
• H3 Color: 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
• Acolchado superior:
  
  • Escritorio: 0.5vw
  • Tableta + Teléfono: 2.3vw
• Acolchado inferior:
  
  • Escritorio + Tableta: 1.1vw

Borde

Continúe agregando algo de radio de borde.

• Esquinas redondeadas: 1vw todas las esquinas

Sombra de la caja

Finalmente, agregue una sombra de cuadro.

• Sombra de caja: 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 al pasar el mouse.

• Estática: primera imagen
• Pasar el cursor: 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

Borde

Agregue esquinas redondeadas a continuación.

• Esquinas redondeadas: 10 px todas las esquinas

Sombra de la caja

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

• Sombra de cuadro: segunda opción
• Posición vertical: 20px
• Fuerza de desenfoque: 80px

Transformar

Finalmente, ajuste los valores de la escala de transformación al pasar el mouse.

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

Duplicar módulos de texto e imagen 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 en la configuración estática y flotante.

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 imágenes también.

Espaciado

Luego, ajuste el espaciado.

• 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 flotantes del último módulo de imagen.

Espaciado

Finalmente, ajuste el espaciado 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 desplazamiento de reemplazo de imagen de Divi. Esta funcionalidad puede dar lugar a muchas posibilidades creativas. Esperamos que los utilice en sus propios proyectos. Recuerde usar los mismos tamaños de imagen para las imágenes estáticas y flotantes. Si tiene alguna pregunta o sugerencia, ¡no dude en dejarla en la sección de comentarios a continuación!