Vamos a ver en este post las opciones avanzadas de bordes incorporadas al Divi builder para todos los elementos del constructor. Es decir, estas opciones de bordes estarán disponibles para módulos, filas y secciones.
Éstos bordes podrán ser gestionados a través de una nueva intuitiva interface de gestión.
DESCUENTOS DIVI
ÍNDICE DEL POST
1.- Interface de gestión de bordes con WordPress y Divi
A través de esta sencilla interface es posible personalizar el color de borde, tamaño y diseño y la personalización de cada uno de los 4 diferentes bordes de los diferentes elementos que construyamos en la página web con el constructor de Divi.
Si estamos utilizando el constructor visual de Divi podremos disfrutar de los cambios en tiempo real.
Cualquier aspecto de los bordes puede ser personalizado y esto sucederá en todos los módulos, secciones y filas
La posibilidad de personalizar cada uno de los 4 bordes del elemento (borde superior, inferior, derecho e izquierdo) de manera independiente nos da la posibilidad de crear composiciones realmente interesantes.
Los creadores de Divi no se han olvidado de incluir una opción de personalización de “Rounded corners” (esquinas redondeadas), donde podremos personalizar la curvatura de cada esquina del elemento de manera independiente creando efectos sorprendentes.
La interface de personalización de bordes se denomina “Borde” y se divide en dos apartados: Rounded Corners y Border styles
2.- Opciones de curvatura de esquinas (Rounded Corners) con wordpress y Divi
En los diferentes módulos, secciones y filas encontrarás en la pestaña de “Diseño” el apartado “Borde”.
Este apartado se divide en dos bloques: Rounded Corners y Border styles.
Vamos a ver en primer lugar el bloque Rounded Corners que está formado por un rectángulo en cuyos vértices podemos colocar un número o valor.
Curvatura de los bordes de un elmento web
En cada esquina colocaremos el radio de curvatura en píxeles que queremos para cada esquina del rectángulo.
En el interior del rectángulo verás una especie de icono con forma de dos eslabones de cadena y si haces clic sobre él verás que se activa (más fuerte) o desactiva (más débil):
i.- icono enlaces cadena activado: si el icono está activado cuando escribas un número para expresar la curvatura en una de las esquinas automáticamente se establecerá ese mismo radio de curvatura en el resto de esquinas del rectángulo. Es decir, con el icono activado se guarda la proporción de la figura y por lo tanto sirve para poner el mismo radio de curvatura en todas las esquinas.
ii.- iconos enlaces de cadena desactivado: si el icono está desactivado cuando escribas un número en una de las esquinas, el resto de esquinas permanecerán igual. Por lo que el icono desactivado sirve para establecer diferentes radios de curvatura en las esquinas.
Al ir introduciendo un valor en cada esquina irás viendo como cambia la forma del rectángulo.
Establecer diferentes radios de borde en cada esquina de elemento web
3.- Opciones de estilo de bordes (Border Styles) con WordPress y Divi
Debajo del bloque dedicado a la curvatura de las esquinas del Divi builder verás un apartado denominado “Border Styles” que está formado por 3 partes diferentes:
i.- Selección de borde: la selección del borde que quieres editar se realiza haciendo clic en una de las 5 pestañas que aparecen en la parte superior.
Al elegir una de las pestañas, todas las opciones de personalización se referirán a ese borde en concreto.
Personalizaremos otro borde haciendo clic en otra de las pestañas.
ii.- Pantalla de visualización: debajo de las 5 pestañas aparece un rectángulo de visualización en el que podemos ver de manera esquemática la personalización de bordes que estamos ejecutando.
Interface de diseño de bordes con wordpress y Divi
iii.- Opciones de borde: debajo de la pantalla de visualización aparecerán las opciones de personalización de borde, correspondientes al borde que haya seleccionado en ese momento.
Entre estas opciones están: la anchura del borde, el color y el tipo de línea o estilo.
Nota: junto al texto border styles verás una flecha circular. Si haces clic sobre ellas volverás a la configuración inicial de bordes en vez de la que hayas ido personalizando.
3.1.- Selección de borde
En la parte superior del apartado “Border Styles” puedes ver 5 pestañas que definen que elemento quieres personalizar con las opciones de borde que aparecen más abajo.
- i.- todos los bordes: la pestaña situada más a la izquierda representa todos los bordes. Es decir, si marcamos esta pestaña y luego realizamos cambios en la personalización del borde, estos cambios se reflejarán en los 4 bordes.
- ii.- borde superior: si marcamos esta opción cuando realicemos una personalización del borde, este cambio se realizará solo en el borde situado en la parte superior.
- iii.- borde derecho: si marcamos esta opción al personalizar el borde, dicha personalización se realizará únicamente en el borde situado a la derecha.
- iv.- borde inferior: si marcamos esta opción la personalización del borde se reflejará en el borde inferior.
- v.- borde izquierdo: si marcamos esta pestaña la personalización del borde solo se reflejará en el borde izquierdo.
Una vez seleccionado el borde con el que queremos trabajar iremos a la parte de opciones de borde y realizaremos las modificaciones que creamos oportunas.
3.2.- Opciones de borde y pantalla de visualización
Seleccionado el borde que queremos personalizar iremos a las opciones de borde. Las personalizaciones que realicemos las veremos esquemáticamente en la pantalla de visualización.
Las opciones de personalización de borde que nos ofrece la plantilla Divi de WordPress son:
i.- Anchura de borde (border width): aquí estableceremos el grosor en píxeles del borde que estemos personalizando. Ni que decir tiene que podemos incluir bordes de diferente grosor en un mismo elemento.
Personalización del borde izquierdo
ii.- Color de borde (border color): aquí seleccionaremos el color que queremos para el borde que estemos personalizando. Ni que decir tiene que podemos incluir bordes de diferentes colores en un mismo elemento.
iii.- Estilo de borde (border style): con este selector elegiremos el diseño o tipo de borde. Podremos elegir entre los siguientes estilos:
a.- solido: borde formado por una línea continua
b.- guiones: borde formado por una línea discontinua (línea segmentada)
c.- puntos: borde formado por una sucesión de puntos
d.- doble: borde formado por dos líneas paralelas
e.- ranura: borde formado por una línea continua y un sombreado paralelo imitando una ranura (borde exterior y sombreado interior).
f.- Cresta: técnicamente la cresta está formada por los mismos elementos que la ranura con la diferencia de que el borde es interior y el sombreado exterior (a la inversa que la ranura)
g.- Inserción: este borde aplica a los 4 bordes y hace que dos de ellos se vean con una línea sombreada y el resto no (sombreados los bordes inferior y derecho).
h.- comienzo: pone como sombreado el borde superior.
i.- None: elimina el borde y no muestra ninguno.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Muy bueno!
Lo aplicaré para darle un diseño más llamativo a mis posts 🙂
Gracias!
Hola Laura.
Me alegro que te haya gustado el post sobre creación de bordes con DIVI
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.