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.
Antes de empezar:
-
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.
- La primera configuración tarda un poco, pero después de ella, ¡será fácil crear nuevas entradas de blog!
También hemos preparado una guía de vídeo para usted:
Paso 1: Diseñe sus plantillas de blog en Figma
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.
Blog Listing Página
Blog Post Página
Utiliza Auto Layout en Figma para asegurarte de que tus diseños son responsivos y se traducen bien en los siguientes pasos.
Paso 2: Importa tus diseños a transjt.ai
A continuación, utilizaremos el plugin transjt.ai en Figma para procesar tus diseños.
1. Abre el complemento transjt para Figma en tu archivo Figma.
2. Import the Blog Listing Page
-
Selecciona tu mesa de trabajo «Blog Listing» en Figma.
-
En el complemento, selecciona el tipo de plantilla «Blog».
-
Haz clic en Importar.
3. Importar la página de entradas del blog:
-
Selecciona tu mesa de trabajo «Entrada de blog» en Figma.
-
En el complemento, selecciona el tipo de plantilla «Detalles del blog».
-
Haz clic en Importar.
4. Importar componentes adicionales
5. Revisar e Iterar:
-
-
-
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".
-
-
Paso 3: Exportar plantillas de transjt.ai a HubSpot
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.
Paso 4: Asigna tus nuevas plantillas en HubSpot
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.
Paso 5: Configurar y publicar la página de tu blog
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.
Paso 6: Cree su primera entrada de blog
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.
Paso 7: Añada componentes personalizados a su entrada (opcional)
¿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.
-