Cómo quitar el borde de la barra lateral Divi

Una cosa que casi todos los usuarios de Divi quieren saber cómo hacer con el tema Divi es eliminar el borde de la barra lateral. Afortunadamente, esta es una tarea sencilla. Se puede hacer con código, pero lo que es más importante, es fácil de hacer con Divi Theme Builder. En este artículo, le mostraremos cómo eliminar el borde de la barra lateral de Divi usando ambos métodos y veremos por qué el uso de Divi Theme Builder le brinda los mejores resultados.

La barra lateral predeterminada de Divi

Los diseños de publicación y página predeterminados de Divi colocan una línea entre el contenido y la barra lateral. Muchos de los elementos de la barra lateral se pueden diseñar o ajustar con el personalizador de temas, pero esta línea no es uno de ellos. Esta es un área donde faltan las opciones de WordPress.

Las opciones del tema Divi le permiten mover la barra lateral hacia la derecha o hacia la izquierda, pero no incluye opciones de estilo.

Divi también agrega configuraciones que le permiten elegir el diseño de la barra lateral en la página y el nivel de publicación. Esto incluso incluye la opción de eliminar la barra lateral para que no se muestren widgets, lo que permite que el área de contenido use todo el ancho de la página web.

Estas opciones le dan control sobre el diseño, pero no sobre el estilo y no eliminan el borde de la barra lateral. Veamos dos métodos para diseñar o eliminar el borde de la barra lateral Divi.

Eliminación o estilo del borde de la barra lateral de Divi con código

Primero, veamos cómo eliminar o diseñar el borde de la barra lateral del tema Divi agregando código a Divi.

Deberá agregar algo de CSS al campo CSS personalizado de Opciones de tema Divi. Para acceder al campo CSS personalizado, vaya a Divi > Opciones de tema en el menú del panel de WordPress. Permanezca en la pestaña General y desplácese hasta la parte inferior de la configuración para pegar su código.

Aquí está el CSS que necesitará:

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

Este código le dice a WordPress que el borde del área del widget no tiene ancho, lo que hace que no se muestre.

Pegue el código en el campo CSS personalizado y guarde los cambios.

El borde ahora está eliminado. CSS funciona con el tema Divi para eliminar el borde de la barra lateral, pero no es ideal y no todo el mundo quiere manejar código de ningún tipo. ¿Qué sucede si desea crear la página del blog con Divi Builder? La mejor opción es utilizar Divi Theme Builder.

Cómo usar el generador de temas de Divi para eliminar el borde de la barra lateral de Divi sin código

También es posible utilizar el tema Divi para eliminar el borde de la barra lateral sin código. Vaya a Divi Theme Builder seleccionando Divi > Theme Builder en el menú del panel de WordPress. Si aún no tiene un diseño de blog, seleccione Agregar nueva plantilla .

Esta plantilla se asignará a su página de blog, página de archivo o cualquier otra página que desee, así que asegúrese de haber creado esta página primero.

Se abrirá un modal donde puede seleccionar dónde aparecerá esta plantilla. Seleccione la página de su blog en Páginas específicas . También puede crear páginas de archivo, páginas de autor, páginas de categorías, páginas de fechas, páginas de etiquetas y mucho más. Haga clic en Guardar una vez que haya realizado su selección.

Ahora se asigna una plantilla vacía a su página. A continuación, deberá crear el diseño del blog. Haga clic en el área etiquetada Agregar cuerpo personalizado .

Esto abre un cuadro desplegable donde puede seleccionar crear un cuerpo personalizado o agregar uno de la biblioteca. Haga clic en su selección. Estoy seleccionando construir la carrocería personalizada.

Módulo de barra lateral Divi

Seleccioné un diseño de dos columnas y coloqué un módulo de blog a la izquierda y un módulo de barra lateral a la derecha. Dado que es un módulo Divi, puede colocar la barra lateral en cualquier lugar que desee, pero yo voy con el diseño tradicional del lado derecho.

El módulo fue diseñado para colocarse en el lado derecho o izquierdo y coloca el borde en consecuencia. De forma predeterminada, el módulo está configurado para mostrarse como una barra lateral izquierda, por lo que el borde está en el lado derecho de los widgets.

Para cambiar el diseño, abra el módulo, seleccione la pestaña Diseño , observe la sección Diseño y elija Derecha en el cuadro desplegable Alineación . Este ejemplo ahora tiene el borde a la izquierda del área del widget, lo que lo convierte en una barra lateral del lado derecho.

Utilice esta configuración si desea que se muestre el borde de la barra lateral. La alineación no importa si desea desactivar el borde. Estoy seguro de que ya ha notado el interruptor debajo del cuadro desplegable Alineación .

La segunda opción en la sección Diseño es una palanca llamada Mostrar separador de bordes . Esto le permite habilitar o deshabilitar el borde. Está habilitado de forma predeterminada. Simplemente haga clic en el botón de alternancia. El borde ahora se elimina de la barra lateral. Guarde el diseño y salga del editor. Es fácil.

Finalmente, seleccione Guardar cambios antes de salir de Divi Theme Builder. Ahora muestra un cuerpo personalizado para la página del Blog.

La página de mi blog ahora muestra la barra lateral sin el borde. Por supuesto, hay algunas cosas más que puede hacer si desea un mejor diseño.

Creación de un borde de barra lateral Divi personalizado

Si no desea utilizar el tema Divi para eliminar el borde de la barra lateral, pero no desea el borde estándar de WordPress, puede crear un borde de barra lateral personalizado utilizando el módulo de la barra lateral Divi.

En la pestaña Diseño del módulo de la barra lateral, desplácese hasta la configuración de Borde . Aquí, puede agregar un borde a un lado del módulo. Seleccione cada lado en el que no desea que se muestre el borde y establezca el ancho del borde en 0. También puede elegir el ancho del borde, elegir un color y seleccionar un estilo. Los estilos incluyen sólido, discontinuo, punteado, doble, surco, cresta, inserto, comienzo y ninguno.

Para el lado que desea que se muestre el borde, elija el ancho, el color y el estilo del borde. En este ejemplo, he seleccionado mostrar el borde solo en el lado izquierdo del módulo. Establecí el ancho del borde en 7 píxeles, el color en naranja claro y el estilo del borde en puntos.

Mi página de blog ahora muestra mi borde de barra lateral Divi personalizado.

Incluso puede agregar una sombra de caja a los otros tres lados si lo desea. En este ejemplo, redondeé los bordes del lado derecho. Hice clic en el enlace en el centro, por lo que el borde punteado permanece recto. También ajusté la sombra del cuadro para obtener el diseño que quiero.

Aquí está mi diseño final con el borde punteado. La barra lateral combina bien con el diseño del blog.

Volviendo a la idea de usar el tema Divi para eliminar el borde de la barra lateral, aquí está mi diseño final de blog. Me gusta cómo esto resultó. Esto muestra que el uso del módulo Divi abre muchas posibilidades para el diseño de la barra lateral.

Conclusión

Ese es nuestro vistazo a cómo usar el tema Divi para eliminar el borde de la barra lateral. Es bastante simple de eliminar en el código, pero usar Divi Theme Builder le brinda muchas más opciones, lo que le brinda más control sobre el diseño. Esta característica es extremadamente básica, pero es algo que la mayoría de los usuarios de Divi quieren aprender. También es un buen ejercicio para aprender cómo pequeños ajustes en los módulos Divi pueden marcar una gran diferencia en el diseño de su sitio web.

Queremos escuchar de ti. ¿Ha eliminado el borde de la barra lateral Divi con alguno de estos métodos? Háganos saber su experiencia en los comentarios a continuación.

Imagen destacada a través de Andrew Rybalko / shutterstock.com