Configurar el Mobile First en Bricks Builder

Bien cómo ya sabrás el diseño web en «mobile first» no es solo una tendencia,…

configurar-movil-first-bricks-builder-wordpress

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

pestaña-ajustes-bricks-builder

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.

activar-breakpoints-en-bricks-builder

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

desplegar-breakpoints-bricks

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.

editar-mobile-first-bricks-builder

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.

habilitamos-movil-first-wordpress-bricks-builder

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.

habilitado-mobile-first-bricks-builder

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ñadiendo-dispositivos-bricks-mobile-first

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

¿Necesitas ayuda con tu Web o SEO?

Contacta para presupuesto y comentamos la jugada juntos..
¡Contacta!

Artículos recientes

Páginas web corporativas a 👋 medida

Servicios web para tu negocio..

Artículos relacionados