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. En este artículo, aprenderá cómo se aplica el estilo, cómo encontrar el estilo en una página en vivo, y cómo obtener ayuda con las ediciones de diseño.

Entender cómo se aplican los estilos

Los estilos se aplican en un orden específico basado en el lugar donde se añaden en HubSpot. Por ejemplo, los estilos añadidos en una hoja de estilos global son anulados por los estilos añadidos en una página específica. 

Utilice esta lista para comprender el origen del estilo de una página, empezando por los estilos aplicados en primer lugar y terminando por los estilos aplicados en último lugar.

1. Módulo personalizado CSS
   • Hojas de estilo adjuntas a un módulo en el editor de diseño.

• • CSS añadido a la secciónmodule.css de un módulo en el editor de módulos.

1. • CSS dentro del marcado HubL del módulo dentro de un archivo require_css block.
2. Las hojas de estilo añadidas a una plantilla a través del botón require_css block en el editor de código.
3. Hojas de estilo predeterminadas de HubSpot (por ejemplo, layout.css) en el administrador de diseño.
4. Hojas de estilo adjuntas a la plantilla en el editor de diseño.

5. Hojas de estilo adjuntas en la pestaña de configuración 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, la cabecera HTML de la configuración de su sitio web, la configuración de la página o la plantilla.

9. Estilos añadidos a través del editor de páginas. HubSpot también añadirá !important a estos estilos. Más información sobre las etiquetas !important y cómo afectan al estilo.

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

Utilice las herramientas de desarrollo de su navegador para encontrar los estilos aplicados a su sitio web en directo o a una página de previsualización. Cada navegador varía ligeramente en la forma de solucionar los problemas de estilo. En el siguiente ejemplo, se utiliza Google Chrome.

1. Ve al contenido:
   • En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
2. Haz clic en el nombre de tu página.
3. En el editor de contenido, haz clic en Vista previa en la parte superior derecha.
4. En la página de vista previa, haga clic en Abrir en una pestaña nueva.
5. En la vista previa, haga clic con el botón derecho del ratón en el elemento que desee examinar y seleccione Inspeccionar.
6. En el panel Elementos , verá el HTML de la página. Haga clic en los elementos para ver sus estilos.
7. En el panel Estilos , revise las reglas CSS aplicadas a ese elemento. Seleccione y desactive las casillas de verificación situadas junto a cada estilo para eliminar o añadir estilos temporalmente. Esto ayudará a identificar qué regla está afectando al elemento.

8. A la derecha de las reglas CSS, verás el nombre de la fuente de ese estilo. Esto confirma dónde se encuentra la fuente del estilismo. Pase el ratón por encima del nombre de la fuente para ver el nombre completo:
   • Si el estilo procede de un archivo CSS, el nombre de la hoja de estilos aparecerá junto a la declaración CSS. Vaya al administrador de diseño, busque la hoja de estilo y modifíquela según sea necesario.

• • Si el nombre de la fuente empieza por module, entonces el estilo proviene 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 estilo es parte del estilo por defecto del navegador.
    • Por lo general, verá esto para el estilo de etiquetas HTML (por ejemplo, <p>, <h1>, <span> etc.), cuando el navegador es incapaz de encontrar reglas de estilo para el elemento. 
    • La hoja de estilos del agente de usuario se puede anular añadiendo sus propios estilos a ese elemento.

• • Si el nombre de la fuente es la URL de la página, el estilo procede de las etiquetas <style> de la página. Por ejemplo, el estilo podría establecerse en la página o en el encabezado HTML de la plantilla.

• • Si el nombre de origen es la URL de la página y el estilo se dirige a #hs_cos_wrapper_module_number, el estilo se añade 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>, el estilo se incluye automáticamente con el elemento. A menudo, esto se debe a que el estilo en el editor de un activo HubSpot incrustable, como un CTA o widget de reunión.

• • Si element.style aparece junto a la declaración en el inspector, el CSS se ha establecido 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 aparecería como <p style="background:purple;">Hello world</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 utilizando las herramientas de inspección para solucionar problemas de diseño en tu plantilla:

• • Busque y publique en el Foro de Desarrollo de CMS en la Comunidad para obtener sugerencias, consejos o solucionar problemas con su 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 tema para editar los estilos de página sin escribir 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.