Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Design Manager

Crea, edita y adjunta archivos CSS para diseñar tu sitio

Última actualización: noviembre 8, 2019

Requisitos

Marketing Hub  Professional, Enterprise
Básico

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í.

Ten en cuenta: si migraste a HubSpot por el equipo de servicios técnicos de HubSpot, ya tendrás algunos archivos CSS predeterminados creados para ti. Si es necesario, trabaja con tu diseñador para modificar estos archivos y ajustar el aspecto de tu sitio.

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 folder en la esquina superior izquierda para expandir el menú de la barra lateral. Luego, haz clic en Archivo > Nuevo archivo.
Nuevo archivo codificado
  • 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.


design-manager-show-output-toggle

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 el 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 el URL de la hoja haciendo clic en Acciones > Copiar URL pública en el menú de la barra lateral izquierda.

Editar CSS

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:

  1. public_common.css *: una hoja de estilo utilizada principalmente por la aplicación de HubSpot, pero también para determinadas características del sitio.
  2. HTML de encabezado en la configuración, en Sitio web > Páginas: vincula las etiquetas agregadas al global del sitio.
  3. Layout.css **: archivo de CSS adaptable predeterminado adjunto en todos los diseños de plantillas de arrastrar y soltar.
  4. Hojas de estilo adjuntas en la configuración, en Sitio web > Páginas: hojas de estilo adjuntas en todo el sitio.
  5. 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).
  6. Hojas de estilo vinculadas***: hojas de estilo adjuntas en el diseño de la plantilla.
  7. Marca de adicional en la plantilla: vincula etiquetas al de un diseño de plantilla en particular. 
  8. Hojas de estilo específicas de la página: hojas de estilo adjuntas en la configuración de una página.
  9. HTML de encabezado de página: vincula etiquetas agregadas al 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 vinculadas.

Para editar o eliminar una hoja de estilo que ya esté adjunta, mueve 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 publicadas usando la plantilla. 

Captura de pantalla de un artículo de ayuda de HubSpot

Adjuntar o eliminar hojas de estilo en una página específica

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:

  • Navegar 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 junto a la hoja de estilo que deseas eliminar.

  • Haz clic en Guardar 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 Publicar en la esquina superior derecha.

Adjuntar o eliminar hojas de estilo en un nivel de dominio

Para agregar o eliminar una hoja de estilo desde el contenido completo en un dominio: 

  • En tu cuenta de HubSpot, haz clic en el símbolo de configuración settings, situado 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ñaPlantillasdesplá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