Comprender la fuente de estilo de una página

Hay varios lugares donde el estilo de contenido se puede añadir en HubSpot, 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ódulo personalizado CSS
   1. Hojas de estilo adjuntas a un módulo.
   2. CSS añadido a la sección CSS de un módulo.
   3. CSS dentro del marcado HubL del módulo dentro de un bloque require_css
2. Hojas de estilo añadidas a una plantilla mediante el bloque require_css
3. Hojas de estilo predeterminadas de HubSpot (por ejemplo, layout.css)
4. Hojas de estilo adjuntas a la plantilla
   
   
   
   
5. Hojas de estilo adjuntas en la pestaña de ajustes de su página
   
   
   
   
6. Hojas de estilo adjuntas en sus ajustes para todos los dominios
7. Hojas de estilo adjuntas en sus ajustes para un dominio específico
8. CSS añadido dentro de las <style> etiquetas. Por ejemplo, el encabezado HTML de los ajustes de su sitio web, los ajustes de página o la plantilla.
   
   
   
   
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.

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

Puede utilizar las herramientas de desarrollo de su navegador para examinar los estilos aplicados a su sitio web en directo o a una página de vista previa. Cada navegador varía ligeramente en la forma de solucionar los problemas de estilo.

Para encontrar el estilo en Google Chrome:

• En la vista previa o en la página en vivo, haga clic con el botón derecho del ratón en el elemento que desee examinar y seleccione Inspeccionar.
• En el panel Elementos de la izquierda, verá el HTML de la página. Puede hacer clic en los elementos para ver sus estilos o utilizar el icono del cursor situado en la parte superior izquierda del panel para hacer clic en los elementos de la página.

  

• En el panel Estilos de la derecha, verás todos los estilos que se aplican 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.
  
  
  
  
• A la derecha de las reglas CSS, verás el nombre de la fuente de ese estilo, que te indica de dónde procede. Pase el ratón por encima del nombre de la fuente para ver el nombre completo:
  • 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 acceder a su administrador de diseño, buscar la hoja de estilos y realizar las modificaciones necesarias.
    
    
    
    
  • Si el nombre de la fuente empieza por module, es probable que el estilo provenga del CSS de un módulo. Pase el ratón por encima del nombre de la fuente para ver el nombre completo del módulo.
    
    
    
    
  • Si el nombre de la fuente es User agent stylesheet , el CSS forma parte del estilo por defecto del navegador. Verá esto más a menudo 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 sus propios estilos a ese elemento.
    
    
    
    
  • Si el nombre de la fuente es la URL de la página, el CSS procede de las etiquetas <style> de la página. Por ejemplo, el estilo puede ajustarse en el encabezado HTML de la página o plantilla.
    
    
    
    
  • 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 se esté ajustando en la pestaña Estilos del editor de páginas. HubSpot añadirá etiquetas !important a estos estilos. Más información sobre las etiquetas important y cómo afectan al estilo.
    
    
    
    
  • 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 ajuste de estilo en el editor de un recurso incrustable de HubSpot, como un widget de CTA o de reuniones.
  • Si element.style aparece junto a la declaración en el inspector, el CSS se ha ajustado en línea. Estilo inline es el estilo que se añade directamente al código fuente HTML de una página, o a los campos deestilo inline de una plantilla. Por ejemplo, el estilo inline en el código fuente sería el siguiente <p style="background:purple;">Hola mundo</p>.
    
    
    

Para más detalles sobre cómo inspeccionar una página, consulte la documentación de ayuda de su navegador web:

• Cromo
• Firefox
• Microsoft Edge
• Safari

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:

• • Busca y publica en el Foro de desarrollo del CMS en la Comunidad para obtener consejos, sugerencias o solución de problemas de tu código.
  • Consulte la documentación de referencia de CMS para obtener tutoriales, guías y una visión general del marco de CMS.
  • Conéctate con el equipo de producto de HubSpot y otros desarrolladores que trabajan en HubSpot en la CMS Developer Community Slack.

• Si no te sientes cómodo leyendo o editando HTML y CSS en tus plantillas:

• • Conéctate con un HubSpot Partner certificado con experiencia en diseño de sitios web para que te ayude a personalizar tus plantillas.
  • Utilice una plantilla de inicio o una plantilla de tema para editar los estilos de página sin escribir ningún código.
  • Si está utilizando una plantilla adquirida en el Mercado de materiales, póngase en contacto con el diseñador de la plantilla si tiene preguntas sobre el diseño de su página.