La eliminación de la barra lateral de la plantilla de página predeterminada de Divi se puede hacer fácilmente cuando se utiliza Divi Builder . Sin embargo, dado que las plantillas de página predeterminadas de Divi (con la barra lateral) aún 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 la publicación. Sin embargo, si no va a usar Divi Builder para una página o publicación, hay dos formas principales de eliminar la barra lateral. El primero es cambiar el diseño de la página 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!
Para 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 la 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.
Si tiene instalado WooCommerce, 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 Tienda, Categoría y Producto de WC.
Para eliminar la barra lateral en las páginas de Tienda y Categoría de WC, vaya a Divi > Opciones de tema. En la pestaña General, busque la opción etiquetada como «Diseño de página de tienda y 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 Generador. En Integración de tipo de publicación, seleccione el Diseño de producto «Sin barra lateral» en el menú desplegable.
Eliminar las barras laterales para 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 individualmente. Sin embargo, esto puede ser bastante engorroso, especialmente si decide eliminar las barras laterales de todas las páginas. Además, la plantilla predeterminada (con una barra lateral) aún 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á control total sobre qué páginas desea que las barras laterales se oculten globalmente.
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 cree 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(es) 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 excelente 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 del cuerpo real 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 asígnela a Todas las publicaciones.
Luego agregue un cuerpo personalizado a la plantilla.
Usando el Editor de diseño de plantilla, diseñe el diseño completo usando Divi Builder combinado con los módulos y opciones de contenido dinámico incorporados de Divi.
Por ejemplo, puede usar 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 extraer 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 usar un módulo de imagen para extraer la imagen destacada como contenido dinámico.
O use una serie de módulos publicitarios 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 la publicación, la fecha de publicación de la publicación y el recuento de comentarios.
Lo que es más importante, debe incluir el módulo Publicar contenido al crear cualquier diseño de cuerpo personalizado para su plantilla. El módulo Publicar contenido incluye el área para que la página o el contenido de la publicación se muestren 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 con el editor de publicaciones predeterminado de WordPress 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 Divi’s Theme Builder .
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 buena 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 para todo el sitio sin barra lateral.
Para hacer esto, simplemente cree una nueva plantilla y asígnela a «Todos los productos».
Luego agregue un cuerpo personalizado a la plantilla y haga clic para crear 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 en 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 del 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 obtener 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 obtener 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ía, la clave para crear una plantilla para 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 para permitir a los usuarios continuar con 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 inicialmente. 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 las 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 usar Divi Builder.
Para obtener más información, consulte la documentación sobre la creación de una plantilla de cuerpo global .
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 generador de temas, puede usar un buen CSS a la antigua. .
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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
/*** 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 diseño consistentes. 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 su barra lateral como mejor le parezca.
Espero que encuentre esto útil para su sitio y proyectos futuros.
Espero escuchar de usted en los comentarios.
¡Salud!