Usar el Editor de CSS

Aplica CSS personalizado a estilos de fuentes, colores y fondos además de las opciones integradas de Squarespace.

Última actualización: 3 de febrero de 2025

Si tienes conocimientos de codificación y quieres personalizar tu sitio además de las opciones de estilo integradas, puedes agregar código CSS usando el Editor de CSS.

Debes usar CSS solo para cambiar fuentes, colores y fondos. Si hicieras otros cambios de CSS podrías dañar tu sitio.

Mira el video

Limitaciones

  • Revisa nuestras recomendaciones sobre lo que debes y no debes cambiar con CSS en nuestras preguntas frecuentes sobre código personalizado.
  • En la versión 7.0, el código CSS personalizado no se transfiere cuando cambias de plantilla. Si vuelves a cambiar a la plantilla anterior, el CSS que hayas agregado a ella aún estará allí.
  • El sistema de comprobación de sintaxis del editor de CSS de Squarespace es un analizador, que prueba lo que va a funcionar en diferentes navegadores. Incluso si el código no devuelve un error en un validador CSS, el analizador lo marcará si cree que una línea puede no funcionar de la manera que se pretende. Si ves un error de sintaxis, revisa el código CSS para asegurarte de que está escrito correctamente y en el formato adecuado, y que no falta nada.

Nota

El código personalizado, incluido CSS, está fuera del alcance de nuestro soporte. Esto significa que no podemos ayudarte más con la configuración o la solución de problemas. Además, con una solución basada en un código, no podemos garantizar su funcionamiento o la compatibilidad total con Squarespace. Esto incluye cómo funciona con nuestro diseño adaptable, en especial su aspecto en dispositivos móviles y sus funciones en todas las plantillas. Las personalizaciones de CSS también pueden ocasionar problemas de visualización con actualizaciones futuras de nuestra plataforma. Aunque no podemos ayudarte más, hay muchos recursos que te pueden orientar en la dirección correcta:

Agrega código CSS

Para agregar código CSS:

  1. Abre el panel CSS personalizado.
  2. Para abrir el editor en una ventana expansible, haz clic en Abrir en una ventana nueva. Se cerrará la ventana si sales del panel de CSS personalizado.
  3. Agrega tu código.
  4. Cuando haya terminado, haz clic en Guardar para publicar los cambios.

Los números de línea aparecen a la izquierda para ayudarte a hacer referencia a las distintas partes de tu código. Los errores de sintaxis aparecen en rojo, en la parte inferior.

KB Guide Image

Subir archivos (optativo)

Usa el área para carga de archivos si deseas subir activos de imágenes personalizadas o archivos de fuentes:

  1. Haz clic en Archivos personalizados. (En la versión 7.0, el texto del botón es Gestionar archivos personalizados). 
  2. Haz clic en Agregar imágenes o fuentes, o arrastra los archivos a esa área para subir tu archivo.

Consejo

Si el área para subir archivos no se abre, habilita las ventanas emergentes en tu navegador.

Tipos de archivo aceptados

El área de Archivos Personalizados acepta archivos de imagen y de fuente válidos:

  • .jpg
  • .png
  • .gif
  • .ttf
  • .otf
  • .woff

El archivo no acepta archivos .svg.

Uso de archivos personalizados

Para usar los archivos:

  1. Escribe tu código hasta el punto en que necesites la URL del archivo a la que deseas hacer referencia.
  2. Deja el cursor donde quieras colocar la URL en el código.
  3. Haz clic en el archivo.

El Editor de CSS automáticamente pega la URL directa de ese archivo para que puedas hacer referencia a ella en tu código.

Archivos personalizados y SSL

La URL del archivo se formateará como segura o poco segura, según si tienes habilitado el SSL. Si cambias la preferencia de SSL de tu sitio, te recomendamos actualizar la URL del archivo para combinarla. Por ejemplo, si habilitas SSL:

  1. Abre el Editor de CSS.
  2. Haz clic en Manage Custom Files (Administrar Archivos Personalizados).
  3. Haz clic en el archivo.
  4. Cambia la URL de inicio por https.
  5. Haz clic en Guardar.
add-the-s.png
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.