Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Usar el Editor de CSS

Si tienes conocimientos en codificación y quieres personalizar tu sitio más allá de los ajustes que puedes hacer en Estilos del sitio, puedes añadir 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.

Nota: El 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í.

Mira el video

Antes de comenzar

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 códigos, no podemos garantizar su funcionamiento o la compatibilidad total con Squarespace. Esto incluye cómo funciona con nuestro diseño adaptativo, 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. En el Home Menu (Menú Principal), haz clic en Design (Diseño) y luego en Custom CSS (CSS Personalizado).
  2. Para abrir el editor en una ventana expansible, haz clic en Abrir en una ventana. Se cerrará la ventana si sales del panel de CSS personalizado.
  3. Agrega tu código.
  4. Cuando hayas 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.

Nota: El sistema de revisión de sintaxis del Editor CSS de Squarespace es un analizador. En lugar de validar el código en comparación con una serie de reglas, el analizador evalúa lo que realmente funcionará en los distintos navegadores. Incluso si el código no indica un error en un validador de CSS, el analizador lo detectará si determina que una línea podría no funcionar de la forma en que debe hacerlo. Si ves un error de sintaxis, revisa el CSS para asegurarte de que la redacción y el formato sean correctos, y de que no falte nada.

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 Administrar Archivos Personalizados debajo del Editor CSS.
  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

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 53 de 131