En este post te voy a explicar cómo quitar el sidebar o barra lateral si utilizas el tema Divi para WordPress.
Según de que página se trate el sidebar se quitará de una forma diferente. Así que te expondré todos los casos.
ÍNDICE: CÓMO QUITAR BARRA LATERAL CON DIVI
- Cómo quitar la barra lateral en la página tienda y categorías de Woocommerce con Divi
- Cómo quitar la barra lateral en TODOS los productos de Woocommerce con Divi
- Cómo quitar la barra lateral en productos específicos con Divi
- Cómo quitar la barra lateral en TODAS las entradas del blog con Divi
- Cómo quitar la barra lateral en entradas específicas del blog con Divi
- Cómo quitar la barra lateral en las categorías del blog con Divi
Cómo quitar la barra lateral en la página tienda y categorías de Woocommerce con Divi
Para quitar la barra lateral o sidebar en las páginas de categorías de Woocommerce y en la página tienda utilizando el tema Divi, deberás acceder a tu panel de administración de WordPress y después ir a: “Divi > opciones del tema”
Sitúate en la pestaña “general”
En el selector: “Diseño de la página de tienda y de la página de categorías para WooCommerce” establece: “Ancho completo”
Cómo quitar la barra lateral en TODOS los productos de Woocommerce con Divi
Para quitar la barra lateral en TODOS los productos de Woocommerce usando la plantilla Divi deberás acceder al panel de administración de WordPress y después a: “Divi > opciones del tema”
A continuación, sitúate en la pestaña “Constructor” y subpestaña “Integración de Post Type”
En el selector “Diseño del producto” establece: “Ancho completo”
Cómo quitar la barra lateral en productos específicos con Divi
Para quitar la barra lateral solo en algunos productos específicos utilizando el tema Divi deberás acceder al panel de administración de WordPress y después editar el producto en cuestión.
En la parte lateral derecha de la pantalla de edición verás un bloque denominado: “Ajustes de página de Divi”
En el selector “Diseño de página” establece “sin barra lateral”
Después guarda los cambios en el producto.
Nota: si no te aparece este bloque de “Ajustes de página de Divi” mira en la parte superior, donde dice “opciones de pantalla”, despliega las opciones y marca “Ajustes de página de Divi”.
Cómo quitar la barra lateral en TODAS las entradas del blog con Divi
Para quitar la barra lateral en TODAS las entradas del blog deberás introducir el siguiente código CSS en el bloque de CSS Personalizado de Divi.
Para ello tendrás que ir a “Divi > Opciones del tema” y en la pestaña “General” al final del todo verás el área de texto “CSS Personalizado”
Ahí tendrás que introducir el siguiente código CSS.
Finalmente guarda los cambios
/* Remove sidebar */
.single #sidebar {
display:none;
}
/* Remove thin line */
.single #main-content .container:before {
background: none;
}
/* Make content 100% width */
@media (min-width: 981px){
.single #left-area {
width: 100%;
padding-right: 0px !important;
}}
Cómo quitar la barra lateral en entradas específicas del blog con Divi
Para quitar la barra lateral en entradas y categorías del blog usando el tema Divi deberás acceder al panel de administración y después a cada entrada y categoría para buscar la opción “Ajustes de página de Divi”.
Dependiendo si usas el editor Gutenberg o el editor clásico la apariencia cambia un poco, pero en ambos aparece esta opción de “Ajustes de página de Divi”:
Ajustes de página de Divi con Gutenberg
En la barra lateral derecha de la interface de edición, en la pestaña “Entrada”, verás un bloque denominado “Ajustes de página de Divi”
En el selector “Diseño de página” elige la opción: “Sin barra lateral”
Después guarda la entrada
Ajustes de página de Divi con Editor Clásico
Para quitar la barra lateral entradas del blog específicas usando el editor clásico y Divi deberás acceder al panel de administración de WordPress y después editar la entrada de blog en cuestión.
En la parte lateral derecha de la pantalla de edición verás un bloque denominado: “Ajustes de página de Divi”
En el selector “Diseño de página” establece “sin barra lateral”
Después guarda los cambios en el producto.
Cómo quitar la barra lateral en las categorías del blog con Divi
Para quitar la barra lateral en las categorías del blog usando Divi, deberás poner el siguiente código CSS en el bloque de CSS Personalizado de Divi.
Para ello tendrás que ir a “Divi > Opciones del tema” y en la pestaña “General” al final del todo verás el área de texto “CSS Personalizado”
Ahí tendrás que introducir el siguiente código CSS.
Finalmente guarda los cambios
/* Remove sidebar */
.category #sidebar {
display:none;
}
/* Remove thin line */
.category #main-content .container:before {
background: none;
}
/* Make content 100% width */
@media (min-width: 981px){
.category #left-area {
width: 100%;
padding-right: 0px !important;
}}
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
