Como ya sabrás, el diseño web en «mobile first» no es solo una tendencia, sino una necesidad en un mundo donde la mayor parte del tráfico llega desde el móvil (en muchos negocios locales, bastante más de la mitad; míralo en tu Analytics). Y si tu web no funciona bien ahí, básicamente estás perdiendo clientes a mansalva.
Quiero mostrarte si eres usuario de Bricks Builder, como puedes añadir los breakpoints que necesites de una manera rápida y sencilla. Además, déjame decirte que Bricks es muy potente en esto; antes, con Elementor, era un drama cuadrarlo. Aunque es verdad que hoy existen técnicas (tamaños fluidos con clamp(), por ejemplo) que adaptan el diseño a cualquier pantalla con menos breakpoints.
¿Qué significa el «mobile first» en primer lugar?
Pues básicamente que tu diseño web está pensado primero para el móvil. Y luego ya realizas los ajustes pertinentes en pantallas más grandes, como tabletas y ordenadores. Este enfoque hace que la experiencia en el móvil sea perfecta y prioritaria. Y lo mejor de todo es que también ayuda al SEO, porque Google indexa todas las webs con su robot para móviles: lo que ve es tu versión móvil. Te lo cuento en mi post sobre webs mobile-friendly.
Por qué Bricks Builder para el «mobile first»
Bricks es un builder increíble que te permite crear tus breakpoints a medida, vamos que las pantallas de móviles que necesites. Por eso puedes personalizar al detalle las pantallas de todos los dispositivos que necesites. Su sistema basado en CSS y breakpoints hace que configurar todo esto sea muy fácil.
PASO 1 – Nos dirigimos a la pestaña de Bricks del menú de WordPress y en el desplegable buscamos la opción de «Ajustes».
PASO 2 – Hacemos un poco de scroll hacia abajo y habilitamos la pestaña de «puntos de interrupción personalizados» y obviamente guardamos los cambios.
PASO 3 – Ahora nos vamos a cualquier página que hayamos editado con Bricks y entramos pinchamos en «Editar con Bricks». Y pinchamos en los 3 puntitos que te indico en la foto
PASO 4 – Se nos despliegan los breakpoints que trae Bricks por defecto y pinchamos en el lápiz de «Mobile portrait» para editarlo.
Antes del paso 5, un aviso importante: haz esto al empezar el proyecto, con la web vacía. El breakpoint base es donde se guardan los estilos sin sufijo; si lo cambias en una web ya maquetada en escritorio, todos esos estilos pasan a aplicarse en el móvil y tendrás que repasar el diseño entero. Si tu web ya está hecha, mejor déjala como está.
PASO 5 – Habilitamos la «Base breakpoint» para decirle al sistema que queremos el «Mobile first». Pero OJO: antes ya añadimos la pantalla que necesitamos en el Width (px): por ejemplo 360px para una pantalla pequeña de móvil. Luego pinchamos en «Update».
PASO 6 – Bricks reconoce el «Mobile first» y nos cambia la pantalla del diseño y nos añade los breakpoints en modo móvil. A partir de este momento pinchando en el lápiz de cada dispositivo podemos cambiar el nombre y el min-width de las diferentes pantallas que necesitemos. Así las adaptamos a nuestro gusto, es la caña Bricks sin duda.
PASO 7 – Pinchamos en el + y empezamos a editar todas las pantallas que necesitamos para nuestro proyecto. Donde podemos elegir el nombre el Width de la pantalla y el icono para el dispositivo. Luego pinchamos en CREATE y listo ya tenemos nuestro primer breakpoint personalizado.
Añade todos los breakpoints que necesitas para tu proyecto y empieza a disfrutar de Bricks Builder sin duda un constructor que no para de crecer y crecer. Desde luego ahora mismo yo no lo cambio por ningún otro.
Puedes crear tiendas online profesionales con WordPress increíbles también con una gran personalización y una web multiidioma en WordPress flipante traducida al 100% manualmente.
Espero que te haya ayudado a configurar el mobile first en Bricks y que lo apliques a todos tus proyectos a partir de ahora. Si te ha gustado, necesitas crear el proyecto de tu empresa en WordPress y te parece todo muy complicado, déjalo en manos de un diseñador web experto en WordPress y Bricks. Te ayudaré encantado a diseñar la web de tu empresa o negocio con un buen precio.
