Mejora el estilo y la apariencia de tu sitio usando habilidades avanzadas de codificación.

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.

Agregar código a tu sitio es una modificación avanzada que queda fuera del alcance del servicio de atención al cliente de Squarespace. Si tienes conocimientos de codificación y necesitas más ayuda, visita el Squarespace Forum. Si creaste tres sitios activos, también puedes unirte a Squarespace Circle, una comunidad de profesionales creativos que pueden responder preguntas más técnicas. Si no tienes conocimientos de codificación pero quieres agregar código personalizado a tu sitio, considera contratar a un Squarespace Expert.

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:

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

Bloques de código vs. bloques de inserción

El bloque de inserción extrae contenido de sitios y servicios externos que utilizan el estándar OEmbed. Puedes usar bloques de inserción 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, el 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 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:

Si tu código personalizado no aparece

Si tu código personalizado no aparece, actualiza tu navegador. Si eso no ayuda, puede ser porque:

• 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.
• Habilitaste la carga Ajax: ocasionalmente, Ajax puede entrar en conflicto con el código personalizado incrustado, las personalizaciones basadas en código, los enlaces de anclaje y las redirecciones de URL. Para resolver el problema, intenta deshabilitar la carga Ajax.

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 solicitudes desde un navegador. Todas las solicitudes deben originarse desde una aplicación del lado del servidor. No admitimos solicitudes 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:

• W3Schools
• CodeCademy
• Mozilla Developer Network
• Stack Overflow
• Shay Howe
• SitePoint
• Treehouse

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:

• Infórmate sobre las mejores prácticas para agregar código personalizado.
• Lee nuestra guía general sobre las personalizaciones de basadas en código.
• Visita Squarespace Forum, nuestro foro para clientes y desarrolladores.
• Contrata a un Squarespace Expert para ayudar a crear código personalizado para tu sitio.
• Explora nuestros planes premium y para empresas para desarrollar una solución más personalizada para tu negocio.