Primeros pasos con Bricks Builder

Hace unos días tuve la oportunidad de dar un taller sobre Bricks Builder dentro de la Meetup de WordPress Málaga, una comunidad fantástica en la cual llevo participando muchos años. La Meetup era una primera aproximación y un overview sobre Bricks Builder, un maquetador visual para WordPress del que seguramente habrás oído hablar, y que yo particularmente definía en el título del evento como «El builder que jubilará a Elementor«.

Aparte de tirar de clickbait para subtítulo del taller, es que en realidad pienso que le puede hacer mucha sangre. Y permíteme que sitúe a Elementor como punto de referencia, porque está claro que es el gran dominador del mercado ahora mismo para aquellos que usamos builders… Hoy día Elementor tiene tal cuota de mercado en número de webs y usuarios, que constituye sin duda el rival a batir, con permiso de DIVI y por supuesto del editor de bloques (ejem, ejem)…

El rival a batir: Elementor

En nuestro Estudio llevamos más de 5 años utilizando Elementor como base en prácticamente todos los proyectos. En nuestra cuenta dentro de Elementor.com ya hemos superado la cifra de 220 webs conectadas, con lo cual ya puede decirse que nos podemos quitar la «L» de novatos y tenemos licencia para hablar claramente sobre las cosas que día a día nos gustaría que mejorasen. Y resulta que Bricks viene a cubrir muchos de esos puntos, dándoles otro enfoque y sobre todo ofreciendo un builder que satisfará tanto a usuarios que prefieren no picar código, como a usuarios con un perfil más de desarrollador.

Tengamos claro que Elementor, al ser tan masivo, se ha generado mala fama dentro del mundillo de WordPress. Los desarrolladores y los puristas no lo quieren ver, para empezar. Pero mucha de esta culpa la tiene su principal debilidad, que carga mucho código y las webs terminan volviéndose lentas, tanto a nivel de backoffice como de front. Esto es sobre todo resultado de malas prácticas, porque con buenas prácticas a Elementor podemos sacarle un PageSpeed de 99 o de 100; lo que sucede es que, cada vez más, nos encontramos a usuarios que se pasan instalando addons y complicándose la vida innecesariamente. Efectivamente, comparado con Gutenberg o Bricks, es lento, pero se puede optimizar es necesario optimizarlo.

La velocidad de carga: el gran problema de los Builders

Sus bondades, sus ventajas, el haber revolucionado el diseño web y haberle dado un gran empujón a WordPress, con Elementor todo ello queda eclipsado por la fama de lento que tiene… y por factores negativos está posicionándose como un builder para cuñados o «gente que no sabe».

Por todo esto nosotros, siempre en búsqueda de lo mejor, ya habíamos bicheado otras opciones como Oxygen, Breakdance o LiveCanvas, y no habíamos probado Bricks por el precio de entrada que tenía.

Pero después de dar nuestros primeros pasitos con Bricks y verlo por dentro, hicimos un ALL-IN y adquirimos la licencia Lifetime Unlimited, es decir, infinitos proyectos y suscripción para siempre.

En la empresa estamos en fase de aprendizaje continuo, de mejora permanente, y ya tocaba ir buscándole relevo a Elementor, sobre todo para proyectos que vayan a tener mucha visibilidad o con gran número de URLs, que requieran clases y estilos globales: instituciones públicas, entidades, agencias o marcas… cuando te piden un plus y marcar la diferencia en WordPress, Bricks seguramente nos dará ese puntito especial.

(Y también para que no venga el típico listo a decir: «Vaya, te han cobrado XXX por una mierda de web hecha con Elementor»)

Primeros pasos con Bricks Builder - elements
Bricks sin addons: más de 110 widgets a tu disposición

Después de unos meses de uso, podemos destacar estas ventajas que comparte con Elementor:

  • Facilita la maquetación
  • Es un Todo-en-1 (ahorras en plugins)
  • Tiene Flexbox CSS y Flexbox Grid
  • Tiene opciones experimentales
  • Está en evolución constante

El rendimiento: el gran feature de Bricks.

Pasemos a ver cómo puede mejorar Bricks el rendimiento de una web frente a Elementor, nuestro rival a batir.

Esto de arriba es una comparativa realizada por la gente de Crocoblocks para un mismo diseño realizado en Elementor y en Bricks…

Nosotros no hemos llegado a perder el tiempo en hacer el mismo diseño en 2 sistemas, pero ya que en nuestra empresa hemos estrenado web hace unos días, la hemos optimizado un poco con los presets básicos de WPO que usamos y ¡voilá! aquí tenéis el resultado:

No sé yo a vosotros, pero a mí me sirve.

ALERTA: Bricks es un theme, no un plugin

Pero tal vez hemos olvidado algo muy importante que reseñar: no es un plugin, es un Theme (con su correspondiente child-theme, claro).

  • No lo podrás utilizar con tu theme favorito (el nuestro es Astra Pro, por cierto)
  • Tendrás que hacer Full Site Editing con él… cabecera, footer, entradas…
  • Como te dije más arriba, es un ALL-IN: todo o nada. Decides montar una web con Bricks y ya en ese momento apuestas todas tus cartas y te lanzas a montarlo con un theme que ya no podrás cambiar en el futuro.
  • Te hipotecas para siempre…

Pero la buena noticia es que es tan ligero, el código que genera es tan limpio que es bastante mejor que el de Astra o GeneratePress… así que lo de diseñar el Full Site con él… casi ni tan mal.

De paso os digo que el maquetador de cabeceras y footers de Astra sigue teniendo muchos bugs y es desesperante a veces, también andábamos buscando un relevo a ese theme.

Pues volviendo al Full Site Editing, al usar Bricks Builder ya tendrás la opción de maquetar con él todos los elementos de tu web:

  • Header
  • Footer
  • Popups
  • Sidebars
  • Secciones, plantillas, bloques reutilizables
  • Archives y singles de cualquier CPT,
  • Woocommerce, tanto categorías como grids, páginas de producto, carrito, todo en general
  • Bucles y grids de cualquier CPT (se puede extender algunos bucles “built-in” como el de posts)
  • Página en construcción o mantenimiento
  • Resultados de búsqueda
  • Página 404
  • Crear y generar bloques para Gutenberg (chúpate esa)

Primer round de ventajas

Y si todo esto te produce agobio, piensa sobre todo en las siguientes ventajas que seguro que te convencerán:

HTML y CSS muy ligeros = DOM optimizado

El HTML que genera Bricks es tan ligero como si escribieses tú mismo el código, incluso a veces más ligero que Bootstrap. Y el CSS, como veremos, es un gustazo gracias a Flexbox.

El número de líneas de HTML en el DOM afectan a la puntuación PageSpeed, y Bricks literalmente hace magia en este sentido. Comparemos a continuación el código generado por Elementor y el de Bricks:

Requirements

En referencia al rendimiento, Elementor recomienda 768Mb de RAM en el servidor para funcionar correctamente. Bricks «solamente» pide 64Mb…

Flexbox CSS

Aunque los desarrolladores de Elementor se pusieron las pilas con el Flexbox CSS en los últimos dos años, el resultado no parece traducirse en mejoras de rendimiento. A nivel de código generado no hemos observado ventajas… las webs siguen pesando lo mismo con Secciones o con Contenedores. ¿Qué es lo que ha mejorado? El trabajar sobre todo con contenidos tipo grid… ahí sí se ha notado.

Seguramente en el futuro conseguirán optimizar, pero en este sentido Bricks les gana por la mano. Todos absolutamente todos sus widgets pueden utilizar propiedades Flexbox, y disponen de muchísimas opciones de CSS que se pueden configurar sin picar código.

Hasta 4 tipos de divs contenedores tiene:

  1. Sections
  2. Containers
  3. Divs
  4. Blocks

Y las posibilidades de convertir fácilmente de uno a otro, envolver cualquier elemento o copiar y trabajar con CSS para tener unos estilos más consistentes sin tener que editar CSS.

Propiedades CSS nativas y Global Class Manager

Si conoces CSS y pones el builder en Inglés, estarás más cerca del Nirvana, porque todas las propiedades de los diferentes bloques tienen el mismo nombre que en CSS, es mucho más fácil trabajar así…

Te darás cuenta nada más entrar de lo fácil que es trabajar así, pero además han añadido un Manager global de clases CSS que tiene muy buena pinta… de momento no hereda CSS personalizado que hayas puesto en el child theme o en WordPress, y tampoco puedes editar dentro de él, pero estas features están al caer…

Primeros pasos con Bricks Builder - bricks global class manager 1024x787 1

Al trabajar con clases CSS te quitas mucho código inline de en medio, pero además tendrás un estilo mucho más consistente, será más fácil cambiar estilos globalmente sin tener que andar copiando y pegando estilos de una página a otra, y en general tu vida será mucho más Zen.

Elementos anidados sin límite

Esto parece una obviedad, y no lo solemos usar en Elementor por la profundidad de DOM que produciría un efecto Inception importante… pero Bricks es tan ligero que podríamos anidar Divs eternamente si lo necesitáramos, con un código ligerísimo y sin ningún problema de conciencia.

Varias paletas, estilos globales

Para el carro ahí… esto es ultra-mega-importante.

Aquí Bricks es GAME-CHANGER de verdad. No solamente es que podamos tener varias paletas de color para todo el sistema, y elegir colores globales de una u otra, que está muy bien, está curioso…

El potencial verdadero está en la creación de themes globales. Un Theme-style global es la definición global de todos los estilos de cualquier widget, elemento o pseudo-class, si lo necesitas.

Por ejemplo, en el Theme-style puedes dar estilo al widget FAQs, a los diferentes Headings (sí, esto lo tenía Elementor), pero puedes además dar estilo a todos los tipos de botones que trae Bootstrap: primary, secondary, light, dark, alert, success, info, etc., o a objetos como diferentes tipos de links, los containers, los popups, los carruseles, formularios, icon-boxes, galerías, etc., de manera que tendrán unos estilos consistentes en toda la web.

O puedes crear diferentes Theme-styles y aplicarlos como quieras de manera condicional… ¿para qué sirve esto? Por ejemplo, si tu WP tiene landings o microsites dentro y te viene bien que tengan otro estilo por lo que sea, otras tipografías, un dark-mode, etc… te montas un Theme-style para eso, y tendrías como diferentes skins para aplicar donde te convenga.

La verdad es que esto será tremendamente útil a medida que lo vayamos descubriendo.

4 breakpoints responsive

Ya en Elementor puedes añadir más breakpoints para amargarte la vida a gusto, pero Bricks es que trae de manera predeterminada 4 y también puedes crear todas los que quieras… y hay una opción que te permite cambiar el breakpoint base sobre el cual trabajarás, y los demás heredarán.

Esto está muy bien para diseñar sitios Mobile-first, si es que alguien de verdad lo hace… a mí me parece una fantasmada, pero bueno, supongo que haberlas, haylas…

Second round de ventajas: ahórrate muchos plugins…

Verdad verdadera. Bricks, igual que Elementor, es un TODO-EN-1, te ahorras plugins auxiliares como FAQs, Mapas, Testimonials, Formularios…

Si en este momento la lectura estaba derivando en algo técnico y pesado, vamos con otro round de todo lo que viene incluido en Bricks, para que no te aburras:

  • Formularios y envíos
  • Google Maps
  • Custom fonts, custom icons
  • Gestor de sidebars (minipunto a favor)
  • Popups y Megamenus (Megamenús, seriously??)
  • Visibilidad condicional integrada de serie, sin addons
  • Filtros para navegación por facetas o instant search (in your face, JetFilters!)
  • Subida de SVG
  • Meta-title, meta-description, Opengraph integrado de serie. No necesitarás RankMath o Yoast para poner un no-index o para establecer la imagen de Opengraph.
  • Códigos PHP Custom: sí amigues, podréis ejecutar PHP dentro de un bloque, si os place. Adiós a tener que hacer un shortcode para una mini-función.
  • Sistema de plantillas privadas o públicas, locales o remotas
  • CSS Class Manager (ya hemos hablado de él más arriba, necesita mejoras pero tiene muy buena pinta)
  • Se integra con: Adobe Fonts, Google Recaptcha, Google Maps, Cloudflare, Mailchimp, Sendgrid, Facebook, Instagram…

He destacado en negrita lo que no tiene Elementor Pro de serie, y debería tener.

Vamos con más:

Integración con el Editor de Bloques, Gutenberg o la mierda esa

Nosotros no somos los más defensores de Gutenberg, pero si te empeñas en continuar por la senda del sufrimiento, se están creando plugins y addons que te permiten crear y editar bloques para Gutenberg, patrones y objetos reutilizables para el editor de bloques, en los cuales puedes diseñar la disposición y todo lo referente a estilos dentro de Bricks, y luego instanciarlo en el editor de bloques y cambiar solamente su contenido, manteniendo su vinculación con el padre y heredando cualquier cambio global que se haga.

¿Desea saber más? Visite Gutenbricks

Integración con plugins de terceros

Se integra con los principales plugins de WP: ACF, Crocoblocks, Pods, Woocommerce, LearnDash, etc.

Pero bien bien, eh? Y en cada actualización descubro nuevas mejoras para trabajar por ejemplo con JetEngine. Como se dice ahora, está basado.

Y como ejemplo, ya Crocoblocks todas las cosas que lanza las hace compatibles con Bricks, señal de que ya come en la misma mesa de Elementor y Gutenberg.

Pasarse de Elementor a Bricks

Hay convertidores de HTML a Bricks, Elementor a Bricks, Divi a Bricks, etc.

Yo he probado en particular uno de ellos y el resultado no me ha convencido, porque ha copiado todos los estilos y me hubiese gustado poder elegir o no esa opción… En particular no me atrae la idea de llevarme toda la morralla que mete Elementor en las páginas, así que estas conversiones mágicas, como que no…

Para estas migraciones, no hay nada como ir copiando texto a texto de uno a otro para hacer un trabajo fino.

ClonewebX by Softlite: Este es el servicio que yo probé, es de pago, pagué 1 mes para hacer un trabajo urgente y bueno, cumplió sin más… eso sí, las páginas que convertí no voy a intentar optimizarlas en el futuro, eso lo tengo claro.

Hay un proyecto llamado MoveToBricks que tiene una waitlist y seguiremos pendientes para cuando lo saquen.

Ya dispone de comunidad y base de usuarios, addons, themes, cursos, etc.

Aunque tampoco soy partidario de empezar a meterle addons, el hecho de que ya exista una comunidad y terceros desarrollando o ampliando las funcionalidades de Bricks para mí es una buena noticia.

Significa que ya está asentado en el mercado y que ha venido para quedarse.

Guárdate esta página de Start.me sobre Bricks, porque es oro puro la cantidad de recursos que hay dentro:

https://start.me/p/MbxMGe/bricks-links

Modelo de negocio para agencias

Si inicialmente puede parecerte lo contrario, el modelo de negocio de Bricks es bastante interesante para las agencias.

La licencia básica para 1 web cuesta 79$, que como precio de entrada es casi el doble que Elementor. Y es un theme que necesita licencia para poder trabajar, no se puede poner sin activar a no ser que te lo busques en lugares de dudosa reputación.

Primeros pasos con Bricks Builder - Pricing – Bricks

Nosotros empezamos probando con esa licencia de 79$, y en menos de una semana nos decidimos por la licencia Ultimate para sitios ilimitados y Lifetime, aprovechando un cupón que nos ofrecía un descuento importante.

También queremos resaltar que cuando lo adquirimos nosotros, la política de devoluciones era ilimitada, es decir, ¿se supone que en cualquier momento dentro de un año o dos, me van a devolver el dinero si decido que no me gusta? Porque ahora la han cambiado y la han puesto en 60 días.

A partir de ahora no tendremos que pagar ni un céntimo más por utilizar Bricks, sea cual sea el número de webs que hagamos con él… Nos has cascado el cuore, Bricks… In love total.

Recursos de interés

Pues bueno, ya vamos llegando al final del artículo y me gustaría dejarte los links que llevé a la Meetup. Deléitate con su carne.

Probar Bricks gratis

En primer lugar, no hay un Bricks Free como ocurre con Elementor. La única manera de probarlo sin pagar es crearte un espacio dentro de su plataforma de pruebas para bichear.

https://try.bricksbuilder.io/

MoveToBricks

El servicio que teóricamente en el futuro permitirá convertir a Bricks de manera sencilla.

https://www.movetobricks.com/

GutenBricks

Este plugin de pago que citaba antes, para crear bloques para Gutenberg con Bricks.

https://gutenbricks.com/

Canal de Dave Foy en Youtube

Dave Foy, el creador de GutenBricks, tiene un glorioso canal de Youtube con montones de vídeos sobre Bricks. Visítalo a menudo para conocer todas las locuras que se le ocurre hacer con Bricks.

https://www.youtube.com/@DesignBuildWeb

Bricks en Start.me

Un directorio con recursos, addons y tutoriales de todo tipo para Bricks.

https://start.me/p/MbxMGe/bricks-links

La Máquina del Branding (Yannick García)

Seguramente ya conoces el canal Youtube de Yannick, él lleva tiempo hablando de Bricks y tiene un curso estupendo dentro de su academia. 100% recomendable, como todos sus cursos.

https://www.youtube.com/channel/UCGegFMGDweSDg2QztyKmtNw

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio