Última actualización: abril 26, 2023
Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique lo contrario:
Todos los productos y planes
|
Las CSS (hojas de estilo en cascada) son archivos codificados que seleccionan elementos de tu página y controlan su presentación. Piensa en el HTML de tu plantilla personalizada como los huesos del sitio web y la CSS como la piel.
En este artículo se describe cómo crear, publicar y adjuntar un archivo CSS en HubSpot. Puedes aprender a hacer cambios de diseño sencillos en una página en particular aquí. Si usas una plantilla de tema, descubre cómo editar la configuración de tu tema.
Crear un nuevo archivo de CSS
- En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
- Haz clic en el ícono de carpeta en la esquina superior izquierda para expandir el menú de la barra lateral. Luego, haz clic en Archivo > Nuevo archivo.
- En el cuadro de diálogo, haz clic en Hoja de estilos CSS. Luego, escribe un nombre para la hoja de estilo CSS y haz clic en Crear.
Edita el archivo CSS
Una vez que hayas creado o abierto un archivo CSS existente, realiza tus ediciones en el editor de códigos. Además de las CSS estándar, el editor de códigos admite variables de HubL y macros para facilitar el mantenimiento de las CSS. Para ver la vista preliminar de tu HubL, haz clic para activar el interruptor Mostrar salida en la parte superior del editor. Un panel se abrirá del lado derecho con la vista preliminar.
Para ver una lista de selectores CSS estándar para las plantillas de HubSpot, echa un vistazo a la CSS reutilizable.
Antes de publicar, revisa si hay errores de HubL en tu código. Hay tres lugares donde puedes buscar errores o advertencias de HubL en un módulo personalizado o un archivo codificado:
- En la consola de error en la parte inferior del editor de código.
- En el margen de errores en el lado izquierdo del editor de código.
- En la barra de desplazamiento del lado derecho del editor.
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ódigos, 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.
En la consola de errores, habrá enlaces hacia los lugares donde haya errores o advertencias de HubL en tu código o módulo personalizado. Coloca el cursor sobre los indicadores de error rojos en el lado izquierdo del editor de códigos para ver el error o la advertencia en tu código. Si haces clic en el error, verás todos los errores o las advertencias en esa línea. Si haces clic en una anotación de la barra de desplazamiento, pasarás a esa parte del archivo.
También puedes hacer clic en un número de línea dentro del editor de códigos y actualizar la URL del archivo en consecuencia. Esto te permite compartir un enlace a tu código con otros y dirigirlos exactamente donde estás trabajando en el archivo.
Después de editar el archivo, haz clic en Publicar cambios en la esquina superior derecha. Si quieres llamar a esta hoja de estilo en otra plantilla codificada, copia la URL de la hoja haciendo clic en Acciones > Copiar URL pública en el menú de la barra lateral izquierda.
Adjuntar a la plantilla
En HubSpot, puedes adjuntar hojas de estilo a tu contenido de diferentes maneras. A continuación, se encuentra el orden en el que se vinculan las hojas de estilo adjuntas en tu sitio:
- public_common.css *: una hoja de estilo utilizada principalmente por la aplicación de HubSpot, pero también para determinadas características del sitio.
- HTML de encabezado en la configuración, en Sitio web > Páginas: vincula las etiquetas agregadas al <head> global del sitio.
- Layout.css **: archivo de CSS adaptable predeterminado adjunto en todos los diseños de plantillas de arrastrar y soltar.
- Hojas de estilo adjuntas en la configuración, en Sitio web > Páginas: hojas de estilo adjuntas en todo el sitio.
- Hojas de estilo adjuntas en la configuración, en Sitio web > Blog: hojas de estilo adjuntas a tu blog (anula las hojas globales del sitio).
- Hojas de estilo enlazadas***: hojas de estilo adjuntas en el diseño de la plantilla.
- Marca de <head> adicional en la plantilla: enlaza etiquetas al <head> de un diseño de plantilla en particular.
- Hojas de estilo específicas de la página: hojas de estilo adjuntas en la configuración de una página.
- HTML de encabezado de página: enlaza etiquetas agregadas al <head> de una página en particular en la configuración de la página.
* Obligatorio
** Obligatorio para los diseños de arrastrar y soltar
*** Método recomendado para adjuntar archivos de hojas de estilo para diseños de plantilla
Para adjuntar hojas de estilo a una plantilla, abre la plantilla en el administrador de diseño. En el menú de la barra lateral derecha, en Opciones de encabezado y cuerpo, selecciona un archivo en el menú desplegable Agregar junto a Hojas de estilo enlazadas.
Para editar o eliminar una hoja de estilo que ya esté adjunta, coloca el cursor sobre ella y haz clic en Editar para hacerle cambios o en la X para eliminarla.
Después de agregar una hoja de estilo, haz clic en Publicar cambios en la esquina superior derecha para aplicar tus cambios en las páginas activas usando la plantilla.
Adjuntar o eliminar hojas de estilo en una página específica de Google (solo Marketing Hub Pro y Enterprise)
Nota: esta opción no está disponible para plantillas de tema. Descubre cómo editar la configuración de tu tema.
Para agregar o eliminar una hoja de estilo específica de una página desde la sección de configuración del editor de página:
- Navega hasta las páginas del sitio web o las páginas de destino.
- Coloca el cursor sobre tu página y haz clic en Editar.
- En el editor de página, haz clic en Configuración en la parte superior.
- Desplázate y haz clic en Opciones avanzadas.
- En Hojas de estilo de página, haz clic en el menú desplegable Adjuntar una hoja de estilo y selecciona la hoja que deseas adjuntar. Haz clic en la X junto a la hoja de estilo que deseas eliminar.
- Haz clic en Guardar y Publicar en la esquina superior derecha.
También puedes desactivar las hojas de estilo que hereda la página desde la plantilla o el dominio. Si las desactivas, estas hojas de estilo no se aplicarán a la página:
- En la misma pestaña Configuración del editor de página, selecciona Desactivado en el menú desplegable junto a tus hojas de estilo incluidas.
- Haz clic en Guardar y Publicar en la esquina superior derecha.
Adjuntar o eliminar hojas de estilo en el nivel del dominio (solo Marketing Hub Enterprise)
Nota: las plantillas de temas deben incluir la anotación enableDomainStylesheets: verdadero para usar hojas de estilo en el nivel del dominio. Más información sobre las anotaciones de plantillas.
Para agregar o eliminar una hoja de estilo desde el contenido completo en un dominio:
- En tu cuenta de HubSpot, haz clic en el icono de Configuración en la barra de navegación principal.
- En el menú de la barra lateral, haz clic en Sitio web > Páginas.
- Haz clic en el menú desplegable para seleccionar el dominio para el que deseas actualizar la configuración.
- En la pestaña Plantillas, desplázate hasta CSS y hojas de estilo. Para agregar una hoja de estilo, haz clic en + Agregar hoja de estilo. Haz clic en la X junto a una hoja de estilo adjunta para eliminarla.
- Haz clic en Guardar.
Nota: al cambiar a las herramientas Starter o gratuitas de HubSpot, las hojas de estilo adjuntas a nivel de dominio permanecerán activas hasta que las elimines. Una vez eliminadas todas las hojas de estilo, ya no podrás adjuntar hojas de estilo a nivel de dominio. Más información sobre cómo disminuir el nivel una suscripción.
