Publicado en
October 14, 2024

Gestión Visual de Contenidos Headless en Magento 2 con Builder.io

Estefanía Izaguirre
Marketing Specialist

Magento es una plataforma de comercio electrónico muy potente, pero en cuanto a gestión de contenidos, siempre ha dejado que desear. Por eso, llevamos un tiempo buscando alternativas que sean más fáciles de usar, flexibles y adaptadas al futuro. Creemos haber dado en el clavo con Builder.io.

Una mirada crítica al PageBuilder de Magento

Magento incluye un PageBuilder que se usa para gestionar páginas, bloques, categorías y descripciones de productos. Sin embargo, en la mayoría de los proyectos vemos que se queda corto rápidamente. Por eso, muchas veces las tiendas Magento terminan usando CMS tradicionales como WordPress o Umbraco para gestionar contenidos como páginas y blogs.

¿Dónde falla el PageBuilder? Aquí te lo resumimos:

  1. Poca libertad de edición
    Aunque te permite crear diseños sencillos con contenido predefinido (texto, imágenes, vídeos), se vuelve muy limitado cuando quieres crear secciones más personalizadas y coherentes con la identidad visual de la marca. Sin conocimientos de código, es fácil que el contenido termine viéndose genérico.
  2. Sin vista previa del contenido
    Al estar separado de la interfaz, no puedes ver cómo se verá el contenido mientras lo creas. Tampoco ofrece una opción de vista previa antes de guardar, por lo que tienes que estar guardando y verificando constantemente.
  3. HTML poco optimizado
    El contenido creado en PageBuilder se convierte en HTML que no está optimizado para Pagespeed. Las imágenes no se comprimen, no hay carga diferida y los vídeos cargan archivos externos de JavaScript, aunque no se estén reproduciendo. Cuanto más contenido pongas en una página, más afectará la velocidad.
  4. Costes de mantenimiento elevados
    Aunque puedes extender PageBuilder con bloques personalizados, esto requiere desarrollo técnico, lo que significa depender de un equipo de desarrolladores cada vez que quieras hacer ajustes o crear algo nuevo. Esto limita la libertad del gestor de contenidos y aumenta los costos.

En resumen, PageBuilder no cumple con las expectativas actuales de una gestión de contenido eficiente y flexible.

Builder.io: una alternativa headless al CMS

Después de probar varias alternativas, Builder.io es, sin duda, la mejor opción. Builder.io ofrece una solución headless, donde la gestión de contenido ocurre fuera de Magento, pero sigue conectada a través de API. Magento sigue manejando las páginas, sus URL y los metadatos, pero todo el contenido lo gestionas en Builder.io.

¿Por qué nos gusta tanto Builder.io? Estas son algunas razones:

  • Editor visual en el sitio
    Aunque el editor de Builder.io no se ejecuta directamente en Magento, usa un iframe para mostrar tu sitio mientras lo editas. Así, puedes ver los cambios en tiempo real, sin ese tedioso flujo de crear contenido y luego validarlo en la web.


Builder.io te da libertad total para diseñar y organizar tu contenido mediante arrastrar y soltar. Puedes controlar todo: tipografía, colores, espaciado, efectos de sombra, e incluso crear tus propios atributos CSS o insertar JavaScript si lo necesitas.

  • Modelos de contenido estructurado
    Si prefieres un enfoque más estructurado, puedes crear modelos con campos predefinidos para diferentes tipos de contenido, como publicaciones de blog o perfiles de empleados. Esto es ideal si necesitas una estructura consistente en tu contenido.
  • Edición responsiva con vista previa en tiempo real
    Builder.io te permite ver cómo se ve tu contenido en dispositivos móviles y de escritorio al mismo tiempo. Si haces cambios en la vista de escritorio, la vista móvil se actualiza automáticamente.
  • HTML optimizado para Pagespeed
    Builder.io se toma muy en serio el rendimiento. Analizan cada elemento para asegurarse de que la salida HTML esté optimizada al máximo, sin que tengas que preocuparte por la velocidad de la página.
  • Integración con los datos de Magento
    A través de API, puedes insertar y gestionar datos de productos y categorías directamente en el contenido. Esto te permite crear fácilmente secciones con productos destacados o enlaces a categorías.

Una experiencia renovada para los gestores de contenido

Con la integración de Builder.io, hemos transformado la experiencia de gestionar contenido en Magento. Al eliminar las limitaciones de PageBuilder, ahora los gestores de contenido tienen una libertad que antes no tenían, sin depender de un equipo técnico para cada cambio.

Con Builder.io puedes:

  1. Crear componentes avanzados como deslizadores de productos, modales o pestañas.
  2. Diseñar formularios personalizados con validación de campos.
  3. Utilizar AI y Figma para generar contenido automáticamente.
  4. Programar contenido o cambios en el contenido.
  5. Optimizar constantemente el contenido con pruebas A/B y mapas de calor.
  6. Personalizar el contenido para móvil y escritorio, ocultando elementos según el dispositivo.
  7. Añadir animaciones personalizadas a los elementos.

Beneficios para tu negocio

Builder.io no solo facilita la gestión de contenidos, sino que también aporta beneficios importantes para tu negocio:

  • Más libertad para crear el contenido que necesitas sin depender de desarrolladores, lo que acelera el tiempo de publicación.
  • Mejora continua del contenido a través de pruebas y optimización constante.
  • Control total sobre el diseño visual, crucial si la estética es importante para tu marca.
  • Menos complicaciones y costes al no tener que gestionar un sitio corporativo separado en otro CMS.
  • Mejores resultados en Pagespeed, lo que puede mejorar tu posicionamiento en motores de búsqueda y reducir costos en publicidad.

Actualmente, estamos utilizando el plan Growth, que cuesta $39 por usuario al mes. Si calculas el tiempo que te ahorras en la creación de contenido, es una inversión que vale la pena.

Conoce más sobre nuestra solución con Builder.io para Magento
Si sientes que tu CMS actual te está limitando, contáctanos. Estaremos encantados de hablar sobre cómo una solución con Builder.io puede transformar tu negocio. También puedes visitar nuestra página para conocer más sobre nuestras soluciones con Magento y suscribirte a nuestro boletín para recibir actualizaciones.

Publicado en
This is some text inside of a div block.

Heading

No items found.
This is some text inside of a div block.
This is some text inside of a div block.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Servicios

Cómo podemos ayudarte

Consulta los servicios con los que te ayudaremos a conseguir tus objetivos digitales.

servicios

Otros artículos

Proyectos de interés