Soy consciente de que quitar la barra lateral WordPress en Divi puede ser algo lioso si no sabes dónde se encuentran los engranajes para ello, sobre todo porque en cada tipo de apartado se hace de manera distinta: página, entrada, producto de WooCommerce, etc.
Sin embargo te aseguro que, con esta guía, te tomará solo unos minutos eliminarla, de hecho es el método que aplicamos a todos los clientes del Hosting Divi que nos lo solicitan.
¡Vamos allá!
Índice
- Quitar barra lateral Divi en todas las páginas
- Eliminar barra lateral Divi en páginas específicas
- Remover barra lateral Divi en todas las entradas
- Ocultar barra lateral Divi en entradas específicas
- Ocultar barra lateral WordPress Divi en las categorías del blog
- Ocultar barra lateral WooCommerce Divi en la página de tienda y en las categorías
- Quitar barra lateral WooCommerce Divi en todos los productos
- Eliminar barra lateral WooCommerce Divi en productos específicos
- Remover barra lateral WooCommerce Divi en las páginas de Mi cuenta, Carrito y Finalizar compra
- Las 4 ventajas de remover la barra lateral WordPress Divi
Quitar barra lateral Divi en todas las páginas
Primero aclarar 2 puntos:
- Al decir «páginas» me refiero a eliminarla de toda la web; si quieres removerla solo en algunas secciones te lo explayo más abajo.
- Divi por defecto no tiene una opción y por eso hay que añadir un pequeño código (no necesitas conocimientos técnicos, se hace desde el propio panel de WordPress).
Dicho esto, para eliminar la barra lateral WordPress Divi en toda tu plataforma hay que ir a:
- Panel de administración de tu web
- Apariencia
- Personalizar
- CSS adicional
- Aquí debes pegar el siguiente código CSS y luego presionar el botón superior que dice «Publicar»:
#sidebar {
display: none;
}
#main-content .container:before {
background: none;
}
@media screen and (min-width: 981px) {
#left-area {
width: 100%;
padding-right: 0px !important;
}
}Listo, con este sencillo truco queda oculto definitivamente sin necesidad de modificar la plantilla (que también se podría hacer por esa vía pero hay que tener algo más de experiencia en programación para no estropear la web).
Eliminar barra lateral Divi en páginas específicas
Si lo que realmente quieres es ocultarla en una sola página y no en toda la plataforma, entonces este es el método:
- Panel de administración de tu web
- Páginas
- Edita la página correspondiente (no con Divi, sino con el botón «Editar»)
- En la barra lateral derecha tienes una opción llamada: Diseño de página
- Clickea en el desplegable y selecciona: Sin barra lateral
- Finalmente guarda los cambios, ¡y vualá, ya lo tienes!
Remover barra lateral Divi en todas las entradas
En este caso te voy a dejar un código para eliminar el sidebar Divi concretamente en las entradas y en ningún otro lado de la web. Para añadirlo ve a:
- Panel de administración de tu web
- Apariencia
- Personalizar
- CSS adicional
- Pégalo y luego presiona en «Publicar»:
.single #sidebar {
display: none;
}
.single #main-content .container:before {
background: none;
}
@media screen and (min-width: 981px) {
.single #left-area {
width: 100%;
padding-right: 0px !important;
}
}Ocultar barra lateral Divi en entradas específicas
La forma de hacerlo es similar a cuando lo modificamos para las páginas, aquí lo tienes paso a paso:
- Panel de administración de tu web
- Entradas
- Edita la entrada correspondiente (no con Divi, sino con el botón «Editar»)
- En la barra lateral derecha tienes una opción llamada: Diseño de página
- Clickea en el desplegable y selecciona: Sin barra lateral
- Por último guarda los cambios
Ocultar barra lateral WordPress Divi en las categorías del blog
Al igual que en casos anteriores hay que agregar un sencillo código para remover el sidebar Divi solo en las categorías de tu blog. Para añadirlo ve a:
- Panel de administración de tu web
- Apariencia
- Personalizar
- CSS adicional
- Pégalo y luego presiona en «Publicar»:
.category #sidebar {
display: none;
}
.category #main-content .container:before {
background: none;
}
@media screen and (min-width: 981px) {
.category #left-area {
width: 100%;
padding-right: 0px !important;
}
}Ocultar barra lateral WooCommerce Divi en la página de tienda y en las categorías
Para este punto en concreto Divi ya trae una opción que lo automatiza, la puedes localizar en:
- Panel de administración de tu web
- Divi (se encuentra en el menú izquierdo al final del todo)
- Opciones del tema
- En la pestaña «General» hay una opción llamada: Diseño de la página de tienda y de la página de categorías para WooCommerce
- Debes cambiarla a «Ancho completo» y luego guardar los cambios
Sin embargo ten en cuenta que no la elimina de otros apartados como los productos, eso viene explicado a continuación.
Quitar barra lateral WooCommerce Divi en todos los productos
Para ocultar el sidebar Divi también en los productos hay otra opción diferente:
- Panel de administración de tu web
- Divi (se encuentra en el menú izquierdo al final del todo)
- Opciones del tema
- En la pestaña «Constructor» hay una opción llamada: Diseño del producto
- Debes cambiarla a «Ancho completo» y luego guardar los cambios
Si tenías productos creados de antes con alguna configuración individual para la barra lateral podría no aplicarse el cambio en ese artículo en concreto. Simplemente lleva a cabo el siguiente paso y lo podrás corregir.
Eliminar barra lateral WooCommerce Divi en productos específicos
Para quitar el sidebar Divi hay que editar el producto y cambiarlo en las opciones que aparecen a la derecha:
- Panel de administración de tu web
- Productos
- Edita el producto correspondiente (no con Divi, sino con el botón «Editar»)
- En la barra lateral derecha tienes una opción llamada: Diseño de página
- Clickea en el desplegable y selecciona: Sin barra lateral
- Finalmente guarda los cambios
Remover barra lateral WooCommerce Divi en las páginas de Mi cuenta, Carrito y Finalizar compra
También es muy parecido a anteriores configuraciones, como siempre te lo dejo paso a paso para que no te pierdas:
- Panel de administración de tu web
- Páginas
- Edita la página de «Mi cuenta», «Carrito» o «Finalizar compra» (no con Divi, sino con el botón «Editar»)
- En la barra lateral derecha tienes una opción llamada: Diseño de página
- Clickea en el desplegable y selecciona: Sin barra lateral
- Por último guarda los cambios
Las 4 ventajas de remover la barra lateral WordPress Divi
¿Qué beneficios puede traer hacer este cambio en la web?, ¿es recomendable de cara al marketing?, pues esto es lo que ganas eliminando el sidebar en los apartados clave:
- Diseño enfocado en el contenido principal: en una web comercial generalmente lo que te interesa es centrar la atención del usuario en la información de venta, sobre todo cuando se trata de la ficha de un producto o servicio (donde el objetivo es conseguir que el cliente potencial lo añada al carrito y complete el proceso de pago).
- Aumenta la conversión en las landing pages: añadir enlaces y banners laterales provoca que un porcentaje alto de usuarios clickeen en ellos y abandonen la página actual donde podrías haber conseguido que se suscriban a tu newlestter o incluso una venta directa, sobre todo si estos links llevan a webs externas como las redes sociales.
- Reduce el tiempo de carga: los widgets laterales añaden scripts y funciones que menguan la velocidad de carga de la web, si no son absolutamente necesarios te conviene ahorrarle este código adicional a los usuarios y al bot de Google.
- Mejora la experiencia de usuario en la versión móvil: habitualmente en el modo responsive el sidebar acaba debajo del contenido principal (ya que no caben ambos elementos a lo ancho) provocando que el cliente potencial tenga que hacer un scroll inmenso para llegar al final y mermando la experiencia de usuario. Ten en cuenta que a día de hoy la mayor parte del tráfico llega a través de este dispositivo.
En resumen: lo que yo te recomiendo es eliminar el sidebar como mínimo de los apartados de venta (ficha del producto, carrito, proceso de pago, etc.) y las páginas principales (Inicio, Productos/Servicios, Contacto, etc.). Pero si quieres mantenerlo en el blog para que el usuario tenga a mano todo el contenido no está de más.
Pues eso sería todo, te he indicado todas las posibilidades según lo que necesites hacer, y además no te llevará más de unos minutos.
¿Hay alguna otra sección donde necesites ocultar el sidebar?, ¡escríbeme y te echo una mano!
