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..
negocio
