Lo que conviene saber sobre el mundo de Squarespace.
Para diseñadores, desarrolladores y personas que crean negocios en torno a Squarespace.
Los 6 mejores complementos IDX para Squarespace en el sector inmobiliario y ejemplos
🏡 ¿Quieres mostrar anuncios de la MLS en Squarespace? ¡Aquí te explicamos cómo hacerlo!
La integración de IDX (Internet Data Exchange) es fundamental para mostrar los anuncios de la MLS en tu página web inmobiliaria de Squarespace. Dado que Squarespace no cuenta con compatibilidad integrada con IDX, necesitarás un complemento de IDX de terceros. En esta guía se analizan los mejores complementos de IDX, sus características, sus precios y cómo pueden mejorar el posicionamiento SEO de tu página web y la captación de clientes potenciales.
📌 Cómo funciona la integración de IDX con Squarespace
¿Qué es IDX? IDX (Internet Data Exchange) permite a los agentes inmobiliarios incorporar a sus páginas web los anuncios en tiempo real de la MLS, lo que garantiza que los anuncios estén siempre actualizados y sean interactivos.
¿Por qué utilizar IDX en Squarespace?
Automatiza la creación de contenidos: mantiene los anuncios actualizados sin necesidad de actualizaciones manuales.
Generación de clientes potenciales: capta clientes potenciales a cambio de acceso al MLS.
Mejora el SEO: más contenido indexable = mejores posiciones en los resultados de búsqueda.
Interacción y retención: los visitantes pasan más tiempo navegando por los anuncios.
💰 Desglose de costes
Plan Business de Squarespace: 23 $ al mes (facturación anual).
Complemento IDX: 50 $ o más al mes (varía según el proveedor).
Coste total: unos 75 $ o más al mes por todas las funciones de IDX.
Cómo añadir IDX a Squarespace
Elige un proveedor de IDX: busca que ofrezca una integración sencilla, adaptabilidad a dispositivos móviles y funciones de captación de clientes potenciales.
Consigue los fragmentos de código: tu proveedor de IDX te facilitará códigos para incrustar la búsqueda en el MLS, los anuncios destacados, etc.
Insertar en Squarespace: utiliza los bloques de código o la herramienta de inserción de código de Squarespace para mostrar el contenido de IDX.
📌 Aspectos importantes a tener en cuenta:
Facilidad de integración: algunos proveedores, como IDX Broker, ofrecen guías detalladas sobre Squarespace.
Optimización para dispositivos móviles: evita los iframes que no se redimensionen correctamente.
Los mejores complementos IDX para Squarespace
| Proveedor de IDX | Ideal para | Ventajas | Contras | Precio |
|---|---|---|---|---|
| Comprar Buddy IDX | Lo mejor para la integración visual | Altamente personalizable, excelente para captar clientes potenciales | Marca menos conocida | 50 $ o más al mes |
| Agente inmobiliario IDX de Elm Street | La mejor plataforma «todo en uno» | Incluye un sistema CRM avanzado | Curva de aprendizaje para principiantes | Varía |
| Vitrina IDX | Lo mejor para SEO y cartografía | Renderización del lado del servidor, buen posicionamiento en buscadores (SEO) | Precios más elevados | Póngase en contacto con nosotros para solicitar un presupuesto |
1. Buying Buddy IDX: un versátil complemento IDX con diversos widgets personalizables, formularios de captura de clientes potenciales, alertas de búsquedas guardadas y fácil compartición en redes sociales. Destaca especialmente por su perfecta integración con Squarespace.
2. Elm Street IDX Broker de Elevate: una sólida solución IDX que ofrece funciones de búsqueda avanzadas, una potente integración con CRM y soluciones llave en mano que satisfacen ampliamente las necesidades de los agentes inmobiliarios.
3. UltimateIDX: un plugin IDX escalable con funciones de captura de clientes potenciales, widgets de búsqueda e integración con los CRM más populares. Compatible tanto con la plataforma Squarespace como con WordPress.
4. Add On IDX: un complemento IDX diseñado para facilitar su uso, con una configuración sencilla, flexibilidad de diseño y optimización para dispositivos móviles.
5. iHomefinder: una solución IDX conocida por su aplicación móvil Optima Leads, de fácil manejo, sus potentes herramientas de búsqueda de inmuebles y sus funciones integradas de marketing por correo electrónico y CRM.
6. Showcase IDX: un complemento IDX que hace especial hincapié en el SEO y que ofrece prerenderización del lado del servidor y herramientas avanzadas de mapas para realizar búsquedas detalladas de inmuebles.
A continuación te ofrecemos un resumen de las opciones más populares:
Comprar Buddy IDX
Características principales: Su variedad de widgets personalizables lo convierten en una opción versátil. Disfruta de funciones como formularios de captación de clientes potenciales, alertas de búsquedas guardadas y la posibilidad de compartir contenido fácilmente en redes sociales.
Precios: Es probable que las opciones varíen según se trate de agentes individuales o de equipos inmobiliarios más grandes. Echa un vistazo a sus precios competitivos, que pueden resultar muy atractivos.
Ventajas: Ideal para los usuarios de Squarespace a los que les encanta la integración visual y la personalización.
Contras: Al tratarse de una marca menos conocida, puede que sea necesario ganarse la confianza de los clientes. Es posible que la variedad de funciones no sea tan amplia como la de algunas marcas más conocidas.
2. ELM Street IDX Broker
Elm Street Technology ofrece soluciones IDX como parte de su plataforma tecnológica inmobiliaria más amplia, Elevate. Esto es lo que debes saber:
Características principales: Gracias a la reciente adquisición de IDX Broker, Elm Street Technology ofrece acceso a potentes funciones IDX, entre las que se incluyen filtros de búsqueda avanzados y una integración perfecta con el CRM.
Precios: Es posible que ofrezcan paquetes de ofertas, por lo que merece la pena comparar esta opción con la compra de funciones por separado.
Ventajas: Plataforma «todo en uno» que incluye funciones IDX. Destaca por sus soluciones «llave en mano» que satisfacen ampliamente las necesidades de los agentes inmobiliarios.
Contras: Asegúrate de que el nivel de personalización se adapte a las necesidades de tu marca. Puede suponer una curva de aprendizaje si no estás acostumbrado a soluciones con un alto componente tecnológico.
3. UltimateIDX
Características principales: Destacan funciones como la captura de clientes potenciales mediante IDX y una amplia variedad de widgets de búsqueda. Además, permite la integración con los sistemas CRM más habituales.
Niveles de precios: Los distintos niveles se adaptan a agentes individuales, equipos pequeños u oficinas más grandes, por lo que se adapta al crecimiento de tu negocio.
Ventajas: Compatibilidad con diferentes plataformas, entre ellas Squarespace y WordPress.
Contras: A algunos usuarios les pueden parecer limitadas las opciones de personalización. Hay que tener en cuenta los problemas ocasionales de sincronización con MLS.
4. Añadir IDX
Características principales: Se centra en la facilidad de uso, con una configuración sencilla y flexibilidad de diseño para integrar sin esfuerzo IDX en el diseño de tu sitio web. Además, está optimizado para dispositivos móviles.
Precios: Es posible que ofrezcan una tarifa plana o modelos de precios por tramos; comprueba cuál se ajusta a tu presupuesto.
Ventajas: Ideal para quienes se muestran un poco recelosos ante la tecnología y buscan simplicidad sin renunciar a la funcionalidad.
Contras: Puede resultar demasiado básico si buscas herramientas sólidas de generación de clientes potenciales o funcionalidades avanzadas de CRM.
5. iHomefinder
Características principales
Aplicación móvil Optima Leads: los agentes pueden gestionar clientes potenciales, anuncios y comunicaciones desde cualquier lugar.
Búsqueda de inmuebles eficaz: filtros avanzados y herramientas de búsqueda basadas en mapas para encontrar inmuebles sin complicaciones.
Marketing por correo electrónico y CRM: herramientas integradas para cultivar clientes potenciales y gestionar las relaciones con los clientes.
Niveles de precios
Paquete básico: Funciones básicas de IDX y herramientas de gestión de clientes potenciales.
Premium: Opciones de búsqueda ampliadas, funciones para la captación de clientes potenciales e informes de mercado.
Platino: El paquete más completo, con herramientas avanzadas de automatización del marketing por correo electrónico y de redes sociales.
Ventajas
Asequibilidad: Ofrece precios competitivos en comparación con soluciones similares.
Aplicación móvil fácil de usar: mejora la productividad y la capacidad de respuesta de los agentes cuando están fuera de la oficina.
Excelente interfaz de usuario: intuitiva tanto para los agentes como para los visitantes de la web, lo que garantiza una experiencia fluida.
Contras
Atención al cliente: La calidad y los tiempos de respuesta pueden ser irregulares.
Gastos de configuración: Pueden surgir costes adicionales por la configuración inicial y la personalización.
6. Showcase IDX
Showcase IDX destaca en el sector inmobiliario de IDX por varias razones clave:
Enfoque SEO: Su solución IDX utiliza el prerenderizado del lado del servidor, lo que ayuda a que tus anuncios inmobiliarios aparezcan en posiciones más altas en los resultados de los motores de búsqueda, lo que aumenta su visibilidad.
Herramientas avanzadas de cartografía: Ofrece búsquedas fluidas basadas en mapas con excelentes opciones de personalización y una herramienta de búsqueda por polígonos muy bien valorada.
Excelente atención al cliente: Los agentes suelen elogiar a su equipo de atención al cliente por su rapidez, eficacia y conocimientos.
Precios
Describe su modelo de precios. ¿Ofrecen una prueba gratuita o planes mensuales o anuales? Asegúrate de mencionar cómo se comparan sus precios con los de los demás proveedores de IDX de tu lista.
¿A quién va dirigido Showcase IDX?
Showcase IDX es la opción ideal para los agentes que dan prioridad al SEO, buscan una potente experiencia de búsqueda basada en mapas y valoran un excelente servicio de atención al cliente.
Elegir el plugin IDX adecuado puede, sin duda, convertir tu página web de Squarespace en una herramienta imprescindible para tu negocio inmobiliario. Cada una de estas opciones tiene sus propias ventajas, así que ten en cuenta tus necesidades específicas, tu presupuesto y el nivel de conocimientos técnicos con el que te sientas cómodo. Con la herramienta adecuada, tu página web inmobiliaria no solo tendrá un aspecto estupendo, sino que también funcionará de maravilla.
Ejemplos de páginas web de Squarespace con IDX Broker
Diseñado por Combined Concepts Media
2. Socios inmobiliarios preferentes
Diseñado por Evermint Design Studio
3. Jennifer Newsom Inmobiliaria
Diseñado por Create You
4. HomeTeam405
Diseñado por Club Creative
Elegir el complemento IDX adecuado convertirá tu página web de Squarespace en una potente herramienta inmobiliaria. Valora detenidamente tus necesidades, tu presupuesto y la reputación del proveedor antes de tomar una decisión.
Las 14 mejores plantillas de Squarespace de todos los tiempos - 2025
¿Te acuerdas de tu plantilla favorita de Squarespace 7.0?
¡Ha recibido un nuevo diseño en la versión 7.1!
Si te has estado planteando actualizar, esta guía te ayudará a encontrar diseños y funciones que ya conoces en la última versión, lo que hará que la transición sea muy sencilla.
Actualmente hay más de 177 plantillas, organizadas en seis tipos y 18 categorías que abarcan desde el entretenimiento hasta la decoración del hogar. Aunque no encontrarás réplicas exactas de tus queridas plantillas 7.0, varias opciones de la versión 7.1 comparten conceptos, diseños y contenido de demostración similares. Echemos un vistazo:
Este es un buen ejemplo de las diferencias entre Squarespace 7.0 y 7.1. Ambas plantillas incluyen prácticamente el mismo contenido de demostración, basado en una organización sin ánimo de lucro comprometida con el medio ambiente. «Bedford» es una plantilla básica clásica de Squarespace 7.0, ya que cuenta con todos los elementos esenciales de una página web de presentación.
Bailard es una de las plantillas más populares de Squarespace precisamente por eso. Ambas plantillas cuentan con una imagen de cabecera llamativa y un botón de llamada a la acción. Además, hay otra llamada a la acción en la cabecera.
No voy a entrar en detalles técnicos, pero si tienes un blog, una organización sin ánimo de lucro o eres un profesional de servicios, esto va dirigido a ti.
2. Rally / Mérida
Rally es una popular plantilla de blog con estilo de revista de la versión 7.0, basada en la familia de plantillas Brine. Comienza con un bloque de resumen o con entradas recientes o destacadas, seguido de más bloques de resumen.
«Rally potencia tu contenido, organizando de forma atractiva una gran cantidad de imágenes y texto. Su página de inicio, larga y con desplazamiento, capta la atención de los visitantes al permitirte entrelazar diversas colecciones de entradas de blog con imágenes de cabecera a todo ancho». — , Squarespace.
Merida tiene un diseño de página de inicio similar, salvo por el diseño del blog, que es de tipo «masonry».
3. Skye / Vester
Estas plantillas tienen exactamente el mismo contenido de demostración. Skye se basa en la misma plantilla de diseño que Foundry. Lo mejor de esta plantilla es el menú de estilo móvil. Para recrearlo con Vester, necesitas un complemento de menú móvil obligatorio de SqsMods.
La plantilla Skye está diseñada pensando en los blogueros. Te ofrece un control mucho mayor sobre el aspecto y el funcionamiento de la página de inicio de tu blog (la lista de entradas) y de las páginas de cada una de tus entradas.
CONSIGUE HASTA UN 30 % DE DESCUENTO EN TODOS LOS PLANES DE Squarespace
No hace falta ningún código de descuento
Tanto «Avenue» como «Nevins» son ideales para sitios web con un estilo de portafolio visual. Fotógrafos, videógrafos, artistas, etc. La única diferencia entre las dos plantillas es la tipografía más llamativa de «Nevins».
«Una plantilla clásica con un estilo atemporal: las líneas limpias y rectas de Avenue y su diseño adaptable basado en una cuadrícula gozan de especial popularidad entre fotógrafos, ilustradores y diseñadores. Descubre por ti mismo por qué Avenue es la opción preferida de tantos de nuestros clientes». - Squarespace
Haz clic aquí para ver más plantillas de estilo fotográfico
5. Jasper / Beaumont
Tanto Jasper como Beaumont tienen el mismo diseño de cuadrícula de dos columnas. Una vez más, es ideal para portafolios visuales. Diseñadores de marca, artesanos, fotógrafos, videógrafos, etc.
«Muestra tu trabajo y atrae a clientes potenciales con Jasper. Esta plantilla de portafolio crea un resumen visual atractivo de tus proyectos con una página de inicio dinámica en formato de cuadrícula. Las animaciones de página, las fuentes escalables y los encabezados de página muestran tu trabajo de una forma llamativa y envolvente. Las páginas de proyectos especiales organizan imágenes, títulos y pies de foto en diseños elegantes, ofreciendo a tus visitantes una experiencia basada en una historia». — Squarespace
Haz clic aquí para ver más plantillas de portafolios
6. Wexley / Talva
Wexley es prácticamente idéntico a Talva. Ambas plantillas incluyen una página de inicio con el portafolio, un blog, una página «Acerca de» y una página de contacto.
«El diseño de la galería de Wexley se adapta al tamaño de las imágenes de tu portafolio visual y a los diferentes anchos de pantalla, lo que la hace perfecta para artistas, profesionales creativos y fotógrafos que necesitan una forma dinámica de mostrar todo su trabajo». — Squarespace
Haz clic aquí para ver más plantillas para artistas
7. Native / Grove
«Native» era la plantilla de blog más minimalista en la versión 7.0 y ahora pasa a ser «Grove». Según Squarespace, es la preferida por empresas y blogueros; «Native» es una plantilla versátil y moderna. El diseño del blog de «Native» se adapta al contenido, destacando tus elementos multimedia más interesantes.
«Native es una plantilla versátil y moderna para blogs y empresas. El diseño del blog de Native se adapta al contenido, destacando tus recursos multimedia más interesantes. Native es una de las opciones preferidas por empresas y blogueros por su flexibilidad y su estilo contemporáneo». - Squarespace
8. Mentor / Lusaka
La plantilla «Mentor» de Squarespace forma parte de la familia de plantillas «Brine». Las plantillas de la misma familia te ofrecen las mismas funciones y opciones, pero te permiten crear más rápidamente el diseño que tienes en mente basándote en la estructura básica de cada plantilla.
El diseño moderno de la plantilla «Mentor» de Squarespace anima a la acción gracias a sus encabezados llamativos y a sus impactantes banners a todo ancho.
Haz clic aquí para ver más plantillas para organizaciones sin ánimo de lucro
9. Jones / Marga
Foundry se basa en la misma plantilla de diseño que Skye. Harman es una plantilla de blog sencilla y minimalista con un aspecto similar. La gran diferencia, y lo que más me gusta de Foundry, es el diseño del encabezado y del menú. El menú se despliega lateralmente y permite incluir contenido adicional. Esto no es posible en la versión 7.1 a menos que se utilice un plugin de menú deslizante.
12. Brine / Hester
Brine es una de las plantillas más populares de la versión 7.0. Es la que ofrece mayor flexibilidad, sobre todo en cuanto al diseño del encabezado.
Por desgracia, lo único que Hester tiene en común son las imágenes de los productos, que tienen como tema los pepinillos o la salmuera. Dicho esto, ambas son ideales para una tienda de comercio electrónico y solo tienen tres páginas sencillas: una tienda, un blog y una sección «Acerca de». Ah, y Hester cuenta con un inicio de sesión para un área de miembros.
13. Pedro (7,0) / Crosby (7,1)
Tanto Pedro como Crosby incluyen contenido de demostración similar. Ambas plantillas están diseñadas pensando en una tienda de plantas o flores, y la tipografía de Pedro es más llamativa.
Ambas plantillas incluyen una tienda y un blog o diario en el menú de navegación; además, Crosby cuenta con una página de «Historia» y otra de «Contacto», mientras que Pedro tiene una página de información.
Al desplazarte hacia abajo por la página de inicio de Pedro, ves gifs animados que te llevan a diferentes categorías de la tienda. Hay un efecto de paralaje al desplazarse y un bloque dedicado al boletín informativo para recopilar direcciones de correo electrónico. El pie de página es el típico de una tienda física, con la ubicación y las redes sociales.
Crosby tiene un diseño más minimalista en su página de inicio, destaca productos concretos e incluye un bloque dedicado al boletín informativo para los correos electrónicos.
14. Keene / Vance
La plantilla Keene está pensada para una clínica dental y cuenta con cuatro páginas principales: «Acerca de», «Servicios», una página de información y una página de contacto. El icono de búsqueda del encabezado resulta útil si tienes un blog oculto o cualquier otro conjunto de contenidos en el que se puedan realizar búsquedas dentro de la web. La página de inicio tiene un diseño llamativo, con una imagen de fondo a todo el ancho de la pantalla.
La página de inicio de Vance tiene un diseño similar, pero sin el fondo a todo ancho. La principal diferencia es que la plantilla de Squarespace de Vance está diseñada para restaurantes que aceptan reservas.
Ambas plantillas son sencillas y fáciles de adaptar a una empresa que solo necesite tres o cuatro páginas principales.
Extra. Portadas / Documentos de una sola página
Me encanta cómo se han rediseñado las portadas en la versión 7.1. Es una pena que no se puedan combinar entre sí, pero quizá sea algo en lo que se está trabajando.
¿Quieres crear una portada en la versión 7.1? Empieza con una plantilla de una página. Estas son las plantillas de portada de la versión 7.1.
¿Buscas más plantillas?
¿Has descubierto alguna plantilla 7.1 que sea igual de buena que tus plantillas 7.0 favoritas? ¡Comparte tus hallazgos en los comentarios de abajo!
Preguntas frecuentes sobre las plantillas de Squarespace
¿Sigue siendo Brine la mejor plantilla de Squarespace?
«Brine» sigue siendo la mejor plantilla de Squarespace de la versión 7.0. Todas las plantillas de la versión 7.1 tienen la misma funcionalidad.
¿Todas las plantillas de Squarespace 7.1 tienen las mismas funciones?
Sí, la funcionalidad básica es la misma en todas las plantillas 7.1. Las principales diferencias residen en su diseño visual, el contenido de demostración y algunos diseños de página predefinidos.
¿Puedo personalizar mi plantilla de Squarespace más allá de los ajustes predeterminados?
¡Sí! El motor Fluid Engine de la versión 7.1 te ofrece más flexibilidad de diseño que nunca. Con unos pocos conocimientos de CSS, podrás personalizar aún más el aspecto de tu plantilla.
¿Qué pasaría si hubiera utilizado mucho código personalizado en mi sitio web de la versión 7.0?
Es posible que haya que modificar parte del código personalizado al pasar a la versión 7.1. Haz siempre una copia de seguridad de tu sitio web antes de actualizar y comprueba minuciosamente todo el código personalizado.
¿Es fácil actualizar de Squarespace 7.0 a 7.1?
El proceso es relativamente sencillo. Squarespace ofrece guías al respecto. No obstante, ten en cuenta la complejidad de tu página web y cualquier función personalizada a la hora de calcular la cantidad de trabajo que conlleva.
¿Afectará la actualización de la versión 7.0 a la 7.1 al posicionamiento SEO de mi sitio web?
No debería haber repercusiones negativas significativas en el SEO. No obstante, siempre es recomendable revisar la estructura de tu sitio web y optimizar el contenido tras la actualización.
Soy nuevo en Squarespace. ¿Cómo elijo la plantilla adecuada?
Empieza por pensar en la finalidad de tu página web (portafolio, blog, tienda online, etc.). Echa un vistazo a las plantillas que se adapten a esa finalidad y elige la que más te guste por su estilo.
¿Puedo cambiar de plantilla en la versión 7.1 una vez que haya empezado a crear mi página web?
No. Haz clic aquí para obtener más información sobre cómo cambiar de plantilla.
Nuestros códigos CSS favoritos de Squarespace en 2025
¿Quieres tener un control total sobre el aspecto de tu página web de Squarespace? ¡Estos códigos CSS son tu arma secreta! ¿Y si quieres un cambio de diseño que Squarespace no ofrece en su configuración y no encuentras el plugin perfecto? Ahí es donde entra en juego el editor de CSS. Squarespace te permite añadir tu propio código personalizado. ¡Esta funcionalidad te abre un sinfín de posibilidades para añadir elementos únicos, scripts, ajustes estéticos y mucho más!
¿Quieres aprender CSS?
Si quieres aprender CSS para Squarespace, echa un vistazo a estos cursos.
¿Quieres prescindir del CSS con un complemento de animación?
Hay dos extensiones que te permiten personalizar y dar estilo a tu sitio web sin tener que modificar ninguno de los fragmentos de código que aparecen a continuación: SquareKicker y Spark Plugin.
Aviso legal
Antes de empezar, tengo que sentar algunas bases. El editor de CSS es una herramienta muy potente, pero tiene un inconveniente: el código mal formado o gestionado de forma incorrecta puede resultar perjudicial para tu sitio web.
Aunque puedes modificar muchos elementos de tu sitio web con CSS,Squarespace indica expresamente: «Solo debes utilizar CSS para cambiar las fuentes, los colores y los fondos. Otros cambios en el CSS podrían dañar tu sitio web».
Dicho esto, nadate impiderealizar otros cambios en tu sitio web. Siempre que el código CSS esté bien implementado, no afectará negativamente a tu sitio web. Solo hay que tener en cuenta algunas cosas.
Si estás utilizando una plantilla 7.0 y quierescambiar de plantilla, tendrás que volver a aplicar el código personalizado, ya que no se transfiere automáticamente. En la versión 7.1 sí se transfiere.
Squarespace no ofrece asistencia ni ayuda para la resolución de problemas relacionados con el código personalizado. Si tu CSS provoca algún fallo, no te ayudarán a solucionarlo.
Squarespace no tiene en cuenta el código personalizado cuando actualiza su plataforma. Por lo tanto, si modifican una clase CSS en su diseño y eso hace que tu código deje de funcionar, tendrás que arreglarlo tú mismo.
El CSS personalizado tiene un límite de 128 000 caracteres. Esto debería ser mucho, mucho más de lo que necesitarás, pero conviene tenerlo en cuenta si vas a realizar un montón de personalizaciones CSS.
Por último, ten en cuenta que el editor de CSS personalizado no es la única forma de realizar modificaciones de código en tu sitio web. Existen varias opciones que podrían adaptarse mejor a tus necesidades.
Bloque de código (básico):Se trata de un bloque de contenido que permite ejecutar código CSS, HTML o Markdown personalizado en una página concreta. Es adecuado para realizar cambios a nivel de contenido o de página. Disponible en todos los planes.
Bloque de código (avanzado):Se trata del mismo bloque, pero además permite añadir iframes (no recomendado por motivos de SEO) y código JavaScript. Solo está disponible en los planes Business y Commerce.
Inyección de código:esta opción permite inyectar código en todo el sitio web, como el píxel de seguimiento de Facebook o un servicio de chat en directo. Solo está disponible en los planes Business y Commerce.
Editor de CSS:Esta es la herramienta principal que vamos a utilizar hoy. Está disponible en todos los planes y te permite añadir CSS personalizado a tu sitio web a nivel de página. Squarespace recomienda no realizar cambios de maquetación con él, pero no pasa nada si lo haces correctamente. Si buscas un editor de CSS con un diseño más elegante, prueba Resurface.
Bloque de incrustación:se trata de un bloque de código único que ejecuta código de incrustación, lo que te permite incrustar contenido de sitios como Facebook, Instagram y cualquier otra plataforma que utilice oEmbed. Disponible en todos los planes.
Plataforma para desarrolladores de Squarespace:esta herramienta permite realizar cambios significativos en una plantilla únicamente en la versión 7.0. Solo está disponible en los planes Business y Commerce; considérala una herramienta de desarrollo avanzada.
Además, tienes totalmente prohibido ejecutar código del lado del servidor fuera de la función de inyección de código, que es limitada. No puedes ejecutar código SQL, Ruby, PHP ni nada por el estilo.
En fin, dicho todo esto, ¡vamos a ver las cosas chulas que se pueden hacer con CSS! Hay un montón, así que quédate por aquí para descubrirlas.
Trucos y ajustes interesantes de CSS
Complemento de barra lateral
Empezando precisamente por lo que Squarespace recomienda no hacer, échale un vistazoa esta opción de barra lateral. Está diseñada como un complemento, así que no tendrás que perder el tiempo modificando demasiado código directamente. En su lugar, cambia el diseño y el formato de tu sitio web para añadir una barra lateral, en la que se puede mostrar contenido como la biografía de un autor, un bloque de entradas recientes o un formulario de suscripción al boletín. Es muy sólida y resulta muy útil para fines de marketing, ¡así que échale un vistazo!
Animaciones de CTA
Vaya, esto sí que mola. ¿Sabías que con CSS —solo CSS, sin ningún otro lenguaje de programación— se pueden crear animaciones? Se pueden hacer cosas alucinantes con esto. Muchas páginas web con fondos de efecto parallax y elementos que aparecen al desplazarse por la página utilizan CSS para ello, pero eso no esexactamente lo quete voy a enseñar aquí.
Seguramente habrás visto en alguna página web casos en los que un elemento se mueve de forma intermitente cada 30 segundos más o menos. A veces, un botón se tambalea, una llamada a la acción rebota un poco o un recuadro parpadea ligeramente. Hace años, para conseguirlo había que utilizar animaciones en formato .gif o (¡qué horror!) animaciones en Flash. Hoy en día, se puede hacer con CSS.
Echa un vistazoa https://animate.style/. Esta página web es un recurso enorme de fragmentos de código CSS para pequeñas animaciones, como rebotes, destellos, pulsaciones, balanceos y oscilaciones. Hay docenas de ellas (hay dos barras de desplazamiento a la derecha, por si no puedes acceder a la mayoría), todas ellas con demostraciones y guías de instalación.
Ahora bien, esta página web está pensada para utilizar CSS en cualquier contexto, no específicamente en Squarespace. Así que tendrás que utilizar la función de inserción de código para incorporar su script principal y, a continuación, utilizar elementos CSS personalizados para señalar los elementos que quieras animar. Pero es bastante sencillo, ¡así que anímate a probarlo!
Fundido simple
Esta técnica CSS es un pequeño ajuste muy sencillo, y probablemente ya hayas visto algo parecido antes. Al pasar el cursor por encima de un elemento, como una imagen o un botón de menú, los colores aparecen gradualmente. En el caso de las imágenes, se puede utilizar para resaltarlas, añadirles color o atenuarlas ligeramente. En cuanto a los elementos del menú, resulta excelente para resaltar un color de fondo y mostrar a los usuarios sobre qué elemento se encuentra el cursor. Es fácil, muy ligero y una mejora perfecta para la usabilidad.
Esta páginacontiene fragmentos de código para tres casos de uso diferentes: texto con efecto de desvanecimiento, imágenes resaltadas y fondos para elementos de menú. Elige el caso de uso que te interese, copia y pega el código, y ya estás listo.
Degradados de color
Por si no lo sabes, un degradado es cuando dos colores se funden entre sí pasando por los tonos intermedios. Son ideales para crear transiciones de color sutiles y variaciones significativas de un extremo a otro de un elemento.
Antes, si querías que algo tuviera un degradado, tenías que realizar una serie de complicados pasos con un programa de edición de imágenes para conseguir que los colores quedaran tal y como te gustaban. Incluso así, si los usuarios navegaban por tu página web con una pantalla más grande o más pequeña que la que habías diseñado, el resultado se veía raro y desajustado.
Con CSS, puedes crear un degradado que funcione. Solo tienes que especificar el elemento, seleccionar los colores y el código se encarga del resto.
«¿No resulta muy tedioso elegir y especificar los colores?» ¡Para nada! Lo sería… si lo hicieras a mano, pero ¿por qué ibas a tener que hacerlo así?Este generadores una herramienta excelente precisamente para esto. Te permite elegir los colores de los extremos, los colores de transición en el centro y especificar en qué punto de la barra quieres que se produzca la transición. Incluso puedes hacer clic para añadir más puntos de anclaje con colores adicionales y crear un arcoíris completo.
Puedes crear degradados tanto lineales como radiales (circulares), y puedes especificar códigos hexadecimales exactos de color si estos forman parte de tu identidad de marca. Todo el código se genera dinámicamente debajo del generador, por lo que puedes copiarlo y pegarlo cuando lo hayas ajustado a tu gusto.
Esquinas redondeadas
Esta técnica es otro de esos elementos que parecen sencillos a simple vista. No pensarías que sería complicado crear esquinas redondeadas alrededor de una imagen o un elemento de texto, ¿verdad? Sin embargo, si alguna vez has intentado hacerlo sin recurrir a un código personalizado un poco raro, ¡es una locura! Antes, incluso tenías que recurrir a imágenes de fondo perfectamente alineadas, tablas con elementos alineados para crear bordes y otras tonterías por el estilo.
Todo eso ya es cosa del pasado. El CSS te permite crear fácilmente esquinas redondeadas para cualquier elemento. ¿Quieres esquinas redondeadas en una imagen? ¿Quieres un recuadro redondeado para resaltar una llamada a la acción? ¿Quieres que tu lightbox tenga esquinas redondeadas? Es muy fácil con un poco de CSS.
Esta técnica es solo uno de los muchos ajustes sencillos de CSS que puedes realizar, proporcionados por W3Schools. W3Schools es una organización dedicada al diseño web que ofrece miles de tutoriales sencillos sobre todo tipo de temas, desde HTML hasta animaciones avanzadas con CSS.En esta páginase explica en detalle el elemento de esquinas redondeadas, y puedes consultar todos los demás ajustes de CSS a través de la barra lateral.
Elementos ocultos
Bueno, eso, por ejemplo, ya es un poco más grave.
Un problema que tienen muchas páginas web, incluida Squarespace, es la visualización en dispositivos móviles mediante el diseño adaptativo. Concretamente, la página analiza todo el código de la página y carga todos los elementos, ajustando lo que se muestra en función del tamaño de la ventana de visualización (es decir, tu navegador).
Los elementos ocultos suelen estar bien. Excepto por una cosa: ¿qué pasa si tienes, por ejemplo, una barra lateral con un par de imágenes? Esa barra lateral no se cargará en el móvil porque quedaría demasiado apretada. Pero, como la web carga el contenido antes de determinar qué se muestra, sigues dedicando tiempo a cargar las imágenes de la barra lateral. Estos recursos ralentizan la velocidad de carga de tu web.
Si consultas tu informe de Google PageSpeed Insights y ves «aplazar las imágenes fuera de pantalla» como error, a esto es a lo que se refiere.
La solución a esto suele ser la carga diferida, pero hay un nuevo elemento CSS llamado «content-visibility» que ayuda en este sentido. Es relativamente nuevo y, aunque todavía no es compatible con todos los navegadores, resulta de gran utilidad. Es muy probable que la carga diferida cuente con mayor compatibilidad en los próximos años. En esta páginase explica en detalle en qué consiste este elemento, cómo funciona y cómo utilizarlo. ¡Échale un vistazo!
Pequeños retoques en el aspecto
Enesta páginahay una serie de ajustes que, aunque son cambios estéticos muy pequeños, modifican de forma notable el aspecto de tu página web. ¿Qué ajustes?
Elimina el subrayado de los enlaces, que Squarespace añade de forma predeterminada.
Elimina los guiones (-) del texto que aparece en la pantalla del móvil cuando el texto se ajusta a la línea.
Elimina el espacio sobrante en la parte inferior de una plantilla basada en Brine.
Reducí el ancho de la columna en la que se muestra el contenido de tu blog.
Limita la visualización de las páginas de productos en dispositivos móviles a un producto por fila.
Se trata de pequeños ajustes relativamente sencillos, pero pueden cambiar por completo el aspecto de tu página web y hacerla mucho más moderna y elegante. Puede que no parezca gran cosa, pero pruébalos y verás lo importantes que son.
Otras recopilaciones de trucos CSS
Aquí solo estoy dando una idea general de lo que se puede hacer con CSS. Algunos de los enlaces de arriba ya son páginas con docenas de ajustes de CSS, pero hay muchos más por ahí, incluidas guías más avanzadas.
Aquí tienes algunos que puedes echar un vistazo.
ENORME LISTA DE TRUCOS Y AJUSTES PARA SQUARESPACE (CON ENLACES Y EJEMPLOS). Esta página lo tiene todo, desde cómo crear un bloque de resumen hasta cómo ocultar etiquetas en las entradas del blog. No todos tienen que ver con CSS, pero, en cualquier caso, todos son ingeniosos y útiles.
«50 Design Tweaks», de Five Design Co.Tal y como indica el título, esta página recoge 50 retoques diferentes que puedes añadir a tu sitio web. Entre ellos se incluyen desde añadir animaciones al pasar el cursor y sombras proyectadas hasta convertir imágenes en círculos o utilizar diseños personalizados para las viñetas. Además, casi todos se realizan con código CSS sencillo.
«35 fragmentos de código», de Paige Brunton.Este artículo es otra lista exhaustiva de trucos CSS, entre los que se incluyen añadir estilos al encabezado, personalizar el enlace «Leer más» y dividir los fondos en dos segmentos. Muchos de ellos son bastante específicos, pero si te gustan las opciones de diseño que ofrecen, son estupendos.
Con todos estos recursos, deberías poder hacer prácticamente cualquier cosa que se te ocurra para tu página web.
¿Cuál es tu truco CSS favorito de esta lista? ¿Hay alguno que te gustaría compartir y que no aparezca en ella? ¿Tienes alguna duda a la hora de implementar alguno de estos trucos en tu página web? ¡Cuéntamelo!
✅ Compatible con Squarespace 7.0 y 7.1 • ✅ Compatible con todas las plantillas • ✅ Adaptado a dispositivos móviles
⚠️ Requiere el plan Business de Squarespace o superior para disfrutar de todas las funciones.
💡 Los usuarios del Plan Personal pueden utilizar el método alternativo de Markdown. Consulta las preguntas frecuentes más abajo.
Añadir una ventana emergente tipo «Lightbox» a Squarespace
Lightbox Anything te permite abrir contenido personalizado en una ventana emergente a partir de botones, imágenes, enlaces de texto, galerías y mucho más.
Úsalo para formularios, vídeos, biografías del equipo, detalles de productos, portafolios, promociones, contenido restringido, ventas adicionales, galerías y secciones de página personalizadas, sin necesidad de redirigir a los visitantes a otra página.
Haz clic aquí para ver la demostración →
¿Quieres ver primero el proceso de configuración?
▶️ Haz clic aquí para ver el vídeo de configuración