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

Lo que necesitas para empezar

Para comenzar, deberá  instalar y activar Divi Theme . 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 Divi Theme Builder Pack # 3 para impulsar el diseño de nuestro sitio. Luego, vamos a utilizar 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 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 barra lateral 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 barra lateral 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 barra lateral Divi

AVISO: no estoy usando una sección de especialidad 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.

That said, we do need to add a background color and padding to the sidebar column.

Sidebar Column Settings

Open the settings for the column designated for the sidebar and update the following:

  • Background-color: #f2f5f9
  • Padding: 25px top, 25px bottom, 25px left, 25px right

Optimizar barra lateral Divi

Creating the Sidebar Content with Divi Modules and WordPress Widgets

Sidebar content will vary according to the needs of a website. However, if we are talking about a blog site, typically you will find some combination of the following sidebar content elements:

  • Author Info (name, pic, bio)
  • Social media follow buttons
  • Email opt-in
  • Links to Products and/or services
  • Ads
  • Categories
  • Recent/Popular posts

Creating these elements in Divi can be done using a combination of Divi Modules. For this example, we will add the following Divi Modules to build our Sidebar Content.

  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 extraer 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 barra lateral 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 utilizando 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 barra lateral 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 barra lateral 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 barra lateral 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 / espacio 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 barra lateral Divi

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

Optimizar barra lateral 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 ver los resultados en la página en vivo, asignémosla 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 ydentro 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 del divisor de Divi para ajustar el espacio 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.

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:

01
02
03
04
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 la columna designada como la barra lateral y agregue el siguiente CSS personalizado a la pantalla de la tableta del elemento principal:

01
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

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!