Cómo optimizar tu barra lateral en dispositivos móviles usando Divi Theme Builder

Vistazo

Aquí hay un vistazo rápido al diseño de la barra lateral en el escritorio y cómo se ha optimizado para la visualización móvil.

Descargue la plantilla GRATUITA con barra lateral optimizada en dispositivos móviles

Para poner sus manos en la plantilla de este tutorial, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Suscríbete a nuestro canal de Youtube

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá  instalar y activar el tema Divi . Asegúrate de tener la última versión de Divi.

También necesitará algunas publicaciones/páginas creadas con fines de prueba para que el contenido de la página realmente muestre resultados.

Después de eso, estás listo para ir.

Cómo optimizar la barra lateral de su plantilla Divi en dispositivos móviles

Antes de comenzar a optimizar nuestra barra lateral en dispositivos móviles, primero debemos tener un modelo que funcione. Vamos a construir nuestra barra lateral en una plantilla de página usando Divi Theme Builder. Esto nos ayudará a obtener una mejor comprensión de lo que implica construir una barra lateral en Divi para que podamos comprender mejor cómo optimizarla en dispositivos móviles.

Crear la plantilla con la barra lateral

Importación del paquete Divi Theme Builder #3

Para comenzar, vamos a utilizar el Divi Theme Builder Pack #3 para impulsar el diseño de nuestro sitio. Luego, usaremos una de las plantillas para agregar la barra lateral que optimizaremos para dispositivos móviles.

Una vez que descargues el paquete , descomprime la carpeta.

Desde el Panel de WordPress, navega a Divi > Generador de temas. Luego haga clic en el ícono de portabilidad en el menú superior derecho de la página. Desde el modal de portabilidad, seleccione la pestaña de importación y elija el archivo divi-theme-builder-pack-3-all.json de la carpeta que descargó anteriormente. Luego haga clic en el botón importar.

Importante: use un sitio de prueba con una instalación nueva de Divi para que no anule el contenido en vivo en su sitio web o rompa algo.

Verá que todas las plantillas se han importado al generador de temas.

Creación del diseño de la barra lateral dentro de la plantilla de página de categoría

Busque la Plantilla de páginas de todas las categorías y haga clic para editar el diseño del cuerpo personalizado.

El diseño actual de la página utiliza una fila de una columna para el área de contenido principal de la página. Tendremos que cambiar esto a una estructura de diseño de barra lateral. Para hacer esto, haga clic en el icono «Elegir diseño» en el menú de fila de la segunda fila y elija la estructura de diseño de columna de dos tercios y un tercio.

Ahora tendrá un área en el lado derecho para su barra lateral.

AVISO: No estoy usando una sección especial para este diseño de barra lateral. Las secciones especializadas no son necesarias al crear un diseño de barra lateral para su página; sin embargo, si desea mantener la funcionalidad de fila separada para el área de contenido principal, querrá utilizar una sección especializada.

No nos concentraremos demasiado en recrear el diseño exacto de los módulos en este tutorial. En cambio, nos concentraremos en aquellos elementos que ayudarán a optimizar la barra lateral en dispositivos móviles.

Dicho esto, necesitamos agregar un color de fondo y relleno a la columna de la barra lateral.

Configuración de la columna de la barra lateral

Abra la configuración de la columna designada para la barra lateral y actualice lo siguiente:

• Color de fondo: #f2f5f9
• Relleno: 25 px arriba, 25 px abajo, 25 px izquierda, 25 px derecha

Creación del contenido de la barra lateral con módulos Divi y widgets de WordPress

El contenido de la barra lateral variará según las necesidades de un sitio web. Sin embargo, si estamos hablando de un sitio de blog, normalmente encontrará alguna combinación de los siguientes elementos de contenido de la barra lateral:

• Información del autor (nombre, foto, biografía)
• Botones de seguimiento de redes sociales
• Suscripción de correo electrónico
• Enlaces a Productos y/o servicios
• anuncios
• Categorías
• Publicaciones recientes/populares

La creación de estos elementos en Divi se puede hacer usando una combinación de Módulos Divi. Para este ejemplo, agregaremos los siguientes módulos Divi para construir nuestro contenido de la barra lateral.

1. Módulo de búsqueda: servirá como formulario de búsqueda.
2. Módulo de suscripción por correo electrónico: servirá como formulario de suscripción por correo electrónico.
3. Módulo de texto: este será el título de los botones de seguimiento de redes sociales
4. Módulo de seguimiento de redes sociales: mostrará los botones de seguimiento de redes sociales.
5. Módulo de texto (con imagen bg): esto servirá como un anuncio de ejemplo para la barra lateral.
6. Módulo Blurb (con contenido del autor): servirá como el área de información del autor de la barra lateral.
7. Módulo de texto: servirá como título para el módulo de blog que se encuentra debajo.
8. Módulo de blog: servirá como contenido de publicaciones recientes/destacadas en la barra lateral.

Extraer widgets de WordPress usando el módulo de la barra lateral

Si aún no está familiarizado, Divi tiene un módulo de barra lateral que le permite extraer contenido del área de widgets (o widgets) en su área de barra lateral de Divi. De hecho, esta plantilla ya está usando el widget de la barra lateral en la fila directamente debajo de la que estamos trabajando.

Arrastre el módulo de la barra lateral desde la fila y colóquelo justo debajo del módulo de suscripción de correo electrónico.

Luego abra la configuración del módulo de la barra lateral. Verá que el módulo está accediendo al área del widget de la barra lateral, que debería tener el siguiente aspecto si tiene la configuración predeterminada en WordPress.

Uso de múltiples áreas de widgets

En este momento, el área de widgets de la «barra lateral» muestra varios widgets porque hay varios widgets dentro del área de widgets de la barra lateral. Pero, en realidad, puede obtener más control sobre el diseño de la barra lateral de su Divi mediante el uso de múltiples áreas de widgets que contienen un solo widget. El uso de múltiples áreas de widgets le dará más control sobre el diseño de sus widgets, así como la visibilidad de los widgets en dispositivos móviles.

Para crear múltiples widgets, abra una nueva pestaña y diríjase al Panel de WordPress. Vaya a Apariencia > Widgets.

Cree una nueva área de widgets ingresando un nombre y haciendo clic en el botón Crear. Dado que esta área de widgets será donde agregaremos el widget Categorías, llamemos al área «Categorías». Actualice la página para ver el área de widgets. A continuación, arrastre el widget de categorías al área de widgets de categorías.

Repita el proceso para crear una nueva área de widgets llamada «Archivos». A continuación, arrastre el widget de archivos al área de widgets de archivos.

Vuelva a la plantilla de páginas de categorías con el diseño de la barra lateral y actualice el contenido del módulo de la barra lateral para mostrar el área del widget Categorías.

Duplicar el módulo de la barra lateral (para mantener el diseño)

Actualice el módulo de barra lateral duplicado para acceder al área de widgets de archivos.

Tomar el control sobre el espacio entre los módulos de la barra lateral

Actualmente, la fila que contiene la barra lateral tiene un valor de ancho de medianil de 2. Esto significa que habrá un margen/espaciado inferior predeterminado entre cada módulo dentro de la barra lateral. Para obtener más control sobre este espaciado, podemos eliminar el margen inferior de todos los módulos en la columna de la barra lateral. Para hacer esto, abra la configuración del módulo de búsqueda y actualice lo siguiente:

• Margen inferior: 0px (escritorio), 15px (tableta)

Luego haga clic en el ícono Más configuraciones (o en el menú contextual) en la opción de margen. Luego seleccione «Ampliar margen».

En el módulo Extender estilos , actualice las opciones para extender el margen a «Todos los módulos» en «Esta columna».

Luego podemos agregar espacio entre los módulos usando módulos divisorios.

Optimización de la barra lateral en dispositivos móviles

Ocultar la barra lateral en dispositivos móviles

A veces, es posible que desee ocultar la barra lateral por completo en el dispositivo móvil. Para hacer esto, deberá deshabilitar la visibilidad de la columna que contiene la barra lateral en la tableta y el teléfono.

Abra la configuración de la fila y abra la configuración de la columna designada para la barra lateral. Luego actualice la visibilidad de la siguiente manera:

• Deshabilitar en: tableta, teléfono

Esto ocultará toda la barra lateral en la tableta y la pantalla móvil.

Ocultar parte del contenido de la barra lateral en dispositivos móviles

En el escritorio, es posible que tenga espacio para conservar la mayor parte (o la totalidad) del contenido de la barra lateral sin que se convierta en una distracción del contenido. Pero en dispositivos móviles, el usuario deberá desplazarse por una gran cantidad de contenido de la barra lateral que puede tener poco interés en ver. Por lo tanto, al crear su barra lateral en Divi Theme Builder, aproveche las opciones de visibilidad para deshabilitar algunos de los elementos de la barra lateral en la pantalla móvil. Y, si está utilizando widgets de WordPress para el contenido de la barra lateral, cree múltiples áreas de widgets para ayudar a diseñar y ocultar ciertos widgets en dispositivos móviles también.

Para ocultar módulos en el móvil, abra el módulo de vista de estructura alámbrica, luego use la función de selección múltiple de Divi para seleccionar todos los módulos que desea ocultar/deshabilitar en la tableta y el teléfono. Luego abra la configuración de uno de los módulos seleccionados y actualice lo siguiente:

• Deshabilitar en: teléfono, tableta

En esta ilustración, hemos ocultado todos los módulos (incluidos los divisores), excepto los dos módulos de la barra lateral (que contienen los widgets de categorías y archivos) y el módulo de texto (que contiene el anuncio) en la pantalla de la tableta y el teléfono. Para decirlo de otra manera, solo las categorías, archivos y anuncios se mostrarán en dispositivos móviles.

Vista previa de los resultados en una página de blog

Antes de que veamos los resultados en la página activa, primero asignémosla a la página de blog del sitio. Para hacer esto, haga clic en el ícono de ajustes sobre la plantilla, seleccione el Blog de la lista y guárdelo.

Asegúrate de tener una página de publicaciones seleccionada en Apariencia > Lectura.

Resultados

Aquí está la diferencia entre la barra lateral de escritorio y la barra lateral móvil. Observe cómo la barra lateral móvil tiene contenido de lecciones.

Evitar el contenido duplicado de la barra lateral y el pie de página en dispositivos móviles

En el escritorio, puede salirse con la suya agregando contenido duplicado en su barra lateral y pie de página. De hecho, esta es una buena manera de aumentar las conversiones. Por ejemplo, en el escritorio, tiene sentido incluir un módulo de suscripción de correo electrónico en la parte superior de la barra lateral ydentro del pie de página para que los usuarios puedan ver la opción de correo electrónico mientras leen el contenido de la publicación, así como al final de la publicación. Sin embargo, en dispositivos móviles, no hay un diseño de barra lateral. Todo se muestra en una columna (tal vez dos). Las barras laterales derechas se apilan debajo del contenido de la publicación/página y las barras laterales izquierdas se apilan encima del contenido de la publicación/página. Por lo tanto, si un módulo de suscripción de correo electrónico de la barra lateral se apila debajo del contenido de la publicación/página, el usuario podría desplazarse por más de un módulo de suscripción de correo electrónico (uno en la barra lateral y otro en el pie de página). Además, si hay una suscripción de correo electrónico en la parte inferior de la barra lateral derecha y una en la parte superior del pie de página, el usuario se desplazará a través de dos opciones de correo electrónico consecutivas en el móvil.

Ocultar elementos dentro de los módulos para minimizar el contenido en dispositivos móviles

Puede decidir que no es necesario ocultar un módulo completo en el dispositivo móvil. En cambio, puede minimizar el contenido del módulo ocultando ciertos elementos solo en la pantalla móvil.

Por ejemplo, es posible que desee mostrar la imagen destacada y un extracto de las publicaciones destacadas en la barra lateral del escritorio. Pero, en dispositivos móviles, puede ocultar la imagen destacada y el extracto para crear una versión minimizada del contenido.

Hacer que el contenido de la barra lateral sea receptivo

Puede decidir mantener todo el contenido de la barra lateral en la pantalla móvil. ¿Por qué no? Si tiene información valiosa que sabe que los usuarios apreciarán, por supuesto, consérvela. Sin embargo, querrá tomar medidas para asegurarse de que el contenido de la barra lateral responda. Es decir, querrá ajustar el tamaño y el espaciado de los elementos para que se ajusten a pantallas más pequeñas. Esto reducirá la distancia de desplazamiento de la página y hará que el contenido sea más fácil de leer.

Ajustar el tamaño del texto en el móvil

Una forma fácil de minimizar el espacio vertical y mejorar la legibilidad en dispositivos móviles es ajustar el tamaño del texto del contenido del módulo en la barra lateral. Por ejemplo, puede ajustar el texto del encabezado de 24 px en el escritorio a 14 px en el móvil.

Ajustar espaciado/divisores en dispositivos móviles

En este ejemplo, agregamos divisores entre los módulos para crear espacio. Sin embargo, podemos usar la configuración de divisores de Divi para ajustar el espaciado de esos divisores en dispositivos móviles. Esto reducirá el espacio desperdiciado al desplazarse.

Por ejemplo, puede cambiar el margen superior e inferior del divisor de 30 px a 15 px en la tableta y el teléfono.

Cambiar el orden de apilamiento de la barra lateral en dispositivos móviles

El orden de apilamiento es un problema común con las barras laterales. Esto es especialmente cierto para las barras laterales izquierdas. Como mencioné anteriormente, las barras laterales derechas se apilan debajo (o después) del contenido de la publicación/página y las barras laterales izquierdas se apilan encima (o antes) del contenido de la publicación/página. Esto significa que cuando ve una página con una barra lateral izquierda en un dispositivo móvil, lo primero que verá un usuario es el contenido de la barra lateral, en lugar del contenido principal de la publicación/página. Esto no es bueno para UX. Para solucionar esto, puede ocultar la barra lateral por completo o puede cambiar el orden de apilamiento para que la barra lateral izquierda quede debajo del contenido de la publicación/página en el dispositivo móvil.

Para cambiar el orden de apilamiento de una barra lateral izquierda para apilar debajo (o después) del contenido de la página en dispositivos móviles, abra la configuración de fila de la fila que contiene el diseño de la barra lateral. Luego agregue el siguiente CSS personalizado al elemento principal:

Luego abra la configuración de columna de la columna designada como la barra lateral y agregue el siguiente CSS personalizado a la pantalla de la tableta Main Element:

Si no lo ha adivinado, este pequeño fragmento cambia el orden del valor predeterminado («1») al valor de «2», lo que hace que toda la columna/barra lateral se acumule debajo/después de la columna que contiene el contenido principal.

Pensamientos finales

Las barras laterales continúan siendo un espacio familiar para los usuarios que brindan contenido secundario útil a medida que interactúan con el contenido principal de una página. Sin embargo, el mismo contenido de la barra lateral en el móvil puede convertirse en una distracción. Con suerte, esta publicación lo ha inspirado a darle a sus barras laterales la atención que merecen en tabletas y teléfonos. Esto puede significar que oculte la barra lateral por completo, muestre solo parte del contenido de la barra lateral o simplemente optimice el contenido existente específicamente para la visualización móvil.

La barra lateral que se creó para la plantilla en este tutorial se diseñó utilizando los elementos de diseño existentes que se encuentran en el paquete de diseño del generador de temas #3. Si te gusta el diseño de esta plantilla con la barra lateral, no dudes en descargarla arriba para verla más de cerca.

Para obtener más información, consulte esta guía sobre el uso de barras laterales con Divi Theme Builder .

Espero escuchar de usted en los comentarios.

¡Salud!