Uso de las Opciones de Borde en Divi | Scoreapps

Uso de las Opciones de Borde en Divi

Las opciones de borde de Divi permiten añadir y estilizar fácilmente bordes en cualquier elemento de la página.


Con las Opciones de Borde de Divi, es posible crear diseños verdaderamente únicos para tu sitio web. ¡Puedes aplicar bordes personalizados a los elementos de Divi, incluyendo secciones, filas y módulos!

Hay varios estilos de borde disponibles e incluso la opción de redondear las esquinas del borde.

Border Style Examples

Ejemplos de Estilo de Borde

A continuación, algunos ejemplos de lo que es posible con el estilo de bordes.

Ejemplo 1:

En este ejemplo, puedes ver que las esquinas de la fila están redondeadas.
Divi Border Options example 1

Ejemplo 2:

En este ejemplo, hemos conseguido el aspecto de maquetas de dispositivos móviles redondeando las esquinas de estos módulos.
Mobile App Mockup using Divi Border Options

Ejemplo 3:

En este ejemplo, hemos añadido un estilo de borde divertido a cada servicio.

Los bordes superiores son grises con una esquina redondeada, y el borde inferior es amarillo con esquinas redondeadas.

Es una forma única de diferenciar elementos y al mismo tiempo destacarlos.

Services section using Divi Border Options

Cómo acceder a los estilos de borde

El grupo de configuraciones de borde está disponible en todas las secciones, filas, columnas y módulos.

  • Abre la ventana emergente de configuraciones del elemento haciendo clic en el ícono de engranaje.

  • Ve a la pestaña Diseño → Borde.

How to access Divi Border Options

Todas las Opciones y Configuraciones de Borde de Divi Explicadas


Vamos a profundizar en cada configuración y explorar lo que es posible con las Opciones de Borde de Divi.

Esquinas redondeadas

Puedes crear bordes redondeados ajustando el radio de las cuatro esquinas. El valor del radio puede configurarse de la siguiente manera:

  • De forma colectiva: haciendo clic en el ícono de eslabón para enlazar las esquinas.

  • De forma individual: haciendo clic en el ícono de eslabón para desenlazar las esquinas.

Rounded Corners


Estilos de borde

Añade un borde a todos los lados o a lados individuales. Cambia de pestaña para elegir qué lado(s) deseas que tenga(n) borde.

Border styles with Divi Border Options

Ancho del borde

Para ajustar el ancho del borde (el grosor del borde), escribe un valor numérico en el campo de entrada o arrastra el control deslizante para aumentar o disminuir el grosor del borde.
Border Width

Color del borde

Elige un color de la paleta de colores de tu sitio, o usa el ícono de cuentagotas para encontrar un nuevo color para establecer como color de borde. Arrastra el selector de color o pega un código hexadecimal del color deseado.

También puedes elegir entre:

  • Colores guardados

  • Colores globales

  • Colores recientes, haciendo clic en esos enlaces debajo de la paleta de colores.

Para conocer todo sobre el Sistema de Gestión de Colores de Divi, haz clic aquí.

Border Color

Estilo de borde

Hay 9 estilos de borde para elegir. A continuación, se muestran ejemplos de cada uno. Para seleccionar un estilo, haz clic en él desde el menú desplegable.
Border Style Options

Puedes incluso ser creativo aplicando estilos únicos de borde de forma individual a cada borde para crear diseños realmente impactantes.

Puedes añadir bordes a un solo lado, a dos lados, tres lados o a los cuatro, y ajustar el estilo de cada borde por separado.

Solid border style in Divi Border Options
Dashed border in Divi Border Options
Double border in Divi Border Options
Groove border in Divi Border Options
Ridge border in Divi Border Options
Insert border in Divi Border Options
Outset border in Divi Border Options
None border in Divi Border Options

Consejos y Mejores Prácticas para Usar las Opciones de Borde de Divi

Al usar las Opciones de Borde de Divi, recuerda estos consejos y mejores prácticas:

Sé creativo

¡Las opciones de estilo son infinitas con las Opciones de Borde de Divi!
Creative borders with Divi Border Options

Este ejemplo muestra cómo puedes crear secciones principales impresionantes con las Opciones de Borde. Aprende cómo crear este diseño aquí.

Hero sections with Divi Border Options

Crea un efecto de borde para imágenes como el del ejemplo anterior. Aprende cómo lograrlo aquí.

O también puedes crear superposiciones de borde animadas para resaltar contenido en tu sitio web. Aprende cómo hacerlo aquí.

Continúa aprendiendo

  • Ver ejemplos de estilos de borde

  • Cómo usar creativamente los bordes de fila de Divi para crear una sección principal impresionante

  • Usar bordes de módulo con bajo índice Z como fondos con Divi

  • Cómo crear superposiciones de borde animadas para resaltar contenido con Divi