Crear, editar y adjuntar archivos CSS

Las hojas de estilo en cascada (CSS) controlan la presentación visual de las páginas de tu sitio web mediante la selección y el diseño de los elementos de las páginas. Utiliza el administrador de diseño para crear nuevos archivos CSS, editar los ya existentes y asociarlos a plantillas, páginas concretas o dominios completos.

Si deseas realizar cambios sencillos en el diseño de una página concreta, obtén más información sobre cómo editar el contenido de una página en el editor de contenido. Si estás utilizando una plantilla de tema, obtén más información sobre cómo editar la configuración de tu tema.

Crear un nuevo archivo de CSS

1. En tu cuenta de HubSpot, haz clic en Más y luego ve a Contenido > Administrador de diseño. Si Más no aparece en tu cuenta, ve directamente a Contenido > Administrador de diseño.
2. En el Finder, haz clic en «Archivo» > «Archivo nuevo», en la esquina superior izquierda.
3. En el cuadro de diálogo, haz clic en el menú desplegable y selecciona «CSS + HubL». 
4. Haz clic en Siguiente.
5. Introduce un nombre para tu archivo en el campo «Nombre de archivo ».
6. Para cambiar la ubicación del archivo, haz clic en «Cambiar». En la ventana emergente, selecciona una nueva ubicación para el archivo. 
7. Cuando hayas terminado, haz clic en Crear.

Editar un archivo CSS

Una vez que hayas creado o abierto un archivo CSS ya existente, realiza los cambios en el editor de código. Además del CSS estándar, el editor de código admite variables y macros de HubL para facilitar el mantenimiento de tu CSS.

Para ver una lista de selectores CSS estándar para las plantillas de HubSpot, consulta «Boilerplate CSS».

1. { local.navDesignManager }}
2. En el Finder, haz clic en «Archivo » > y crea un nuevo archivo o abre uno ya existente de CSS.
3. En el editor de código, introduce o actualiza el CSS para realizar tus modificaciones. 

Para obtener una vista previa de cómo se mostrará tu HubL , haz clic en el botón «Mostrar resultado» situado en la parte superior del editor. Se abrirá un panel a la derecha con la vista previa renderizada.

Comprueba si hay errores

Antes de publicar, revisa si hay errores de HubL en tu código. Los errores aparecen en la consola, en la parte inferior, en el panel de errores de la izquierda y en la barra de desplazamiento de la derecha del editor de código.

Los errores que te impiden publicar aparecen en rojo, mientras que las advertencias generales aparecen en amarillo. En la parte inferior del editor de código, haz clic en Mostrar detalles para ver más información sobre los errores en la consola de errores y en Ocultar detalles para contraer la consola de errores. 

Publicar un archivo CSS

Una vez que hayas editado tu archivo CSS, haz clic en «Publicar cambios» en la esquina superior derecha. Para incluir esta hoja de estilo en otra plantilla programada, haz clic en el menú desplegable «Acciones » del explorador y selecciona «Copiar URL pública». 

Adjuntar hojas de estilo a los recursos

Añade hojas de estilo a tus plantillas, a páginas concretas o a todo un dominio. Las hojas de estilo se aplican en un orden concreto en función de dónde estén incluidas. La siguiente lista refleja el orden en el que se aplican en tu sitio web:

1. public_common.css(obligatorio): una hoja de CSS que utiliza principalmente la aplicación de HubSpot, pero que también se emplea para determinadas funciones del sitio web.
2. Código HTML del encabezado: se han añadido etiquetas de enlace a la sección global <head> de tu sitio en la configuración de la página «Contenido» > .
3. Layout.css(necesario para los diseños de arrastrar y soltar): archivo CSS adaptativo predeterminado asociado a todas las plantillas de diseño de arrastrar y soltar.
4. Hojas de estilo adjuntas (Páginas): hojas de estilo adjuntas a todo tu sitio web en «Contenido» > «Configuración de la página».
5. Hojas de estilo adjuntas (blog): hojas de estilo adjuntas a tu blog (que sustituyen a las hojas globales del sitio) en Contenido > Configuración del blog.
6. Hojas de estilo vinculadas(recomendadas para diseños de plantilla): hojas de estilo adjuntas al diseño de la plantilla.
7. <head> Marcado adicional <head> en la plantilla: etiquetas de enlace añadidas a la <head> de un diseño de plantilla concreto.
8. Hojas de estilo específicas de cada página:hojas de estilo asociadas a la configuración de una página.
9. Código HTML de la cabecera de la página:etiquetas de enlace añadidas a la <head> de una página concreta en la configuración de la misma.

Añadir hojas de estilo a las plantillas

Las hojas de estilo se pueden adjuntar a las plantillas de arrastrar y soltar en el inspector , dentro del administrador de diseño. En el caso de las plantillas con código, las hojas de estilo se añaden directamente en el editor de código.

Plantillas de arrastrar y soltar

1. En tu cuenta de HubSpot, haz clic en Más y luego ve a Contenido > Administrador de diseño. Si Más no aparece en tu cuenta, ve directamente a Contenido > Administrador de diseño.
2. En el Finder, haz clic en el nombre del archivo de tu plantilla de arrastrar y soltar.
3. En el inspector, haz clic en el menú desplegable «Añadir» de la sección «Hojas de estilo vinculadas» y selecciona tu hoja de estilo. Para eliminar una hoja de estilo, haz clic en la «X».
4. Cuando hayas terminado, haz clic en «Publicar cambios», en la esquina superior derecha, para aplicar los cambios a las páginas activasque utilizan la plantilla.

Plantillas codificadas

En el caso de las plantillas codificadas, las hojas de estilo se adjuntan directamente en el editor de código mediante las etiquetas « <link> » o la etiqueta HubL en la <head> del archivo. Obtén más información sobre las plantillas codificadas en la documentación para desarrolladores.

Aplicar hojas de estilo a una página concreta

Nota: Esta opción no está disponible en el caso de las plantillas de los temas. Descubre cómo modificar la configuración de tu tema.

Para aplicar una hoja de estilo específica para una página desde la sección de configuración del editor de contenido:

1. Ve al contenido:

   • Páginas de sitio web: En tu cuenta de HubSpot, haz clic en Más y luego ve a Contenido > Páginas web. Si Más no aparece en tu cuenta, ve directamente a Contenido > Páginas web.
   • Landing Pages: En tu cuenta de HubSpot, haz clic en Más y luego ve a Contenido > Landing Pages. Si Más no aparece en tu cuenta, ve directamente a Contenido > Landing Pages.
2. Haz clic en el nombre de tu página.
3. En el editor de contenido, haz clic en el menú Configuración y selecciona Avanzadas. 
4. En el cuadro de diálogo, en la sección «Hojas de estilo» , haz clic en el menú desplegable «Adjuntar una hoja de estilo » y selecciona una hoja de estilo. Para eliminar una hoja de estilo, haz clic en la «X» situada junto a la hoja de estilo.
5. Para desactivar las hojas de estilo heredadas de la plantilla o del dominio, haz clic en el menú desplegable situado junto a la hoja de estilo y selecciona«Desactivado».

Adjuntar hojas de estilo del dominio

Nota:las plantillas de temadeben incluir la anotación enableDomainStylesheets: true para poder utilizar hojas de estilo a nivel de dominio. Más información sobre las anotaciones en las plantillas.

Para aplicar una hoja de estilo a todo un dominio:

1. En tu cuenta de HubSpot, haz clic en el icono de Configuración en la barra de navegación superior.
2. En el menú lateral, haz clic en «Contenido » > «Páginas».
3. Haz clic en el menú desplegable para seleccionar el dominio cuya configuración deseas actualizar.
4. En la pestaña «Plantillas» , en la sección «Hojas de estilo CSS» ( & ), haz clic en «+ Añadir hoja de estilo». Para eliminar una hoja de estilo, haz clic en la «X» situada junto a la hoja de estilo adjunta.
5. Haz clic en Guardar.

Nota: Al cambiar a la suscripción Starter o gratuita de HubSpot, las hojas de estilo vinculadas a nivel de dominio permanecerán activas hasta que las elimines. Una vez eliminadas todas las hojas de estilo, ya no podrás vincular hojas de estilo a nivel de dominio. Más información sobre cómo bajar de categoría una suscripción:.