Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.

Usar temas

Última actualización: agosto 15, 2023

Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique de otro modo:

Todos los productos y planes

Un tema es un conjunto de plantillas, módulos, contenido global y configuración de estilo que se puede usar para crear un sitio web. Puedes editar páginas y publicaciones usando un tema con el editor de contenido y establecer plantillas de blog para usar un tema en la configuración de tu blog.  

Todas las cuentas tienen acceso al menos a un tema predeterminado de HubSpot. Los temas también pueden descargarse del mercado de plantillas .

Comprender temas

Un tema es un conjunto de archivos para tu sitio web, incluyendo:

  • Plantillas codificadas: un conjunto de plantillas para tu sitio web, incluida una página principal, página de información, página de destino y plantillas de blog. Estas plantillas son codificadas específicamente por un desarrollador, pero el contenido y la disposición pueden personalizarse en el editor de contenido
  • Módulos: un conjunto de módulos de temas únicos que puedes agregar a contenido usando ese tema. 
  • Contenido Global: contenido repetido en varias páginas, como encabezados o pie de páginas. Puedes editar contenido global directamente desde el editor de páginas de arrastrar y soltar.
  • Configuración del tema: configuración de estilo para plantillas que usan un tema, incluyendo fuentes, espacios y colores.

Usar un tema activo

Puedes establecer un tema activo para mostrar las páginas de ese tema como opciones predeterminadas para las páginas creadas recientemente.

La configuración o el cambio de un tema activo no cambiarán el tema utilizado para el contenido existente, lo cual requiere el cambio de la plantilla actual del contenido. Se pueden adquirir temas adicionales en el Mercado de materiales de HubSpot

  • Ve al contenido en el que quieres agregar el enlace:

    • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas de sitio web.
    • Páginas de destino: En tu cuenta de HubSpot, dirígete a Marketing > Landing pages.
  • En la parte superior derecha, haz clic en el menú desplegable Crear y selecciona Página de sitio web o Página de destino.
  • En el cuadro de diálogo, introduce un nombre de página y luego haz clic en Crear página.
  • En la pantalla de selección de temas, coloca el cursor sobre un tema y luego haz clic en Vista previa del tema para abrir una vista previa del tema o en Establecer como tema activo para utilizar este tema como predeterminado para tus páginas. 

set-an-active-theme
Después de establecer un tema, cada vez que crees una nueva página se te mostrará la pantalla de selección de plantilla. Desde esta pantalla, puedes cambiar a un tema activo diferente:

  • Haz clic en el menú desplegable Tema y selecciona Cambiar tema.

change-theme-in-hubspot

  • En la pantalla de selección de temas, coloca el cursor sobre un tema y luego haz clic en Vista previa del tema para abrir una vista previa del tema o en Establecer como tema activo para utilizar este tema como predeterminado para tus páginas. 

Crear una página usando un tema

  • Ve al contenido en el que quieres agregar el enlace:

    • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas de sitio web.
    • Páginas de destino: En tu cuenta de HubSpot, dirígete a Marketing > Landing pages.
  • En la parte superior derecha, haz clic en el menú desplegable Crear y selecciona Página de sitio web o Página de destino.
  • En el cuadro de diálogo, introduce un nombre de página y luego haz clic en Crear página.
  • En la pantalla de selección de plantillas, aparecerán las plantillas de tu tema activo en la sección Plantillas de tema. Para ver las plantillas que no forman parte de tu tema activo, haz clic en Otras plantillas.
  • Coloca el cursor sobre una plantilla y luego haz clic en Vista previa de la plantilla para obtener una vista previa de la plantilla o en Seleccionar plantilla para continuar con el editor de contenido. 

preview-or-select-template

  • En el editor de contenido, edita el contenido de la página usando el editor de arrastrar y soltar
  • Para aplicar los cambios, haz clic en Publicar Actualizar en la parte superior derecha y luego haz clic en Publicar ahora Actualizar ahora en el cuadro de diálogo. 

Aplicar una plantilla de tema a tu blog

Puedes establecer un blog para que use el mismo tema que tus páginas en tu configuración de blog. Las plantillas de publicación de blog y de página de listas de blogs se seleccionan por separado. 

  • En tu cuenta de HubSpot, haz clic en el icono de Configuración settings en la barra de navegación principal.
  • En el menú de la barra lateral izquierda, navega a Sitio WebBlog.
  • Si tienes varios blogs, haz clic en el menú desplegable Seleccionar blog para modificarlo y selecciona un blog.  
  • Haz clic en la pestaña Plantillas.
  • En las secciones Plantilla de publicación de blog y Página de anuncios de blog, haz clic en el menú desplegable Acciones y selecciona Cambiar plantilla.

change-blog-template

  • En la pantalla de selección de temas, selecciona tu tema y luego selecciona una plantilla que use ese tema. En la parte inferior derecha, haz clic en Listo

select-a-theme-blog-template

  • Cuando hayas establecido el post y las plantillas de páginas de listas de blogs, haz clic en Guardar en la parte inferior izquierda. 

Nota: para las páginas de anuncios de blog que pueden editarse en el editor de contenido, estos pasos te llevarán al editor de contenido en lugar de a la pantalla de selección de tema. 

Editar la configuración de tema

Puedes personalizar el estilo de tu tema, incluyendo fuente, colores y espacios en tu configuración de tema. Los estilos editados aquí se aplican a todas las páginas y módulos de tema incluidos en este tema. Más información sobre cómo administrar la configuración de temas.

edit-global-theme-fonts

Administrar temas

En el administrador de diseño, puedes editar, clonar o copiar un tema a otra cuenta de HubSpot. También puedes eliminar temas predeterminados de HubSpot, temas clonados y temas personalizados, así como crear temas secundarios. 

Clonar un tema

Para editar los archivos codificados de temas predeterminados en el administrador de diseño, primero deben clonarse. Los temas adquiridos en el Mercado de plantillas no pueden clonarse; se recomienda crear un tema secundario en su lugar. 

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, haz clic en la carpeta @hubspot. Esta carpeta contiene todos los temas y módulos predeterminados, incluidos los módulos de arrastrar y soltar
    design-manager-hubspot-folder
  • Haz clic con el botón derecho en una carpeta de temas y luego selecciona Clonar tema.  
design-manager-theme-folder-clone
  • En el cuadro de diálogo, escribe un nombre para el tema y haz clic en Crear.

El tema se copiará en la carpeta raíz y aparecerá en el buscador con tus otras carpetas. 

Crear una página secundaria

En el administrador de diseño, puedes crear un tema secundario -una copia de un tema comprado- basado en un tema comprado del Mercado de plantillas o en un tema predeterminado de HubSpot. 

Los desarrolladores también pueden crear temas secundarios basados en temas personalizados y crear temas secundarios mediante la CLI utilizando nuestra documentación para desarrolladores. Más información sobre cómo trabajar con temas secundarios  

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, haz clic en la carpeta @marketplace para los temas del Mercado de plantillas o en la carpeta @hubspot para los temas predeterminados. 
  • Haz clic con el botón derecho en una carpeta de temas y luego selecciona Crear tema secundario.  
  • En el cuadro de diálogo, escribe un nombre para el tema secundario.
  • Para cambiar el lugar donde se guardará el tema secundario, haz clic en Cambiar en la sección Ubicación del archivo. Haz clic en una carpeta y luego en Seleccionar.
  • Para personalizar los nombres de los archivos CSS y JS del tema, haz clic en Opciones avanzadas y luego introduce nuevos nombres de archivo en los campos CSS y JS
  • Para finalizar el proceso, haz clic en Crear tema secundario. Puedes editar el estilo del tema secundario en el editor de contenido. 

Copiar un tema a otra cuenta

Puedes copiar una carpeta de temas de una cuenta a otra. Debes ser un usuario con permisos de Herramientas de diseño en ambas cuentas.

Nota: las carpetas de temas en los directorios @hubspot o @marketplace no se pueden copiar entre cuentas.

Para copiar un tema a una cuenta:

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, coloca el cursor sobre la carpeta de temas que deseas copiar y luego haz clic con el botón derecho en la carpeta y selecciona Copiar en una cuenta diferente

    copy-theme-folder-to-different-account
  • En el cuadro de diálogo, selecciona una cuenta y luego haz clic en Copiar material. La carpeta aparecerá en la cuenta especificada tan pronto como finalice el proceso de copia. 

Cargar un tema

Los usuarios en las cuentas de CMS Hub pueden adquirir los temas de HubSpot desde el Mercado de ThemeForest de Envato y luego cargarlos en HubSpot desde la pantalla de selección de temas: 

  • Navega a la sección HubSpot CMS Hub del Mercado de ThemeForest de Envato. 
  • Compra un tema en el mercado.
  • Recibirás un correo electrónico con un código de compra para el tema adquirido. Copia el código de compra. 

copy-your-envato-purchase-code

  • Ve al contenido en el que quieres agregar el enlace:

    • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas de sitio web.
    • Páginas de destino: En tu cuenta de HubSpot, dirígete a Marketing > Landing pages.
  • En la parte superior derecha, haz clic en el menú desplegable Crear y selecciona Página de sitio web o Página de destino
  • En el cuadro de diálogo, introduce un nombre de página y luego haz clic en Crear página
  • En la pantalla de selección de plantillas, haz clic en el menú desplegable Tema y selecciona Cambiar tema

change-theme-in-hubspot

  • En la parte superior derecha, haz clic en Instalar un tema de ThemeForest.

install-a-theme-from-themeforest

  • En el cuadro de diálogo, pega el código de compra del correo electrónico y luego haz clic en Instalar tema
  • En la nueva pestaña, inicia sesión en el Mercado de ThemeForest de Envato para finalizar el proceso de instalación  

Cuando hayas iniciado sesión con éxito, aparecerá un banner en HubSpot. Puede tardar unos minutos para que tu tema esté disponible en HubSpot. 

upload-theme

Eliminar un tema

Los temas de HubSpot predeterminados, los temas clonados y los temas cargados se pueden eliminar en el administrador de diseño:

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, haz clic en la carpeta con los materiales del tema.
  • Haz clic en el menú desplegable Archivo y selecciona Eliminar [nombre de la carpeta]
  • En el cuadro de diálogo, selecciona la casilla de comprobación Estoy seguro de que quiero eliminar esta carpeta y luego haz clic en Eliminar esta carpeta

Los temas comprados se deben desinstalar desde el Mercado de materiales: 

  • En tu cuenta de HubSpot, haz clic en el ícono de Mercados marketplace en la barra de navegación principal, luego, selecciona Mercado de materiales.
  • Haz clic en la pestaña Comprado
  • Coloca el cursor sobre el tema y luego haz clic en el menú desplegable Acciones y selecciona Desinstalar
  • En el cuadro de diálogo, haz clic en Desinstalar.
¿Te resultó útil este artículo?
Este formulario se utiliza solo para recibir comentarios a la documentación. Cómo recibir ayuda con HubSpot.