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 simple. 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é usar Divi Theme Builder le brinda los mejores resultados.
La página predeterminada de Divi y los diseños de publicación 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 una de ellas. Esta es un área donde faltan 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 los 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 de Divi.
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á:
|
01
02
03
04
05
|
#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 todos quieren manejar código de ningún tipo. ¿Qué pasa si quieres construir la página del blog con Divi Builder? La mejor opción es usar Divi Theme Builder.
También es posible usar 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. Selecciona la página de tu 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 hecho 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 para construir el cuerpo personalizado.
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 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 , mire 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 deshabilitar el borde. Estoy seguro de que ya ha notado la alternancia 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 deshabilitar o habilitar el borde. Está habilitado por defecto. Simplemente haga clic en el interruptor. 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 puedes hacer si quieres un mejor diseño.
Si no quiere usar el tema Divi para eliminar el borde de la barra lateral, pero no quiere el borde estándar de WordPress, puede crear un borde de barra lateral personalizado usando el módulo de 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 que no desea que se muestre en 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, inserción, salida y ninguno.
Para el lado en el 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.
La página de mi blog ahora muestra mi borde personalizado de la barra lateral de Divi.
Incluso puede agregar una sombra de cuadro a los otros tres lados si lo desea. En este ejemplo, he redondeado los bordes del lado derecho. Hice clic en el enlace del 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, este es el diseño final de mi 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 lo suficientemente simple como para 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 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 de Divi usando alguno de estos métodos? Háganos saber acerca de su experiencia en los comentarios a continuación.
Imagen destacada a través de Andrew Rybalko / shutterstock.com