Usar temas

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. Configurar o cambiar de un tema activo no cambiará el tema utilizado para el contenido existente, lo que requiere el intercambio de la plantilla actual del contenido. Se pueden adquirir temas adicionales en el mercado de plantillas de HubSpot.

1. Ve al contenido:
   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
2. Haz clic en Crear o en Empezar.
3. En la página de selección de temas, haz clic en Establecer como tema activo en la tarjeta de tema deseada. Para obtener una vista previa del tema, haz clic en Previsualizar tema.
4. En la página de selección de plantillas, haz clic en Seleccionar plantilla en la tarjeta de plantilla deseada. Luego continúa creando una página utilizando el editor de arrastrar y soltar de HubSpot

Cambiar el tema activo

1. Ve al contenido:

   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
2. En la parte superior derecha, haz clic en Crear o en Empezar. 
3. Para cambiar el tema desde las páginas del sitio web, haz clic en el menú desplegable Tema y selecciona Cambiar tema. Luego haz clic en Establecer como tema activo en la tarjeta de tema deseada.

4. Para cambiar el tema de las landing page, haz clic en el nombre del tema en el menú de la izquierda. Luego haz clic en Establecer como tema activo en la tarjeta de tema deseada.

5. En la pantalla de selección de temas, pasa el cursor por encima de un tema y haz clic en Vista previa del tema para abrir una vista previa del tema o en Establecer como tema activo.
6. Puedes seleccionar una plantilla del tema para seguir creando una página con el editor de arrastrar y soltar de HubSpot.

Crear una página usando un tema

1. Ve al contenido:

   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
2. En la parte superior derecha, haz clic en Crear o en Empezar.
3. Si no has seleccionado un tema previamente, se te dirigirá a la pantalla de selección de temas. En la tarjeta del tema deseado, haz clic en Establecer como tema activo. Para obtener una vista previa del tema, haz clic en Vista previa.
4. 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.
5. Para seleccionar una plantilla del tema, haz clic en Seleccionar plantilla o Utilizar.
6. En el editor de contenido, edita el contenido de la página usando el editor de arrastrar y soltar.

7. Para aplicar los cambios, haz clic en Publicar o Actualizar en la parte superior derecha.

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.

1. En tu cuenta de HubSpot, haz clic en el icono de settings Configuración en la barra de navegación superior.
2. En el menú de la barra lateral izquierda, navega a Contenido > Blog.
3. Si tienes varios blogs, haz clic en el menú desplegable Seleccionar blog para modificarlo y selecciona un blog.
4. Haz clic en la pestaña Plantillas.
5. 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.

6. En la pantalla de selección de temas, haz clic en la tarjeta temática deseada y luego en la tarjeta de plantilla . En la parte inferior derecha, haz clic en Listo.

Nota: para las páginas de índice 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 del 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.

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 clonados, temas personalizados, así como crear temas secundarios.

Puedes editar la configuración del tema de un tema secundario sin afectar al tema principal, pero no creará copias adicionales de los recursos del tema. Para copiar los recursos de un tema principal, se recomienda clonar el tema.

Clonar un tema

Para editar los archivos codificados de temas predeterminados en el administrador de diseño, primero deben clonarse.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic en la carpeta @hubspot. Esta carpeta contiene todos tus temas y módulos predeterminados, incluidos los módulos de correo electrónico de arrastrar y soltar.
3. Haz clic en una carpeta de temas.
4. Haz clic en el menú desplegable Archivo y selecciona Clonar tema.
5. En el cuadro de diálogo, introduce un nombre para el tema.
6. Para cambiar la ubicación del archivo del tema clonado, haz clic en Cambiar en el campo Ubicación del archivo. A continuación, selecciona una ubicación. De forma predeterminada, se seleccionará la carpeta raíz.
7. Cuando hayas terminado, haz clic en Crear.

Crear una página secundaria

En el administrador de diseño, puedes crear un tema secundario basado en un tema comprado de Mercado de plantillas o en un tema predeterminado de HubSpot. Puedes editar la configuración del tema de un tema secundario sin afectar al tema principal.

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.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. 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.
3. Haz clic con el botón derecho en una carpeta de temas y luego selecciona Crear tema secundario.
4. En el cuadro de diálogo, escribe un nombre para el tema secundario.
5. 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.
6. 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.
7. 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:

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, pasa el cursor sobre la carpeta de temas que quieres copiar y luego haz clic con el botón derecho en la carpeta y selecciona Copiar en una cuenta diferente.
3. En el cuadro de diálogo, haz clic en el menú desplegable Cuenta de destino y selecciona una cuenta. A continuación, haz clic en Copiar recurso. La carpeta aparecerá en la cuenta de destino en cuanto finalice el proceso de copia.
   
   

Subir un tema

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

1. Navega a la sección HubSpot CMS Hub del Mercado de ThemeForest de Envato.
2. Compra un tema en el mercado.
3. Recibirás un correo electrónico con un código de compra para el tema adquirido. Copia el código de compra.
4. En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
5. En la parte superior derecha, haz clic en Crear.
6. En la página Elegir una plantilla, haz clic en el menú desplegable Tema y luego en Cambiar tema.

7. En la página Elegir un tema, haz clic en Instalar un tema de ThemeForest en la parte inferior de la página.
8. En el cuadro de diálogo, pega el código de compra del correo electrónico y haz clic en Instalar tema.
9. En la nueva pestaña, inicia sesión en el ThemeForest Marketplace de Envato para finalizar el proceso de instalación.
10. Cuando hayas iniciado sesión, aparecerá un banner en HubSpot. Puede tardar unos minutos para que tu tema esté disponible en HubSpot.

Eliminar un tema

Los temas clonados y los temas subidos se pueden eliminar en el administrador de diseño:

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haz clic en la carpeta con los materiales del tema.
3. Haz clic en el menú desplegable Archivo y selecciona Eliminar [nombre de la carpeta].
4. En el cuadro de diálogo, selecciona la casilla de verificación para confirmar que ha revisado las dependencias y haz clic en Eliminar esta carpeta.

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

1. En tu cuenta de HubSpot, haz clic en el icono Mercado marketplace en la barra de navegación superior, y luego selecciona Descargas del mercado.
2. En la pestaña Temas, haz clic en el menú desplegable Acciones y selecciona Desinstalar para el tema correspondiente. 
3. Antes de desinstalar, puede que necesites cambiar la plantilla de una publicación de blog o página. Más información sobre cómo cambiar la plantilla de una página o publicación. 
4. En el cuadro de diálogo, haz clic en Desinstalar.