Esta guía te guiará a través del proceso completo de diseño de tus plantillas de blog en Figma, convirtiéndolas con transjt.ai, y configurándolas correctamente en tu portal HubSpot.
Debes tener cuentas de trabajo para Figma, transjt.ai, y HubSpot (con permisos de blog).
Esta guía asume que ya has creado y exportado la cabecera (navegación) y el pie de página de tu sitio principal. Vamos a crear las plantillas de blog sin estos elementos.
Comience por diseñar dos mesas de trabajo esenciales en Figma. Recuerda diseñarlas sin el encabezado principal ni el pie de página de tu sitio, ya que estos se manejarán por separado en HubSpot.
Utiliza Auto Layout en Figma para asegurarte de que tus diseños son responsivos y se traducen bien en los siguientes pasos.
A continuación, utilizaremos el plugin transjt.ai en Figma para procesar tus diseños.
Después de unos minutos, las páginas aparecerán en tu panel de control de transjt.ai.
Ábrelas para comprobar si el diseño es correcto.
Si no es así: El problema más común es el Auto Layout. Vuelve a Figma, ajusta la configuración del diseño automático y vuelve a importar.
Recuerde seleccionar cada vez el tipo de plantilla correcto: "Blog" o "Blog Detail".
Una vez que estés satisfecho con las vistas previas en transjt.ai, es hora de enviarlas a HubSpot.
Desde tu panel de control de transjt.ai, exporta las plantillas "Blog" y "Blog Detail".
Selecciona tu cuenta HubSpot conectada como destino.
Espera a que se complete el proceso de exportación.
Tus plantillas están ahora en HubSpot, pero necesitas decirle a HubSpot que las use para tu blog.
En HubSpot, ve a Configuración (el icono de engranaje ⚙️ en la navegación superior).
En la barra lateral izquierda, ve a Contenido > Blog.
Selecciona la pestaña Plantillas.
Asigna una plantilla de entrada de blog:
En la sección "Plantilla de entrada de blog", haz clic en Acciones > Cambiar plantilla.
Seleccione la plantilla "Detalle del blog" que acaba de exportar.
Asignar plantilla de página de listado de blogs:
En la sección "Página de listado del blog", haz clic en Acciones > Cambiar plantilla.
Seleccione la plantilla "Blog" (vista general) que acaba de exportar.
Consejo profesional: Utilice nombres descriptivos para sus mesas de trabajo en Figma (por ejemplo, "Blog de la empresa - Plantilla de post v1"). Estos nombres se trasladan a transjt.ai y HubSpot, haciéndolos mucho más fáciles de encontrar y gestionar.
El paso final de configuración de la plantilla es configurar la página de listado en vivo.
En HubSpot, navega a Contenido > Blog. (Panel de navegación izquierdo/por defecto)
Encuentra tu blog, pasa el cursor sobre él y selecciona Editar. Esto abrirá el editor de páginas para la página principal de tu blog.
Limpia la página: Si hay módulos/secciones por defecto o vacíos en la plantilla elimínalos.
Añada su sección:
Haz clic en el icono Añadir (+) de la barra lateral izquierda para abrir el panel "Añadir".
Busca la sección "Blog Overview" (o "Blog") que has exportado de transjt.ai.
Arrástrala al área de contenido principal de la página.
Configurar: Haz clic en el módulo recién añadido para ajustar la configuración (como el número de entradas que se mostrarán, etc.) si es necesario.
Haga clic en Publicar o Actualizar en la esquina superior derecha.
Ahora que sus plantillas están asignadas, vamos a probar la plantilla de entrada de blog.
Vuelve a tu panel principal Contenido > Blog.
Haga clic en Crear > Entrada de blog en la esquina superior derecha.
Su nuevo diseño de "Entrada de blog" debería ser visible inmediatamente en el editor.
Ahora puede añadir su contenido (título, imagen destacada y cuerpo del contenido) directamente en los campos proporcionados por su plantilla.
¿Qué pasa si necesitas una llamada a la acción (CTA), una galería de imágenes o una cita dentro del cuerpo principal de tu post? Puede crearlos como componentes reutilizables.
Diseñe: Cree el nuevo componente en Figma (por ejemplo, un bloque de "Suscripción al boletín de noticias").
Importa a transjt.ai: Selecciona la mesa de trabajo en Figma, abre el plugin y, esta vez, selecciona el tipo "Componente". Haga clic en Importar.
Exportar: Exporte este nuevo componente de transjt.ai a HubSpot.
Utilizar en HubSpot:
Abre cualquier entrada de blog (como la que creaste en el paso 6).
En el editor de contenido del blog, haz clic en el icono Añadir (+) en la barra lateral izquierda.
Busca el componente que acabas de importar (por ejemplo, "Suscripción al boletín de noticias").
Arrástrelo directamente al área de contenido principal de la entrada de su blog.