Divi y sus nuevas opciones de estilo de borde son parte de una de las actualizaciones más recientes. En la publicación del blog del anuncio , compartimos algunos diseños sorprendentes que puede lograr con estas nuevas opciones sin tener que usar ningún CSS adicional. Lo más probable es que te hayan gustado algunos de esos diseños y que quieras aprender a hacer estos bordes para tu próximo sitio web. Es por eso que le mostraremos exactamente cómo puede recrear todas las opciones de borde.
En lugar de mostrarle todas las opciones de diseño específicas de cada uno de los módulos que se utilizan en estos ejemplos, nos centraremos en qué configuraciones de borde son necesarias para que estos diseños funcionen. Después de eso, podrá agregar los módulos y modificarlos según sus necesidades.
Ejemplo 1
Ejemplo #2
Ejemplo #3
Ejemplo #4
Ejemplo #5
Ejemplo #6
Ejemplo #7
Cómo usar las nuevas opciones de estilo de borde de Divi en su sitio web (Parte 1)
Suscríbete a nuestro canal de Youtube
Recrear bordes del ejemplo n.º 1
El concepto de frontera
Los ajustes de borde que puede observar en la pantalla de impresión de arriba son parte de una fila, aunque, a primera vista, puede parecer que se han agregado a los diferentes módulos. Para lograr este tipo de resultado, el ancho del canalón y el espacio entre filas son indispensables.
Configuración de fila
Estructura de columna de fila
Lo primero que tendrás que hacer es agregar una nueva fila a una sección existente. Elija la siguiente estructura de columna para esta fila:
Color de fondo de la fila
Luego, abra la configuración de la fila y use ‘#ffffff’ como color de fondo.
Colores de fondo de la columna 2
Desplácese hacia abajo en la misma pestaña y use ‘#09e1c0’ como color de fondo para la segunda columna.
Tamaño de fila
Luego, vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Tamaño:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
Distancia entre filas
A continuación, abra la subcategoría Espaciado y use la siguiente configuración:
- Relleno superior, derecho, inferior e izquierdo: 0px
- Columna 1 y 2 Relleno superior e inferior: 60px
- Columna 1 y 2 Relleno derecho e izquierdo: 40px
Borde de fila
Continúe agregando ’16px’ a todas sus esquinas dentro de la subcategoría Borde.
Sombra de cuadro de fila
Por último, agregue la siguiente configuración a la subcategoría Box Shadow:
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 10px
- Fuerza de desenfoque de sombra de cuadro: 60px
- Fuerza de propagación de la sombra del cuadro: 0px
- Color de sombra: rgba (71,74,182,0.12)
- Posición de la sombra del cuadro: Sombra exterior
Agregar módulos a columnas
Ahora, dependiendo de los módulos que desee usar dentro de las columnas, los agrega y cambia la configuración de diseño según sus necesidades.
Recrear bordes del ejemplo n.º 2
El concepto de frontera
Para el segundo ejemplo, estamos utilizando dos módulos de imagen para crear el efecto de teléfono y tableta. Estamos usando un borde y una sombra de caja al mismo tiempo. El uso de la nueva configuración de borde facilitará la creación del efecto de «maqueta» sin tener que utilizar archivos de maqueta.
Módulo de imagen móvil
Dimensiones de imagen preferidas
Las dimensiones de la imagen preferidas para su pantalla de impresión son, en este caso, ‘374 px’ para el ancho y ‘668 px’ para la altura.
Dimensionamiento
Una vez que agregue el Módulo de imagen y la imagen, vaya a la pestaña Diseño y agregue ‘251px’ al Ancho dentro de la subcategoría Tamaño.
Borde
Luego, abra la subcategoría Borde y agregue ’30px’ a todas las esquinas.
Continuando, use la siguiente configuración para el estilo de borde superior e inferior:
- Ancho del borde: 50 px
- Color del borde: #333333
Y las siguientes configuraciones para el estilo de borde derecho e izquierdo:
- Ancho del borde: 10px
- Color del borde: #333333
Sombra de la caja
Por último, use la siguiente sombra de cuadro para el módulo de imagen:
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 4px
- Color de sombra: rgba (0,0,0,0.56)
- Posición de la sombra del cuadro: Sombra exterior
Módulo de imagen de tableta
Dimensiones de imagen preferidas
La pantalla de impresión de la tableta necesitará, preferiblemente, un ancho de ‘1024px’ y una altura de ‘768px’.
Borde
Al igual que la pantalla del móvil, la versión para tableta necesitará ’30 px’ para todas las esquinas dentro de la subcategoría Borde.
Luego, use la siguiente configuración para el borde superior e inferior:
- Ancho del borde: 15px
- Color del borde: #333333
Y la siguiente configuración para el borde derecho e izquierdo:
- Ancho del borde: 50 px
- Color del borde: #333333
Sombra de la caja
Por último, usa la misma sombra de cuadro que usaste para la versión móvil:
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 4px
- Color de sombra: rgba (0,0,0,0.56)
- Posición de la sombra del cuadro: Sombra exterior
Recrear bordes del ejemplo n.º 3
El concepto de frontera
Aunque este resultado parece un entero y una fila, en realidad es una combinación de 5 filas diferentes. El uso de este tipo de estructura le ayuda a hacer uso de las diversas estructuras de columnas. Al mismo tiempo, también le permite crear una imagen más grande.
Fila 1
Estructura de la columna
Para la primera columna que agregue a una sección existente, necesitará cuatro columnas. Por supuesto, también puede elegir otra estructura de columnas según sus necesidades; no afectará el panorama general.
Color de fondo
Luego, agregue ‘#f7691d’ como el color de fondo de la fila.
Espaciado
Continuando, agregue ‘0px’ al margen superior e inferior de la fila.
Borde
Por último, agregue el siguiente borde a la fila. Dado que esta es la primera fila de todo el resultado, solo necesitaremos un estilo de borde superior, derecho e izquierdo con la siguiente configuración:
- Ancho del borde: 16px
- Color del borde: #f9cc98
Naturalmente, debe asegurarse de que el ancho del borde inferior sea ‘0px’.
Fila 2, 3 y 4
Estructuras de columnas
La segunda, tercera y cuarta fila tienen la misma configuración. Lo único que difiere es la estructura de la columna. Es por eso que vamos a pasar por el proceso solo una vez. Según el contenido que intente compartir, puede agregar tantas filas iguales como desee a esta parte del tutorial.
Color de fondo
Las tres filas tienen ‘#f7691d’ como color de fondo.
Espaciado
Es importante agregar ‘0px’ al margen superior e inferior de la fila. Esto ayuda a eliminar el espacio entre las filas.
Borde
Por último, asegúrese de que los estilos de borde superior e inferior tengan un ancho de borde de ‘0px’.
Y que los estilos de borde derecho e izquierdo son los siguientes:
- Ancho del borde: 16px
- Color del borde: #f9cc98
Fila 5
Estructura de la columna
La última fila de este ejemplo tiene la siguiente estructura de columna:
Color de fondo
Nuevamente, ‘#f7691d’ se usa como color de fondo.
Espaciado
Agregue ‘0px’ al margen superior e inferior de la última fila también.
Borde
Y, por último, los estilos de borde izquierdo, inferior y derecho necesitarán las siguientes configuraciones:
- Ancho del borde: 16px
- Color del borde: #f9cc98
Solo el estilo de borde superior necesitará ‘0px’ como ancho de borde.
Agregar módulos a columnas
Según el contenido que desee agregar a todo este diseño, puede decidir las diferentes estructuras de columnas para cada fila para que coincida con el contenido que está trayendo. Después de eso, agregue los módulos a las distintas columnas.
Recrear bordes del ejemplo n.º 4
El concepto de frontera
Este ejemplo se centra en el borde superior que puede asignar a cada uno de los elementos de acordeón dentro de su módulo de acordeón. Tendrás que asignar el borde superior a cada uno de los elementos del acordeón de forma individual, lo que también te permite jugar con los colores que se están utilizando para ello.
Configuración de fila
Estructura de la columna
En primer lugar, agregue una fila con una columna a su sección existente.
Agregar módulo de acordeón
Luego, añádele un módulo de acordeón. Agregue tantos artículos a este acordeón como necesite en su sitio web.
Agregar borde superior y espaciado a cada elemento de acordeón individualmente
Una vez que haya agregado todos sus elementos de acordeón, deberá agregar la siguiente configuración a la subcategoría Espaciado de cada elemento de acordeón:
- Margen inferior: 0px
- Relleno superior: 30px
- Relleno inferior: 30px
- Relleno izquierdo: 0px
A continuación, también deberá agregar un estilo de borde superior a cada uno de los elementos:
- Ancho del borde: 6px
- Color del borde: #000000
Recrear bordes del ejemplo n.º 5
El concepto de frontera
Las nuevas opciones de borde le permiten experimentar no solo con filas o módulos, sino también con secciones. El ejemplo anterior es prueba de ello. Para hacer coincidir los bordes de la sección, también hemos agregado bordes sutiles a los módulos de Blurb.
Ajustes de sección
Agregar fondo
Una vez que haya agregado una nueva sección estándar, agregue un fondo de su necesidad. Puede ser un color, un color de fondo degradado o una combinación de un fondo texturizado con un color o una superposición de color degradado.
Espaciado
Luego, vaya a la pestaña Diseño de la sección y agregue la siguiente configuración a la subcategoría Espaciado:
- Margen superior, inferior e izquierdo: 5%
- Relleno superior: 60 px (computadora de escritorio y tableta), 12 % (teléfono)
- Relleno derecho: 5% (escritorio), 0px (tableta y teléfono)
- Relleno inferior: 60 px (computadora de escritorio y tableta), 12 % (teléfono)
- Relleno izquierdo: 6% (teléfono)
Borde
Por último, agregue las siguientes esquinas a la subcategoría Borde:
- Arriba a la izquierda: 240px
- Abajo a la izquierda: 240px
- Arriba a la derecha: 0px
- Abajo a la derecha: 0px
Ajustes de publicidad
Color de fondo
Al agregar el módulo Blurb, lo primero que debe hacer es agregar ‘#ffffff’ como color de fondo.
Dimensionamiento
Luego, vaya a la pestaña Diseño y agregue ‘550px’ al Ancho del contenido.
Espaciado
A continuación, agregue el siguiente Relleno personalizado a la subcategoría Espaciado:
- Superior e inferior: 40px
- Derecha e Izquierda: 20px
Borde
El borde del Módulo Blurb necesita ‘6px’ para cada esquina.
Sombra de la caja
Y, por último, utilice la siguiente Sombra de cuadro:
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 24px
- Fuerza de desenfoque de sombra de cuadro: 28px
- Fuerza de propagación de la sombra del cuadro: -16px
- Color de sombra: rgba (0,0,0,0.24)
- Posición de la sombra del cuadro: Sombra exterior
Otro borde de la sección lateral
Si desea que el borde de la sección se aplique al otro lado de su sección, simplemente puede cambiar las esquinas redondeadas. En lugar de tener ‘240px’ para la esquina superior izquierda e inferior izquierda, tendrá ‘0px’. Lo mismo vale para la esquina superior derecha e inferior derecha; en lugar de ‘0px’, necesitarán ‘240px’.
Espaciado de otra sección lateral
El espacio para la sección con un borde en el otro lado también es ligeramente diferente:
- Margen superior, inferior y derecho: 5%
- Relleno superior: 60 px (computadora de escritorio y tableta), 12 % (teléfono)
- Relleno derecho: 0px (computadora de escritorio y tableta), 6% (teléfono)
- Relleno inferior: 60 px (computadora de escritorio y tableta), 12 % (teléfono)
- Relleno izquierdo: 5% (escritorio), 0px (tableta y teléfono)
Clonar módulo Blurb y colocar en todas las columnas
Una vez que haya terminado de crear la sección y el módulo Blurb, puede clonarlo tantas veces como desee, según la estructura de columna que tenga para la fila dentro de la sección.
Recrear bordes del ejemplo n.º 6
El concepto de frontera
El siguiente ejemplo utiliza una sección especializada en lugar de una sección normal. Esto le permite agregar un borde específico a la fila que contiene los módulos de Blurb, en lugar de agregar el borde a todo el resultado. Los módulos de texto del lado izquierdo se colocan en una columna que no forma parte de la fila con los módulos de Blurb.
Estructura de la sección de especialidad
La estructura que hemos elegido para este ejemplo en particular es la siguiente:
Configuración de fila
Estructura de la columna
La fila, que incluye los módulos de Blurb, tiene dos columnas.
Dimensionamiento
Una vez que haya agregado la fila, vaya a la pestaña Diseño y habilite la opción Ancho de canalón personalizado. Luego, agregue ‘1’ al Ancho de la canaleta.
Espaciado
Continuando, asegúrese de que el Relleno personalizado sea ‘0px’ para todas las opciones.
Borde
Luego, agregue ’10px’ a todas las esquinas dentro de la subcategoría Borde.
Sombra de la caja
Por último, usa también el siguiente Box Shadow:
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 10px
- Fuerza de desenfoque de sombra de cuadro: 60px
- Fuerza de propagación de la sombra del cuadro: 0px
- Color de sombra: rgba (71,74,182,0.12)
- Posición de la sombra del cuadro: Sombra exterior
Módulo de publicidad
Color de fondo
Una vez que se completa la configuración de la fila, puede comenzar a agregar un módulo de Blurb a una de las columnas. El módulo de propaganda necesita ‘#ffffff’ como color de fondo.
Dimensionamiento
Luego, haga que las siguientes configuraciones se apliquen a la subcategoría Tamaño dentro de la pestaña Diseño:
- Ancho de la imagen: 64px
- Ancho del contenido: 1100px
Espaciado
Desplácese hacia abajo, abra la subcategoría Espaciado y agregue ’30px’ a todas las opciones de Relleno personalizado.
Borde izquierdo
Por último, pero no menos importante, agregue un borde izquierdo de ‘8px’ con el código de color ‘#09e1c0’.
Clonar módulo Blurb y colocar en todas las columnas
Una vez que haya completado el Módulo Blurb, puede clonarlo tantas veces como desee y colocarlo dentro de ambas columnas. Lo único que queda por hacer es cambiar el contenido y el color del borde izquierdo para que cada módulo de Blurb sea único.
Recrear bordes del ejemplo n.º 7
El concepto de frontera
Para el último ejemplo de esta publicación, tenemos una combinación de bordes para la sección, la fila y el módulo de texto dentro de la fila. Esto ilustra perfectamente qué tipo de resultados puede obtener cuando combina todas las opciones de borde dentro de una determinada sección.
Ajustes de sección
Espaciado
Comience agregando una nueva sección estándar y agregue el siguiente Relleno personalizado:
- Superior e inferior: 240 px
- Derecha e Izquierda: 0px
Borde
Luego, abra la subcategoría Borde y haga uso de las siguientes configuraciones:
- Ancho del borde: 26px
- Color del borde:#747d88
- Estilo de borde: Sólido
Sombra de la caja
Por último, agregue una sombra de cuadro a la sección también:
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: 0px
- Color de sombra: rgba (0,0,0,0.54)
- Posición de la sombra del cuadro: Sombra exterior
Configuración de fila
Estructura de la columna
Una vez que haya terminado con la configuración de su sección, puede agregarle una fila con una columna.
Borde
Luego, abra la configuración de esta fila y agregue el siguiente estilo de borde al lado izquierdo y derecho:
- Ancho del borde: 16px
- Color del borde: #f9cc98
- Estilo de borde: Doble
Módulo de texto
Dimensionamiento
Ahora, agregue un Módulo de texto a la fila de una columna y use la siguiente configuración para la subcategoría Tamaño:
- Ancho: 90%
- Alineación del módulo: Centro
Espaciado
Luego, abra la subcategoría Espaciado y agregue ’40px’ a todas las opciones de Relleno personalizado.
Borde
Por último, agregue un borde ligeramente transparente a todos los lados con la siguiente configuración:
- Ancho del borde: 16px
- Color del borde: rgba(145,145,145,0.27)
- Estilo de borde: Sólido
Pensamientos finales
Las nuevas opciones de borde Divi abren una experiencia completamente nueva para usted mientras diseña sus sitios web. Los ejemplos que le mostramos sobre cómo recrear y comprender son los mismos que compartimos con usted en las publicaciones del blog de anuncios de fronteras. En la segunda parte de esta publicación, le mostraremos cómo crear los ejemplos restantes. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!
Imagen destacada por estherpoon / shutterstock.com