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 de codificación y deseas personalizar tu sitio más allá de los ajustes que puedes realizar en el panel Diseño, puedes agregar código CSS utilizando 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. En el Menú de Inicio, haz clic en Diseño y, a continuación, en 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 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.

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 en el editor de 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: 86 de 244