En el tutorial Divi de hoy , le mostraremos cómo crear hermosos bordes de imagen en el próximo sitio web que construya. 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 utilizará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. Al experimentar con las diversas 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 estaremos manejando es el más simple y modesto de todos; un borde de imagen 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, hemos utilizado la siguiente configuración:
- Primer color: #081e8c
- Segundo color: #764f9b
- Tipo de gradiente: 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 tan simple como eso. 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 énfasis en el borde en sí.
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 gradiente: 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á es ’10px’ de relleno para el lado derecho e izquierdo.
una esquina
Continuando, también puede crear fondos de esquina para las imágenes de su sitio web. Este tipo de borde es excelente para usar cuando desea enfatizar un color que se usa 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 tienes es combinar un fondo degradado con un borde de imagen. Esto también puede generar resultados sorprendentes, como podrá observar 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 gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición inicial: 65%
- Posición final: 78%
Ficha Diseño
Pase a la pestaña Diseño y use las siguientes configuraciones 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 gradiente: 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: 1px
- 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 algunos 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 gradiente: 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 su 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 gradiente: 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 las siguientes configuraciones de borde:
- Usar borde: Sí
- Color del borde: #e09900
- Ancho del borde: 2px
- Estilo de borde: punteado
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 gradiente: lineal
- Dirección del gradiente: 180 grados
- Posición de inicio: 0%
- Posición final: 100%
Ficha Diseño
A continuación, también agregaremos un patrón de fondo. El patrón que hemos usado en este ejemplo proviene de Toptal . Puede usar sus patrones para todo tipo de propósitos, solo asegúrese de incluirlos en 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 la 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úrate de dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada de Mr Aesthetics / shutterstock.com