¿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
tableta
Teléfono
Segundo ejemplo: forma de imagen lineal
oficina
tableta
Teléfono
Tercer ejemplo: forma de imagen elíptica
Ordenador de oficina
tableta
Teléfono
Cuarto ejemplo: forma de imagen cónica
Ordenador de oficina
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
Luego ve a la pestaña Diseño y cambie la configuración de espaciado de la siguiente manera:.
- Relleno (Superior e Inferior): 10%
Añadir línea
Luego agrega un línea con la estructura de columnas a continuación.
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
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
Luego agrega un Módulo de texto a la columna de la izquierda.
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.
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.
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)
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Í
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Í
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
- 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
¡¡¡Descarga DIVI ahora!!!
tableta
Teléfono
Segundo ejemplo: forma de imagen lineal
Ordenador de oficina
¡¡¡Descarga DIVI ahora!!!
tableta
Teléfono
Tercer ejemplo: forma de imagen elíptica
Ordenador de oficina
¡¡¡Descarga DIVI ahora!!!
tableta
Teléfono
Cuarto ejemplo: forma de imagen cónica
Ordenador de oficina
¡¡¡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.
...