Cómo optimizar su barra lateral en su móvil usando Divic Builder

En algunos casos, mantener una barra lateral en el móvil puede ser un poco excesivo. Los usuarios están felices de viajar la información relevante sobre tabletas y teléfonos (hasta cierto punto). Pero cuando tiene una cantidad significativa de contenido de la barra lateral de acuerdo con el contenido principal de la página, los usuarios nunca pueden llegar al sótano, lo que generalmente consiste en algunos impulsos importantes. Por lo tanto, es importante optimizar la barra lateral en el móvil. En este tutorial, analizaremos las formas en que puede usar el Builder Divic para optimizar su barra lateral en su pantalla móvil. Estas son algunas de las cosas que cubriremos en este artículo:
Cómo crear una plantilla con una barra lateral
Creando el contenido de la barra lateral usando divits y widgets de WordPress
Uso de múltiples áreas de widgets para ocultar / mostrar ciertos widgets en dispositivos móviles
El control del espacio entre el contenido de la barra lateral en el móvil
Ocultando el contenido completo de la barra lateral en el móvil
Ocultar algunos contenidos de la barra lateral en móvil
Ocultación de elementos en módulos para minimizar el contenido móvil
Sensibilizando el contenido de la barra lateral ajustando el tamaño y el espacio del texto
Cómo cambiar el orden de apilar la barra lateral en el móvil
Vamos a empezar.
Tire del ojo con un vistazo rápido a la apariencia de la barra lateral en el escritorio y cómo se optimizó para la pantalla móvil.

Descargue la plantilla gratuita con la barra lateral optimizada en el móvil para poner su mano en la plantilla en este tutorial, primero tendrá que descargarla usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No se suscribirá y no recibirá correos electrónicos adicionales. Desciende los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en el constructor. Vamos al tutorial, ¿no? Lo que necesita para comenzar a comenzar, deberá instalar y activar el tema de Div. Asegúrese de tener la última división de división. También necesitará algunas publicaciones / páginas creadas con el fin de las pruebas, de modo que el contenido de la página realmente muestra resultados. Después de eso, estás listo para irte. Cómo optimizar la barra lateral de la plantilla de la división en el móvil antes de comenzar a optimizar la barra lateral en el móvil, primero debemos poner en funcionamiento un modelo de trabajo. Construiremos nuestra barra lateral en una plantilla de página utilizando el creador de temas. Esto nos ayudará a comprender mejor lo que ha implicado construir una barra lateral en la división, para que podamos comprender mejor cómo optimizarlo en el móvil. Creación de la plantilla con la barra lateral Importa el paquete de constructor de temas # 3 para comenzar las cosas, Utilizaremos el paquete Divic Themite Builder # 3 para lanzar el diseño de nuestro sitio. Luego usaremos una de las plantillas para agregar la barra lateral que optimizaremos para dispositivos móviles. Después de descargar el paquete, no me guste la carpeta. Desde el tablero de WordPress, navegue en Div> Temo Builder. Luego haga clic en el icono de portabilidad en el menú superior derecha de la página. Desde el método de portabilidad, seleccione la pestaña Importar y elija el archivo de división Division-the-Building-Pack-al.json de la carpeta que ha descargado anteriormente. Luego haga clic en el botón Importar.
IMPORTANTE: Utilice un sitio de prueba con una nueva instalación de la Div. Para que no anule el contenido en vivo en su sitio web o que rompa algo. Vea que todas las plantillas se han importado al generador de temas.
Construyendo la apariencia de la barra lateral dentro de la plantilla de página de categoría Encuentre la plantilla de todas las categorías de páginas y haga clic para editar el aspecto personalizado del cuerpo.
La aparición actual de la página utiliza una fila con una columna para la zona de contenido de la página principal. Tendremos que cambiar esto en una estructura de la barra lateral. Para hacer esto, haga clic en el icono “Elija la apariencia” en el menú de la segunda fila y elija la estructura de apariencia de la columna de dos tercios.

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

Opinión: No uso una sección especial para este aspecto de la barra lateral. Sin embargo, no son necesarias secciones especializadas al crear un aspecto de la barra lateral para su página, si desea mantener ordenanzas separadas para la zona de contenido principal, querrá usar una sección especializada. No nos enfocaremos demasiado recreando el diseño exacto de los módulos en este tutorial. En cambio, nos centraremos en aquellos elementos que ayudarán a optimizar la barra lateral en el móvil. Dicho esto, debemos agregar un color de fondo y completar la columna de la barra lateral.

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

Color de fondo: # F2F5F9

Forro: 25 px arriba, 25 px abajo, 25 px izquierda, 25 px a la derecha
Crear el contenido de la barra lateral con módulos de división y widgets de WordPress El contenido de la barra lateral variará según las necesidades de un sitio web. Sin embargo, si hablamos de un sitio de blog, generalmente encontrará una combinación del siguiente contenido de la barra de contenido: información sobre el autor (nombre, imagen, biografía)
Las redes sociales siguen los botones
Registro de email

Enlaces a productos y / o servicios
comerciales
Categorías
Publicaciones recientes / populares
La creación de estos elementos en la división se puede hacer utilizando una combinación de módulos de división. Para este ejemplo, agregaremos los siguientes módulos de la Divicidad para construir el contenido de la barra lateral.
Modo de búsqueda: servirá como formulario de búsqueda.
Modo de correo electrónico-IT servirá como un formulario Opine de correo electrónico.
Modo de texto: este será el título de los botones perseguidos en las redes sociales
La forma de rastrear en las redes sociales: mostrará los botones de seguimiento en las redes sociales.
Módulo de texto (con imagen BG): servirá como un ejemplo de anuncio para la barra lateral.
Modo de propaganda (con contenido del autor): servirá como un área de información sobre el autor en la barra lateral.
El módulo de texto: servirá como título para el módulo de blog debajo de él.
Modo de blog: servirá como un contenido reciente / presentado en la barra lateral.
Extracción de widgets de WordPress usando el módulo de barra lateral Si aún no está familiarizado, DIV tiene un módulo de la barra lateral que le permite dibujar el contenido del área del widget (o widget) en la barra lateral Div. De hecho, esta plantilla ya usa el widget de la barra lateral de la fila a continuación. Tire del módulo de barra lateral de una fila y colóquelo justo debajo del módulo de correo electrónico. Luego abra la configuración del módulo de barra lateral. Verá que el módulo está tirando en el área del widget en la barra lateral, que debe verse de la siguiente manera si tiene la configuración predeterminada de WordPress.
El uso de varias áreas de widgets en este momento, el área de widgets de la “barra lateral” muestra varios widgets, ya que hay más widgets dentro del área de widgets de la barra lateral. Sin embargo, puede obtener más control sobre el diseño de la barra lateral de la Divic, utilizando múltiples áreas de widgets que contienen un solo widget. El uso de varias áreas de widget le dará más control sobre el diseño de su widgets, así como sobre la visibilidad de los widgets móviles. Para crear más widgets, abra una nueva pestaña y vaya al tablero de WordPress. Navegue para mirar> widgets.
Cree un nuevo área de widget ingresando un nombre y haciendo clic en el botón Ceare. Debido a que esta área de widget será el lugar donde agregamos las categorías de widgets, llamamos el área de “categorías”. Actualice la página para ver el área del widget. Luego dibuje las categorías de widgets en las categorías de área de widgets.
Repita el proceso para crear un nuevo área de widget llamada “Archivos”. Luego dibuje el widget de archivos en el área del widget de archivo.

Regrese a la categoría de página de plantillas con la apariencia de la barra lateral y actualice el contenido del módulo de barra lateral para mostrar el área de widget de categoría.

Actualice el módulo de barra lateral duplicada para disparar en el arco del widget.

Tomando el control sobre el espacio entre los módulos de la barra lateral en la actualidad, la fila que contiene la barra lateral tiene un ancho de la canaleta 2. Esto significa que habrá un margen inferior / espaciado predeterminado entre cada módulo en la barra lateral. Para ganar más control sobre esta distancia, podemos eliminar el borde inferior de todos los módulos en la columna de la barra lateral. Para esto, abra la configuración del módulo de búsqueda y actualice lo siguiente:

Margen hacia abajo: 0 PX (escritorio), 15 px (tableta)


Luego, haga clic en el icono de más configuración (o haga clic con el derecho derecho en el menú) en la opción Edge. Luego seleccione “Extienda el margen”.

En el módulo extiende los estilos, actualice las opciones para expandir el margen a “todos los módulos” en “esta columna”.

Luego podemos agregar espaciado entre módulos usando módulos divisores.

Optimización de la barra lateral en el móvil que oculta la barra lateral en el móvil A veces, es posible que desee ocultar completamente la barra lateral 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 columna designada para la barra lateral. Luego actualice la visibilidad de la siguiente manera:

Desactivar: tableta, teléfono
Esto ocultará toda la barra lateral en la pantalla en la tableta y el móvil.
Ocultar parte del contenido de la barra lateral en el móvil en el escritorio, es posible que tenga espacio para mantener el contenido mayoritario (o completo) de la barra lateral, sin que se convierta en demasiado contenido. Pero en los dispositivos móviles, el usuario tendrá que ejecutar mucho contenido desde la barra lateral que podría tener poco interés en ver. Entonces, cuando construye su barra lateral en el constructor de temas, aprovecha las opciones de visibilidad para desactivar algunos de los elementos de la barra lateral en la pantalla móvil. Y, si usa widgets de WordPress para el contenido de la barra lateral, cree varias áreas de widgets para ayudar a diseñar y ocultar ciertos widgets y dispositivos móviles. Para ocultar los módulos en el móvil, abra el módulo de vista de estructura alámbrica, luego use la función Divic de Multiseement para seleccionar todos los módulos que desea ocultar / deshabilitar en la tableta y el teléfono. Luego abra la configuración para uno de los módulos seleccionados y actualice lo siguiente: Deshabilite: Teléfono, tableta

En esta ilustración, oculté todos los módulos (incluidos los separadores), excepto los dos módulos en la barra lateral (que contienen los widgets de categorías y archivos) y el módulo de texto (que contiene el anuncio) en la tableta y la pantalla del teléfono. Para decirlo de otra manera, solo se mostrarán categorías, archivos y anuncios 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, primero atribuyelo a la página del blog del sitio.Para hacer esto, haga clic en el icono de la rueda a través de la plantilla, seleccione el blog de la lista y guárdelo. Asegúrese de tener una página de publicación seleccionada> Leer.

Los resultados aquí son la diferencia entre la barra lateral de escritorio y la barra lateral móvil.Observe cómo la barra del lado móvil tiene un contenido de lección.
Evite el contenido duplicado de la barra lateral y el sótano en el móvil

En el escritorio, puede deshacerse de agregar contenido duplicado a la barra lateral y al sótano. De hecho, esta es una buena manera de aumentar las conversiones. Por ejemplo, en el escritorio, es lógico incluir una optimización del módulo del correo electrónico en la parte superior de la barra lateral y en el sótano para que los usuarios puedan ver la opción de correo electrónico mientras leen el contenido de publicación, así como al final de el cargo. Sin embargo, en el móvil, no hay ningún aspecto de la barra lateral. Todo se muestra en una sola columna (tal vez dos). La barra lateral derecha se almacena debajo del contenido de la publicación / página y la barra lateral izquierda se almacena sobre el contenido del contenido / página. Entonces, si un módulo de optimización del correo electrónico en la barra lateral se almacena bajo el contenido de la publicación / página, el usuario podría llevar más de un módulo para la optimización del correo electrónico (uno en la barra lateral y otra en el sótano) . Además, si hay una opción de correo electrónico en la parte inferior de la barra lateral derecha y una en la parte superior del sótano, el usuario llevará dos opciones de correo electrónico consecutivas en el móvil. Ocultar elementos en los módulos para minimizar el contenido móvil, puede decidir que ocultar un módulo completo en el móvil no es necesario. 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 presentada y la publicación de publicaciones presentadas en la barra lateral del escritorio. Pero en el móvil, puede ocultar la imagen presentada y el extracto para crear una versión minimizada del contenido.

Almitir el contenido de la barra lateral puede decidir mantener todo el contenido de la barra lateral en la pantalla móvil. ¿Por que no? Si tiene información valiosa, sabe que los usuarios apreciarán, en cualquier caso, guárdelos. Sin embargo, deberá tomar medidas para garantizar que el contenido de la barra lateral sea receptivo. Es decir, querrá ajustar el tamaño y el espacio de los elementos para que coincidan con pantallas más pequeñas. Esto reducirá la página de la página y facilitará el contenido del contenido. Ajuste el tamaño del texto en el móvil Una manera fácil de minimizar la distancia vertical y mejorar la leisibilidad en el móvil es ajustar el tamaño del texto del módulo en la barra lateral. Por ejemplo, puede ajustar la cabeza del encabezado de 24 PX al escritorio a 14 PX en el móvil. Grabe el espacio / divisores en este ejemplo, hemos agregado separadores entre módulos para crear espacio. Sin embargo, podemos usar la configuración del divor del divisor para ajustar el espacio de estos separadores en el móvil. Esto reducirá el espacio desperdiciado cuando corras. 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 móvil El orden de apilamiento es un problema ordinario con las barras laterales. Esto es especialmente cierto para las barras laterales izquierdas. Como se mencionó anteriormente, las barras laterales derechas se apilan bajo (o después) los contenidos / página y barras laterales están arriba (o antes) el contenido / contenido de la página. Esto significa que cuando ve una página con la barra lateral izquierda en el 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 remediar esto, puede ocultar la barra lateral por completo o puede cambiar el orden de apilamiento, de modo que la barra lateral izquierda caiga bajo el contenido / página del móvil. Para cambiar el orden de apilar una barra lateral izquierda para apilar (o después) el contenido de la página en el dispositivo móvil, abra la configuración de fila que contiene la apariencia de la barra lateral. Luego agregue los siguientes CSS personalizados al elemento principal: Display: -Webkit -flax; Display: Flex;
-WebKit-Flax-Wrap: Wrap;

Flex-Wrap: envoltura;

Luego abra la configuración de la columna de la columna como la barra lateral y agregue los siguientes CSS personalizados en la pantalla de la tableta: Ordene: 2;

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