En WordPress hay diferentes opciones para hacer que tu página web sea responsiva y se vea genial:
- Puedes hacerla con un tema definido y cambiando el contenido base por el que necesitas para tu página web, aunque en ocasiones los temas gratis pueden tener virus que afecten tu página web o tal vez el diseño que quieres lo tiene un tema que es de paga.
- Personalizar cada página con tus conocimientos de HTML y CSS, pero de esta manera toma mucho más tiempo y esfuerzo, sobre todo al querer lograr una página responsiva.
- Utilizando un plugin, proporcionándote control sobre el diseño de tu página web, haciéndote las tareas más fáciles y ahorrándote tiempo, algunos ejemplos son, Elementor Page Builder, Beaver Builder, Divi Builder, etc.
Elementor Page Builder
En esta ocasión hablaremos de Elementor Page Builder. Es uno de los mejores plugin para construcción de páginas web responsivas profesionales, para utilizarlo solo necesitas tener los conocimientos básicos de páginas web como HTML, CSS, y sobre todo una idea de lo que es el diseño responsivo. El mismo plugin te va guiando y ofreciendo herramientas o plantillas para facilitar el diseño de tu página web.
En ocasiones a pesar de tener una herramienta como Elementor que automáticamente añade las propiedades responsivas, como mover columnas, bajar el tamaño de la letra, acomodar imágenes y contenido dependiendo el tamaño del dispositivo. Sin embargo, al final las imágenes siguen siendo las mismas del diseño de escritorio, de tal manera que seguirán pesando igual en los otros dispositivos.
Cuando entramos al mundo del diseño responsivo en todas partes nos encontramos la frase que dice ‘’mobile-first’’ siempre hay que enfocarnos en la versión móvil, texto y el contenido multimedia, mejorando la experiencia del usuario, obteniendo un diseño llamativo sin descuidar lo que tardara la página en cargar.
Bases del diseño responsivo
Antes de comenzar tenemos que hablar sobre los Media queries. Estos son los que nos permiten añadir propiedades diferentes a partir de CSS dependiendo de la resolución de la pantalla del dispositivo o el ancho de la ventana del navegador. Al ancho en pixeles de cada Media query se le conoce como Breakpoint, cada dispositivo tiene su ancho al que nos ajustaremos. Elementor por defecto tiene los siguientes breakpoints 1025px entre escritorio y trablet, 768px entre tablet y celulares. Un ejemplo sería el tamaño del Titulo H1 en escritorio es de 60px esto funcionaria mientras el ancho de la pantalla sea mayor o igual a 1025px pero cuando sea menor el H1 será 40px viéndose mejor en una Tablet.
Existen muchos breakpoints dependiendo de las marcas y modelos de los dispositivos. Para el uso de breakpoints estandarizados nos podemos basar en Bootstrap Framework de Twitter donde sus Responsive breakpoints son 576px, 768px, 992px y 1200px.
Manejo de imágenes en Elementor
- No dejes la imagen por defecto de las plantillas, estas imágenes por lo general vienen en calidad de escritorio o puedes optimizarlas.
- Optimizar las imágenes. Esto significa que no solo es ponerlas en un compresor de imágenes, sino que la optimices según el tamaño en el que aparecerá en la pagina web. Por lo tanto, si es una imagen que aparecerá en un div de 400px x 500px, al poner una imagen de mas de 500px x 600px la imagen no estaría optimizada.
- No dejes imágenes sin el atributo Alt, esto es para todas las páginas web.
- Crea imágenes para los diferentes breakpoints.
- Utiliza imágenes de preferencia en formato JPG, SVG o WebP aunque el formato WebP aun no está por defecto en WordPress.
¿Cómo añadir una imagen dependiendo el dispositivo en Elementor?
En Elementor la única forma de añadir una imagen para cada Breakpoint por defecto es utilizando las imágenes de fondo o la opción de superposición de fondo (Background Overlay) en los cuales puedes elegir una imagen de tamaño diferente para cada dispositivo.
En caso de poner una imagen grande con el widget de Imagen, que en tablet y móvil se verá más pequeña y aun con las opciones por defecto será una imagen pesada. Hay dos maneras:
- La solución mas optima es cambiando la imagen dependiendo el dispositivo con JS.
- Otra manera seria insertar 1 imagen para cada dispositivo y con la propiedad de responsivo quitar 2 y dejar 1.
Aunque es muy rara la ocasión que se necesita esto, es más fácil crear una inner section y añadirle un fondo como el ejemplo anterior.
Otro widget que no permite definir el tamaño de la imagen dependiendo del dispositivo, son los Carruseles y Slides por lo tanto si no tienes la posibilidad de modificarlo por un JS personalizado es mejor añadir otra con imágenes para móvil y ocultar la versión de escritorio.
Continúa leyendo nuestro blog con publicaciones interesantes acerca de diseño, desarrollo, tecnología y más.
