Cómo optimizar su diseño Divi para dispositivos móviles

Todos sabemos que los sitios web deben optimizarse para dispositivos móviles. De hecho, la estrategia del diseño web ha cambiado para pensar en «móvil primero». Esto tiene sentido teniendo en cuenta que hay más de 4 mil millones de personas que utilizan teléfonos móviles en todo el mundo .

El constructor visual de Divi es una herramienta de diseño útil para crear sitios web para dispositivos móviles. Tiene muchas características estructurales integradas que se ajustan a tabletas y teléfonos inteligentes sin que tengas que hacer nada. Además de eso, puede establecer configuraciones de respuesta personalizadas para computadoras de escritorio, tabletas y teléfonos inteligentes para todas las secciones, filas y módulos. Esto le da mucho poder sobre su diseño móvil.

Esta publicación tiene como objetivo ayudarlo a comprender las opciones disponibles dentro de Divi para que pueda realizar esos ajustes en el dispositivo móvil con confianza. Y tener este conocimiento lo ayudará a pensar en «móvil primero» al comienzo de sus proyectos, en lugar de arreglar el diseño móvil después del hecho.

Las técnicas compartidas en esta publicación lo ayudarán a hacer lo siguiente:

  • Controle el espacio vertical entre secciones y filas
  • Haga que las notas publicitarias (o cualquier módulo) abarquen todo el ancho en dispositivos móviles, pero no en computadoras de escritorio
  • Ajuste el espaciado de columnas no deseado en dispositivos móviles
  • Optimización de botones para móvil

Empecemos.

Lo que necesitas para empezar

Para comenzar, necesitará lo siguiente:

  • El tema Divi (instalado y activo)
  • Una nueva página con el diseño de página Acerca del cerrajero cargado

Vistazo

Aquí hay un vistazo al diseño de la tableta y el teléfono inteligente que construiremos.

Tenga en cuenta que los cambios realizados son mínimos, pero las técnicas utilizadas lo ayudarán a pensar correctamente sobre cómo realizar cambios más avanzados en sus propios diseños.

Establezca el espaciado predeterminado entre secciones y filas en 0

De forma predeterminada, Divi establecerá el espacio predeterminado entre filas y secciones. Si navega hasta el personalizador de temas > Configuración general > Configuración de diseño, verá que la altura de la sección predeterminada se establece en 4, lo que equivale a 50 px de relleno superior e inferior por sección. La altura de la fila se establece en 2, lo que equivale a 30 px de relleno superior e inferior por fila. En lugar de mantener estos valores predeterminados y luego tener que cambiar cada uno individualmente al personalizar su diseño, puede comenzar de nuevo asignando un valor de 0 tanto para la sección como para la altura de la fila. Esto hará que su relleno superior e inferior predeterminado sea 0px. De esa manera, cuando vaya a editar su diseño, tendrá una mejor idea de lo que está tratando al agregar un espaciado personalizado.

También puede hacer lo mismo para las pantallas móviles. Vaya a Personalizador de temas > Estilos móviles y establezca también la altura de su sección y fila en 0.

Agregue espacios personalizados entre secciones y filas a su diseño

Para este tutorial de caso de uso, voy a usar el diseño de página Acerca de Locksmith como ejemplo. Una vez que importe el diseño a la página, verá que los nuevos valores predeterminados de espaciado han hecho que sus secciones y filas estén mucho más cerca, de modo que el contenido se apila uno encima del otro sin mucho espacio.

Ahora podemos agregar nuestro relleno personalizado a cada una de nuestras secciones y filas. Primero, veamos la configuración de la sección para la sección superior del diseño.

Observe que se ha configurado un relleno personalizado con un relleno superior de 6vw. Esta es una buena cantidad de espacio para servir como predeterminado para todas las secciones restantes de la página también. Así que sugiero agregar un relleno inferior complementario de 6vw también. Luego copie el relleno personalizado en su portapapeles para que pueda pegar fácilmente esa opción de estilo en el resto de sus secciones en la página.

El valor de longitud de 6vw garantiza que el relleno se escalará de manera fluida con el ancho de la ventana de su navegador, por lo que realmente no necesita establecer un valor personalizado para dispositivos móviles. Esta es una excelente manera de ahorrar tiempo y deshacerse del espacio no deseado en el dispositivo móvil.

Ahora haga clic derecho en el resto de sus secciones y pegue el relleno personalizado en cada una.

Ahora sus secciones tendrán un nuevo espaciado personalizado que se escala con los tamaños de su navegador.

También podemos hacer lo mismo para nuestras filas. Haga clic para abrir la fila superior en la primera sección que contiene el título principal de la página. Luego agregue un relleno superior e inferior de 3vw (la mitad del valor de nuestro espacio entre secciones). Luego copie el relleno personalizado.

Ahora pegue el nuevo relleno personalizado en cada una de sus filas en todo el diseño. Según el diseño de su diseño, algunas filas deberán mantener su relleno personalizado, así que tenga esto en cuenta cuando pegue su relleno personalizado en cada fila. Si desea deshacerse de algo de espacio, puede configurar todas sus filas para que solo tengan un relleno inferior de 3vw.

Con la unidad de longitud vw espaciando sus filas y secciones, la longitud de su página se reducirá a medida que el espacio se escale con su navegador.

Ajustar margen de columna en dispositivos móviles

El espacio entre las columnas está controlado por el ancho del canalón. Dependiendo del ancho de la canaleta que haya seleccionado, Divi agregará de manera inteligente y conveniente un grado de espacio entre las columnas. En su mayor parte, desea aprovechar esta opción de ancho de canalón. Si alguna vez tuvo que crear una estructura de columnas desde cero usando html/css, entonces sabe cuánto dolor de cabeza puede ser.

De forma predeterminada, el ancho de medianil para sus filas se establece en un valor de 3 (lo que representa un margen derecho del 5,5 % entre columnas).

Eche un vistazo a la fila en la segunda sección del diseño de la página Acerca del cerrajero. Observe que tiene una estructura de columna de 1/4 1/4 1/2. El canalón de la fila se establece en 2 (lo que representa un margen derecho del 3 % entre columnas).

En Tablet, las dos columnas de 1/4 seguirán estando una al lado de la otra para conservar el diseño de cuadrícula de las imágenes.

En los teléfonos inteligentes, el ancho de la canaleta realmente no entra en juego, ya que todo deberá apilarse uno encima del otro. Ya no hay necesidad de espaciado horizontal.

Las imágenes que componen la cuadrícula están en dos columnas que, cuando se apilan en el móvil, se dividen por un margen de 30 px. Este pequeño espacio adicional es en realidad un margen inferior de 30 px que se aplica a todas las columnas que tienen un ancho de medianil mayor que 1.

Este margen inferior es útil en la mayoría de los casos como una forma conveniente de dividir el contenido en dispositivos móviles. Pero a veces puede agregar un poco de espacio que no necesita en el teléfono inteligente.

Una forma de solucionar esto es ajustar los márgenes inferiores de las imágenes para tener en cuenta el margen inferior de 30 px. Actualmente cada imagen tiene un margen inferior del 12%. Todo lo que necesita hacer es cambiar el margen inferior a 30 px en el teléfono inteligente para todas las imágenes excepto la segunda imagen en la primera columna.

Dado que la primera columna ya tendrá un margen inferior de 30 px en dispositivos móviles, configure la segunda imagen en la primera columna para que tenga un margen inferior de 0 px.

O si prefiere deshacerse de este margen por completo, simplemente puede agregar el siguiente fragmento de CSS a la Columna 1 en la configuración de su fila.

01
margin-bottom: 0px !important;

Esto eliminará el margen inferior de esa columna.

Para ir un paso más allá, podría establecer el valor del margen inferior para cada una de mis imágenes en 0px (en la pantalla del teléfono inteligente) para que las imágenes se apilen sin espacio, ahorrando tiempo de desplazamiento en los teléfonos inteligentes.

Creación de desenfoques de ancho completo en dispositivos móviles

En la siguiente sección de nuestro diseño, hay una fila de tres columnas con una nota publicitaria en cada una. La fila tiene un ancho personalizado de 1440 px. Técnicamente, este es un valor de ancho máximo de 1440 px para que la fila no se expanda más allá de 1440 px en navegadores de gran tamaño. En navegadores más pequeños, la fila tendrá un ancho del 80 % y se escalará muy bien. Dicho de otra forma, el ancho de la fila será el 80% del ancho de la sección hasta llegar a los 1440px de ancho.

En tabletas y teléfonos inteligentes, las tres columnas adquieren un ancho del 100 % y se apilan una encima de la otra, pero aún están contenidas por el ancho de fila del 80 %.

Para ahorrar algo de espacio en el móvil, es posible que desee que estos anuncios publicitarios abarquen todo el ancho de su sección para que no haya espacio en ninguno de los lados.

Para hacer esto, necesitamos repensar la forma en que configuramos nuestra fila. En lugar de tener un ancho personalizado de 1440px, cambie el ancho personalizado al 100%. También puede elegir la opción «hacer que esta fila sea de ancho completo», pero tenga en cuenta que si establece la fila en ancho completo (con un ancho de medianil de 2), el ancho de la fila en realidad será del 94 %, lo que le dejará un 3 % de margen en cada lado de la fila. Para simplificar las matemáticas de todo, sería mejor usar un ancho personalizado del 100%.

El objetivo principal aquí es pensar primero en dispositivos móviles para que nuestro contenido o publicidad abarque todo el ancho de la página en tabletas y teléfonos inteligentes. Pero dado que el diseño actual en realidad no requiere una fila de ancho completo en el diseño del escritorio, puede recuperar parte de ese espacio agregando relleno a la fila. Si queremos recuperar una fila que abarque el 80 % de ancho, debemos agregar un 10 % de relleno en cada lado (10 % + 10 % = 20 % y 100 % – 20 % = 80 %). Esto asegurará que su contenido abarque el 80% de la página.

Ahora podemos ajustar el relleno en la tableta y el teléfono inteligente al 0% para que los anuncios/contenido abarquen todo el ancho de la página.

Para asegurarse de que se apilan uno encima del otro, puede agregar un margen inferior personalizado de -30 px para los dos primeros anuncios publicitarios. Esto los empujará hacia abajo sobre el margen inferior de 30 px agregado por la columna y ocultará la sombra del cuadro para un diseño agradable y limpio en el móvil.

Personalización de la altura del divisor para dispositivos móviles

Las alturas de los divisores juegan un papel importante en el diseño de muchos de nuestros diseños. Pero también es importante mantener un diseño consistente en dispositivos móviles. Existen algunas técnicas que lo ayudarán a personalizar la altura del divisor para dispositivos móviles.

Primero, debe considerar establecer su altura con una unidad de longitud vw. Mire la sección del diseño de la página Acerca de cerrajero justo debajo de la sección con los tres anuncios publicitarios. Si observa la altura del divisor superior en este diseño, notará que se ha configurado en 18vw.

Esto asegurará que el divisor se adapte perfectamente a la ventana de su navegador sin tener que establecer valores adicionales para tabletas y teléfonos inteligentes. Establecerlo en un valor de píxel hará que el divisor se junte o se expanda en diferentes anchos del navegador, ya que la altura nunca cambiará con el ancho del divisor. Puede agregar valores de px adicionales para tabletas y dispositivos móviles, pero la solución es un poco entrecortada ya que el diseño saltará a diferentes alturas a medida que ajusta el navegador. En resumen, el uso de vw garantizará que su diseño permanezca exactamente igual en todos los tamaños de navegador, mientras que el valor px hará que el diseño se mueva y salte.

Esto no significa que no pueda agregar configuraciones adicionales para personalizar el diseño para dispositivos móviles. De hecho, es posible que prefiera un diseño mucho más limpio para dispositivos móviles. Todo lo que necesita hacer es ajustar la altura del divisor para tener menos altura y posiblemente menos repetición horizontal.

Por ejemplo, podría agregar una altura divisoria de 10 vw para teléfonos inteligentes con una repetición horizontal de 0,3 para obtener un diseño más plano y una transición más suave.

O establezca su altura en 0 en el teléfono inteligente para deshacerse del divisor por completo.

Personalización de botones en dispositivos móviles

En dispositivos móviles, desea que esos botones se reconozcan fácilmente y se pueda hacer clic en ellos. Entonces, en lugar de hacer que los botones sean más pequeños en dispositivos móviles, es posible que desee ajustar el área en la que se puede hacer clic para que abarque un ancho mayor de la pantalla de su dispositivo móvil. Por ejemplo, un botón pequeño alineado a la izquierda no será tan fácil de hacer clic para un diestro que usa un pulgar para navegar por su sitio. El usuario tendría que alcanzarlo. Una solución a esto es asegurarse de que sus botones tengan el ancho completo en el dispositivo móvil.

Puedes ajustar el tamaño de tus botones en el móvil de diferentes maneras en Divi. La forma más sencilla de hacer esto es agregar un relleno personalizado a su botón.

Usando el diseño de la página Acerca de Locksmith, vaya a la sección superior y ajuste la configuración de los botones para tener el siguiente relleno personalizado en el teléfono inteligente:

Relleno personalizado (teléfono inteligente): 1 em arriba, 1 em abajo, 2 em izquierda, 2 em derecha

El valor em está relacionado con el tamaño del texto del botón que actualmente está configurado en 20px en el teléfono inteligente. Entonces 1em sería igual a 20px. Entonces, la parte superior e inferior del botón serían 20px. 2em es igual a 40 px (2 por 20 px), por lo que el botón tendría un relleno de 40 px a la derecha y a la izquierda.

Para hacer que las cosas funcionen un poco más fluidas y predecibles en dispositivos móviles, puede establecer el tamaño del texto en una unidad de longitud vw. Esto requerirá un poco de prueba y error para obtener el tamaño correcto, ya que todo depende de la fuente y la cantidad de texto del botón que tenga.

Continúe y configure el tamaño del texto del botón de la siguiente manera:

Tamaño del texto del botón (teléfono inteligente): 5.6vw

Dado que el relleno ya está configurado con em (según el tamaño del texto), tanto el texto como el relleno del botón se escalarían con el tamaño del navegador. También garantizará que el texto del botón nunca se divida en una línea diferente.

No se asuste de que el texto parezca realmente grande en la vista previa del generador visual. Esto es solo porque el texto está usando su navegador para determinar su tamaño, no el ancho del cuadro de vista previa. Esto se aplica a todas las unidades de longitud vw, así que tenga cuidado de probar esto en una ventana separada en el sitio en vivo para ver los resultados.

Ahora su botón ocupa más espacio y parece estar casi centrado a pesar de que está alineado a la izquierda para este diseño. Pero siempre puedes cambiar el módulo a centrado para asegurarte.

Otra solución rápida para aumentar el ancho de su botón en dispositivos móviles es configurar su botón como un elemento de bloque solo en dispositivos móviles. La mejor manera de hacerlo es agregando un fragmento de css personalizado. Vaya a Personalizador de temas > CSS adicional y agregue lo siguiente:

01
02
03
04
05
06
@media (max-width: 479px) {
.block {
     display: block !important;
     text-align: center;
     }
}

Esto crea una clase CSS (llamada «bloque») que agregará «display:block» y «text-align:center» a cualquier elemento al que se agregue la clase. Pero esto solo ocurre en pantallas con un máximo de 479 px, que es un buen punto de interrupción de Divi para teléfonos móviles.

Ahora regrese a la configuración del módulo de botones y agregue el «bloque» de clase CSS en la pestaña avanzada.

Ahora verifique el resultado en el sitio en vivo. Observe el cambio de botón en el punto de interrupción.

También puede agregar esa clase de botón al botón azul en el diseño para obtener el mismo efecto.

Ahora veamos nuestro diseño final para tabletas y teléfonos inteligentes.

Tamaño de texto, longitud de línea y altura de línea

Hay mucha investigación sobre cuál es el equilibrio correcto entre el tamaño del texto, la longitud de la línea y la altura de la línea para una legibilidad óptima.

En general, parece que 16 px es lo más pequeño que se necesita para dispositivos móviles. La altura de la línea debe estar entre 1,4 em (140 % del tamaño de la fuente) y 2 em (200 % del tamaño de la fuente), lo que dependerá del tamaño del texto. El tamaño de texto más grande debe tener una altura de línea más grande. Por lo tanto, 16 px funcionará bien con una altura de línea de 1,6 em, mientras que un tamaño de fuente de 18 px se verá mejor con 1,8 em. Tú entiendes. Mientras escribo este artículo en el editor de wordpress , noto que la fuente es de 13 px con una altura de línea de 1,5 em. Y tengo que decir que está empujando los límites de mi prescripción de anteojos.

La longitud de línea es la cantidad de caracteres permitidos en una determinada línea de texto. Una longitud de línea cómoda para la mayoría es de alrededor de 45 a 85 caracteres por línea.

No voy a darle una mejor práctica exacta para determinar estos valores, pero puedo darle una idea general de qué hacer.

Usemos nuestro diseño como ejemplo. El tamaño del texto del cuerpo se establece en 18 px. Este tamaño puede funcionar bien en la mayoría de los teléfonos, pero para algunos esto puede conducir a una longitud de línea más corta de lo que es cómodo para la mayoría de los lectores. La longitud de línea en la vista previa móvil es de alrededor de 43 caracteres.

Cambiemos el tamaño del texto a 16 px con la altura de la línea a 1,75 em. Esto pone nuestra longitud de línea en alrededor de 50 caracteres, lo que parece ser una longitud más cómoda. Pero en teléfonos más pequeños, esto puede reducirse a alrededor de 37 caracteres, lo que probablemente sea demasiado pequeño.

Por lo tanto, puede probar un tamaño de texto de 14px o 15px para aumentar un poco la longitud de la línea. Pero nosotros, las personas mayores, es posible que no podamos ver 14px muy bien, por lo que puede que no valga la pena el riesgo de unos pocos caracteres de longitud de línea.

La altura de la línea es importante no solo para la legibilidad sino también para reducir la longitud de la página. El espacio entre líneas puede sumar un espacio desperdiciado significativo en algunas páginas y daría lugar a demasiado desplazamiento para leer el texto.

Pensamientos finales

En general, los diseños de Divi se verán bien en los dispositivos móviles con un mínimo esfuerzo. Pero a veces tiene sentido optimizar su sitio específicamente para dispositivos móviles. Es posible que desee deshacerse del espacio vertical excesivo y/o aumentar el ancho de las filas y secciones para reducir la longitud de la página y minimizar el desplazamiento. También es posible que desee aumentar el tamaño de los botones para obtener mejores conversiones.

Con suerte, estos consejos lo ayudarán a comprender mejor a Divi y lo prepararán para realizar ajustes en cualquier diseño para un diseño móvil óptimo.

Espero escuchar de usted en los comentarios.

¡Salud!