Cómo quitar las barras laterales de Divi

La eliminación de la barra lateral de la plantilla de página predeterminada de Divi se puede hacer fácilmente cuando está utilizando Divi Builder. Sin embargo, dado que las plantillas de página predeterminadas de Divi (con la barra lateral) todavía se muestran en páginas como 404 y archivos, es posible que desee eliminar la barra lateral de su plantilla por completo.

La forma más obvia de anular el diseño predeterminado de la barra lateral derecha de Divi es usar Divi Builder para diseñar la página o publicación. Sin embargo, si no va a utilizar Divi Builder para una página o publicación, existen dos formas principales de eliminar la barra lateral. La primera es cambiar el diseño de la página por página al editar una página o publicación individual. El segundo es anular la página predeterminada o la plantilla de publicación creando una plantilla personalizada en Divi Theme Builder.

Hoy les mostraré las diferentes formas de eliminar las barras laterales en la plantilla predeterminada de Divi y anular las plantillas con Divi Builder. Con suerte, esto lo equipará con las herramientas que necesita para crear un sitio web de ancho completo diseñado de manera consistente.

¡Empecemos!

Eliminación de barras laterales en páginas mediante la configuración de página Divi

Cambio del diseño predeterminado de la barra lateral derecha para publicaciones o páginas individuales

Para las páginas o publicaciones que no usan Divi Builder, el diseño de página predeterminado incluye una barra lateral derecha que se parece a lo siguiente:

Si no desea utilizar Divi Builder para esa página o publicación y simplemente desea eliminar la barra lateral por página, simplemente busque el cuadro Configuración de página Divi en la barra lateral cuando edite su página y seleccione ancho completo (o no barra lateral ) para el diseño de su página.

Esto eliminará la barra lateral de esa publicación o página en particular.

Eliminación de barras laterales en la página de la tienda WooCommerce, la página de categorías y las páginas de productos mediante las opciones del tema Divi

Si tiene WooCommerce instalado, puede encontrar un par de opciones dentro de las Opciones del tema Divi para cambiar el diseño de página de las páginas de WC Shop, Categoría y Producto.

Para eliminar la barra lateral en las páginas de WC Shop y Category, vaya a Divi> Opciones de tema. En la pestaña General, busque la opción denominada "Página de la tienda y diseño de página de categoría para WooCommerce" y cambie el diseño a "Sin barra lateral" o "Ancho completo".

Para eliminar la barra lateral de las páginas de productos, vaya a Divi> Opciones de tema. Seleccione la pestaña Constructor. En Integración de tipo de publicación, seleccione el diseño del producto "Sin barra lateral" en el menú desplegable.

Eliminación de barras laterales mediante la creación de plantillas personalizadas con Theme Builder

Eliminar las barras laterales de cada página / publicación con la configuración de la página Divi es una buena solución al crear nuevas publicaciones y páginas de forma individual. Sin embargo, esto puede resultar bastante engorroso, especialmente si decide eliminar las barras laterales de todas las páginas. Además, la plantilla predeterminada (con una barra lateral) todavía se muestra en páginas como 404 y archivos. Por lo tanto, es posible que desee eliminar la barra lateral de una página o plantilla de publicación por completo. Para hacer esto, puede crear plantillas personalizadas usando Divi Theme Builder. Esto le dará un control total sobre las páginas que desea que se oculten en las barras laterales de forma global.

Theme Builder de Divi es una poderosa herramienta para diseñar plantillas globales que se aplicarán a cualquier página o publicación que desee. Cada vez que crea un nuevo diseño de cuerpo para una plantilla, esa plantilla anulará el diseño de página predeterminado de Divi (que incluye una barra lateral). Por lo tanto, todo lo que necesita hacer para eliminar una barra lateral a nivel de plantilla es crear una nueva plantilla en Divi Theme Builder y asignarla a la (s) página (s) o publicación (s) de su elección.

Creación de una plantilla de publicación de blog de ancho completo con Divi Builder

Las publicaciones de blog son un gran ejemplo de dónde se puede necesitar una plantilla para todo el sitio sin una barra lateral. Las opciones de contenido dinámico integradas de Divi le permiten diseñar una plantilla de publicación de blog que se aplicará a todas las publicaciones de blog en todo el sitio utilizando Divi Builder y contenido dinámico. Una vez hecho esto, todo lo que necesita hacer es actualizar el contenido real del cuerpo para todas las publicaciones futuras. ¡El nuevo contenido de la publicación heredará el diseño de la plantilla personalizada!

Aquí hay un ejemplo rápido de cómo hacer esto:

Primero, cree una nueva plantilla y asigne la plantilla a Todas las publicaciones.

Luego agregue un cuerpo personalizado a la plantilla.

Con el editor de diseño de plantillas, diseñe el diseño completo utilizando Divi Builder combinado con los módulos y opciones de contenido dinámico integrados de Divi.

Por ejemplo, puede utilizar el Módulo de título de la publicación para mostrar el título de la publicación de forma dinámica. O puede incluir el título de la publicación como contenido dinámico en el cuerpo de un módulo de texto y envolverlo con etiquetas H1.

Puede utilizar un módulo de imagen para extraer la imagen destacada como contenido dinámico.

O use una serie de módulos de propaganda que extraen metadatos específicos como contenido dinámico como el autor de la publicación, la biografía del autor de la publicación, las categorías de publicación, la fecha de publicación y el recuento de comentarios.

Lo más importante es que debe incluir el módulo Publicar contenido cuando cree cualquier diseño de cuerpo personalizado para su plantilla. El módulo de contenido de la publicación incluye el área para que se muestre el contenido de la página o la publicación dentro del área del cuerpo de la plantilla.

Una vez que se crea la plantilla, puede crear fácilmente una nueva publicación de blog utilizando el editor de publicaciones de WordPress predeterminado y hacer que esa publicación de blog herede el diseño de la plantilla de publicación de blog que creó con Divi Theme Builder.

Para obtener más información, consulte nuestra publicación sobre cómo diseñar una plantilla de publicación de blog con el Generador de temas de Divi.

Creación de una plantilla de página de producto de WooCommerce de ancho completo con Divi Builder

Si desea eliminar la barra lateral predeterminada para las páginas de productos, también puede crear una bonita plantilla de diseño de ancho completo para todas las publicaciones de su blog. De manera similar a lo que hicimos con la plantilla de publicación de blog, también puede usar los módulos WooCommerce (o Woo) integrados de Divi para crear una plantilla de página de producto personalizada en todo el sitio sin barra lateral.

Para hacer esto, simplemente cree una nueva plantilla y asigne la plantilla a "Todos los productos".

Luego agregue un cuerpo personalizado a la plantilla y haga clic para construir el diseño del cuerpo usando el editor de plantillas.

Luego use Divi Builder para incluir los Módulos Woo dinámicos para diseñar la plantilla de la página del Producto.

Ahora, crea un nuevo producto en el backend utilizando el editor de página de producto estándar, el producto heredará automáticamente el diseño de la plantilla de cuerpo asignada.

Para obtener más información, consulte nuestra publicación sobre cómo crear una plantilla de página de producto woo para todo el sitio.

Creación de plantillas de página de archivo de ancho completo con Divi Builder

Theme Builder también facilita el diseño de plantillas de página de archivo sin barras laterales. La clave para crear una plantilla para una página de categoría es crear una nueva plantilla y asignarla a una de las muchas plantillas de archivo disponibles en Divi Builder. Por ejemplo, puede asignarlo a todas las páginas de archivo de todo el sitio o puede asignarlo a la plantilla de página de categoría para que solo muestre las páginas que muestran un archivo de publicaciones dentro de una categoría.

El primer elemento esencial de contenido dinámico para una plantilla de archivo debe incluir el título de la publicación / archivo.

El segundo elemento esencial del contenido dinámico es el archivo real de publicaciones que se mostrarán. Para hacer esto, agregue un módulo de blog y elija la opción para mostrar las publicaciones de la página actual.

Para un recorrido completo, consulte nuestra publicación sobre cómo crear una plantilla de página de categoría para su blog utilizando Divi Theme Builder.

Creación de una plantilla de página 404 de ancho completo con Divi Builder

Theme Builder también facilita el diseño de una plantilla de página 404 para su sitio web Divi sin la barra lateral predeterminada. Una página 404 no depende necesariamente de ningún contenido dinámico, así que siéntete libre de diseñar lo que quieras usando Divi Builder.

Para un recorrido completo, consulte nuestra publicación sobre cómo crear una plantilla de página 404 utilizando Divi Theme Builder.

Creación de una plantilla de página de búsqueda de ancho completo con Divi Builder

Theme Builder también facilita el diseño de una plantilla de página de resultados de búsqueda para su sitio web Divi sin la barra lateral predeterminada. Al igual que las plantillas de página de categorías, la clave para crear una plantilla para los resultados de búsqueda es crear un área de cuerpo personalizada e incluir lo siguiente:

1: un título de publicación / archivo como contenido dinámico

2: El módulo de blog para mostrar las publicaciones de la página actual.

3: Un módulo de búsqueda que permite a los usuarios continuar las búsquedas según sea necesario.

Para obtener un recorrido completo, consulte nuestra publicación sobre cómo crear una plantilla de página de resultados de búsqueda para su sitio web utilizando Divi Theme Builder.

No cree una plantilla de cuerpo de ancho completo para todas las páginas a menos que tenga una razón específica

Crear una plantilla personalizada con un diseño de cuerpo de ancho completo para todas sus páginas puede parecer una buena idea al principio. Sin embargo, es posible que no funcione como se esperaba. Por ejemplo, puede limitar el área en la que puede usar Divi Builder para la página o crear un área del cuerpo que sea demasiado ancha para páginas que no usan Divi Builder. Por eso es mejor crear una plantilla de página solo para aquellas páginas que no van a utilizar Divi Builder.

Para obtener más información, consulte la documentación sobre cómo crear una plantilla de cuerpo global.

Sacar la barra lateral predeterminada con CSS personalizado

Si está utilizando los diseños de página de tema predeterminados de Divi sin usar Divi Builder, o si desea deshacerse de la barra lateral en todo el sitio sin tener que anularla usando configuraciones de página individuales o plantillas de creación de temas, puede usar un buen CSS antiguo. .

Vaya a Divi> Opciones de tema. En la pestaña General, pegue el siguiente código en el cuadro CSS personalizado en la parte inferior de la página:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Pensamientos finales

Al crear un sitio web, es importante que todas sus páginas mantengan el mismo diseño y distribución coherentes. Por lo tanto, si está creando un sitio con un diseño de ancho completo utilizando Divi Builder, es posible que desee mantener este diseño para todas sus páginas de forma predeterminada. Esto podría mejorar la experiencia del usuario. En todo caso, ahora tiene el poder de personalizar las pantallas de la barra lateral como mejor le parezca.

Espero que encuentre esto útil para su sitio y proyectos futuros.

Espero tener noticias tuyas en los comentarios.

¡Salud!