Cómo optimizar su barra lateral en dispositivos móviles con 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 importantes a la acción. Por eso es importante optimizar la barra lateral en dispositivos móviles.

En este tutorial, veremos 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 barra lateral utilizando módulos Divi y widgets de WordPress
  • Uso de múltiples áreas de widgets para ocultar / mostrar ciertos widgets en dispositivos móviles
  • Control del espacio entre el contenido de la barra lateral en dispositivos móviles
  • Ocultar completamente el contenido de la barra lateral en dispositivos móviles
  • Ocultar contenido de la barra lateral en dispositivos móviles
  • Ocultar elementos dentro de módulos para minimizar el contenido en dispositivos móviles
  • Hacer que el contenido de la barra lateral responda 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.

Optimizar Divi Sidebar en dispositivos móviles

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

Para poner sus manos sobre 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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á "suscrito" ni recibirá correos electrónicos adicionales.

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ás 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 partir.

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 poner en funcionamiento un modelo que funcione. 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 construir una barra lateral en Divi para que podamos comprender mejor cómo optimizarlo en dispositivos móviles.

Crear la plantilla con la barra lateral

Importando Divi Theme Builder Pack # 3

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

Una vez tú descarga el paquete, descomprime la carpeta.

Desde el Panel de WordPress, navegue hasta Divi> Generador de temas. 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 nueva instalación de Divi para no anular el contenido en vivo en su sitio web o romper algo.

Optimizar la barra lateral de Divi

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

Optimizar Divi

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.

Optimizar la barra lateral de Divi

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.

Optimizar Divi Sidebar en dispositivos móviles

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

Optimizar la barra lateral de Divi

AVISO: no estoy usando una sección especializada para este diseño de barra lateral. Las secciones de especialidad 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, deberá utilizar una sección de especialidad.

No nos concentraremos demasiado recreando 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 dispositivos móviles.

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

Configuración de columna de 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

Optimizar la barra lateral de Divi

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
  • Opció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 de Divi para crear nuestro contenido de barra lateral.

  1. Módulo de búsqueda: esto servirá como formulario de búsqueda.
  2. Módulo de Optin de correo electrónico: este servirá como el formulario de Optin 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 ejemplo de anuncio para la barra lateral.
  6. Módulo Blurb (con contenido de autor): servirá como á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: esto servirá como contenido de publicaciones recientes / destacadas en la barra lateral.

Optimizar Divi

Tirando de los widgets de WordPress usando el módulo de barra lateral

Si aún no está familiarizado, Divi tiene un módulo de barra lateral que le permite incorporar el contenido del área de widgets (o widgets) a su área de Divi Sidebar. De hecho, esta plantilla ya está utilizando el widget de 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 optin de correo electrónico.

Optimizar la barra lateral de Divi

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

Optimizar Divi

Uso de múltiples áreas de widgets

En este momento, el área de widgets "Barra lateral" muestra múltiples 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.

Optimizar la barra lateral de Divi

Cree un nuevo Á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, nombremos el área "Categorías". Actualice la página para ver el área del widget. Luego arrastre el widget Categorías al área de widgets Categorías.

Optimizar Divi Sidebar en dispositivos móviles

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

Optimizar la barra lateral de Divi

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 barra lateral para mostrar el área del widget Categorías.

Optimizar Divi Sidebar en dispositivos móviles

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

Optimizar la barra lateral de Divi

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

Optimizar Divi

Tomando control sobre el espacio entre módulos de barra lateral

Actualmente, la fila que contiene la barra lateral tiene un valor de ancho de canal 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 espacio, 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ú del botón derecho) en la opción de margen. Luego seleccione "Ampliar margen".

Optimizar la barra lateral de Divi

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

Optimizar la barra lateral de Divi

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

Optimizar Divi Sidebar en dispositivos móviles

Optimizando 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 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

Optimizar Divi

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

Optimizar Divi Sidebar en dispositivos móviles

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

En el escritorio, puede tener espacio para mantener la mayoría (o la totalidad) del contenido de la barra lateral sin que se convierta en una gran distracción del contenido. Pero en los 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. Entonces, cuando construya 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 también en dispositivos móviles.

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 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.

Optimizar Divi Sidebar 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 en vivo, vamos a asignarlo 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.

Optimizar Divi

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

Optimizar Divi Sidebar en dispositivos móviles

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 la lección.

Optimizar Divi

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

Optimizar Divi Sidebar en dispositivos móviles

En el escritorio, puede evitar agregar 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 optin 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 el correo electrónico mientras lee 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. Entonces, si un módulo optin de correo electrónico de la barra lateral se acumula debajo del contenido de la publicación / página, el usuario podría desplazarse por más de un módulo optin de correo electrónico (uno en la barra lateral y otro en el pie de página). Además, si hay opciones 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 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 el 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.

Optimizar Divi

Hacer que el contenido de la barra lateral responda

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 todos los medios. Sin embargo, tendrá que tomar medidas para asegurarse de que el contenido de la barra lateral responda. Es decir, querrás ajustar el tamaño y el espaciado de los elementos para que quepan en 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 manera 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.

Optimizar Divi Sidebar en dispositivos móviles

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 Divi’s Divider para ajustar el espacio 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.

Optimizar Divi

Cambio del 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 el 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 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 el 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;

Optimizar Divi Sidebar en dispositivos móviles

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 del elemento principal:

order: 2;

Optimizar Divi Sidebar en dispositivos móviles

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.

Optimizar Divi Sidebar en dispositivos móviles

Pensamientos finales

Las barras laterales siguen siendo un espacio familiar para los usuarios que proporcionan 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. Afortunadamente, esta publicación lo ha inspirado para prestar 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 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 le gusta el diseño de esta plantilla con la barra lateral, no dude en descargarla arriba para ver más de cerca.

Para más información, mira esto guía para usar barras laterales con Divi Theme Builder.

Espero tener noticias suyas en los comentarios.

¡Salud!