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 el Style Editor (Editor de Estilo), puedes añadir código CSS usando el CSS Editor (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

Antes de comenzar

Revisa nuestras recomendaciones sobre qué deberías cambiar o no con CSS en nuestras Preguntas frecuentes sobre el código personalizado.

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 resolució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 apariencia 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.

Paso 1: Abre el Editor de CSS

En el Home Menu (Menú Principal), haz clic en Design (Diseño) y luego en Custom CSS (CSS Personalizado).

Verás una advertencia encima del CSS Editor (Editor de CSS) que dice que modificar el CSS podría arruinar el diseño. 

Paso 2: Añade el código CSS

Ahora que el CSS Editor (Editor de CSS) está abierto, puedes comenzar a escribir tu código.

Para abrir el editor en una ventana expandible, haz clic en Open in Window (Abrir en una ventana).

Verás números de línea a medida que añadas más código para ayudarte a hacer referencia a las distintas partes de tu código CSS.

Los errores de sintaxis se mostrarán en rojo en la parte inferior.

Nota: el sistema de revisión de sintaxis del Editor de 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.

Paso 3: Carga archivos (opcional)

Tal vez quieras usar imágenes personalizadas o archivos de fuentes. El Editor de CSS tiene un área de carga de archivos desde la que podrás incluir estos elementos.

Nota: el área de Archivos personalizados acepta archivos de imagen (.jpg, .png, .gif) o de fuentes (.ttf, .otf, .woff) válidos. No admite archivos .svg.

Para abrir esta área, haz clic en Manage Custom Files (Administrar Archivos Personalizados) bajo el CSS Editor (Editor de CSS).

Una vez que el área de Custom Files (Archivos Personalizados) esté abierta, haz clic y arrastra los archivos hacia esa área, o bien haz clic en el espacio en blanco para abrir un menú de selección de archivos y elegir los que quieras de tu computadora.

Paso 4: Usa los archivos cargados (opcional)

Si cargaste archivos de imagen o de fuentes en el área de Custom Files (Archivos Personalizados), tal vez quieras usarlos en tu código.

La manera más rápida de hacerlo es escribir el código en el punto al que necesitas que haga referencia la URL. Después, deja el cursor donde quieras colocar la URL en el código y haz clic en el archivo. El Editor de CSS pegará automáticamente la URL directa para el archivo, de modo que puedas incluir la referencia en el código.

Paso 5: Guarda los cambios

Cuando hayas terminado, haz clic en Save (Guardar) para publicar los cambios.

Nota: el CSS Personalizado no se transfiere cuando cambias de plantilla.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 26 de 64