¿Te gustaría dar forma a tus imágenes usando el generador de degradados? Divi ?

Las máscaras de imagen se utilizan a menudo para agregar formas interesantes a las imágenes. Permiten que la imagen se vea a través de la forma, dando a la página un elemento de diseño único. 

Con el Constructor de degradado de Divi, no necesariamente necesita usar máscaras para crear formas. En su lugar, puede utilizar el Paradas de gradiente y los parámetros para crearlos! 

En este artículo veremos cómo embellecer tus imágenes con el Generador de gradiente de Divi para ayudarle a agregar diseños únicos a sus imágenes.

Vamos a empezar.

vista

Primero, veamos qué vamos a crear en este tutorial en diferentes tamaños de pantalla.

Primer ejemplo: forma de imagen circular

Ordenador de oficina

dale formas a tus imágenes usando el generador de gradientes de Divi

tableta

Teléfono

Segundo ejemplo: forma de imagen lineal

oficina

dale formas a tus imágenes usando el generador de gradientes de Divi

tableta

Teléfono

Tercer ejemplo: forma de imagen elíptica

Ordenador de oficina

dale formas a tus imágenes usando el generador de gradientes de Divi

tableta

Teléfono

Cuarto ejemplo: forma de imagen cónica

Ordenador de oficina

dale formas a tus imágenes usando el generador de gradientes de Divi

tableta

Teléfono

Maquetación con Divi

Comencemos por crear el diseño que usaremos en todos los ejemplos. Este diseño se puede utilizar como una sección principal. 

Incluirá un título y una descripción por un lado y la imagen por el otro. Luego usaremos este diseño e imagen para los ejemplos.

Personaliza la sección

Primero, cree una nueva página Divi y personalice la sección. Abra la configuración de la sección y cambie la los colores antecedentes de #f0f3fb.

  • Fondo: #f0f3fb
Crear el diseño

Luego ve a la pestaña Diseño y cambie la configuración de espaciado de la siguiente manera:.

  • Relleno (Superior e Inferior): 10%
Crear el diseño

Añadir línea

Luego agrega un línea con la estructura de columnas a continuación.

Añadir línea

Acceda a los parámetros de la línea, en la pestaña Diseño, navegue a la opción Guía de Tallas y modificar los parámetros de dimensionamiento.

  • Usar ancho de canalón personalizado: SÍ
  • Ancho máximo: 1px
Añadir línea

Configuración de la primera columna

En la pestaña Contenido de la fila, abra la configuración de la primera columna de la fila, vaya a la pestaña Diseño. Modifique el espaciado de la siguiente manera.

  • Relleno (izquierda y derecha): 9 % izquierda, derecha
Parámetros del primer módulo de texto

Parámetros del primer módulo de Texto

Luego agrega un Módulo de texto a la columna de la izquierda.

Parámetros del primer módulo de texto

seleccionar Rumbo 4 para el texto de contenido y agrega el contenido de tu cuerpo

  • Texto: "Bienvenido a BlogPasCher"

Luego ve a la pestaña Diseño y cambiar la configuración del título.

  • Fuente: Montserrat
  • Peso de fuente: Negrita
  • Estilo: TT
  • Color del texto: #1d4eff
  • Tamaño del texto: escritorio 16 px, tableta 14 px, teléfono 12 px
  • Espaciado entre letras: 0,3 em
  • Altura de la línea: 1,6 cm

Desplazarse hasta Distanciamiento y cambiar el margen inferior.

  • Margen (inferior): 0px

Parámetros del segundo módulo de Texto

Luego agrega un Módulo de texto bajo el primero.

Parámetros del segundo módulo de texto

Establezca el tipo de texto en “Título 1” y agrega el contenido de tu cuerpo

  • Contenido: “Planifica tu futuro financiero”

Luego selecciona la pestaña Diseño y modificar las opciones del título.

  • Fuente: Montserrat
  • Peso de fuente: Negrita
  • Color del texto: #0f1154
  • Tamaño: escritorio de 80 px, tableta de 40 px, teléfono de 24 px
  • Altura de fila: 110%

Parámetros del tercer módulo de Texto

Luego agrega un Módulo de texto bajo el segundo.

Parámetros del tercer módulo de texto

Deje el tipo de texto en "Párrafo" y agregue el contenido de su cuerpo.

  • Cuerpo: contenido

Luego ve a la pestaña diseño y cambiar la configuración de texto.

  • Fuente del texto: Roboto
  • Peso de fuente: medio
  • Color del texto: #000000
  • Tamaño del texto: 18 px (computadora de escritorio y tableta), 14 px (teléfono)
  • Altura de línea: 180%

Finalmente, desplácese hacia abajo hasta espaciamiento y establecer el margen inferior. Cierre la configuración del módulo.

  • Margen (inferior): 0px

Configuración del módulo de imagen

Ahora agrega un Módulo de imagen a la columna de la derecha.

En primer lugar, eliminar imagen ficticia haciendo clic en la papelera o en el icono de reinicio encima de la imagen.

Luego desplácese hacia abajo fondo , seleccione la pestaña Imagen y agrega tu imagen. Deje todas las configuraciones de imagen en sus valores predeterminados. La imagen no mostrará mucho al principio. Solucionaremos esto sobre la marcha.

Luego selecciona la pestaña Estilo y desplázate hasta Distanciamiento.

  • Margen (Escritorio): -10% (Superior), -30% (Izquierda), 10% (Derecha)
  • Relleno (superior e inferior): 300 px
  • Margen (tableta/teléfono): 0 % (superior), 0 % (izquierdo y derecho)
  • Relleno (teléfono): 150 px (superior e inferior)
Configuración del módulo de imagen

Ejemplos de imágenes formadas con Gradient Builder de Divi

Primer ejemplo: forma circular

Nuestro primer ejemplo le da a la imagen una forma circular con un agujero en el centro.

Abra la configuración del módulo de imagen y desplácese hacia abajo hasta Antecedentes . Selecciona el Pestaña Degradado de fondo y establezca 6 paradas de gradiente:

  • Primera parada: 0%, #f0f3fb
  • Segundo: 45%, #f0f3fb
  • Tercero (sobre el segundo): 45%, rgba(41,196,169,0)
  • Cuarto: 69%, rgba(250,255,214,0)
  • Quinto (por encima del cuarto): 69 %, #f0f3fb
  • Sexto: 100%, #f0f3fb
  • Tipo: Redondo
  • Posición: Centro
  • Unidad: Porcentaje
  • Gradiente cuadrado sobre la imagen de fondo: SÍ

Segundo ejemplo: forma lineal

Aquí hay una vista previa del segundo ejemplo de forma de imagen. Este ejemplo coloca líneas diagonales a lo largo de la imagen.

Abra la configuración, desplácese hacia abajo hasta Fondo y seleccione elPestaña Degradado de fondo. Agregue cuatro paradas de degradado:

  • Primera parada: 0%, #f0f3fb
  • Segundo: 5%, #f0f3fb
  • Tercero (sobre el segundo): 5%, rgba(175,175,175,0)
  • Cuarto: 13%, rgba(41,196,169,0)
  • Tipo: lineal
  • Dirección: 150 grados
  • Gradiente de repetición: SÍ
  • Unidad de gradiente: porcentaje
  • Gradiente cuadrado sobre la imagen de fondo: SÍ
Generador de degradado Divi

Tercer ejemplo: forma elíptica

Este es nuestro tercer ejemplo de forma de imagen. Esto utiliza una forma elíptica.

Abra la configuración del módulo de imagen y desplácese hacia abajo hasta Antecedentes . Seleccionar pestaña Gradiente de fondo y crea cuatro paradas de degradado:

  • Primera parada: 0%, #f0f3fb
  • Segundo: 9%, #f0f3fb
  • Tercero (sobre el segundo): 9%, rgba(175,175,175,0)
  • Cuarto: 21%, rgba(41,196,169,0)
  • Tipo: elíptica
  • Posición del degradado: arriba a la izquierda
  • Gradiente de repetición: SÍ
  • Unidad de gradiente: porcentaje
  • Gradiente cuadrado sobre la imagen de fondo: SÍ
Generador de degradado Divi

Cuarto ejemplo: forma cónica

Nuestro cuarto ejemplo utiliza "Cónico" para crear una sola forma de imagen.

Abra la configuración del módulo de imagen, desplácese hacia abajo hasta Antecedentes y seleccione la pestaña Imagen de fondo Este tiene 5 Gradient Stops:

  • Primera parada: 23%, #f0f3fb
  • Segundo: 35%, #f0f3fb
  • Tercero (sobre el segundo): 35%, rgba(41,196,169,0)
  • Cuarto: 65%, rgba(250,255,214,0)
  • Quinto (por encima del cuarto): 65 %, #f0f3fb
Generador de degradado Divi
  • Tipo: cónico
  • Dirección del gradiente: 180 grados
  • Posición del degradado: inferior
  • Unidad: Porcentaje
  • Gradiente cuadrado sobre la imagen de fondo: SÍ

Resultados finales

Todos los diseños salieron bien. Las formas de las imágenes se destacan y las imágenes siempre son fáciles de entender. Todos ellos son receptivos, por lo que se ven geniales en cualquier dispositivo.

Primer ejemplo: forma de imagen circular

Ordenador de oficina

dale formas a tus imágenes usando el generador de gradientes de Divi

¡¡¡Descarga DIVI ahora!!!

tableta

Teléfono

Segundo ejemplo: forma de imagen lineal

Ordenador de oficina

dale formas a tus imágenes usando el generador de gradientes de Divi

¡¡¡Descarga DIVI ahora!!!

tableta

Teléfono

Tercer ejemplo: forma de imagen elíptica

Ordenador de oficina

dale formas a tus imágenes usando el generador de gradientes de Divi

¡¡¡Descarga DIVI ahora!!!

tableta

Teléfono

Cuarto ejemplo: forma de imagen cónica

Ordenador de oficina

dale formas a tus imágenes usando el generador de gradientes de Divi

¡¡¡Descarga DIVI ahora!!!

tableta

Teléfono

Conclusión

Este es nuestro vistazo a cómo dar forma a sus imágenes con Gradient Builder de Divi. 

El Gradient Builder puede crear formas de imagen interesantes. Jugar con paradas de degradado, probar distintos tipos de degradado y activar la repetición de degradado son excelentes maneras de crear nuevos diseños. 

Asegúrese de revisar sus diseños en todos los tamaños de pantalla y hacer ajustes si es necesario.

Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo

También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...