Agrega HTML, Markdown, CSS y otros para personalizar tu sitio más allá de sus funciones integradas.

Usa bloques de código para añadir código personalizado a una página, una publicación de blog, una barra lateral, un pie de página u otra área de contenidos. Los bloques de código son una buena alternativa si quieres integrar widgets de terceros o personalizar una página más allá de las posibilidades que ofrecen los otros bloques. También puedes usar bloques de código para incluir HTML o Markdown, o para mostrar fragmentos de código.

Para más información sobre cómo elegir el mejor bloque para tu contenido personalizado, visita Añadir código personalizado en tu sitio.

En todos los planes, los Bloques de código admiten HTML, texto sin formato, Markdown y código CSS rodeado por etiquetas .

Usar JavaScript o iframes en el Código de bloque es una función Premium disponible en los planes Empresa y Commerce.

Mira el video

Añadir un bloque de código

Para añadir un bloque de código:

1. Edita una página o una publicación, haz clic en Agregar bloque o en un punto de inserción y, a continuación, presiona Código. Para obtener ayuda, visita Agregar contenido con bloques.
2. Abre el editor de bloques presionando el ícono del lápiz en el bloque.
3. Agrega tu código en el campo de texto.
4. Si estás utilizando el bloque de código para mostrar fragmentos de código, activa la opción Mostrar el código fuente.

Añadir código

Si utilizas el bloque de código para procesar código, asegúrate de seleccionar HTML o Markdown en el menú Modo.

Introduce o pega el código en el campo de texto. Para pegarlo, copia el código y, a continuación, haz clic en el campo y presiona Ctrl + V (Windows) o Comando + V (Mac).

Los bloques de código configurados como CSS o JavaScript muestran el código como texto por defecto. Para incluir CSS o JavaScript en bloques de código, selecciona HTML en el menú desplegable. Para CSS, rodea el código con las etiquetas . Para JavaScript, agrega las etiquetas <script> antes y después del código.

Nota: Los bloques de código tienen un límite de 400 KB, que equivale, aproximadamente, a 300 000 caracteres.

Mostrar el código fuente

Si estás usando el bloque de código para mostrar fragmentos de código, activa el control Mostrar el código fuente.

Esto resulta útil para mostrar ejemplos de códigos, ya que los bloques de código formatean automáticamente fragmentos de código para que sean legibles, por lo que es una mejor alternativa que el bloque de texto.

Nota: La opción Mostrar el código fuente está siempre seleccionada para las opciones CSS, JavaScript y texto sin formato.

Vista previa de un código integrado

Como medida de seguridad, a veces el código no aparecerá cuando hayas iniciado sesión, aunque los que visitan el sitio lo puedan ver. Si no puedes visualizar el código que agregaste a un bloque de código, haz clic en Vista previa en modo seguro para ver los elementos incrustados.

Resolución de problemas

Si tienes problemas con los bloques de código, ten en cuenta lo siguiente:

• El código puede no renderizar si lo agregaste a una página dentro de un índice. Para verificarlo, quita la página del índice dentro del panel de Páginas y cierra la sesión en la página web.
• La carga de Ajax puede generar problemas con el código personalizado. Para probarla, desactiva Ajax para ver si el problema continúa.

Si los problemas con el bloque de código te impiden editar tu sitio, desactiva los scripts en la vista previa para modificar o eliminar el código.

Si todavía tienes inconvenientes, recomendamos que contactes a la fuente (por ejemplo, el servicio del cual recibiste el código para un widget), ya que ellos están más familiarizados con su correcto funcionamiento.

Nota: Las personalizaciones basadas en código están fuera del alcance de nuestro soporte. Esto significa que no podemos ayudarte más con la configuración o la resolución de problemas de códigos personalizados. 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 basadas en código también pueden causar problemas de visualización, con futuras actualizaciones a 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.