Funcionalidades del constructor visual Bricks

Veamos primero cómo se nos presenta el producto oficialmente, y luego haremos nuestro propio tour personal.

¿Qué lo hace tan distinto?

Bricks sin dudas tiene particularidades que lo transforman en un Tema/Constructor fuera de serie. A continuación veremos sus puntos más significativos.

Comencemos por el principio: los Ajustes de Bricks.

Tipos de Entradas

En el primer recuadro, “Tipos de Entradas”, podemos decirle a Bricks qué tipos de contenido pretendemos maquetar con él. Esto de por sí es una ventaja dado que estaremos optimizando el tamaño de nuestros archivos para aliviar su carga cuando no necesitemos Bricks en una categoría de contenido.

Ejemplo: si tenemos instalado WooCommerce, en el recuadro de Tipo de Entradas veremos la opción Productos. Para los casos en que sólo pretendamos usar el builder Bricks con los productos, pues tildaremos dicha opción. Si vamos a usarlo en Páginas, añadiremos dicha opción. Dejando destildado Entradas nos aseguramos que nuestro Blog no sea recargado con CSS adicional de Bricks (es decir que usaremos Gutenberg para diseñar las Entradas, lo cual es recomendado).

Datos de Gutenberg

En el recuadro “Datos de Gutenberg” tenemos herramientas para convertir los datos de Gutenberg en datos de Bricks, y viceversa. Es decir, logramos una transformación de los bloques para hacerlos compatibles en una u otra dirección según qué constructor (Bricks ó Gutenberg) querramos usar.

Carga de SVG

Dado que los archivos de imagen SVG son factibles de contener código malicioso, en este recuadro podemos elegir qué clase de usuarios en nuestro WordPress podrán gestionar este tipo de archivos (por ejemplo, sólo los administradores).

Vale mencionar que Bricks contiene un detector natal de código malicioso para los SVGs. Al subir un archivo de este tipo, Bricks lo escaneará y limpiará en caso de detectar un virus.

Varios

En el recuadro de “Varios” nos encontramos con opciones avanzadas para las que usualmente requeriríamos de plugins. Por ejemplo, Bricks contiene herramientas SEO natales (por ejemplo, para generar los METAS), y, por eso, en este recuadro podríamos desactivar dichas funcionalidades si pretendemos usar un plugin como Yoast u otro.

Otra opción interesante a considerar en este apartado es la posibilidad de activar tamaños personalizados para las imágenes (es decir que podemos subir imágenes grandes pero adecuarlas al tamaño de una puesta, lo que da por resultado otra imagen con un peso menor).

Acceso al constructor

Saltemos ahora a la solapa siguiente: Acceso al constructor.

Nuevamente tenemos en nuestras manos un control atípico en los builders tradicionales. Para cada rol de usuario dentro de WordPress, podemos escoger qué permisos puntuales poseerán de Bricks. Por ejemplo, para un Editor, ¿qué libertades o reestricciones otorgamos? Podemos elegir que un Editor sólo pueda editar contenido, pero no modificar estilos (ver captura inferior).

Plantillas

En la solapa Plantillas encontramos ajustes interesantes; por ejemplo, la primera opción “Desactivar las plantillas por defecto”, hace que Bricks NO emplee sus prediseños para nuestro blog o para páginas de productos (cosa que por defecto sí hace).

La siguiente opción, Plantillas Públicas, coloca nuestras plantillas en una nube para que tengan acceso desde otros sitios web nuestros. Es decir que Bricks permite subir nuestras maquetaciones a un repositorio al cual podemos acceder desde todos nuestros sitios añadidos al campo Lista Blanca de URLs. Y hasta podemos proteger esos diseños con contraseña (campo inmediatamente inferior).

Por su lado, en Plantillas Remotas, la URL ingresada nos permitirá tomar de allí las maquetas guardadas.

Constructor

En dicha solapa visualizaremos los ajustes propios del builder o maquetador. Allí podemos desactivar el autoguardado (NO recomendado), cambiar el lapso de tiempo entre cada autoguardado y también elegir si queremos usar el constructor en modo Claro, Oscuro o Personalizado (con nuestros propios colores a gusto). Nótese que para Personalizar el constructor debemos ingresar código CSS cuyo campo se habilita ni bien elegimos dicha opción. Quizás invertir tiempo en eso no sea lo más conveniente, pero no queríamos dejar de mencionar esta particularidad de Bricks que también le da una identidad propia.

En esta sección también podemos elegir el idioma del Constructor, y es conveniente porque muchos desarrolladores prefieren ver las interfaces en inglés. Puede ser por acostumbramiento, o porque en general los tutoriales que encontramos están en idioma en inglés (y por ende seguir una guía para lograr algo en Bricks si la interfaz la tenemos en español es más complicado).

También podemos personalizar adónde conduce un clic sobre el logotipo de Bricks en la interfaz.

Si elegimos Vista en el frontend, el enlace del logo nos previsualizará el diseño de la pantalla. Pero también podemos elegir algo totalmente diferente como saltar al Escritorio de WordPress, ir a la Home o Editar la puesta.

Rendimiento

Las opciones de esta solapa sirven para mejorar un poquito la velocidad del sitio. Por ejemplo, podemos deshabilitar los emojis, la incrustación tipo Embed (por ejemplo para videos de YouTube), las fuentes de Google, el Lazy Load, etc.

Modo de Mantenimiento

Sencillamente, nos permite poner nuestro sitio offline con un cartel de aviso, útil para páginas en construcción o bien cuando realizamos justamente una tarea de mantenimiento como actualizar o modificar alguna base de datos.

Claves API

En esta sección podemos gestionar diferentes claves API. Por ejemplo, podemos ingresar claves para usar ReCAPTCHA en comentarios o formularios, usar Google Maps, Adobe Fonts, etc.

Mención especial a Unsplash, que es una comunidad de fotógrafos que nos permite usar sus fotografías gratis. Este servicio está integrado a Bricks de modo que cualquier foto que querramos se descarga directamente a la librería de WordPress.

Para empezar a usar Unsplash, debemos primero obtener una cuenta. Ver las instrucciones aquí.

Código Personalizado

En esta sección encontramos herramientas y también campos disponibles. Entre las herramientas aparece en primera instancia una atípica: Bricks nos permite revisar todo el código de nuestra web incluyendo el de los archivos de medios SVG (como mencionamos antes, los mismos son factibles de contener código malicioso -sobre todo si bajamos estas imágenes desde Internet).

Otra particularidad única de Bricks es que podemos activar la ejecución de código en las puestas según el rol de usuario (es decir, podemos limitar la inserción de código a los Administradores pero excluir Editores, Autores y demás).

Por otro lado, en este apartado es posible no solamente incorporar los típicos códigos CSS adicionales sino incluso añadir scripts (secuencias de comandos) en el Encabezado, Pie de Página o Cuerpo del diseño. Esto es útil por ejemplo para cuando necesitamos incorporar el código de Google Analytics (también puede que nunca necesitemos entrar a este apartado si es que usamos Site Kit para las analíticas).

Estilos Globales

Los Estilos Globales son el recurso para agilizar nuestro diseño a través de fuentes y colores que vamos a reutilizar a lo largo y ancho del contenido.

Bricks tiene dos apartados para esto. El primero, las fuentes personalizadas. Acá podemos subir nuestras fuentes woff, woff2 y ttf y su gestión es súper poderosa.

Por ejemplo, vamos a añadir Montserrat: presionaremos el botón de Añadir nuevo y luego escribimos su nombre, tras lo cual podremos añadir cada una de las variantes que pretendamos usar en nuestro sitio.

Al hacer clic sobre el botón Editar en la variante seleccionada, podremos cargar nuestros archivos (con que subamos un tipo de archivo es suficiente, y recomendamos el woff2 por su eficiente compresión).

El botón azul de Añadir una variante de fuente nos permitirá ir cargando los estilos necesarios (ejemplos: negrita, itálica, extra negrita, etc.).

Luego tenemos los Estilos Globales en sí, pero para definirlos debemos entrar al Editor de Bricks.

Una buena práctica es crear una plantilla básica, llamándola “Estilos Globales”, donde podremos configurar y hacer pruebas a antojo.

Tras este paso ingresaremos al constructor de Bricks. Allí debemos ubicar el ícono de engranaje y nos encontraremos con todas las clases de ajustes que podemos establecer, incluyendo márgenes, SEO, redes sociales y hasta crear condiciones para que un estilo determinado se muestre en la clase exacta de contenido que deseemos.

En este momento, para crear los Estilos Globales, debemos seleccionar Obtener Estilos de Temas.

A diferencia de los estilos globales de otros builders, Bricks nos permite crear colecciones de estilos. Por ejemplo, podemos crear un nombre “Estilos Generales” y otro grupo con otro nombre específico dado que podemos aplicar Condiciones para uno u otro.

Tras este paso, veremos todas las opciones para crear estilos (y, si lo requerimos, crear condiciones para los mismos).

Mención especial a los colores, cuyos nombres nos permitirán diseñar con mayor profesionalismo y además hay un surtido más que suficiente para enriquecer cualquier tipo de diseño.

Pero también podemos crear nuestras propias paletas adicionales. Haciendo clic en el ícono señalado en la captura inferior podemos crear, por ejemplo, una paleta llamada “Colores corporativos” o lo que se nos antoje.

En las capturas inferiores vemos una pequeña muestra de la cantidad de ajustes globales en Bricks: podemos literalmente crear estilos para cualquier widget o elemento de maquetación con una libertad que ningún otro constructor tiene hoy a la fecha.

Recordemos elegir como condición de los Estilos creados que apliquen a todo el sitio web (que es lo usual).

Cabeceras

Para crear la cabecera de nuestra web, iremos a Mis Plantillas → Añadir nuevo y le pondremos el nombre de “Cabecera” para inmediatamente después elegir Cabecera en el menú desplegable. Nótese que, de igual manera, procederíamos para crear el Pie de Página, nombrando la nueva plantilla acorde y seleccionado “Pie de Página” justo debajo de la opción de Cabecera. Pero volvamos al asunto de la Cabecera.

Haremos clic sobre el botón azul de Publicar e inmediatamente a amarillo de Editar con Bricks.

Bricks recuerda mucho a Elementor, si bien tiene más opciones, más posibilidades, y es mucho, mucho más rápido. Para añadir elementos basta arrastrar y soltar, tiene clic derecho para ver el menú de opciones de cada elemento, y así podemos duplicar, borrar, editar, copiar estilos para pegarlos sobre otro elemento, etc.

La columna de la derecha nos mostrará la Estructura, es decir la lista de elementos y widgets que vamos colocando en nuestro diseño (en la captura superior está vacía porque por ahora no hemos añadido ningún bloque de diseño).

Para arrancar, también podemos hacer clic sobre el ícono central señalado en la captura superior, lo que nos colocará un contenedor para crear nuestro encabezado. Hecho este paso, podemos proseguir añadiendo un logo.

Luego:

Al seleccionar el bloque añadido con la leyenda “No has seleccionado ninguna imagen”, podremos acceder a la barra de herramientas del elemento, en donde lo primero será cliquear sobre “Seleccionar Imagen”. Esto nos llevará a la ventana emergente de Medios de WordPress para elegir una imagen cargada o bien subir una nueva.

Seleccionado nuestro logo, podemos ingresar a la sección de Estilo para darle aire, redimensionarlo, configurar un ancho mínimo o máximo y demás.

Tras este paso podemos añadir otro contenedor para incorporar nuestro menú de navegación.

Insertado un contenedor dentro del anterior, procedemos a añadir el elemento del Menú (Nota: aunque el contenedor aparezca debajo luego podremos reubicarlo gracias a los ajustes tipo flex).

A continuación señalamos qué ajustes hemos tocado para poder alinear el menú con el logo según nuestra preferencia (aprovechando las bondades flexbox de Bricks).

Recordemos que el sentido de ver, paso a paso, cómo gestamos una cabecera típica tiene su fundamento en entender las mecánicas de Bricks para poder crear luego cualquier otro tipo de contenido.

Creado nuestro encabezado, añadiremos su condición. En este caso, que se vea en todo el sitio.

Siempre guardemos todo cambio presionando CTRL+S (o bien utilizando el ícono del diskette en el extremo derecho de la barra superior de herramientas).

Sistema de plantillas: diseñando nuestras Entradas

Veamos ahora, en esta guía introductoria de Bricks, cómo crear una plantilla para las Entradas. Ubiquemos el atajo de Plantillas como se enseña en la captura inferior. Haremos clic.

A continuación, otro clic sobre el ícono de +

Elegimos el Tipo de plantilla; en este caso, Individual, es decir nuestra plantilla para publicar contenido de posts.

Le colocamos un nombre (para este caso, “posts”) y así se nos activará el botón que debemos cliquear, Crear Plantilla.

Ahora se añadirá a la lista de Plantillas creadas y podremos editarla.

De nuevo dentro del editor de Bricks, comenzaremos por añadir un campo para el nombre de la Entrada. El mismo será dinámico (es decir, nuestra plantilla debe buscar el nombre del Post en la base de datos). Esto es fácil de hacer en Bricks: comencemos añadiendo un Encabezado.

Tras este paso, seleccionaremos el Encabezado para poder ver sus opciones. Podemos cambiar la Etiqueta HTML de H3 (por defecto) a H1, pero lo más importante es que le digamos a Bricks que el contenido de nuestro encabezado, es decir el texto, será dinámico. Observemos la captura inferior.

Seleccionaremos “Título de Entrada” en el menú desplegable y listo. Recordemos borrar “Soy un Encabezado” pero dejar intacto {post_title}

Seleccionando la solapa de Estilo podremos darle el aspecto que se nos antoje.

Ahora vamos a insertar la Imagen de portada de nuestro post, es decir la “Imagen destacada” según WordPress. Para eso buscaremos el elemento de imagen y haremos clic para añadirlo. Luego, haremos clic sobre el ícono azul con la leyenda “No has seleccionado ninguna imagen”.

A continuación, nuevamente le diremos a Bricks que la imagen es un contenido dinámico que debe ser buscado automáticamente en la base de datos. Para eso, nuevamente haremos clic sobre el ícono señalado en la captura inferior.

Y seleccionaremos Imagen destacada en el menú desplegable.

Añadiendo el elemento de Meta datos incorporaremos el nombre del Autor, la fecha y los comentarios.

En la solapa CONTENIDO podemos decidir qué mostrar o no, y en ESTILO personalizaremos el cómo.

Ahora añadiremos el contenido del Post. Recordemos que gracias a la solapa ESTILO le daremos el aspecto que deseemos, incluyendo tipo de letra y tamaño, interlineado y márgenes.

Luego, si lo deseamos, la foto y bio del autor.

El paso siguiente es el más importante de todos: debemos especificar que esta plantilla es el diseño para todas nuestras Entradas. Para ello, primero haremos clic sobre el ícono del engranaje y seleccionaremos Ajustes de Plantilla.

En Condiciones, elegiremos Tipo de Entrada del menú desplegable.

Y en el desplegable de Tipo de entrada seleccionaremos Entradas.

Recordemos Guardar. Así, podremos entrar a cualquier Entrada creada y ver los cambios (y realizar ajustes de márgenes y estilo, de ser necesario).

Concluyendo

Vimos algunas de las proezas elementales de Bricks, su gigante capacidad de diseño y versatilidad. No en vano es el constructor que, a pesar de ser relativamente nuevo, viene siendo tendencia en adopción. Comparado con Elementor, es muchísimo más rápido y ofrece el doble de posibilidades y funciones. Oxygen se le parece mucho pero también pierde en la cantidad de posibilidades que brinda.

Necesita mejorar su traducción al español, eso es cierto. Tampoco tiene una versión gratuita (como sí ofrece Elementor).

Es aliado de WooCommerce y de Jetpack, este último empleado por muchos desarrolladores para insertar, por ejemplo, consultas dinámicas a la base de datos dentro de la maquetación.

¿Es difícil de usar? Sí y no. Lo cierto es que, al ofrecer más posibilidades de configuraciones y personalización (comparado con Elementor), es evidente que en una primera impresión puede marearnos un poco. Sin embargo, lo recomendamos encarecidamente: es un viaje de ida.

Bricks se incluye gratuitamente en nuestros servicios de Mantenimiento de WordPress.