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í.
Website Pages

Usar temas

Última actualización: septiembre 13, 2022

Requisitos

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. Los temas pueden descargarse desde el Mercado de materiales, aunque las cuentas de CMS Hub también tendrán acceso a temas predeterminados de HubSpot. Puedes editar páginas usando un tema con el editor de contenido arrastrar y soltar y establecer plantillas de blog para usar un tema en la configuración de tu blog.

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 arrastrar y soltar
  • 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

  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • 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 preliminar del tema para abrir una vista preliminar del tema o Establecer como tema activo para usar 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 preliminar del tema para abrir una vista preliminar del tema o Establecer como tema activo para usar este tema como predeterminado para tus páginas.  

Crear una página usando un tema

  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • 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, las plantillas de tu tema activo aparecerán en la sección Plantillas de tema. Para ver plantillas que no sean parte de tu tema activo, haz clic en Otras plantillas.
  • Coloca el cursor sobre una plantilla y haz clic en Vista preliminar para obtener una vista preliminar de la plantilla o Seleccionar plantilla para pasar al editor de contenido. 

previsualizar-o-seleccionar-plantilla

  • En el editor de contenido, edita el contenido de la página usando el editor de arrastrar y soltar
  • En la parte superior derecha, haz clic en Actualizar o Publicar para establecer tus cambios en vivo. 

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 settings símbolo de configuración, situado en la barra de navegación principal.
  • En el menú de la barra lateral izquierda, navega a Sitio Web Blog.
  • 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 listado 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 listado de blogs que se pueden editar en el editor de contenido, estos pasos conducirán al editor de contenido en lugar de 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 personalizados y temas comprados en el Mercado de materiales también pueden clonarse, pero pueden editarse directamente. 

  • 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 materiales 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 materiales 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

  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • 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 desde 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: 

  • Desde tu cuenta de HubSpot, haz clic en el icono del mercado marketplace de la barra de navegación principal.
  • 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.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.