Bien cómo ya sabrás el diseño web en «mobile first» no es solo una tendencia, sino una necesidad en el mundo donde el 90% de tráfico de tu web proviene de dispositivos móviles. Y si no tienes tu web así, 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 poderoso y clavado, antes con Elementor era un drama cuadrar todo esto. Aunque si es verdad, que existen hoy en día algunos métodos que se adaptan según el tipo de pantalla añadiendo CSS.
🚀 ¿Qué significa el «Mobile First» en primer lugar?
Pues básicamente que tu diseño web esta pensado primero para dispositivos móviles y tablets. Y luego ya realizas los ajustes pertinentes en pantallas como tablets más grandes y ordenadores. Este enfoque te permite que la experiencia de usuario en móviles se perfecta y prioritaria. Y lo mejor de todo que también afecta al SEO de manera positiva.
➡ 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 breadpoints por default que ofrece Bricks y lo que hacemos es en pinchar en «Mobile portrait» en el lápiz para editar.
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 ya pinchamos en el 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 y necesitar crear tu proyecto en WordPress para tu empresa 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..
m
