Todas las páginas web de Webador utilizan un diseño responsivo, lo que significa que la web se adapta automáticamente al tamaño de la pantalla del dispositivo utilizado, ya sea un ordenador, un portátil, una tablet o un dispositivo móvil.
Puede ser complicado conseguir que tanto la versión de escritorio como la versión móvil de tu página web tengan el aspecto adecuado, por lo que compartiremos algunos consejos.
Columnas
Puedes utilizar el Elemento columna para separar tu contenido cuando tengas varios elementos colocados uno al lado del otro. Estas columnas se colocarán una encima de otra en la vista móvil.
Cuando colocas el elemento Columna en tu página web, éste crea automáticamente 3 columnas, como se muestra a continuación. Puedes arrastrar y soltar otros elementos dentro de tus columnas para añadir contenido.
Un error común es colocar cada elemento de contenido en su propio elemento Columna, lo que crea 3 columnas verticales y 3 horizontales a la vez y tiene un aspecto similar al siguiente:
y así es como se ve en el móvil:
Por lo tanto, al completar una columna con contenido, deberás colocar todos los elementos dentro y único elemento Columna, como se muestra a continuación.
Vista móvil:
Tablas
El elemento Tabla es ideal para añadir información con múltiples filas y columnas, como menús y horarios de apertura. El elemento Columna no es adecuado para esto debido a la forma en que muestra el contenido:
Como muestra la captura de pantalla, el uso del elemento Columna da como resultado una lista de días seguidos y de horas, lo que no es ideal para mostrar los horarios de apertura.
Con el elemento Tabla, los horarios de apertura se mostrarán como es debido en todos los dispositivos, incluidos los ordenadores:
y dispositivos móviles:
Espacio en blanco
Para crear espacio entre las columnas en la vista móvil, puedes utilizar el Elemento separador. Esto sólo funciona si se coloca debajo de cada columna individual, no debajo del elemento columna en su conjunto:
Así es como se ve en un ordenador:
El siguiente ejemplo muestra el resultado cuando el elemento separador se coloca debajo de cada columna individual.
Así es como se ve en un ordenador:
y así es como se ve en el móvil con el elemento separador entre todas las columnas:
Alineación de columnas
Si utilizas columnas en tu página web, deberás tener en cuenta la alineación para la vista móvil.
Un error común es alinear los elementos de la columna izquierda a la izquierda, los elementos de la columna central al centro y los elementos de la columna derecha a la derecha. Esto se ve bien en ordenadores y portátiles, pero no en móviles.
Así es como se ve en un ordenador con la alineación a la izquierda, al centro y a la derecha:
y así es como se ve en el móvil con alineación a la izquierda, al centro y a la derecha:
Todos los elementos de todas las columnas deben estar alineados al centro para que se muestren correctamente tanto en ordenadores como en dispositivos móviles.
Así es como se ve en un ordenador con alineación al centro:
y así es como se ve en el móvil con la alineación de centro:
