Crear un sitio en WordPress no tiene por qué ser una tarea desalentadora, incluso si eres principiante. Con las herramientas y la orientación adecuadas, puedes tener rápidamente un sitio web atractivo y totalmente funcional.

Esta guía te muestra cómo crear un sitio de WordPress utilizando Bricks Builder, un potente creador de temas que ofrece amplias posibilidades de personalización sin escribir una sola línea de código.

Visión general de Bricks Builder

Bricks Builder es un constructor de sitios visual que permite a los usuarios crear sitios web responsivos y personalizados directamente dentro del entorno de WordPress. Está diseñado para mejorar la experiencia del usuario, ya que se integra a la perfección con WordPress, permitiendo a principiantes y desarrolladores experimentados construir sitios web visualmente a través de una interfaz de arrastrar y soltar.

A diferencia de Elementor y otros constructores de sitios, Bricks es un tema, no un plugin. Incorpora casi todas las funcionalidades, mientras que otros constructores de sitios utilizarían plugins adicionales.

Cuenta con una experiencia de edición front end en vivo, lo que significa que puedes ver tus cambios en tiempo real mientras ajustas los elementos de diseño y la disposición.

Interfaz de edición en tiempo real de Bricks.
Interfaz de edición en tiempo real de Bricks.

Proporciona un completo conjunto de herramientas que incluye plantillas prediseñadas, una amplia gama de elementos de diseño y opciones avanzadas de personalización para un desarrollo web más detallado.

Además, Bricks Builder admite datos dinámicos, lo que permite a los usuarios crear fácilmente sitios web basados en datos e integrar contenidos dinámicamente en sus plantillas.

Ventajas de usar Bricks para WordPress

Bricks Builder destaca por su rendimiento y flexibilidad. Es una alternativa más reciente y robusta que otros constructores, ya que ofrece:

  • Velocidad — Bricks es increíblemente rápido y ligero.
  • Facilidad de uso — La interfaz es intuitiva, por lo que resulta fácil tanto para principiantes como para profesionales.
  • Personalización — Bricks ofrece una gran capacidad de customización mediante CSS y JavaScript personalizados y es compatible con una amplia gama de plugins de WordPress.

Cómo empezar con Bricks

Bricks es un tema premium que requiere una suscripción de pago. Para utilizarlo, debes adquirir uno de sus planes. Una vez realizado el pago, puedes descargar un archivo zip desde tu panel de control que puedes subir a tu sitio de WordPress, junto con una clave de licencia que activa Bricks dentro de tu instalación de WordPress.

Panel de control de Bricks para descargar el tema Bricks.
Panel de control de Bricks para descargar el tema Bricks.

Tras instalar el tema Bricks, aparecerá un nuevo elemento de menú Bricks en tu panel de control de WordPress.

Para activar tu licencia, ve al panel de control, haz clic en Activar licencia, introduce la clave de licencia de tu cuenta de Bricks y haz clic en Activar. Esto habilitará la funcionalidad completa del tema Bricks.

Configura la licencia del tema Bricks para activar el tema.
Configura la licencia del tema Bricks para activar el tema.

Si quieres probar Bricks antes de comprometerte a comprarlo, puedes crear una cuenta de prueba en try.bricksbuilder.io. Esta plataforma proporciona acceso a un sitio de WordPress preconfigurado con Bricks instalado, lo que te permite explorar sus funciones y capacidades sin coste inicial.

Bienvenido a la interfaz del panel de control de Bricks WordPress.
Bienvenido a la interfaz del panel de control de Bricks WordPress.

Cómo lanzar el constructor de páginas Bricks

Para diseñar una nueva página con el constructor de páginas de Bricks, ve a Páginas > Añadir Nueva o haz clic en una página existente. Puedes iniciar el editor de Bricks haciendo clic en Edit with Bricks.

Lanza el constructor de páginas Bricks haciendo clic en Editar con Bricks.
Lanza el constructor de páginas Bricks haciendo clic en Editar con Bricks.

Ahora puedes arrastrar elementos desde el panel Elementos para diseñar tu página.

Comprender la interfaz de Bricks

La interfaz de Bricks ofrece una integración perfecta con el entorno de WordPress.

Etiquetado de la interfaz de Bricks para entender qué significa cada sección
Etiquetado de la interfaz de Bricks para entender qué significa cada sección

Aquí tienes un resumen de su interfaz principal:

  • Espacio de trabajo del constructor — El área principal de Bricks es el espacio de trabajo del constructor, que es una representación visual de tu sitio web. Aquí puedes interactuar directamente con tus páginas, arrastrando elementos a su lugar, cambiando su tamaño y reorganizando los componentes.
  • Barra de herramientas — En la parte superior del espacio de trabajo, la barra de herramientas proporciona acceso rápido a funcionalidades esenciales como guardar tu trabajo, previsualizar tu sitio y acceder al menú de configuración y a los controles de respuesta.
  • Panel de elementos — En la parte izquierda de la interfaz, el panel de elementos es tu caja de herramientas. Contiene todos los bloques de construcción que puedes utilizar en tu sitio, como cuadros de texto, imágenes, botones y más. Puedes arrastrar estos elementos desde el panel directamente a tu página.
  • Vista de estructura — A menudo situada junto al panel de elementos o como un conmutador dentro de él, la vista de estructura proporciona un esquema jerárquico de tu página. Esta vista es especialmente útil para comprender la disposición y profundidad de los elementos de tu página, permitiéndote seleccionar y editar fácilmente los elementos anidados.

Utilizar fuentes personalizadas en Bricks

Bricks ofrece la interesante función de permitirte cargar fuentes personalizadas en tu sitio de WordPress. Para ello, ve a Bricks > Custom Fonts.

Usar fuentes personalizadas en Bricks.
Usar fuentes personalizadas en Bricks.

Esta sección te permite subir tus archivos de fuentes en varios formatos, incluyendo WOFF2, WOFF o TTF. También puedes subir distintas variaciones de fuentes, como thin, semi-bold, normal y bold.

Para añadir una fuente personalizada, haz clic en Add new. A continuación, introduce un nombre para la fuente en el campo Add title. A continuación, selecciona la variante de fuente que deseas subir, elige el estilo de fuente y haz clic en Editar.

Añade detalles de la fuente y sube distintas variantes de fuente.
Añade detalles de la fuente y sube distintas variantes de fuente.

Aparecerá un desplegable con campos para subir el archivo de la fuente. Selecciona tu archivo de fuente y cárgalo. Puedes repetir este proceso haciendo clic en Añadir una variante de fuente para tantas variantes como sea posible. Por último, haz clic en Publicar.

Página de fuentes personalizadas de Bricks.
Página de fuentes personalizadas de Bricks.

Para aplicar tu fuente personalizada recién cargada al texto de tu sitio de WordPress, sigue estos pasos:

  1. Ve a la página en la que quieras utilizar la nueva fuente y haz clic en Edit with Bricks.
  2. Haz clic en el texto que quieras cambiar.
  3. Aparecerá información sobre el texto seleccionado en el panel izquierdo. Haz clic en STYLE.
  4. Despliega el desplegable TYPOGRAPHY para ver más opciones.
  5. En el campo Font family, explora las fuentes disponibles, incluidas las fuentes de Google y tus subidas personalizadas.
  6. Selecciona tu fuente personalizada de la lista para actualizar tu texto inmediatamente.

Ahora, tu texto se mostrará utilizando tu fuente personalizada, dando a tu página un toque personalizado.

Utiliza la fuente personalizada de Bricks en la interfaz de Bricks
Utiliza la fuente personalizada de Bricks en la interfaz de Bricks.

Utilizar plantillas en Bricks

Las plantillas son una característica fundamental de Bricks y existen de varios tipos, como cabeceras, pies de página y diseños de entradas de blog. Estas plantillas pueden abarcar desde una sola sección, como la cabecera de un sitio web o una sección principal, hasta contenido de página completa, como diseños de entradas de blog, páginas de archivo, resultados de búsqueda y páginas de error.

Crear una plantilla

Para crear una plantilla:

  1. Ve a Bricks > Template en tu panel de control.
  2. Elige entre añadir una plantilla nueva o importar una existente.
  3. Haz clic en Add new, selecciona el tipo de plantilla y, a continuación, elige Edit with Bricks.

    Crear una nueva plantilla para tu Bricks Builder.
    Crear una nueva plantilla para tu Bricks Builder.

Aplicar plantillas

Para aplicar una plantilla a una página

  1. Navega hasta la página en la que quieras utilizar la plantilla.
  2. Haz clic en el icono Template (carpeta) de la barra de herramientas del constructor para abrir la sección de plantillas.

    Aplicar plantillas a páginas Bricks.
    Aplicar plantillas a páginas Bricks.

  3. Aquí puedes acceder tanto a las plantillas que has creado como a las plantillas de la comunidad.
  4. Selecciona la plantilla deseada y previsualízala.

    Tienda de plantillas Bricks — contiene plantillas de la comunidad, locales y remotas.
    Tienda de plantillas Bricks — contiene plantillas de la comunidad, locales y remotas.

  5. Finalmente puedes hacer clic en Insert para aplicarla.

    Elige y utiliza una plantilla comunitaria seleccionada.
    Elige y utiliza una plantilla comunitaria seleccionada.

Plantillas remotas

Las plantillas de Bricks ofrecen capacidades únicas que no se encuentran en otros creadores de sitios. Por plantillas remotas se entiende plantillas creadas y utilizadas en otros sitios que quieres utilizar en tu sitio.

Para permitir que otros sitios utilicen tus plantillas Bricks, ve a Bricks > Settings > Template en tu panel de WordPress y activa la casilla de verificación My Templates Access.

Utiliza URL Whitelist y la protección por contraseña para restringir el acceso a las plantillas a las personas que conozcan la contraseña correcta.

Permite que otros sitios utilicen tus plantillas Bricks como plantillas Remotas.
Permite que otros sitios utilicen tus plantillas Bricks como plantillas Remotas.

Para utilizar plantillas de otros sitios, ve a Bricks > Settings > Template, desplázate hasta la sección Remote templates y pega la URL del sitio de Bricks del que quieres recuperar plantillas en el campo Remote template URL.

Utilizar plantillas Remotas de otros sitios.
Utilizar plantillas Remotas de otros sitios.

Si estableces una contraseña, debes asegurarte de escribirla en Password en la sección Remote templates (Plantilla remota). A continuación, haz clic en Save Settings.

Para utilizar estas plantillas, navega hasta el constructor de páginas y haz clic en Template como antes; aparecerá una nueva sección de Remote templates con todas las plantillas del sitio remoto.

Utilizar datos dinámicos en Bricks

Bricks te permite incorporar datos dinámicos a tus plantillas y páginas, lo que la convierte en una herramienta versátil para construir sitios web dinámicos.

Puedes incluir varios elementos dinámicos, como imágenes destacadas, títulos de entradas, fechas de publicación, nombres de autores, categorías, etiquetas, títulos de sitios y todos tus campos personalizados.

Los datos dinámicos son especialmente útiles cuando creas plantillas específicas en Bricks, como la plantilla de tu entrada de blog o plantillas para tipos de entrada personalizados, como un listado de una sola propiedad.

Para añadir datos dinámicos, empieza a escribir { en el lienzo o haz clic en el icono del «engranaje» junto a la mayoría de los campos en el panel de configuración.

A continuación te explicamos cómo crear una plantilla de entrada única utilizando datos dinámicos con Bricks:

  1. Ve a Bricks > Template para crear una nueva plantilla. Asigna un título a tu plantilla, establece su tipo en Single y, a continuación, Publícala o Guárdala como borrador.
  2. Haz clic en Edit with Bricks para empezar a configurar tu plantilla para que utilice datos dinámicos.
  3. Dale el estilo que quieras a la página. Normalmente, te interesará que elementos como el título de la entrada, la imagen destacada, la fecha de publicación, el nombre del autor y el contenido de la entrada se muestren dinámicamente.
  4. En un lienzo en blanco, añade un título y un contenido insertando {post_title} en un elemento Encabezado y {post_content} en un elemento Texto básico.

    Utilizar datos dinámicos en Bricks.
    Utilizar datos dinámicos en Bricks.

Para establecer esta plantilla como predeterminada para todas las entradas:

  1. Haz clic en el icono de configuración de la barra de herramientas, ve a Template Settings Conditions y, a continuación, haz clic en el botón + ADD CONDITION.
  2. Selecciona Tipo de post y especifica Post.

    Establece la plantilla como predeterminada para todas los post
    Establece la plantilla como predeterminada para todas los post

  3. Asegúrate de guardar y actualizar la página de la plantilla en WordPress. A continuación, navega a la página Posts para ver cada entrada formateada con la nueva plantilla sin estilos adicionales.

    La plantilla se utiliza para todas las entradas.
    La plantilla se utiliza para todas las entradas.

Para simplificar el estilo de esta plantilla, añade una entrada predeterminada para utilizarla como referencia para los elementos dinámicos:

  1. Haz clic en el icono de configuración de la barra de herramientas y ve a Template Settings > POPULATE CONTENT.
  2. Elige Single post/page como tipo de contenido y selecciona una publicación específica como contenido de la plantilla. Si no aparece ninguno, asegúrate de buscar uno y, a continuación, haz clic en APPLY PREVIEW.

    Añade un post predeterminado para utilizarlo como referencia para los elementos dinámicos.
    Añade un post predeterminado para utilizarlo como referencia para los elementos dinámicos.

  3. Ahora puedes mostrar fácilmente elementos como el título y el contenido de la entrada utilizando la entrada de plantilla seleccionada.

    La entrada predeterminada seleccionada se muestra al personalizar la página con datos dinámicos.
    La entrada predeterminada seleccionada se muestra al personalizar la página con datos dinámicos.

Además, Bricks admite el uso de contenido de campos personalizados avanzados (ACF), lo que mejora tu capacidad para crear páginas detalladas y personalizadas.

Gestión de envíos de formularios con Bricks

La función de envío de formularios se introdujo en Bricks 1.9.2 para permitirte capturar los envíos de formularios. Esto te permite crear una tabla personalizada llamada bricks_form_submissions en tu base de datos (más el prefijo de tu base de datos WP).

Puedes activar la nueva opción Guardar envíos de formularios en la base de datos en Bricks > Settings > General > Miscellaneous.

Gestión de los envíos de formularios con Bricks.
Gestión de los envíos de formularios con Bricks.

A continuación, haz clic en Save Settings. Aparecerá una pestaña de Envíos de formularios (Bricks > Form Submissions), que contendrá tus distintas tablas de envíos de formularios.

Recopilación de envíos de formularios

Recopilar envíos de formularios en Bricks no requiere un plugin adicional. Sólo tienes que utilizar el elemento Form para crear un formulario y configurar los campos correctamente.

Añade el elemento Form a la página Bricks.
Añade el elemento Form a la página Bricks.

En el panel de configuración, haz clic en Actions y selecciona la acción Save Submission.

Establece la acción Guardar envío para el elemento Form de Bricks.
Establece la acción Guardar envío para el elemento Form de Bricks.

A continuación, haz clic en Save Submission para dar al formulario un nombre descriptivo. Este nombre se utilizará para acceder a los datos del formulario.

Establece un nombre de formulario descriptivo para la página Form Submission
Establece un nombre de formulario descriptivo para la página Form Submission

Ahora, cuando guardes y abras la página Puedes completar el formulario y luego volver a  Bricks > Form submission para ver los datos del formulario.

Página de envío de formularios de Bricks para acceder a todos los formularios y sus datos.
Página de envío de formularios de Bricks para acceder a todos los formularios y sus datos.

También puedes descargar un archivo CSV de los distintos envíos de formularios. En la sección Bricks > Settings > General > Miscellaneous, donde configuraste esta función, puedes restablecer o eliminar la tabla de la base de datos.

Restablecer o eliminar la tabla de base de datos del formulario.
Restablecer o eliminar la tabla de base de datos del formulario.

Uso de WooCommerce con Bricks

WooCommerce es un plugin gratuito que mejora tu sitio WordPress con funciones de comercio electrónico. Está mundialmente reconocido como una solución líder de código abierto para crear y gestionar una tienda online.

Bricks se integra perfectamente con WooCommerce, proporcionando un robusto constructor integrado en el tema para crear toda tu tienda, desde la página principal de la tienda hasta las páginas de productos individuales, archivos de productos, carritos, procesos de pago y páginas de cuentas.

Bricks ofrece elementos especializados y plantillas específicas para WooCommerce, que te permiten diseñar el aspecto de tu tienda.

Elementos de producto en Bricks para sitios web de WooCommerce.
Elementos de producto en Bricks para sitios web de WooCommerce.

Para empezar a utilizar el Constructor de WooCommerce en Bricks, instala y activa el plugin de WooCommerce. Una vez activado, puedes utilizar Bricks para diseñar y personalizar visualmente varias plantillas de WooCommerce, de forma similar a como gestionarías los diseños de una sola entrada.

Para crear una página de Tienda sencilla

  1. Ve a Páginas y selecciona la página Tienda.
  2. Haz clic en Edit with Bricks. El panel Elementos contiene varios elementos de producto. Éstos te permiten mostrar productos, títulos, descripciones, precios y mucho más, facilitando la creación dinámica de plantillas.
    Usar WooCommerce con Bricks Builder.
    Usar WooCommerce con Bricks Builder.

    Utilizando estos elementos, puedes organizar y dar estilo a tu página como desees.

Al igual que creas una plantilla de entrada única, puedes crear una plantilla de producto único y establecer sus condiciones para que funcione con todos los productos.

Bucles de consulta en Bricks

El constructor de bucles de consulta te permite consultar tu base de datos según tus parámetros de consulta y muestra los resultados de la consulta que quieras mostrar dentro del bucle. Se puede utilizar en elementos de diseño como contenedores, Acordeones y Deslizadores.

Puedes consultar tipos de entradas, términos taxonómicos y usuarios. Por ejemplo, puedes consultar una lista de autores del blog, miembros de la comunidad y miembros del equipo.

Para utilizar el bucle de consulta, añade un elemento Contenedor al lienzo. Activa el ajuste Use Query Loop para convertir tu contenedor en un elemento de bucle.

Una vez que hayas activado el ajuste Use Query Loop, verás un control Consulta (icono de infinito). Haz clic en el icono para abrir el control de consulta y establecer los parámetros de consulta para recuperar el contenido de tu base de datos.

Uso de bucles de consulta en el elemento contenedor Bricks para post.
Uso de bucles de consulta en el elemento contenedor Bricks para post.

El contenedor sirve ahora como tu elemento repetidor. Todos los elementos dentro de este contenedor se repiten tantas veces como resultados de consulta haya. Esta guía de la academia explica cómo funciona.

Precios de Bricks

Bricks no tiene un plan gratuito. Sólo permiten crear una cuenta para que pruebes su tema, pero no puedes utilizarlo para tu sitio a menos que pagues.

Bricks ofrece planes básicos y un plan de por vida. El plan de por vida ofrece privilegios ilimitados, pero tú decides lo que quieres.

Ofrecen la comodidad de tener casi todo lo que necesitas dentro de la plataforma, lo que contribuye a un flujo de trabajo fluido y eficaz y lo convierte en una inversión que merece la pena para quienes buscan una solución de diseño web robusta y versátil.

Estructura de precios de Bricks Builder.
Estructura de precios de Bricks Builder.

Review de Bricks: ¿Merece la pena probarlo?

Un posible inconveniente es que Bricks no ofrece una versión gratuita, a diferencia de Elementor. Sin embargo, Bricks Builder ha ido ganando atención en el sector por su mezcla de sencillez y potentes funcionalidades.

Una encuesta realizada en 2024 por The Admin Bar a 1.144 profesionales de WordPress dice que «Bricks fue el único constructor de páginas que aumentó sus cifras respecto al año pasado, con un 32% del total» con la siguiente tabla:

Una estadística de Admin Bar 2024 muestra los creadores de páginas que utilizan actualmente los mejores profesionales de WordPress
Estadísticas de los page builders más utilizados por los profesionales de WordPress.

Esto demuestra que muchos profesionales de WordPress lo están adoptando a pesar de que todavía es relativamente nuevo en el mercado.

Bricks funciona como un tema completo. Esto significa que no puedes mezclar y combinar funciones de otros temas con su constructor de páginas. Además, en términos de velocidad, como constructor de páginas más reciente diseñado para sitios web de alto rendimiento, Bricks Builder tiene fama de ser más rápido que Elementor Pro.

Utilizar un constructor de páginas diseñado sólo para la velocidad no puede garantizar el mejor rendimiento. Independientemente del tipo de sitio web que estés construyendo, tu proveedor de alojamiento desempeña un papel crucial en su rendimiento.

En Kinsta, somos conocidos por ofrecer Alojamiento de WordPress premium con docenas de funciones premium. ¡Presumimos de ello!

Funcionamos con una arquitectura totalmente en contenedores impulsada exclusivamente por Google Cloud Platform en la red de Nivel Premium de Google. Esto nos permite ofrecerte una amplia selección de los servidores de datos más rápidos, un rendimiento increíble, almacenamiento en caché a nivel de servidor, recursos dedicados y seguridad mejorada.

Echa un vistazo a lo que dicen nuestros clientes, o ponte en contacto con nosotros para saber más sobre nuestra solución de alojamiento gestionado y cómo destaca.

Resumen

Este artículo ha explorado Bricks Builder, su funcionamiento, algunas de sus funciones y cómo utilizarlas. Hemos examinado su enfoque integral basado en temas, sus posibilidades de personalización y sus ventajas de rendimiento.

Aunque Bricks carece de una versión gratuita como Elementor, su diseño integrado y sus frecuentes actualizaciones pueden proporcionar una eficacia superior para optimizar el rendimiento de tu sitio web.

¿Tienes alguna pregunta sobre cómo utilizar el constructor de temas Bricks de WordPress? ¡Háznoslo saber en la sección de comentarios más abajo!

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.