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

En algunos casos, mantener una barra lateral en el móvil puede ser un poco exagerado. Los usuarios están felices de desplazarse por la información relevante en sus tabletas y teléfonos (hasta cierto punto). Pero cuando tiene una cantidad significativa de contenido de la barra lateral después del contenido principal de la página, es posible que los usuarios nunca lleguen al pie de página, que generalmente consiste en algunas llamadas a la acción importantes. Por eso es importante optimizar la barra lateral en el móvil.

En este tutorial, repasaremos las formas en que puede usar Divi Theme Builder para optimizar su barra lateral en la pantalla móvil. Estas son algunas de las cosas que cubriremos en este artículo:

• Cómo crear una plantilla con una barra lateral
• Creación de contenido de la barra lateral mediante módulos Divi y widgets de WordPress
• Uso de múltiples áreas de widgets para ocultar / mostrar ciertos widgets en el móvil
• Controlar el espacio entre el contenido de la barra lateral en dispositivos móviles
• Ocultar el contenido de la barra lateral por completo en dispositivos móviles
• Ocultar contenido de la barra lateral en dispositivos móviles
• Ocultar elementos dentro de los módulos para minimizar el contenido en dispositivos móviles
• Hacer que el contenido de la barra lateral sea receptivo ajustando el tamaño y el espaciado del texto
• Cómo cambiar el orden de apilamiento de la barra lateral en dispositivos móviles

Empecemos.

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 la barra lateral optimizada en el móvil

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 nuestra lista de correo electrónico Divi Daily mediante 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.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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 al Divi Builder.

Vamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá instalar y activar Divi Theme. Asegúrese 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 muestre resultados.

Después de eso, estará listo para comenzar.

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 funcional en funcionamiento. Vamos a construir nuestra barra lateral en una plantilla de página usando Divi Theme Builder. Esto nos ayudará a comprender mejor lo que implica la creación de una barra lateral en Divi para que podamos comprender mejor cómo optimizarla en dispositivos móviles.

Crear la plantilla con la barra lateral

Importando Divi Theme Builder Pack # 3

Para empezar, vamos a utilizar 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 descargue el paquete, descomprima la carpeta.

Desde el Panel de WordPress, navegue a Divi> Theme Builder. Luego, haga clic en el icono 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: utilice un sitio de prueba con una instalación nueva de Divi para que no anule el contenido en vivo de 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ías

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 dos tercios un tercio de columna.

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

AVISO: No estoy usando una sección especializada 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 vamos a concentrar en aquellos elementos que ayudarán a optimizar la barra lateral en el móvil.

Dicho esto, necesitamos agregar un color de fondo y un 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: 25px arriba, 25px abajo, 25px izquierda, 25px 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 blogs, 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
• Optar por 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 realizar mediante una combinación de módulos Divi. Para este ejemplo, agregaremos los siguientes módulos Divi para construir nuestro contenido de barra lateral.

1. Módulo de búsqueda: servirá como formulario de búsqueda.
2. Módulo de suscripción de correo electrónico: servirá como formulario de suscripción de 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 de 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.

Extracción de widgets de WordPress mediante el módulo de barra lateral

Si aún no está familiarizado, Divi tiene un módulo de barra lateral que le permite extraer el contenido del área de widgets (o widgets) a su área de la 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 de 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á tirando del área del widget de la barra lateral, que debería verse como la siguiente si tiene la configuración predeterminada en WordPress.

Uso de varias á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 varios 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 agreguemos el widget de Categorías, vamos a nombrar el área "Categorías". Actualice la página para ver el área de widgets. Luego, arrastre el widget Categorías al área de widgets de categorías.

Repita el proceso para crear una nueva área de widgets llamada "Archivos". Luego, arrastre el widget de archivos al área del widget de archivos.

Vuelva a la plantilla de páginas de categoría 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 de categorías.

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

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

Tomando 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 icono Más configuraciones (o en el menú contextual) en la opción de margen. Luego seleccione "Extender 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 divisores.

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

Ocultar la barra lateral en un dispositivo móvil

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:

• Desactivar en: tableta, teléfono

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

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

En el escritorio, es posible que tenga espacio para guardar la mayor parte (o todo) del contenido de la barra lateral sin que se convierta en una distracción excesiva del contenido. Pero en dispositivos móviles, el usuario tendrá que desplazarse por una gran cantidad de contenido de la barra lateral que puede tener poco interés en ver. Por lo tanto, cuando cree 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 dispositivos móviles, 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:

• Desactivar 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 las categorías y los widgets de 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, los archivos y el anuncio se mostrarán en el dispositivo móvil.

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

Antes de ver los resultados en la página en vivo, asignémoslo primero a la página del 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úrese de tener una página de publicaciones seleccionada en Apariencia> Lectura.

Resultados

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

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 forma 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 y dentro del pie de página para que los usuarios puedan ver la suscripció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 (quizás dos). Las barras laterales derechas se apilan debajo del contenido de la publicación / página y las barras laterales de la izquierda 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 puede 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 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á por dos opciones de suscripción 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 un dispositivo móvil. En su lugar, puede minimizar el contenido del módulo ocultando ciertos elementos solo en la pantalla del dispositivo 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 el dispositivo móvil, 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 del dispositivo móvil. ¿Por qué no? Si tiene información valiosa que sabe que los usuarios apreciarán, consérvela por supuesto. 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 adaptarse a pantallas más pequeñas. Esto reducirá la distancia de desplazamiento de la página y facilitará la lectura del contenido.

Ajustar el tamaño del texto en dispositivos móviles

Una forma sencilla de minimizar el espaciado 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 dispositivo 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 del divisor de Divi para ajustar el espaciado de esos divisores en el móvil. 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 este problema, 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 un dispositivo móvil, 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:

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

A continuación, abra la configuración de la columna designada como barra lateral y agregue el siguiente CSS personalizado a la pantalla de la tableta del elemento principal:

order: 2;

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 apile 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 dispositivos móviles puede convertirse en una distracción. Con suerte, esta publicación lo ha inspirado a brindar a sus barras laterales la atención que merecen en tabletas y teléfonos. Esto puede significar que oculta la barra lateral por completo, muestra solo parte del contenido de la barra lateral o simplemente optimiza el contenido existente específicamente para la visualización en dispositivos móviles.

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 n. ° 3. Si le gusta el diseño de esta plantilla con la barra lateral, no dude 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 tener noticias tuyas en los comentarios.

¡Salud!