Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

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

 

 

 

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.

 

En este post puedes ver como manejar los efectos de movimiento con Divi: efectos movimiento web

 

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.

 

radio curvatura de las esquinas de un elemento con wordpress y divi

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.

 

curvatura diferente en esquinas de elemento web

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.

 

En este post puedes ver una guía para la gestión de sombreados con wordpress y Divi: Guía sombras con Divi

 

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.

 

gestión de bordes con wordpress y divi

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.

 

diseño borde izquierdo módulo

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.

 

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto. Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies