Cómo crear hermosos bordes de imagen usando las nuevas opciones de Divi

En el tutorial de Divi de hoy, le mostraremos cómo crear hermosos bordes de imagen en el próximo sitio web que cree. El propósito de esta publicación es demostrar cómo puede crear hermosos resultados que coincidan con las imágenes que está utilizando (y también con el resto de su sitio web).

Con las nuevas opciones de Divi, lograr resultados sorprendentes es más fácil que nunca. Solo tendrás que hacer algunas modificaciones que te mostraremos cómo hacer y estarás listo para llevar tu diseño web al siguiente nivel. Los 8 ejemplos que compartiremos con usted no usarán nada más que las opciones integradas que ofrecen Divi Builder y Image Module.

Vistazo

Echemos un vistazo a los resultados que puede esperar de esta publicación:

Cómo crear hermosos bordes de imagen usando las nuevas opciones de Divi

Suscríbete a nuestro canal de Youtube

Fondo degradado

La primera posibilidad que tiene para lograr hermosos bordes de imagen es usar solo un fondo degradado. Experimentando con las distintas configuraciones de fondo degradado, puede lograr resultados simples pero elegantes. Le mostraremos tres ejemplos de bordes de imagen que consisten únicamente en un fondo degradado.

Estándar

El primer ejemplo que manejaremos es el más simple y modesto de todos; un borde de imagen de degradado estándar. El resultado le mostraremos cómo crear se ve así:

Pestaña de contenido

Comience eligiendo un fondo degradado en la pestaña Contenido. Para este ejemplo, usamos la siguiente configuración:

• Primer color: # 081e8c
• Segundo color: # 764f9b
• Tipo de degradado: lineal
• Dirección del gradiente: 269 grados
• Posición inicial: 40%
• Posición final: 60%

Ficha Diseño

Lo siguiente y último que deberá hacer es agregar algo de relleno a la imagen. Es así de simple. Vaya a la pestaña Diseño y agregue '10px' al relleno superior, inferior, derecho e izquierdo.

Lados

A continuación, tenemos un borde de imagen que solo se muestra en el lado izquierdo y derecho de la imagen. El uso de este tipo de borde de imagen le da un toque extra agradable a la imagen sin poner demasiado enfoque en el borde mismo.

Pestaña de contenido

Para lograr este tipo de borde de imagen, comience agregando el siguiente fondo degradado a su imagen:

• Primer color: rgba (255,255,255,0)
• Segundo color: # 0a8da8
• Tipo de degradado: lineal
• Dirección del gradiente: 166 grados
• Posición inicial: 29%
• Posición final: 52%

Ficha Diseño

En la pestaña Diseño, lo único que necesitará son '10 px' de relleno para el lado derecho e izquierdo.

Una esquina

Continuando, también puede crear fondos de esquina para las imágenes en su sitio web. Este tipo de borde es ideal para usar cuando desea enfatizar un color que se está usando dentro de la imagen.

Pestaña de contenido

Para el ejemplo de la tercera imagen, use el siguiente fondo degradado:

• Primer color: rgba (58,8,1,0.58)
• Segundo color: rgba (41,196,169,0)
• Dirección del gradiente: 152 grados
• Posición inicial: 34%
• Posición final: 28%

Ficha Diseño

Luego, agregue '20px' a cada uno de los rellenos también.

Borde de imagen y fondo degradado

Otra posibilidad que tiene es combinar un fondo degradado con un borde de imagen. Esto también puede ofrecer resultados sorprendentes, como podrá comprobar en los siguientes cuatro ejemplos.

Gradiente sutil

La primera combinación de fondo degradado y borde de imagen es simple pero hermosa. Al usar los mismos colores para el fondo degradado y el borde, el borde de la imagen de alguna manera se siente como si se estuviera llenando de color.

Pestaña de contenido

Comience agregando la siguiente configuración de fondo degradado a su imagen:

• Primer color: rgba (255,255,255,0)
• Segundo color: # 777777
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 65%
• Posición final: 78%

Ficha Diseño

Vaya a la pestaña Diseño y use la siguiente configuración en la subcategoría Borde:

• Usar borde: sí
• Color del borde: # 777777
• Ancho del borde: 3px
• Estilo de borde: sólido

Por último, agregue un relleno de '7px' a todas las opciones de relleno.

Conformado

A continuación, tenemos un ejemplo que es genial para llamar la atención de los visitantes. En este caso, la imagen en sí contiene principalmente colores más claros, lo que crea un buen equilibrio con el borde más oscuro.

Pestaña de contenido

La configuración de fondo degradado que necesitará para este borde de imagen es la siguiente:

• Primer color: rgba (53,0,188,0.1)
• Segundo color: # 680061
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 80%
• Posición final: 80%

Ficha Diseño

Vaya a la pestaña Diseño y use el siguiente borde:

• Usar borde: sí
• Color del borde: # 9a00bc
• Ancho del borde: 1 px
• Estilo de borde: sólido

Desplácese hacia abajo y agregue el siguiente relleno a la imagen:

• Superior: 7px
• Derecha: 5px
• Abajo: 7px
• Izquierda: 5px

Borde doble

El uso de un borde doble en combinación con un fondo degradado también puede ofrecer resultados sorprendentes. Echar un vistazo:

Pestaña de contenido

El color de fondo degradado que hemos usado en este ejemplo es el siguiente:

• Primer color: rgba (224,43,32,0.61)
• Segundo color: rgba (12,113,195,0.87)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 71%
• Posición final: 93%

Ficha Diseño

Continuando, use la siguiente configuración para la subcategoría Borde:

• Usar borde: sí
• Color del borde: # f4f4f4 (coincide con el color de fondo de la sección)
• Ancho del borde: 8px
• Estilo de borde: Doble

Y agregue '10px' al relleno superior, inferior, derecho e izquierdo de la imagen.

Esquinas triangulares

Continuando, también puede crear algunas esquinas pequeñas en su borde usando la opción de fondo degradado en combinación con un borde discontinuo.

Pestaña de contenido

Para lograr el borde de la imagen que le mostramos arriba, use la siguiente configuración de fondo degradado:

• Primer color: rgba (163,103,6,0)
• Segundo color: # e09900
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 97%
• Posición final: 97%

Ficha Diseño

En la pestaña Diseño, también necesitaremos tener la siguiente configuración de borde:

• Usar borde: sí
• Color del borde: # e09900
• Ancho del borde: 2px
• Estilo de borde: discontinuo

Por último, necesitaremos un relleno de '8px' para el relleno superior, inferior, izquierdo y derecho.

Patrón y fondo degradado

La última posibilidad que queremos destacar es usar un patrón y un fondo degradado al mismo tiempo. Esto le permite jugar con la apariencia de sus imágenes.

Juguetón

Este borde contiene un fondo degradado de dos colores que también se utilizan dentro de la propia imagen. Al agregar también un patrón de fondo, la imagen le da un poco más de atmósfera a su sitio web.

Pestaña de contenido

Para el último ejemplo, usaremos la siguiente configuración de fondo degradado:

• Primer color: rgba (4,49,96,0.51)
• Segundo color: rgba (119,74,15,0.51)
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 0%
• Posición final: 100%

Ficha Diseño

A continuación, también agregaremos un fondo de patrón. El patrón que usamos en este ejemplo proviene de Toptal. Puede usar sus patrones para todo tipo de propósitos, solo asegúrese de acreditarlos dentro de su código como se menciona en sus preguntas frecuentes. Una vez que haya agregado el fondo del patrón, use también las siguientes configuraciones:

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición
• Mezcla de imagen de fondo: multiplicar

Lo último que deberá hacer es agregar un relleno de '12px' al relleno superior, inferior, derecho e izquierdo de su imagen.

Pensamientos finales

En esta publicación, le mostramos algunas formas diferentes de crear hermosos bordes de imagen. Estas opciones le brindan una perspectiva de las cosas que puede hacer con las nuevas opciones de Divi sin usar ningún CSS adicional. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Mr Aesthetics / shutterstock.com