ElegantThemes

Cómo quitar el borde de la barra lateral Divi

Una cosa que casi todos los usuarios de Divi quieren saber es cómo eliminar el borde de la barra lateral. Afortunadamente, esta es una tarea sencilla. Esto 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 Divi usando cualquiera de los métodos y veremos por qué Divi Theme Builder le dará los mejores resultados.

La barra lateral estándar de Divi

Los diseños de publicación y página estándar 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 personalizar con el Personalizador de temas, pero esta línea no es una de ellas. Esta es un área en la que faltan opciones de WordPress.

La barra lateral estándar de Divi

Las opciones del tema Divi le permiten mover la barra lateral hacia la derecha o hacia la izquierda, pero no incluyen ninguna opción de estilo.

La barra lateral estándar de Divi

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

Estas opciones le dan control sobre el diseño, pero no 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.

Eliminar o diseñar el marco de la barra lateral de Divi con código

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

Necesita agregar algo de CSS a las opciones del tema Divi CSS personalizado Campo. Para acceder al campo CSS personalizado, vaya a Dos > Opciones de tema en el menú del panel de WordPress. Quédate en el En general Tab 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 hará que no se muestre.

Eliminar o diseñar el marco de la barra lateral de Divi con código

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

Eliminar o diseñar el marco de la barra lateral de Divi con código

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 trabajar con código de ningún tipo. ¿Qué sucede si desea crear la página del blog utilizando 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 ningún código

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

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

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

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

Se abrirá un modal en el que podrás elegir dónde se mostrará esta plantilla. Seleccione la página de su blog en Paginas especificas. 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. hacer clic Guardar en la computadora una vez que haya hecho su selección.

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

A su página ahora se le ha asignado una plantilla vacía. A continuación, debe crear el diseño del blog. Haga clic en el área etiquetada Agregar un cuerpo personalizado.

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

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

Módulo de barra lateral Divi

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

Elegí 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, pero voy a asumir el diseño tradicional de la derecha.

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

El módulo ha sido diseñado para que pueda colocarse en el lado derecho o izquierdo y coloca el borde en consecuencia. De forma predeterminada, el módulo está configurado para aparecer como la barra lateral izquierda para que el marco esté en el lado derecho de los widgets.

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

Para cambiar el diseño, abra el módulo, seleccione el diseño Tab, mira el diseño Seccionamos y seleccionamos Correcto haciendo Alineación Caja desplegable. En este ejemplo, el marco ahora está a la izquierda del área del widget, por lo que esta es una barra lateral derecha.

Utilice esta configuración cuando desee mostrar el borde de la barra lateral. La orientación no importa si desea apagar el marco. Probablemente ya haya notado el interruptor debajo del Alineación Caja desplegable.

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

La segunda opción en el diseño La sección es una palanca llamada Mostrar separador de límites. Esto le permite deshabilitar o habilitar el límite. Está habilitado de forma predeterminada. Simplemente haga clic en el interruptor. El marco ahora se elimina de la barra lateral. Guarde el diseño y salga del editor. Tan simple como eso.

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

Finalmente elige guardar cambios antes de salir de Divi Theme Builder. Ahora muestra texto personalizado para la página del blog.

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

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

Creación de un marco de barra lateral Divi personalizado

Crear un marco de barra lateral Divi personalizado

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

en el diseño en la pestaña del módulo de la barra lateral, desplácese hasta el dobladillo la configuración. Aquí puede enmarcar un lado del módulo. Seleccione cada página que no desea que muestre el marco y establezca el ancho del marco en 0. También puede elegir el ancho del marco, un color y un estilo. Los estilos incluyen sólido, discontinuo, punteado, doble, ranurado, estriado, insertado, inicial y ninguno.

Seleccione el ancho, el color y el estilo del borde de la página en la que desea que aparezca el borde. En este ejemplo, he elegido que el marco solo se muestre en el lado izquierdo del módulo. Establecí el ancho del marco en 7 píxeles, el color en naranja claro y el estilo del marco en puntos.

Crear un marco de barra lateral Divi personalizado

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

Creación de un marco 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 del medio para mantener recto el borde punteado. También ajusté la sombra del cuadro para obtener el diseño que quería.

Creación de un marco de barra lateral Divi personalizado

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

Creación de un marco de barra lateral Divi personalizado

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

graduación

Entonces, veamos cómo usar el tema Divi para eliminar el borde de la barra lateral. Es fácil eliminarlo 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 función es extremadamente simple, pero la mayoría de los usuarios de Divi quieren aprenderla. También es una buena práctica 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. ¿Quitó el marco de la barra lateral Divi con alguno de estos métodos? Háganos saber su experiencia en los comentarios a continuación.

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

Cómo quitar el borde de la barra lateral Divi apareció por primera vez en el blog Elegant Themes.

Artículo Recomendado:  Cómo eliminar un proyecto de Divi Cloud

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *