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

Comprender la fuente de estilo de una página

Última actualización: abril 6, 2023

Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique lo contrario:

Todos los productos y planes

Hay varios lugares donde se puede añadir el estilo de contenido en Hub Spot, y se aplica en un orden específico basado en donde se añade. A continuación, descubre cómo se aplica el estilo, cómo encontrar estilo en una página en vivo y cómo obtener ayuda con las ediciones de diseño.

Comprender cómo se aplica el estilo

El estilo CSS en HubSpot se aplica en orden en función de dónde esté establecido en HubSpot, como se detalla a continuación. Por ejemplo, el estilo establecido en una hoja de estilo global se sobrescribe por el estilo establecido en una página específica. 

  1. Módulos CSS personalizados
    1. Hojas de estilo adjuntas a un módulo.
    2. CSS agregado a la sección CSS de un módulo.
    3. CSS dentro de HubL del módulo dentro de un bloque require_css
  2. Hojas de estilo agregadas a una plantilla a través del bloque require_css
  3. Hojas de estilo predeterminadas de HubSpot (por ejemplo, layout.css)
  4. Hojas de estilo adjuntas a la plantilla

    design-manager-linked-stylesheet
  5. Hojas de estilo adjuntas en la pestaña de configuración de su página

    page-editor-attach-stylesheet
  6. Hojas de estilo adjuntas en su configuración para todos los dominios
  7. Hojas de estilo adjuntas en su configuración para un dominio específico
  8. CSS añadido dentro de las etiquetas <style>. Por ejemplo, la cabecera HTML de la configuración de su sitio web, la configuración de la páginao la plantilla.

    page-editor-head-html
  9. Estilos añadidos a través del editor de páginas. HubSpot también agrega etiquetas !important a estos estilos. Más información sobre etiquetas !important y cómo afectan el estilo.

page-editor-styles-tab

Encontrar el estilo en una vista preliminar o página en vivo

Puedes usar herramientas de desarrollador en tu navegador para examinar los estilos aplicados a tu sitio web en vivo o una página de vista preliminar. Cada navegador varía ligeramente en cómo solucionar el estilo.

Para encontrar el estilo en Google Chrome:

  • En tu vista preliminar o página en vivo, haz clic con el botón derecho en el elemento que deseas examinar y luego selecciona Inspeccionar.
  • En el panel Elementos de la izquierda, verás el HTML de la página. Puedes hacer clic en los elementos para ver sus estilos o usar el símbolo del cursor en la parte superior izquierda del panel para hacer clic en elementos de la página.

    inspect-live-page-cursor

  • En el panel Estilos de la derecha, verás todos los estilos que se apliquen a ese elemento. Puedes seleccionar y borrar las casillas de comprobación junto a cada estilo para eliminar y aplicar el estilo. Esto le ayudará a determinar qué regla de estilo debe cambiar.

    inspect-live-page
  • A la derecha de las reglas CSS, verás el nombre de la fuente para ese estilo, lo cual te indica de dónde proviene el estilo. Coloca el cursor sobre el nombre de la fuente para ver el nombre:
    • Si CSS proviene de una hoja de estilo, el nombre de la hoja de estilo aparecerá junto a la declaración CSS en el inspector. A continuación, puede ir a su gestor de diseño, buscar la hoja de estilos y realizar las modificaciones necesarias.

      inspect-css-stylesheet-name
    • Si el nombre de la fuente comienza con el módulo, es probable que el estilo provenga de la CSS de un módulo. Pase el ratón por encima del nombre de la fuente para ver el nombre completo del módulo.

      inspect-css-module-name
    • Si el nombre de la fuente es la Hoja de estilo de agente de usuario, la CSS es parte del estilo predeterminado del navegador. Verás esto con más frecuencia para el estilo general de etiquetas HTML, como <p>, <h1>, <h2>, <span>, <div>, etc. Este estilo se aplica cuando el navegador no puede encontrar reglas de estilo generales para el elemento, pero puede sobrescribirse añadiendo estilos propios a ese elemento.

      inspect-css-user-agent
    • Si el nombre de la fuente es la URL de la página, el CSS proviene de etiquetas <style> en la página. Por ejemplo, el estilo podría establecerse en la página o en el encabezado HTML de la plantilla.

      inspect-css-page-url
    • Si el nombre de la fuente es la URL de la página y el estilo está dirigido a #hs_cos_wrapper_module_number, es probable que el estilo esté establecido en la pestaña Estilos del editor de páginas. HubSpot agregará etiquetas !important a estos estilos. Más información sobre las etiquetas important y cómo afectan al estilo.

      inspect-css-styles-tab
    • Si el nombre de la fuente es <style> es probable que el estilo se incluya automáticamente con el elemento. A menudo, esto se debe al estilo establecido en el editor de un activo HubSpot incrustable, como un widget de CTA o de reunión.

      page-styling-style-tag0
    • Si element.style aparece junto a la declaración en el inspector, el CSS ha sido establecido en línea. El estilo en línea es el estilo que se añade directamente al código fuente HTML de una páginao a los campos deestilo en línea de una plantilla. Por ejemplo, el estilo en línea en el código fuente aparecería como <p style="background:purple;">Hola mundo</p>.

      inspect-css-element-style

Para obtener más detalles sobre cómo inspeccionar una página, revisa la documentación de ayuda para tu navegador web:

Obtener ayuda con las ediciones de diseño

El mejor recurso para realizar cambios en tus plantillas de HubSpot u hojas de estilo es el diseñador de plantillas original. Sin embargo, hay diversos recursos para obtener ayuda adicional con el estilo de contenido, según tu nivel de comodidad con solución de problemas de HTML y CSS.

  • Si te sientes cómodo usando las herramientas de inspector para solucionar problemas de diseño en tu plantilla:
  • Si no te sientes cómodo leyendo o editando HTML y CSS en tus plantillas:
¿Te resultó útil este artículo?
Este formulario se utiliza solo para recibir comentarios a la documentación. Cómo recibir ayuda con HubSpot.