Become a HubSpot power user — join us for HubSpot Training Day 2017.

Cómo crear, editar y adjuntar archivos CSS para diseñar tu sitio

Última actualización: December 29, 2016

HubSpot hace que sea fácil para los diseñadores crear y mantener las hojas de estilo dentro del Administrador de diseño. Las hojas de estilo en cascada o CSS (por sus siglas en inglés) son archivos codificados que seleccionan elementos de tu página y controlan su presentación. Imagina que las plantillas que creas y sus HTML son los huesos de tu sitio web y los CSS son la piel.

Este artículo te guiará en el proceso de crear, publicar y adjuntar un archivo CSS en HubSpot. Si no te sientes cómodo trabajando con CSS o buscas solamente realizar cambios simples en una página en particular, échale un vistazo a este artículo sobre cómo usar la pestaña Estilo.

 

Navegar hasta Administrador de diseño

Para crear o editar un archivo CSS existente, navega hasta el Administrador de diseño (Contenido > Administrador de diseño).

Navegar hasta Administrador de diseño
Si usted fue migrado a HubSpot por el equipo de Servicios técnicos de HubSpot, usted ya tendrá algunos archivos CSS por defecto creados para usted. Si es necesario, usted puede hacer que su diseñador modifique estos archivos para ajustar la apariencia de su sitio. Los nombres y las explicaciones de los archivos agregados por el equipo de Servicios técnicos se pueden encontrar aquí. Después de localizar el archivo, vaya al paso 3.

Crear un nuevo archivo codificado

Haz clic en la carpeta Archivos codificados y haz clic en el botón azul Nuevo archivo codificado.

Nuevo archivo codificado

Haz clic en la opción Editor de códigos y en la opción Página. A continuación, haz clic en el botónCrear.

Darle un nombre al archivo y guardarlo

Selecciona una carpeta en donde quieras crear la hoja de estilo CSS nueva. Además, puedes crear una carpeta nueva, al seleccionar la carpeta principal y hacer clic en Carpeta nueva y darle un nombre a la carpeta. A continuación, dale un nombre a tu archivo CSS con una extensión .css. Por último, haz clic en Guardar para crear tu archivo CSS nuevo. 

Darle un nombre al archivo y guardarlo

Editar un archivo CSS

Una vez que hayas creado o abierto un archivo CSS existente, puedes editarlo en el editor de códigos. Además de los archivos CSS estándares, el editor de códigos es compatible con variables y macros HubL para que mantener tu CSS sea más fácil. 

Para ver una lista de selectores CSS estándar para las plantillas de HubSpot, consulta Plantillas de CSS(artículo en inglés). 

Editar un archivo CSS

Publicar el archivo

Haz clic en Publicar cambios para recopilar y comprimir el código CSS. 

Publicar cambios

Adjuntar a una plantilla

Para adjuntar hojas de estilos a la disposición de elementos de una plantilla, abre la plantilla y haz clic en Acciones > Editar el encabezamiento. Abre la hoja de estilo y haz clic en +Agregar hojas de estilos. Selecciona la hoja de estilo, haz clic en Agregar, Guardar y Publicar cambios.

Captura de pantalla del artículo de ayuda de HubSpot
Aunque también se puede adjuntar archivos CSS en el dominio o en el nivel de página, se recomienda adjuntar siempre a nivel de plantilla. También es posible que desee desactivar las hojas de estilo de dominio para reducir las posibilidades de cualquier conflicto de código. Para obtener más información acerca de dónde CSS se puede conectar, echa un vistazo a este artículo.

CSS Principal

HubSpot Academy

Mejores prácticas

Lo que en última instancia va a ir en su CSS primario dependerá de la complejidad de su diseño del sitio web, pero aquí hay algunas recomendaciones:
  • CSS responsivo - se puede incluir el código de HubSpot required_base.css para hacer las plantillas sean responsivas.
  • Normalizar CSS - cualquier código que desee añadir a todas sus páginas para ayudar que los navegadores reproduzcan sus páginas constantemente se puede agregar al CSS primario.  
  • Contenedor de anchura máxima - el COS de HubSpot es automática responsivo, pero todavía se necesita especificar la anchura máxima de las áreas de contenido de sus páginas.  Para obtener más información acerca de la aplicación de una anchura máxima a sus contenedores echa un vistazo a este artículo..
  • Código fluido de los medios de comunicación - haga que imágenes y videos sean responsivos. El CSS específico que puede usar para que las imágenes sean responsivas se puede encontrar aquí.
  • Código responive de tablas - tablas pueden romper aspectos responsivos, por lo que cualquier código que se agrega al estilo de datos tabulares pueden ser añadido al CSS primario.
  • Estilismo de otros módulos estándar - estilizar cualquiera de los módulos estándar cubiertos en la última sección de esta guía. Por ejemplo, es posible que desee agregar un estilo para el módulo de control deslizante de imagen en el CSS primario, para que se vea y se comporte consistentemente en todas las plantillas.
Lee más

Un CSS principal es un archivo CSS que se incluye automáticamente en todas tus plantillas (a menos que estén deshabilitados). El CSS principal les permitirá a tus diseñadores ahorrar tiempo, especialmente si tu empresa planea crear varios temas para usar en tus distintas herramientas de HubSpot.

Si terminas creando múltiples versiones del estilo de un sitio o si requieres campañas con marcas diferentes, es posible que debas escribir una gran parte del código de base una y otra vez. En este caso, el CSS principal puede alojar todo tu código global, mientras que las hojas de estilos adicionales se pueden escribir para las distintas decisiones estéticas específicas de una campaña. 

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: