Habrás visto que algunos bloguers se han dispuesto a eliminar el sidebar o barra lateral de su blog.
¿Esto es una moda? ¿Te interesa hacerlo a ti? ¿Qué ventajas e inconvenientes puede tener esta acción? ¿Cómo podemos eliminar el sidebar con wordpress?
Vamos a ver esto y mucho más en este post.
Y me encantaría que si encuentras otras ventajas o inconvenientes me las comentes en los comentarios de esta entrada de blog.
1.- ¿QUÉ ES EL SIDEBAR?
Antes de ver la conveniencia o no de quitar el sidebar o barra lateral el blog vamos a ver qué es el sidebar.
De un tiempo a esta parte prácticamente todos los blogs disponían de una columna lateral o barra lateral de apoyo al blog en la que se ubicaban diferentes elementos.
Algunos de estos elementos servían al cliente para facilitar las búsquedas en el blog (categorías, buscador, nubes de etiquetas,…) y otros servían al bloguer para promocionar diferentes elementos (cursos, afiliados, etc.)
Pues bien, esta barra lateral o columna lateral del blog es a lo que se denomina sidebar.
Qué es el sidebar de un blog
En el caso de que el blog esté realizado con wordpress, los elementos que se sitúan en el sidebar o columna lateral son conocidos como widgets.
Existen muchos tipos diferentes de widgets en wordpress en función de la finalidad del mismo: widget de texto, widget de búsqueda, widget de categorías, widget de menú, etc.
También existen plugins que al instalarlos en nuestro blog wordpress, añaden nuevos tipos de widgets.
Si utilizas la plantilla Divi, como es mi caso, en este post puedes ver más sobre cómo construir la estructura de un blog con wordpress y Divi.
SUPER DESCUENTO DIVI
2.- ¿PARA QUE SE UTILIZA EL SIDEBAR EN UN BLOG?
Ya hemos visto lo que es el sidebar, ahora te voy a decir lo que habitualmente encontrarás en él.
Luego te hablaré de por qué acabar con él…
NO, en realidad te diré las ventajas e inconvenientes de eliminar el sidebar. Te adelanto, que para mí no han sido suficientes las ventajas de eliminar el sidebar ya que por el momento no tengo intención de quitarlo en mi blog.
En el sidebar encontraremos:
a.- Formulario de suscripción: es habitual encontrar en el sidebar el formulario de suscripción del blog (Newsletter). Parte fundamental para crear una comunidad de seguidores entorno a él.
Otra cosa sería ver el grado de conversión que tiene este tipo de formulario situado en el sidebar en comparación con otros situados en la home, pop-up, interior del post, deslizante, etc.
b.- Intro del autor: en los blogs también es habitual encontrar un bloque con una foto del autor del blog y una breve presentación.
Aunque lo cierto es que es algo redundante con el bloque de autor que se suele colocar al final de cada post.
También es cierto que una cosa es el autor del blog que se sitúa en el sidebar y otra el autor del post que se coloca en su caja al final del post, y que puede no coincidir creador del blog, por ejemplo en el caso de que sea un guest post.
c.- Complementos del blog: también se suelen colocar en el sidebar del blog elementos que complementan al blog como la barra de búsqueda de artículos, categorías del blog, últimas entradas del blog, las más vistas, etc.
d.- Banners: raro es encontrar un blog en el que no haya ningún banner, ya sea de afiliados, promocionando productos propios, anuncios de google, etc.
e.- enlaces redes: también podemos encontrar enlaces a redes sociales como feedly, bloques de google + o facebook, enlaces rss, etc.
3.- VENTAJAS DE ELIMINAR EL SIDEBAR O BARRA LATEAL
Vamos a ver en este apartado las ventajas que nos puede aportar eliminar el sidebar de nuestro blog.
Si se os ocurren más ventajas no dudéis en mencionarlas en los comentarios del post.
a.- Eliminar la distracción del usuario: esta primera ventaja es para el usuario, y consiste en que el usuario que visita una entrada de nuestro blog no podrá distraer su atención con banners y otros elementos.
Es decir, quitar el sidebar del blog beneficiará a nuestro visitante en que tendrá una mayor capacidad de concentración en el post, ya que le damos toda la importancia.
b.- Menos saturación Móviles: seguro que te has dado cuenta que al visualizar un post de un blog en un dispositivo móvil (cuando la web está optimizada para móviles) la barra lateral o sidebar aparece después del contenido del post.
Es decir, que en la mayoría de ocasiones posiblemente no será visualizado por el usuario que está leyendo el post y además la carga del post será mayor que si hubiéremos eliminado dicho sidebar.
Es cierto que hoy en día las visitas a través de dispositivo móvil han aumentado mucho y en muchos sitios web están a la par con las visitas a través de desktop o escritorio. Por lo que ¿hasta qué punto es aquí conveniente mantener el sidebar?
También debes tener en cuenta que aunque ha habido un gran aumento en las visitas a través de móviles, en los blogs ha sido menor ya que aún nos gusta a muchos acceder a los blogs a través de escritorio para leer contenidos grandes.
En mi caso, mi blog aún tiene muchas más visitas a través de escritorio que a través de dispositivo móvil. Esto lo puedes ver a través de analytics.
SUPER DESCUENTO DIVI
4.- INCONVENIENTES DE ELIMINAR EL SIDEBAR DEL BLOG
Ahora vamos a ir viendo los inconvenientes que puede provocar el quitar la barra lateral o sidebar del blog.
a.- Dificultad de búsqueda de contenidos: en la barra lateral o sidebar solemos colocar una serie de widgets que ayudan al visitante a buscar contenidos clasificados en el blog.
Uno es el widget de categorías y el otro el widget de nube de etiquetas. Ambos widgets son utilizados por el visitante para buscar contenidos filtrados.
Al quitar esta ayuda del sidebar, tendremos que plantearnos añadirla al footer, pero es que el footer se suele usar para otros menesteres también importantes
Otro elemento habitual del sidebar que quedaría eliminado sería la barra de búsqueda de contenido del blog. Nos tendríamos que plantear añadir la barra de búsqueda al footer o al header.
En el caso de la plantilla Divi, que es la que yo utilizo y recomiendo es posible añadir o quitar el icono de búsqueda del menú principal del header. El icono se transforma en una barra de búsqueda al hacer clic sobre él.
b.- Dificultad para promocionar elementos: la columna lateral o sidebar ha sido utilizada para promocionar elementos de afiliados, cursos online y en general productos que quiere destacar el bloguer.
Eliminar el sidebar del blog sin duda complicará la manera de promocionar productos en el blog.
Algunas alternativas pueden ser:
- i.- utilizar más la home, ya que seguramente será la página más visitada del sitio.
- ii.- insertar los elementos promocionales en el contenido del post. Aunque esto tiene el inconveniente de que cuando tengas que eliminar un producto, tendrás que trabajar para buscar y eliminar el contenido de las entradas de blog.
- iii.- utilizar popups para promocionar contenidos en la página (sin abusar 😉
c.- Párrafos largos: al quitar el sidebar del blog la anchura disponible para los post va a aumentar incuestionablemente.
Cuando los párrafos de texto son muy anchos la lectura se hace tediosa al tener líneas de texto demasiado largas. Te recomiendo que intentes no pasarte mucho de unos 90 caracteres por línea.
También puedes ampliar un poco la fuente de texto para que las líneas sean más cortas. Mi recomendación es 16 px.
SUPER DESCUENTO DIVI
5.- COMO ELIMINAR EL SIDEBAR EN WORDPRESS CON DIVI
Si al final te has decantado por eliminar el sidebar de tu blog y éste está realizado con la plantilla Divi, te voy a indicar como puedes eliminar la barra lateral del blog.
Vamos a eliminar el sidebar de wordpress con la plantilla Divi a través de CSS. Si dispones de un tema hijo o child theme, será aquí donde tendrás que añadir el código.
Si no dispones de un tema hijo para Divi, deberás introducir el código en el área de texto de nombre “CSS Personalizado” situado en:
“Divi > Opciones del tema”
Añade el campo en este campo si no tienes un child theme o tema hijo de Divi
5.1.- QUITAR EL SIDEBAR DE WORDPRESS CON DIVI
Vamos a ver como eliminar el sidebar en toda la web.
En realidad serán tres piezas de código:
- a.- una para eliminar la línea que separa el sidebar el contenido del post
- b.- otra para ampliar la anchura del texto del post para que abarque la zona que antes ocupaba el sidebar
- c.- otra para ocultar el sidebar
Eliminar línea sidebar + ampliar ancho + quitar sidebar
El código a añadir sería el siguiente:
/*** Eliminar la línea separadora del sidebar ***/
#main-content .container:before {background: none;}
/*** Ocultar el sidebar ***/
#sidebar {display:none;}
/*** Expandir el contenido para coger el area del sidebar ***/
@media (min-width: 981px){
#left-area {
width: 100%;
padding: 23px 0px !important;
float: none !important;
}
}
DESCUENTO DIVI + REGALO
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Perfecto
Hola Miguel, me alegro que te haya sido de utilidad el post.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso diseñador web Freelance, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc. (más de 30 cursos)
Muchas Gracias! Me Funcionó
Hola Yofred.
Me alegro que te haya servido.
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Hola, primero que nada agradecerte la información que prestas en este blog.
Quisiera eliminar la barra lateral solo cuando en la página que aparece cuando selecciono por «Autor». Al clicar en el autor de un artículo aparece una página con todos los artículos de ese autor, ahí es donde no quiero que aparezca la barra lateral.
Hola Luis.
Existe un plugin para mostrar barras laterales contextuales. Es decir, específicas según la página visitada. Pero, conozco ningún plugin para eliminar el sidebar según contexto (según página visitada).
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Hola! Gracias por la solución! me funcionó DEMASIADO bien…
Uso Divi también y puse el código en el campo de CSS y me desapareció la barra lateral de todas las páginas. El problema es que en una página sí quería que apareciera (había añadido un módulo en divi de barra lateral expresamente) solo quería que desapareciera de las páginas automáticas (carrito de comra, página error, etc.).
He borrado el código CSS pero sigue sin aparecerme la barra en ningún lado, ¿qué puedo hacer? No hice ninguna copia de seguridad ni uso Child Theme.
Gracias
Hola Sara.
Si has borrado el código CSS, ya se debería mostrar. Si tienes algún plugin de caché en wordpress, vacía la caché. Vuelve a cargar el front office (parte pública de la web) con CTRL+F5 (para que se vuelvan a cargar los códigos CSS). Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, Analytics, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.****
Hola amigo muy interesante tengo una web de tienda virtual lo tengo alojado en blogger lo que quiero es que mi sidebar se vea solo en la pagina de inicio o la principal no en todas las entradas se puede lograr eso amigo como hacerlo gracias de antemano
Hola Antonio.
Lo siento mucho, pero no trabajo con Blogger y no sé que procedimiento se ha de seguir
Hola, yo he eliminado el sidebar de una pagina especifica del thema BlackBird, cambien el la pagina de llamada de sidebar page.php esto:
por esto:
pero necesito expandir el ancho de esa pagina en concreto y poder utilizar el espacio que ocupaba el sidebar y no encuentro la forma, ya que la mayoria de los casos el para ampliar toda la plantilla en general, me puedes ayudar? gracias
Hola Silvia.
Eso depende únicamente de tu plantilla. En la plantilla Divi, que es la que utilizo, hay una opción en cada página para activar o desactivar el sidebar. Pero, tu plantilla no la conozco y no se si tiene alguna opción de este tipo. La mejor opción es consultar al soporte de tu plantilla.
funciona!!! Gracias
como haria para cambiar de lado, es decir a la izquiera
Buenas Cecilia,
Esto depende de la plantilla que estés utilizando.
En el caso de la plantilla Divi, que es la que yo utilizo, no hay una opción en la administración de la plantilla para poder hacerlo. Es necesario añadir un código CSS. En este post lo explican: How to Change the Divi Sidebar to the Left Side
Hola Joaquín,
Necesito eliminar la barra lateral de mi página de entradas pero únicamente cuando los usuarios la vean desde el móvil o las tablets.
Existe alguna manera?
Puedo desactivarla por completo pero sólo en el movil o la tablet no veo como.
Muchas gracias
Hola Cynthia,
Echale un vistazo a este post que sirve para ocultar o mostrar widgets según diferentes situaciones, como la visualización en móviles o escritorio:
Ocultar widgets en moviles
Buenas Joaquín,
No entiendo porque en algunas páginas dentro del back-end ofrece la opción «Diseño de página» para seleccionar la barra lateral o ancho completo en Ajustes de página de DIVI y en otras no se ve esta opción solo salen «Navegación con puntos» y «Ocultar navegación antes de desplazar»
Buenas,
Existen dos situaciones diferentes:
1.- Página antes de habilitar el constructor Divi Builder (utilización del editor por defecto): En este caso, no se está usando el Divi Builder y la plantilla Divi nos permite elegir entre mostrar o no la barra lateral o sidebar.
2.- Página después de habilitar el constructor Divi Builder: En este caso, estamos usando el Divi builder, y si queremos utilizar una barra lateral o sidebar la debemos añadir a través del «módulo sidebar». Como podemos utilizar el constructor para añadir el Sidebar, ya no aparece la opción relacionada con el Sidebar en el bloque de «Ajustes de página de Divi»
Hola Joaquín,
Yo más que eliminarlo quería saber como puedo tener DOS SIDEBAR diferentes, uno para la tienda y otro para el blog con widget diferentes…
Buenas,
Antes se utilizaba mucho este plugin: WooSidebars. Pero hoy en día está desactualizado, habría que buscar otro plugin para esto.
NOTA: En cualquier caso puedes probar con WooSidebars, ya que parece que aún funciona con las versiones actuales de wordpress y woocommerce. Prueba si quieres, y nos cuentas
Hola Joaquín, ví el plugin comentado en algunos foros pero ya desactualizados igual que el plugin, hace un año que no lo actualizan y me podría dar problemas seguramente sino ahora, en un futuro próximo seguro porque wordpress y divi se seguirán actualizando y habrá alguna incompatibilidad.
He conseguido hacerlo a través de los widgets, creando uno nuevo como barra lateral y luego eligiendo en la página de entradas este widget en el módulo de barra lateral pero sigo teniendo el problema una vez pincho en cada post, en esa entrada que se abre sale la barra lateral del wordpress pero si pongo el módulo de barra lateral dentro de cada entrada y desactivo la barra lateral, se me queda dentro del margen del texto de la entrada, no me la pone en el lateral, no se si será por la imagen destacada que tendría que ponerla como un módulo de imagen o algo así??
Buenas,
Esa solución que comentas se te va a complicar demasiado. Tienes que buscar algún plugin que te sirva para hacer esto de manera sencilla. Yo empezaría usando woosidebars que por lo que he podido investigar está funcionando correctamente y posteriormente, tranquilamente buscar alguna alternativa si fuera necesario.
Gracias Joaquín, voy a intentar hacerlo con woosidebars…
Hola amigo, de más agradecida por este tremendo post, ha aclarado mis dudas, y en mi caso particular, veo que bien utilizado el sidebar es un excelente elemento, apenas lo estoy trabajando. No obstante, yo utilizo en mi tienda online el tema storefront, y en la versión móvil todo el contenido del sidebar se pone al final de cada página, entrada, tienda, etc, hay alguna manera de ocultar el contenido del sidebar sólo en la versión móvil? Muchas gracias de antemano.
Hola Dina.
Lo primero, agradecerte tus comentarios sobre el blog. Gracias
Aquí tienes un post en el que hablo sobre un plugin para ocultar widgets de manera selectiva en los diferentes dispositivos: ocultar widgets wordpress en móviles.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
hola excelente muchisimas gracias, en lo personal si me quito el sidebar, insertando el codigo el EDITOR CSS de mi tema, yo tengo el tema, VW eccomerce shop, pero con respecto al ancho, me sigue dejando el mismo,
puse como pagina principal mi tienda de woocommerce,, alguna idea ??
muchisimas gracias !
Hola Raymundo,
el código que se menciona en el post en principio solo sirve para la plantilla Divi,
escribe un ticket de soporte en donde compraste tu plantilla para que te echen un cable de como quitar el sidebar en ese caso.
Hola Joaquín, yo también creo que eliminar el sidebar aumentaría el porcentaje de rebote por lo que dices, estás eliminando posibilidades de navegación extra al usuario.
Lo que me gustaría saber es cómo poder modificar el ancho del sidebar para poder insertar banners de 300x250px porque al insertarlos, aunque los amplíe dentro del widget luego en la web se quedan pequeños.
Un saludo
Hola Aridane,
Con la plantilla Divi puedes modificar la anchura del sidebar desde «Divi > Personalizador de temas > Ajustes generales > Ajustes de formato»
luego marcar checkbox «utilice ancho sidebar personalizada» y después mover el selector «anchura de barra lateral».
Muchas gracias por la ayuda.
Buenas,
Eliminar el sidebar del blog también podría aumentar el porcentaje de rebote, ya que al quitar el sidebar estamos eliminando opciones al visitante para que siga navegando por nuestra web/blog.
Si se os ocurren más pros o contras, cometarlo,
gracias