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

Cómo agregar código personalizado a tu sitio

Puedes crear un sitio web en Squarespace sin necesidad de codificación ni experiencia en diseño. Cuando agregas un bloque, estás agregando HTML a tu sitio sin escribir el código tú mismo. Del mismo modo, al realizar cambios de estilo, estás cambiando el CSS de tu sitio. La plataforma Squarespace es potente y flexible, y puedes resolver la mayoría de los desafíos de diseño con opciones de estilo integradas.

Para personalizar aún más tu sitio, puedes usar código personalizado. Te recomendamos ampliamente que tengas conocimientos de codificación antes de agregar código personalizado. Algunos cambios de codificación entrarán en conflicto con el código subyacente de tu sitio, y es posible que tengas dificultades para aplicar estilo a estos cambios.

Nota: agregar un código al sitio es una modificación avanzada que no está dentro del alcance de la atención al cliente de Squarespace.

Mira el video

Cómo agregar código personalizado

Squarespace admite agregar código del cliente a tu sitio. Las opciones dependen de tu plan. Todas las opciones están disponibles durante una versión de prueba:

Opción Plan Código admitido Acerca de
Bloque de código (básico) Todos los planes

CSS

HTML

Markdown

Añade código a una página específica para cambiar su estilo o diseño.
Bloque de código (avanzado) Planes Empresarial y Commerce

CSS

HTML

iframes

JavaScript

Markdown

Añade código a una página específica para cambiar su estilo o diseño.
Inserción de Código Planes Empresarial y Commerce

HTML
JavaScript

Añade código que afecte a todo tu sitio, o a una página completa, como Facebook Pixel o servicios de chat en vivo.
Editor de CSS Todos los planes

CSS

Cambia fuentes, colores y fondos. No realices cambios en el diseño.
Bloque de inserción Todos los planes

HTML

JavaScript

Inserta contenido de sitios externos que utilizan el estándar OEmbed.
Plataforma para desarrolladores de Squarespace Versión 7.0 solo en planes Empresarial y Commerce

CSS
HTML
JavaScript
Markdown

Accede al código subyacente completo de tu plantilla de la versión 7.0, crea plantillas personalizadas y deja de recibir actualizaciones de plantillas de Squarespace.

Squarespace no admite código del servidor, incluyendo PHP, Ruby, Ruby on Rails y SQL.

Bloques de código vs. Insertar bloques

Insertar bloque extrae contenido de sitios y servicios externos que utilizan el estándar OEmbed. Puedes usar Insertar bloque para mostrar contenido básico de terceros en tu sitio, como una publicación de Facebook o un video de un host no compatible con Squarespace.

Si tienes un código más avanzado y personalizable, Bloque de código es la mejor opción. Es versátil y puede representar código en HTML y Markdown. También puedes usarlo para mostrar fragmentos de código. Es común usar Bloques de código para personalizaciones basadas en código, como:

  • Insertar documentos a través de un servicio, como Issuu.
  • Agregar formularios no admitidos a través de un servicio, como Wufoo.
  • Agregar una búsqueda de MLS.

HTML, JavaScript y CSS

Obtén más información sobre estos tipos comunes de código personalizado que puedes agregar a tu sitio.

HTML

Código utilizado para agregar contenido a una página Web. Cuando agregas un bloque, estás agregando HTML a tu sitio.

JavaScript

Código utilizado para agregar interactividad a una página web. JavaScript trabaja en segundo plano para que funcionen presentaciones de diapositivas, controles deslizantes y lightbox.

CSS

CSS es el lenguaje de codificación utilizado para aplicar estilo y diseño a una página web escrita en HTML. Todas las plantillas de Squarespace tienen CSS incorporado, así como retoques y opciones de estilo. Al realizar cambios en Estilos del sitio, estás cambiando el CSS de tu sitio. Si decides aplicar CSS personalizado a tu sitio, úsalo con moderación.

Puedes usar el editor de CSS para personalizar:

  • Fuentes
  • Colores
  • Fondos

No deberías usar CSS para personalizar:

  • Relleno
  • Márgenes
  • Elementos flotantes
  • Tamaños (bloques, imágenes o encabezados)
  • Posicionamiento

El CSS personalizado tiene un límite de 128 000 caracteres.

Plataforma para desarrolladores de Squarespace (solo versión 7.0)

Si eres un usuario avanzado en la versión 7.0, puedes usar la Plataforma para desarrolladores de Squarespace para acceder al código subyacente de la plantilla del sitio. Esta plataforma fue diseñada para desarrolladores y agencias de diseño para modificar nuestras plantillas actuales e incluso crear plantillas desde cero.

Si no puedes pegar código personalizado

Si tienes problemas para pegar el código, intenta con el método abreviado de teclado. Haz clic en el área que deseas pegar y, a continuación, presiona:

PC Mac
Ctrl + V Comando + V

Si tu código personalizado no aparece

Es posible que el código personalizado no aparezca por algunas razones:

  • Iniciaste sesión: como medida de seguridad, es posible que el código de un bloque de código no aparezca cuando hayas iniciado sesión, incluso si los visitantes pueden verlo. Esto sucede cuando intentas ver JavaScript insertado a través de una conexión segura (https://). Para probar esto, visita tu sitio en un navegador de incógnito.
  • El código está en una página de índice: es posible que tu código no se represente si lo agregaste a una página dentro de un índice. Para probar esto, quita la página del índice del panel Páginas y, a continuación, visita tu sitio en un navegador de incógnito.

Si el código aún no funciona, contacta a la fuente del código, ya que están más familiarizados con el código y la forma en que se supone que debe funcionar. El código de terceros queda fuera del alcance del soporte de Squarespace, por lo que no podemos ayudarte con ninguna solución de problemas adicional.

Si recibes un error de CORS

Verás un error CORS (Cross Origin Resource Sharing, intercambio de recursos de origen cruzado) si usas JavaScript para hacer pedidos a un navegador. Todos los pedidos deben originarse desde una aplicación del lado del servidor. No admitimos pedidos CORS.

Recursos de codificación

A continuación puedes encontrar algunos sitios web populares y confiables que recomendamos para consultar tutoriales, información sobre resolución de problemas y guías de referencia:

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:
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 144 de 290