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

Edita tu configuración de tema

Última actualización: mayo 20, 2020

Requisitos

CMS Hub  Professional, Enterprise

Un tema es un conjunto de estilos y plantillas que puedes aplicar a tus páginas web y blogs en HubSpot. Para asegurarte de que tu sitio web luzca consistente, la configuración de estilo para todas las páginas que usan el mismo tema se administran en tu configuración de tema. Puedes personalizar fácilmente la configuración de tu tema haciendo clic en la pestaña Diseño en el panel izquierdo en el editor de páginas. La configuración del tema se puede ajustar con controles intuitivos, como interruptores alternos, interruptores y selectores cromáticos.

Antes de comenzar

La configuración de temas globales controlan los colores, fuentes y estilos de botones para páginas que usan tus plantillas de temas. Algunos de los contenidos de tu sitio web se administran en otras partes de la configuración de tu cuenta, incluyendo:

Editar la configuración de tema

Para editar la configuración de tu tema, primero deberás crear una página con una plantilla de tema. La configuración de temas puede acceder al editor de páginas haciendo clic en la pestaña Diseño a la izquierda. Luego haz clic en Editar configuración del tema.

edit-global-themes-from-editor

Nota: cada tema está diseñado con una combinación única de opciones por un desarrollador de sitio web, por lo que verás opciones de estilo ligeramente diferentes según los componentes incluidos en tu tema. 

La personalización de colores, fuentes y espacios establecerá los estilos predeterminados para todos los elementos de tu página. Si quieres editar detalles específicos, como los colores del enlace, los colores del botón o los colores de formulario predeterminados, haz clic en Editar junto a Más configuración para ver la configuración de temas adicionales disponibles para tus plantillas.

Colores

La configuración de colores de tu tema aplica un color principal, secundario y de fondo a todos los elementos incluidos en tus plantillas de tema. Estos estilos se aplicarán a todos los elementos de tu sitio web. Para personalizar la configuración más específica para los encabezados, las fuentes y los enlaces, haz clic en Editar.

edit-global-theme-colors

Fuentes

Elige una fuente principal y secundaria para aplicar a los encabezados, formularios, botones y texto del cuerpo. Se admiten todas las fuentes Google. Haz clic en la burbuja de colores para personalizar los colores principales o secundarios de tu fuente. Puedes elegir un valor de color simple o hacer clic en la pestaña Avanzado y elegir un valor hexadecimal específico con un selector de color. 

 

edit-global-theme-fonts

Espaciado 

Tu configuración de tema para el control de espaciado controla el ancho máximo de tu contenido de página y el espaciado vertical entre distintos elementos de tu página.

edit-global-theme-spacing

Más configuración

En la configuración de temas, puedes tener una configuración detallada adicional a estilos más específicos en tu página. Las opciones de estilo en tu tema se basan en los campos de temas incluidos en la plantilla codificada de tu tema. Si no puedes localizar la configuración que buscas, ponte en contacto con tu diseñador de plantillas para ver qué opciones se incluyeron en tu plantilla.

El siguiente ejemplo es una guía general de lo que puede incluirse en tu tema. Para una referencia completa de campos de tema que pueden incluirse en tus plantillas, consulta la documentación de los diseñadores.

Nota: recuerda que puedes personalizar fuentes, colores y estilos dentro de un módulo de texto enriquecido en tu página o reemplazar estilos predeterminados de tu tema dentro del editor de páginas. Solo modificar estos estilos si deseas que se apliquen a todas las páginas usando este tema.

Tipografía

En tu configuración de tipografía, puedes controlar las fuentes que se aplican a determinados elementos de tus plantillas. Se admiten todas las fuentes Google. También puedes seleccionar colores personalizados para ciertos encabezados, fuentes o enlaces en tu tema.

  • Encabezado: puedes personalizar la fuente exacta, el color, el tamaño y el estilo para cualquier encabezado incluido en tu tema.
  • Cuerpo del blog: personaliza la fuente, el color o el tamaño de texto del cuerpo de tu página. 
  • Enlaces: personaliza el color predeterminado de los enlaces en tu sitio web. También puedes personalizar el color y el comportamiento de los enlaces cuando un visitante pasa el cursor sobre o hace clic en el enlace.

Botones

Puedes establecer colores personalizados, fuentes y estilos para botones en tus páginas y blogs. En el editor de páginas para una página específica, podrías intercambiar tamaños de botones o tipos, dependiendo de cómo se creó tu tema por el desarrollador de tu sitio web.

  • Tamaño: especifica las dimensiones de los botones pequeños, regulares y grandes en tu página. 
  • Primario: un botón principal para la acción más importante que realiza un visitante en tu página. Este color debe destacar y captar la atención de tu visitante.
  • Secundario: se utiliza un botón secundario para acciones relativamente importantes cuando ya existe un botón principal en tu página. Los botones secundarios suelen aplicarse a páginas para acciones de menor prioridad. 
  • Simple: estas son las fuentes predeterminadas y los estilos aplicados a los módulos de botón simples en tu página.

Formularios

Personaliza los colores, las fuentes y los estilos de texto predeterminados, y los estilos de los botones para tus formularios.

  • Título: estos son estilos aplicados al campo de texto que aparece arriba de todo el formulario. Esto suele incluir un saludo e instrucciones para completar el formulario. Estos estilos en tu formulario solo pueden administrarse aquí en la configuración de tu tema.
  • Etiquetas: estilos aplicados a las etiquetas que aparecen arriba de un campo de formulario.
  • Campos: estilos aplicados a los nombres de los campos del formulario.
  • Texto de ayuda: este es el contenido de muestra que aparece dentro de cada campo de formulario, que indica qué tipo de información debería enviar tu visitante.
  • Enviar: elige el estilo y el tamaño de los botones que deben tener tus formularios.
  • Color de fondo: el color de fondo aplicado a tu formulario.
  • Borde: el color del borde alrededor de los campos del formulario.
  • Relleno: la cantidad de espaciado en el formulario en tu página.

Tablas

Configura los colores, fuentes, espacios y bordes predeterminados para las tablas agregadas a tu página.

  • Encabezado de la tabla: los colores aplicados a las fuentes en el encabezado de tu tabla y el color de fondo predeterminado en el ancho completo de la primera fila de tu tabla. También puedes establecer un borde inferior para un color de acento en la parte inferior del encabezado de tu tabla.
  • Color de la fuente: color predeterminado para fuentes en tu tabla.
  • Color de fondo: color de fondo predeterminado para el fondo de las celdas de tu tabla.
  • Borde: el color de borde predeterminado, ancho y estilo de tu tabla.
  • Relleno: la cantidad de espacio anterior y debajo de tu tabla en tu página. 

Más información sobre cómo insertar una tabla en un módulo de texto enriquecido en tu página.

Encabezado del sitio web

Esta configuración controla los colores y las fuentes que aparecen en el encabezado de tu página, incluyendo tu menú de navegación. Descubre cómo configurar tu menú de navegación en la configuración de tu cuenta. Para establecer el logotipo de tu empresa en las plantillas de temas, agrega la imagen del logotipo a los valores predeterminados de tu cuenta en la sección Branding.

  • Menú: selecciona el color y el estilo de la fuente para tu menú de navegación cuando los visitantes ven, coloca el cursor o hacen clic en un elemento del menú. Estos estilos solo pueden administrarse aquí en tu configuración de tema.
  • Color de fondo: selecciona el color para el fondo del encabezado de tu sitio web.
  • Borde inferior: si se desea, puedes agregar una línea horizontal como borde debajo del encabezado de tu sitio web. Selecciona un estilo para activar el borde inferior y luego selecciona un color y ancho para tu borde.

Pie de página

Esta configuración controla los colores y las fuentes que aparecen en el pie de página de tu página, incluyendo cualquier menú de navegación. Descubre cómo configurar tu menú de navegación en la configuración de tu cuenta.

  • Menú: selecciona el color y el estilo de la fuente para el menú de navegación en el pie de página del tema. Puedes personalizar los colores para cuando los visitantes vean, coloquen el cursor sobre o hagan clic en un elemento del menú. Estos estilos solo pueden administrarse aquí en tu configuración de tema.
  • Color de fondo: selecciona el color para el fondo del pie de página de tu sitio web.
  • Borde inferior: si se desea, puedes agregar una línea horizontal como borde debajo del pie de página del sitio web. Selecciona un estilo para activar el borde inferior y luego selecciona un color y ancho para tu borde.

Blog

Esta configuración controla el estilo de la plantilla de tu página de listado y la plantilla de publicación del blog.

Imágenes de banner: carga imágenes para usar en el fondo del encabezado de tu plantilla de blog. Puedes elegir una imagen para la página principal de tu blog y una imagen para aplicar a todos tus posts. 

Etiquetas: establece el color, las fuentes y los estilos predeterminados para tus etiquetas de blog, que aparecen en la parte superior de tus publicaciones de blog.

/es/website-pages/edit-your-global-theme-settings