Guía de Página Web Responsive:
Con un acceso a Internet cada vez más accesible desde dispositivos móviles, ya no es suficiente tener un diseño de sitio web estático que solo se ve bien en la pantalla de una computadora.
Sin mencionar que también debes considerar tabletas, computadoras portátiles 2 en 1 y diferentes modelos de teléfonos inteligentes con diferentes dimensiones de pantalla al crear un diseño.
Con un diseño web receptivo, puedes asegurarte de que tu sitio web se vea mejor en teléfonos celulares, tabletas, computadoras portátiles y pantallas de escritorio.
Y esa mejora en la experiencia del usuario significa mayores conversiones y crecimiento empresarial.
¿Qué es el diseño web responsive?
El diseño receptivo es un enfoque del diseño web que hace que tu contenido web se adapte a los diferentes tamaños de pantalla y ventana de una variedad de dispositivos.
Por ejemplo, tu contenido puede estar separado en diferentes columnas en las pantallas de escritorio, porque son lo suficientemente anchas para adaptarse a ese diseño.
Si separas su contenido en varias columnas en un dispositivo móvil, será difícil para los usuarios leer e interactuar con él.
Esto hace posible entregar múltiples diseños separados de su contenido y diseño a diferentes dispositivos según el tamaño de la pantalla.
Por qué es importante el diseño responsive?
Si eres nuevo en el diseño web, el desarrollo o los blogs, es posible que te preguntes por qué el diseño receptivo es importante en primer lugar.
La respuesta es simple. Ya no es suficiente diseñar para un solo dispositivo. El tráfico web móvil ha superado a los de escritorio y ahora representa la mayor parte del tráfico web, representando más del 51%.
Cuando más de la mitad de tus visitantes potenciales utilizan un dispositivo móvil para navegar por Internet, no puedes simplemente mostrarles una página diseñada para computadoras de escritorio. Sería difícil de leer y usar, y conduciría a una mala experiencia de usuario.
Pero eso no es todo. Los usuarios de dispositivos móviles también constituyen la mayoría de las visitas a los motores de búsqueda.
Herramienta gratuita de Elementor:
Lo primero que tienes que hacer es ir al sitio que estás configurando, en el editor, en la parte de la izquierda abajo en el botón que dice: “Modo adaptable”, le das clic ahí y selecciona donde dice: “móvil” y comprobarás cómo se vé tu sito web en un dispositivo móvil. (ver imágen).
Tendrás que modificar todo lo que no encaje especialmente los títulos, imágenes y algunos otros elementos.
Cómo modificar nuestra página para un dispositivo móvil?
Abres el Navegador de Elementor que será de mucha ayuda a la hora de modificar lo que querramos.
En el navegador seleccionamos: la primera sección y en Avanzado le ponemos una cantidad en donde dice Relleno, antes desvinculamos las cajitas, le ponemos un relleno de 65 en la parte de arriba, luego donde dice Adaptabilidad, le das a la flechita para expandir y donde dice Columnas invertidas le ponemos que Sí. (Ver la imágen de abajo)
Ahora seleccionamos el botón y lo centramos. En Avanzado le damos un márgen de 30 Abajo pero serán negativos(-30) para que quede en el centro del segmento. Le damos un margen de 160 pixeles de Relleno en la parte de arriba. Para eliminar el espacio en blanco que sobra, seleccionamos la Sección completa y en Relleno de la parte de arriba le quitamos el 65 y le ponemos 0.
Mejorar imágen:
Para tener una mejor imágen, seleccionamos la columna—> Estilo, donde dice Posición, seleccionamos Centro Derecha, se puede cambiar de imágen si se está en un dispositivo móvil.
El título:
Para cambiar el Título, lo selecciono—> Estilo–>Tipografía le ponemos 45 pixeles. Elementor te permite cambiar el texto para adpatarlo ya sea a una computadora o a un dispositivo móvil, eso es lo que se llama Adaptabilidad Responsive.
Cambiar estilo del Separador:
Cambiamos el Separador en Estilo—> la Brecha le ponemos 0 para no dejar espacio.
Seleccionamos el Texto—> Estilo—> Tipografía le ponemos 13 pixeles.
Siguiente Sección:
Vamos a la siguiente Sección, seleccionamos la sección—-> Avanzado, en Relleno de 60 pixeles en todas las cajitas vinculadas. Ahora seleccionamos el texto que está dentro de esa sección, en Estilo–>Tipografía y le damos 20 pixeles. Al texto siguiente, al de abajo le damos 14 pixeles, en Avanzado desvinculamos las cajitas para quitar el espacio que teniamos para el escritorio de la computadora.
Testimonios y Contacto:
Seleccionamos los Testimonios, en Avanzado–> desvinculamos los valores adjuntos tanto en Margen como en Relleno para que queden en 0. Vamos a un comentario y en Avanzado le ponemos 50 pixeles a todo alrededor, lo mismo hacemos con todos los comentarios que tenemos, clic derecho copiamos del primero y a los siguientes será clic derecho pegar estilo.
Para cambiar el formulario de Contacto, lo seleccionamos—> Avanzado—> de 40 pixeles de todo alrededor. Seleccionamos el título de Contáctenos y en Estilo—>Tipografía le damos 35 pixeles. Seleccionamos también el Separador —-> Avanzado le quitamos los márgenes que hay de arriba y de abajo. En donde dice “Llenar formulario con su pregunta” le cambiamos en Estilo—>Tipografía–> tamaño de letra a 14.
Revisamos todo nuestro trabajo que todo esté perfecto y le damos a Actualizar.
Recuerde probar todos los links, comprobar o hacer pruebas en diferentes móviles, diferentes plataformas.
