¿Cómo puedo personalizar las páginas web de Squarespace?
Hay un mito muy extendido: la idea de que no se puede personalizar Squarespace.
Es cierto que no tienes el mismo nivel de flexibilidad que ofrecen algunas plataformas no alojadas, pero sí que puedes personalizar totalmente una página web de Squarespace. Puedes añadir código personalizado y estilos CSS, plugins o incluso más funciones accediendo a la Plataforma para desarrolladores de Squarespace.
A continuación te ofrecemos algunas opciones de personalización y algunos consejos para que sepas cómo llevarlas a cabo:
Descarga gratuita: 7 personalizaciones geniales para Squarespace
Añadir código personalizado y CSS
Por supuesto que puedes añadir código personalizado y CSS a tu página web de Squarespace. CSS son las siglas de «hojas de estilo en cascada» y su uso determina cómo se mostrará el diseño de tu página web en diferentes tamaños de pantalla. Se basa en selectores, propiedades y valores de propiedades. Por ejemplo, un encabezado h2 es un selector, el tamaño y el estilo de la fuente son selectores, y «negrita» es un valor de propiedad:
En Squarespace, puedes realizar cambios de estilo accediendo a «Diseño» > «Estilos del sitio», donde no se necesitan conocimientos de programación para modificarlos. Sin embargo, hay algunas cosas que no se pueden hacer en el editor de estilos y, para ellas, tendrás que ir a «Diseño» > «CSS personalizado».
Es importante que sepas que, si vas a modificar el CSS personalizado, debes saber muy bien lo que estás haciendo. Esta es la parte en la que es posible «estropear» tu página web si añades CSS personalizado de forma incorrecta. Squarespace no ofrece asistencia técnica para esto, así que debes tener mucho cuidado. ¡Te recomendamos que copies y pegues el código de los tutoriales o que se lo pidas a alguien que sepa lo que hace!
¿Dónde puedes encontrar más ayuda? El foro de programación y personalización de Squarespace contiene una gran cantidad de información sobre cualquier tema relacionado con la personalización. No obstante, se trata de un sitio comunitario, por lo que debes tener en cuenta que los consejos que allí se ofrecen no están necesariamente respaldados por el equipo de Squarespace.
Plataforma para desarrolladores de Squarespace
(Solo para Squarespace 7.0)
Si tienes un buen nivel de conocimientos de programación, la Plataforma para desarrolladores de Squarespace te permite «crear sitios web totalmente personalizados e integrarlos con herramientas de terceros». Si quieres dar tus primeros pasos con la plataforma para desarrolladores, el tutorial para principiantes es un buen punto de partida.
La plataforma para desarrolladores es una función premium, lo que significa que solo está disponible si tienes un plan Business o Commerce. Al activar el modo desarrollador, obtendrás:
Control total sobre el código HTML, CSS y JavaScript de tu plantilla.
Una API JSON para extraer contenido del CMS con el fin de utilizarlo en el entorno de desarrollo.
Acceso completo al código de tu plantilla, a las hojas de estilo, a los scripts y a los recursos de diseño de la plantilla.
Capacidad para utilizar y modificar la plantilla base.
Acceso para utilizar (pero no modificar) las herramientas de edición existentes de Squarespace, como los bloques.
La plataforma para desarrolladores no es algo con lo que debas meterte si tienes una página web ya en funcionamiento a la que te gustaría añadir funcionalidades, pero no tienes conocimientos de programación. Sería muy fácil estropearlo todo, así que, si te interesa aprender a crear personalizaciones mediante la programación, sería mejor que empezaras por aprender los conceptos básicos de la programación.
Los programadores avanzados son los que más probablemente necesiten la plataforma para desarrolladores. Es la que utilizamos aquí, en SQSP Themes, para crear plantillas personalizadas. Para obtener más información, puedes consultar su página de preguntas frecuentes aquí.
Crea un diseño personalizado sin necesidad de programar
La programación no es para todo el mundo. Pero es perfectamente posible crear un diseño personalizado sin tener que meterse de lleno en la programación. Las plantillas solo sirven como base: si no quieres que tu página web se parezca a todas las demás que han elegido la misma plantilla, es importante que la adaptes a tu propio estilo y a tu imagen de marca.
Una cosa que puedes hacer es evitar las páginas de demostración. En su lugar, empieza con páginas en blanco y añade el contenido que prefieras tal y como lo imaginas. Así evitarás acabar con el mismo aspecto que otros usuarios que quizá se hayan limitado a sustituir los elementos de demostración por los suyos propios.
El Editor de estilos es la herramienta con la que debes familiarizarte para asegurarte de crear una página web única. Aquí es donde puedes cambiar los colores, las fuentes, los estilos y los diseños para que se diferencien de la plantilla de demostración.
Lo bueno de conseguir un diseño personalizado de esta forma es que no puedes «estropear» tu página web. No tienes que meterte con el código y todo se puede modificar fácilmente o volver a dejar como lo tenías antes.
Si aún hay funciones que necesitas y que no puedes conseguir realizando cambios en el Editor de estilos, siempre puedes contratar a un diseñador de Squarespace para que te programe funciones a medida. Conocemos a algunos diseñadores excelentes, o puedes encontrarlos fácilmente mediante una búsqueda en Google.
Complementos para Squarespace
Los plugins son otra opción estupenda para añadir funcionalidades personalizadas a una página web de Squarespace. Un plugin es, básicamente, un fragmento de código que se instala en la página web para conseguir la funcionalidad deseada. (Hemos escrito sobre 50 plugins imprescindibles para Squarespace aquí).
Un complemento muy útil que puedes utilizar en tu página web de Squarespace son los formularios en línea. Tanto si escribes un blog, vendes productos o recopilas datos de clientes potenciales en Squarespace, puedes sacar partido a los formularios de Squarespace, que ofrecen diversas funciones, opciones de personalización e integraciones con aplicaciones.
Siempre que añadas código de terceros, tu página web corre algún tipo de riesgo. Por ejemplo, los plugins mal programados pueden ralentizar tu página web o incluso hacer que deje de funcionar por completo. Es importante buscar plugins de desarrolladores de confianza que demuestren su compromiso con el mantenimiento periódico de sus plugins. A veces, las actualizaciones del sistema hacen que sea necesario actualizar un plugin, por ejemplo.
Descarga aquí nuestras 7 geniales personalizaciones de Squarespace
Tutoriales para personalizar tu sitio web
La comunidad de Squarespace es fantástica y hay mucha gente con experiencia que ha elaborado tutoriales para ayudarte a personalizar tu página. Aquí te mostramos algunos de ellos (probablemente encontrarás el que buscas buscando «tutorial de Squarespace para [lo que quieras hacer]»):
Cómo añadir fuentes personalizadas a tu sitio web de Squarespace
Cómo añadir animaciones al pasar el cursor por tu página web de Squarespace (Bold y Pop)
Cómo crear efectos de fondo a media altura, en ángulo y flotantes en Brine (Thirty Eight Visuals)
Cómo animar texto en tu página web de Squarespace (Schwartz-Edmisten)
Añadir viñetas personalizadas a Squarespace (Station Seven)
Añadir sombra proyectada a los botones (Jacob Ruiz)
Cómo cambiar el color de fondo de una sola sección en Squarespace (Paige Brunton)
Añadir un fondo personalizado a la navegación de la web de Squarespace (My Billie Designs)
Personalizar los formularios de Squarespace (Big Cat Creative)
Cómo configurar una redirección a una página 404 personalizada
Reflexiones finales
Es un mito que, si eliges Squarespace, no puedas personalizar tu página web como quieras. Hay varias opciones para crear un diseño personalizado y no siempre hace falta ser un genio de la programación para conseguirlo.
Como recurso adicional para quienes buscan respuestas a sus dudas sobre Squarespace, échale un vistazo al grupo «SQSP Entrepreneurs» de Facebook. Contamos con un grupo estupendo de gente y encontrarás debates y recursos para muchas de las dudas que puedas tener. ¡Échale un vistazo!
