Bricks Builder para WordPress, ventajas y desventajas

Qué es Bricks Builder

Es un tema para WordPress que te permite diseñar toda la web. Por eso es más acertado decir que es un maquetador full site.

Resumiendo mucho, Bricks te ofrece lo siguiente:

• Podrás crear webs super rápidas que cumplen con los requisitos de Google (Core Web Vitals) sin necesidad de invertir tiempo en optimizaciones.
• Tiene una interfaz muy bien organizada similar a la de Elementor
• Tiene funciones muy potentes que te permiten crear casi cualquier tipo de web

Hay que decir también que está orientado a desarrolladores y diseñadores con algo de experiencia. Si eres un recién llegado al mundo del desarrollo web, quizás necesites explorar otras opciones.

Cómo funciona Bricks Builder

Bricks es un tema, no un plugin. Esto ya puede ser un inconveniente para algunas personas.

Por ejemplo, si trabajas con Elementor tienes la ventaja de poder combinar un tema y un plugin maquetador. De esta forma el tema se encarga de dar diseño a cabecera, footer, blog y alguna cosa más, mientras el maquetador se usa para diseñar página de inicio, landing pages y otros.

Con Bricks necesitas aplicar tu diseño a todo el sitio, lo que puede suponerte un tiempo y dificultad extra.

Que conste que me encanta Bricks, ¡solo te estoy advirtiendo de lo que supone usarlo!

Si tu idea es instalar una plantilla y hacer cambios aquí y allá, también tienes esa opción. Bricks incorpora un sistema de plantillas del que hablaremos más adelante.

El maquetador de Bricks Builder

Nuestro amigo Bricks ha ganado popularidad por varias razones, pero quizás la principal es lo apañado que está su interfaz.

Puedes probarla en su «playground» gratuito.

Aquí es donde su ultra-experimentado creador, Thomas Ehrig, ha mostrado su conocimiento para extraer lo mejor de otros maquetadores y no caer en sus errores.

Sí, la interfaz recuerda a Elementor, a Oxygen Builder y a otros, pero organizada de forma ingeniosa.

Haciendo un recorrido encontramos lo siguiente:

Panel de elementos

En el panel de la izquierda habitan los elementos. Tienes la opción de fijar arriba tus favoritos usando la opción de pin.

También puedes ocultar los que no te interesen usando unas pocas líneas de código.

Canvas

Es el espacio donde arrastras y sueltas los elementos.

Cuando haces clic en uno de los elementos, el panel cambia para mostrarte las opciones repartidas en dos pestañas: «contenido» y «estilo».

Panel de estructura

En el panel de la derecha puedes reordenar los elementos y cambiarles el nombre.

Puedes arrastrar un elemento desde el panel de elementos hasta el panel de estructura, lo que en ocasiones te ahorra tiempo.

También puedes copiar un grupo de elementos desde otra página y pegarlos. ¡Esto puede salvarte la vida directamente!.

Barra de herramientas

En la parte superior encuentras una barra con varios enlaces directos.

Puedes cambiar la vista para ajustar el diseño responsive.

Desde la barra de herramientas también puedes configurar y añadir breakpoints, la opción mobile first y manejar las pseudo-clases CSS. Que son opciones chulísimas, pero si no eres desarrollador no vas a entender qué significan.

Lo más destacado para diseñadores

Si tienes un perfil de diseñador gráfico que en ocasiones se atreve con un diseño web, o bien eres un usuario de WordPress al que le gusta «cacharrear» estás son las funciones más interesantes para ti:

• Más de 50 elementos para maquetar
• Copiar y pegar. Puedes copiar y pegar elementos individuales o contenedores completos (incluyendo todos sus elementos secundarios) y se copiará y pegará todo el contenido y estilos.
• Visualización rápida de cambios. Bricks te permite abrir una pestaña para visualizar los cambios que se actualiza de forma automática al darle a guardar. Todo un lujo.
• Estilos globales. Crea estilos globales para tipografía y colores y aplícalos a todo el sitio. También puedes aplicar estilo global a los elementos, por ejemplo botones y secciones, ahorrando mucho tiempo.
• Control de interacciones. Te permiten configurar la aparición de popups, banners y otros elementos en base a cualquier parámetro. O bien disparar animaciones al hacer scroll o al interactuar con el ratón.
• Otras opciones de diseño. Posibilidad de guardar varias paletas de colores, gradientes, divisores de forma personalizados e integración con Unsplash para añadir fotos de stock de forma rápida

Lo más destacado para desarrolladores web

Si eres un valiente al que no le asusta el código ni la jerga técnica, estas son las funciones que te encantarán:

• Clases CSS globales. Esto estaba solo disponible en Oxygen Builder y supone una ventaja enorme. Permite trabajar de forma más ordenada, crear diseños más consistentes y generar un código CSS más ligero. ¿Cuál es la magia de las clases CSS globales? Puedes asignar varias propiedades a una clase (padding, color de fondo, borde, tipografía) y cuando añades la case a un nuevo elemento se aplican todos los estilos.
• Flexbox y CSS Grid. Tanto Flexbox como CSS Grid están pensados para maquetar de forma ordenada y eficaz. Permite trabajar mejor el diseño responsive cuando hay que poner orden y fijar tamaños a secciones, columnas, tarjetas y demás. Si eres desarrollador web, en algún momento te va a tocar aprender a usar estas características de CSS, así que es bueno saber que Bricks las incorpora.
• Datos dinámicos sin restricciones. Los datos dinámicos permiten sacar la información de un post (título, imagen destacada, contenido, metadatos) y así poder maquetar, por ejemplo, un listado de noticias con total libertad. Con Bricks puedes sacar datos dinámicos de posts, páginas, custom posts types, taxonomías o incluso obtener datos usando tus propias funciones PHP.

• Query loops. En ocasiones necesitas pedirle a WordPress un conjunto de información concreta, por ejemplo, «todas las noticias de la categoría viajes ordenadas por fecha». Esa consulta puedes hacerla con los Query loops predefinidos por Bricks. También vas a poder definir tus propias funciones PHP para obtener exactamente los datos que necesites, pero si dispones del plugin JetEngine de Crocoblock vas a poder hacerlo de forma mucho más cómoda.
• Lógica condicional. ¿Necesitas ocultar una sección de contenido a algunos usuarios? ¿quieres que un banner aparezca unas fechas concretas? para estos casos y muchos otros necesitas la lógica condicional incluida en Bricks.
• Posibilidad de trabajar mobile first. El concepto mobile first consiste en diseñar primero para dispositivos pequeños e ir aplicando ajustes a los dispositivos más grandes. Requiere un cambio de planteamiento a la hora de maquetar, pero puede tener un impacto positivo en el rendimiento de la web en dispositivos móviles. Además, te obliga a prestar más atención al diseño móvil, el cual suele ser el consumido por la mayoría del tráfico de una web.
• Posibilidad de usar breakpoints a medida. Si eres ultra-perfeccionista con tus diseños, vas a querer asegurarte de que se ven bien en cualquier pantalla y resolución, incluyendo tamaños a los que nadie presta atención como laptops pequeños o televisores grandes.
• Creación de menús de navegación potentes. En las últimas versiones, Bricks está mejorando los elementos que permiten crear los menús de navegación. En este momento es posible crear un megamenú con cualquier diseño que se te pueda ocurrir. En cuanto a la navegación para móvil, creo que todavía quedan detalles por pulir.
• Construido con la última tecnología. Si estás al tanto de los últimos avances en frameworks modernos de JavaScript, quizás te interese saber que Bricks está creado usando la tecnología de Vue.js lo cual permite al equipo de desarrollo sacar actualizaciones de forma rápida generando un código de gran calidad.

Recursos para Bricks Builder

La comunidad de usuarios y el número de empresas que desarrollan extensiones o plantillas para Bricks es aún pequeña. Nada que ver con el enorme ecosistema que ha generado Elementor o Gutenberg.

Bricks incorpora unas cuantas plantillas prediseñadas divididas en diferentes secciones: cabecera, footer, archivo, etc. Son pocas y tampoco tienen un diseño extraordinario. Aquí la idea es que crees tu propio sistema de plantillas que puedas modificar para cada proyecto.

👉 Mira mi selección de plantillas gratuitas y otros recursos para Bricks Builder.