Sensibilidad
Última actualización: 8 abril, 2025
Un diseño web responsivo significa que los elementos del sitio web (por ejemplo, texto, imágenes y vídeos) se ajustan automáticamente al dispositivo desde el que se accede. Esto garantiza la mejor experiencia de usuario.
Cada día aumenta el número de usuarios móviles en internet. En 2016, el porcentaje de usuarios móviles superó al de usuarios de ordenadores a nivel mundial y sigue creciendo desde entonces. Un sitio web responsivo no solo es importante para la experiencia del usuario, sino también para su posicionamiento en los motores de búsqueda. Google, por ejemplo, analiza la versión móvil de tu sitio web para determinar su posición en los resultados de búsqueda. Un sitio web móvil deficiente implica un mal posicionamiento, lo que se traduce en menos tráfico.
La buena noticia es que todas las plantillas de sitios web en Sitejet son responsivas de manera predeterminada, a menos que desactives esta opción o realices cambios significativos en tus elementos para que ya no sean lo suficientemente responsivos para tu sitio web móvil.
Si desea desactivar el diseño adaptable, puede hacerlo en Más > Configuración de SEO y desmarcar la casilla debajo de la vista previa. Esta casilla está activada por defecto y le recomendamos encarecidamente que la mantenga activada.
Cambiar entre las ventanas gráficas
Puedes cambiar entre la vista de escritorio, tableta y smartphone mediante los botones de la ventana gráfica en la barra de menú superior del Creador de sitios web. Esto incluye resoluciones para dispositivos populares y orientación horizontal y vertical. También puedes ajustar el zoom según tus necesidades.
Independientemente de la vista que seleccione, el Modo de Vista Previa funcionará. Sin embargo, el Modo de Presentación muestra las vistas de escritorio, tableta y smartphone en una sola pantalla, en una nueva pestaña del navegador. Estas vistas previas son totalmente interactivas.
Ajustar elementos para cada ventana gráfica
En el generador de sitios web, puede mejorar rápidamente la capacidad de respuesta de la mayoría de los elementos con unos pocos clics, desde cambiar la cantidad de columnas en una plantilla de sección hasta cambiar el orden de los elementos en un contenedor o hacer que los elementos sean invisibles.
Ocultar elementos
En algunos casos, puede ser conveniente no mostrar ciertos elementos en una ventana gráfica específica. Para ello, vaya a la ventana gráfica donde desea ocultar un elemento y haga clic en él. En este caso, ocultemos algunos elementos en la vista del smartphone.
Haga doble clic en el elemento o el contenedor o una plantilla de sección completa en esa vista específica y abra el panel Estilo en el lado izquierdo.
Ahora expanda la opción “Visible” y desmarque la casilla “Visible”. El Creador de sitios web le mostrará que este elemento está “oculto para dispositivos móviles” y desactivará los elementos seleccionados.
Personalizar elementos por ventana gráfica
Esta potente función y método funciona para la mayoría de los cambios que desee aplicar a sus elementos, contenedores completos y plantillas de sección. Por ejemplo, usaremos la plantilla de sección de cuatro columnas y ajustaremos el número de imágenes que se muestran en tabletas y dispositivos móviles. En la vista de escritorio, queremos mostrar tres imágenes una al lado de la otra.
Al cambiar a la vista de tableta, puede ver que las tres imágenes se ven apretadas una al lado de la otra, por lo que vamos a usar dos columnas para esta vista. Esto se ve mucho mejor. Ahora verá que el color de esa configuración ha cambiado, reflejando el color de la ventana gráfica.
Esos colores indican cambios realizados solo para una determinada ventana gráfica.
- Sin color = La configuración predeterminada para el escritorio
- Violeta = Los cambios se realizaron para la vista de tableta.
- Amarillo = Los cambios se realizaron para la vista del teléfono inteligente
Los cambios que realice siempre afectarán a las demás ventanas gráficas, a menos que ya haya realizado un ajuste específico. Por ejemplo, si cambia el número de columnas en la versión de escritorio, esto se aplicará a las vistas de tabletas y teléfonos inteligentes. Ahora bien, si cambia el número de columnas para tabletas, esto afectará a la vista de teléfonos inteligentes y solo se modificará si realiza cambios específicos para estos últimos. El color de la configuración siempre indicará si se han realizado cambios específicos en las ventanas gráficas.
Generalmente, el Creador de sitios web permite que la mayoría de las plantillas de sección sean adaptables, a menos que configures ajustes específicos que puedan afectar la apariencia en otra ventana gráfica. Por lo tanto, ten cuidado con las alturas y anchuras absolutas, por ejemplo. Y siempre revisa los cambios en cada ventana gráfica.
Con esta función, puede realizar cambios significativos en la apariencia de su sitio web en cada vista, como por ejemplo:
- Ocultar elementos para ciertas vistas
- cambiar la cantidad de columnas para cada vista
- Ajustar la configuración de Flexbox, así como la altura, el ancho y las alineaciones de los elementos.
- Ajusta el menú y muchas otras plantillas de sección para cada ventana gráfica.
Tenga en cuenta que, por ejemplo, al eliminar un elemento de una ventana gráfica, este se aplicará a todas las demás. Si desea agregar un elemento solo a una ventana gráfica, deberá hacerlo invisible para las demás. Además, cambiar los colores o las fuentes también afectará a todas las ventanas gráficas.
Cambios responsivos en la configuración de diseño global
Volviendo a un enfoque más global, esta característica le permitirá realizar ajustes en la configuración de diseño global de cada sitio web para hacer que su sitio web sea más atractivo ajustándose a cada ventana gráfica.
Ve a Diseño en el menú superior y aplica los cambios en cada ventana gráfica. No olvides guardar el progreso después.
Recomendamos usar el Modo de Presentación para ver los cambios realizados en cada ventana gráfica. Esto garantizará que los cambios se vean perfectos en todos los dispositivos.
Este artículo es una traducción del original en inglés titulado “Responsiveness” publicado por Sitejet.
