Edita la configuración de tu tema

Un tema es un conjunto de estilos y plantillas que puedes aplicar a las páginas de tu sitio web y a tus 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.

Antes de comenzar

La configuración del tema controla los colores principales, las fuentes y los estilos de los botones de las páginas que utilizan tus plantillas de tema.

Nota: las opciones de estilo disponibles en la configuración de tu tema dependen de las opciones de campo del tema incluidas por el desarrollador web que creó tu tema.

Algunos de los contenidos de tu sitio web se administran en otras partes de la configuración de tu cuenta, incluyendo:

• El logo de tu empresa: actualiza el logo de tu empresa en tu Valores predeterminados de la cuenta en la pestaña Marca.
• Tu menú de navegación: el menú de colores se establece en la configuración de temas, pero el contenido de tu menú de navegación y los enlaces se administran en tu configuración de navegación. Aprende en cómo crear un menú de navegación que puedes añadir a la Encabezado global o Contenido global de pie de página dentro del Editor de páginas.
• Tu dominio para publicar: el número de subdominios, dominios de marca y dominios de nivel superior que puedes conectar depende de tu suscripción. Más información sobre límites de suscripción para dominios y conectar un dominio a HubSpot. 

Editar la configuración de tema

Puedes editar la configuración de un tema desde el editor de contenido para cualquier página o entrada que utilice ese tema: 

• Ve al contenido en el que quieres añadir el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
  • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
• Clic en el nombre de tu contenido. 
• En el editor de contenidos, haz clic en el menú Editar y selecciona Tema. 

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 ajustes más específicos de encabezados, fuentes y enlaces, haz clic en Editar junto a Más ajustes.

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. 

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.

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 de tu tema se basan en los campos del tema 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 los campos temáticos que puedes incluir en tus plantillas, consulta la documentación para diseñadores de .

Nota: recuerda que puedes personalizar fuentes, colores y estilos dentro de un módulo de texto enriquecido de en tu página, o anulando los 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: éstos son los tipos de letra y estilos predeterminados aplicados a los módulos de botones 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 en 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. Aprende a configurar en tu menú de navegación en la Configuración de la cuenta. Para colocar el logotipo de tu empresa en las plantillas de tus temas, añade la imagen de tu 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 vean, pasen por encima 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 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. Aprende a configurar en tu menú de navegación en la Configuración de la cuenta. 

• Menú: selecciona el color y el estilo de la fuente para el menú de navegación en el pie de página de tu 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.