4 ejemplos populares de códigos personalizados para Squarespace

Squarespace es una plataforma robusta con opciones de personalización que se adaptan a diversos estilos y necesidades profesionales. Sus características, las mejores de su clase, se adaptan a una amplia gama de casos de uso, lo que lo convierte en una opción para muchos emprendedores y creativos como tú. Pero cuando te encuentras con casos extremos que no pueden ser abordados por estas características integradas, es cuando agregar un poco de la magia del código se vuelve útil.

Me llamo Rache y fundé Squarestylist, una biblioteca de recursos creativos que te permite entretejer el diseño y la codificación en sitios web que inspiran asombro y sorpresa. A continuación, voy a compartir cómo lograr cuatro de las personalizaciones de sitios web más buscadas con solo un poco de código. 

Antes de adentrarnos, es mejor consultar nuestra entrada de blog anterior sobre cómo agregar código personalizado a tu sitio de Squarespace. Esto te ayudará a tener en mente las mejores prácticas mientras agregas este código, un fragmento a la vez. 

Nota: Este contenido fue creado por un miembro de Squarespace Circle y no refleja una recomendación oficial de Squarespace. Como el producto de Squarespace evoluciona con frecuencia, el código de Squarespace está sujeto a cambios en cualquier momento y Squarespace no puede garantizar que los ejemplos de código a continuación funcionen de manera permanente. Los equipos de atención al cliente no pueden resolver problemas relacionados con el código personalizado agregado a los sitios web de Squarespace. Parte del código a continuación se agrega mediante inserción de código, que solo está disponible en ciertos planes de Squarespace.

1. Agrega un botón “Desplazarse hasta la parte superior”

La función de desplazamiento hasta la parte superior es una incorporación útil a tu sitio de Squarespace, especialmente para páginas más largas. Proporciona una manera fácil para que los usuarios naveguen de nuevo a la parte superior de la página para llegar al menú o a los elementos de navegación. 

Estos son los pasos para agregar un botón de desplazamiento hasta arriba, accesible y de marca. 

1. Desplázate hasta la parte inferior de tu página y edita el pie de página de tu sitio.

2. Agrega una imagen a cualquier parte del pie de página. Esta imagen servirá como el botón de desplazamiento hasta la parte superior, así que siéntete libre de elegir o crear cualquier imagen o gráfico que coincida con la gestión de marca. Considera agregar una flecha o el texto “Desplazarse hasta la parte superior” para mayor claridad.

3. Establece el texto alternativo en “Desplazarse hasta la parte superior” para mayor accesibilidad.

4. Establece el enlace en “parte superior” y asegúrate de que el enlace “Abrir en una nueva pestaña” esté desactivado.

5. Para agregar la funcionalidad en la que el botón solo aparece cuando se desplaza la página, agrega el primer fragmento de código a continuación a Páginas > Herramientas del sitio web > Inserción de código > Pie de página.

6. Para cambiar el estilo del botón de desplazamiento hasta la parte superior, puedes agregar un código CSS a Página > Herramientas del sitio web > CSS personalizado.

Código: Paso 5

<script>

document.addEventListener('DOMContentLoaded',()=>{const b=document.body,l=document.querySelector('footer a[href="#top"]'),f=l?.closest('.fe-block');f?.classList.add('scroll-to-top');const t=()=>b.classList.toggle('is-scrolled',window.scrollY>200);window.addEventListener('scroll',t);t()});

</script>

Código: Paso 6

html.fe-block.scroll-to-top a@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-topbody.is-scrolled .fe-block.scroll-to-top abody:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-topbody:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections
.fe-block.scroll-to-top {
right:2vw;
bottom:2vw;
width:100px;
height:100px;
}

2. Cambiar el color de navegación del encabezado solo en una página

Personalizar el color de navegación del encabezado para una página específica es una solicitud común, que a menudo se necesita cuando una página tiene un fondo o combinación de colores únicos. Antes de aplicar cualquier código personalizado, vamos a explorar las funciones integradas de Squarespace que están diseñadas para satisfacer este requisito.

1. Haz clic en Editar encabezado del sitio y accede a la pestaña Diseño.

2. En Colores, encontrarás opciones de estilo, como Adaptado.

3. La opción Adaptable hace que el encabezado se adapte a la combinación de colores de la primera sección, lo cual asegura un buen contraste.

También puedes probar las opciones Sólido o Degradado para obtener un encabezado congruente en todas las páginas.

Si estas opciones nativas no satisfacen tus necesidades, puedes recurrir al código personalizado para tener más control sobre los colores del encabezado y sus elementos:

1. Ingresa a la página específica donde quieres cambiar el color del encabezado.

2. Haz clic en el icono Configuración junto al nombre de la página.

3. En la pestaña Avanzado, encontrarás el área de inserción de código específica de la página.

4. Pega el código proporcionado a continuación, y asegúrate de incluir las etiquetas de estilo de apertura y cierre.

Código

<style>
:root {
--headerbg: #F4BAB5;
--headerText:#12294C;
}
/
*Change Header Background Color */
@media (min-width: 800px) and (hover: hover), (min-width: 1025px) {
.header-border {
    background: var(--headerbg);
}
}
/*Change Color  Header Nav Links on Desktop */
.header-display-desktop nav.header-nav-list a {
    color: var(--headerText) !important;
}
/*Change Color Header Nav Elements on desktop */
.header-display-desktop a.user-accounts-text-link.header-nav-item {
color: var(--headerText) !important;
}
 .header-display-desktop .header-title-text a {
color: var(--headerText) !important;
}
 .header-display-desktop .header-actions-action.header-actions-action--social svg {
fill: var(--headerText) !important;
}
 .header-display-desktop .Cart-inner path {
fill: var(--headerText) !important;
stroke: var(--headerText) !important;
}
 .header-display-desktop span.sqs-cart-quantity {
color: var(--headerText) !important;
}
</style>

Este código emplea variables CSS para facilitar la personalización del color. Puede cambiar los códigos de color tanto para el color del fondo como para el del texto. 

Al asignar estos colores, siempre considera la accesibilidad asegurando un contraste suficiente entre el color de los elementos del encabezado y el color de fondo del encabezado. El código anterior se ha escrito cuidadosamente para afectar solo a la vista de escritorio, que probablemente sea tu objetivo previsto.

3. Ocultar el título del sitio en la página de inicio

A veces, es posible que desees ocultar el título o logotipo del encabezado en una página específica, generalmente la página de inicio. Esto es útil cuando tienes un logotipo prominente en la primera sección y quieres evitar la repetición.

A continuación, te indicamos cómo ocultar el título del sitio en una página específica:

1. Selecciona la página donde quieres ocultar el título.

2. Haz clic en el icono Configuración junto al nombre de la página.

3. Ingresa a la pestaña Avanzado.

4. Agrega el siguiente código al área Inserción de código del encabezado de página.

Código

<style>
.header-display-desktop .header-title {
    display: none;
}
</style>

4. Aplicar una imagen de cursor personalizado

Agregar un cursor personalizado puede hacer que tu sitio sea único, pero es importante implementarlo cuidadosamente para mantener una buena experiencia de usuario. Te mostramos cómo agregar un cursor personalizado a tu sitio de Squarespace.

1. Prepara la imagen del cursor.

• Mantenla por debajo de 128 píxeles de ancho o alto (de 30 a 50 píxeles suele ser adecuado).

• Usa un archivo SVG si es posible para evitar la pixelación. Un PNG pequeño también es adecuado.

2. Carga la imagen del cursor.

• Crea una página temporal en la sección No enlazadas de tu sitio.

• Agrega un bloque de texto e inserta la imagen del cursor como un archivo vinculado.

• Guarda y haz clic en el enlace para obtener la ruta del archivo.

3. Agrega el CSS personalizado.

• Ingresa al panel CSS personalizado.

• Pega el código proporcionado a continuación e inserta la ruta del archivo entre comillas.

Código

body:not(.sqs-edit-mode-active) {
  cursor:url(" "), auto;
}

De forma predeterminada, este código solo cambiará el cursor predeterminado, y volverá al cursor del puntero estándar para enlaces y botones. Si también quieres un cursor personalizado para los estados de desplazamiento, usa el siguiente código y carga una imagen separada para el estado de desplazamiento.

Código

body:not(.sqs-edit-mode-active) {
  a:hover, button:hover {
    cursor:url(""), pointer; 
  }
}

Los cursores personalizados pueden dar un toque único a tu sitio web. Sin embargo, úsalos con cautela para evitar interrumpir la experiencia de navegación familiar para los usuarios.

No te limites a copiar y pegar

Si bien es conveniente simplemente copiar y pegar estos fragmentos de código, siempre recomiendo entender cómo funcionan. Este conocimiento es clave para solucionar problemas y realizar modificaciones personalizadas en tu sitio de Squarespace.

Si te interesa, revisa mi curso gratis de conceptos básicos de CSS para usuarios de Squarespace. Abarca los fundamentos de CSS, casos de uso comunes del código de Squarespace y dónde encontrar ayuda. 

Espero que este recurso te haya motivado a agregar personalizaciones bien pensadas a tu sitio por tu cuenta. ¡Feliz codificación!