Cómo agregar código personalizado a tu sitio web

La codificación puede ser intimidante con sus conceptos y reglas abstractos. El proceso de crear sitios web desde cero mientras se depuran errores en el camino abruma a muchos emprendedores; probablemente sea por eso que construiste tu sitio en Squarespace. Pero hay maneras más fáciles de poner un poco de código en acción para llevar tu sitio web al siguiente nivel.

Mi nombre es Rache y soy miembro de Circle, el programa asociado de Squarespace para diseñadores web profesionales. Comencé como diseñadora de sitios web que quería ir más allá en los proyectos de mis clientes. Cuando me di cuenta de que podía usar el código para hacer esto posible, fundé Squarestylist, una biblioteca de recursos creativos que ayuda a las personas a entrelazar diseño y código en sitios web que inspiran asombro y maravilla en un mar de igualdad. Aquí hay algunos consejos y formas de hacer que tu sitio sea más único con código personalizado.

¿Por qué agregar código personalizado a tu sitio web?

Las investigaciones muestran que la primera impresión de un visitante de un sitio web está relacionada con su diseño el 94 % de las veces, por lo que vale la pena esforzarse en crear la apariencia de tu propio espacio digital.

No me malinterpretes: el código personalizado no es un requisito en Squarespace. Puedes obtener una funcionalidad perfecta de inmediato. Dicho esto, es valioso usar la codificación como una herramienta para agregar características o requisitos del sitio que puedas tener y que aún no están integrados.

Mejores prácticas de código personalizado

Como diseñadora y desarrolladora web autodidacta, aprendí a codificar fragmentos uno a uno, resolviendo cada problema o caso de uso a medida que ocurren. Cada vez que me enfrento a un problema técnico desconocido, intento averiguar cómo solucionarlo en foros y grupos en línea y luego pongo en práctica mis nuevos conocimientos de inmediato.

Repetir este proceso me permitió determinar algunos buenos hábitos que marcaron la diferencia en el desarrollo de mis habilidades.

1. Maximiza las características incorporadas

Explora el editor de Squarespace y no dudes en profundizar en cada una de las opciones que encuentres. El editor es más capaz de lo que piensas. La mitad del tiempo es cuestión de saber dónde buscar lo que necesitas en la configuración predeterminada; la otra mitad es familiarizarte con sus distintas funciones para saber qué escribir en la barra de búsqueda.

2. Entiende lo que estás agregando

Si encuentras un fragmento de código en línea que sea útil para tu sitio web, no lo copies y pegues simplemente en tu panel CSS personalizado o Inserción de código. Revísalo línea a línea para entender cómo afecta a tu sitio. Toma nota de las palabras clave y los patrones: ¿qué crees que significan?

Así es como logré dominar el lenguaje de los navegadores incluso sin educación formal: al aprenderlo como lo hace un niño pequeño. Nutre tu curiosidad y colorea tu experiencia con deleite en lugar de pavor. Te sorprendería lo mucho que puedes absorber.

Si te interesa probar un enfoque más guiado para aprender código, puedes acceder a mi curso gratuito de conceptos básicos de CSS (en inglés) como punto de partida.

3. Sé consciente de la calidad

Por supuesto, el diseño web es mucho más que cuestiones de gusto visual. Si decides hacerlo por tu cuenta, tienes que hacerte las siguientes preguntas importantes:

• ¿Tu código afecta involuntariamente a otros elementos del sitio web?

• ¿Cómo responde tu sitio a los cambios en el tamaño y la orientación de la pantalla?

• ¿Cómo aparece en diferentes navegadores?

• ¿La función adicional ralentizará el sitio?

• ¿Cómo afecta tu personalización a la accesibilidad?

Considerar esto te hará tener cuidado con el impacto de tu código más allá de la vista previa predeterminada del sitio web. Tenemos que asegurarnos sobre todo de que estamos ofreciendo una experiencia de usuario atractiva en todos los niveles.

Fragmentos de código para probar

Tu primera incursión en el CSS no tiene que ser compleja. Recuerdo comenzar agregando pequeños detalles aquí y allá, construyendo gradualmente mi repositorio de código a medida que avanzaba. 

Accede al panel CSS donde puedes agregar código personalizado en tu cuenta de Squarespace haciendo clic en Sitio web, Herramientas para sitios web en la parte inferior de la barra lateral y luego en CSS personalizado. Puedes comenzar a modificar tu sitio con algunos de estos fragmentos.

1. Establecer una fuente de acento

No tienes que inclinarte por la cursiva habitual para enfatizar ciertas palabras o frases en tu sitio web. Esta función te permite designar un tipo de letra de pantalla como tu fuente de acento, una que puedes usar con moderación para realmente captar la atención de la gente.

1. Asigna el estilo de tu fuente Otros, que servirá como tu fuente de acento. Para hacerlo, ve a Estilos del sitio > Fuentes > Otros. Elige la familia de fuentes de tu elección y ajusta las propiedades de la fuente.

2. Agrega tu línea de código en Sitio web > Herramientas para sitios web > CSS personalizado. Copia y pega el código de abajo. Si ya hay código escrito, ten cuidado de no borrarlo. Simplemente pega el código adicional en la siguiente línea disponible.

3. Agrega un bloque de texto a cualquier sección de tu sitio web con elementos de Título 1, Título 2 o Título 3. Selecciona una palabra o grupo de palabras y asigna el formato de cursiva pulsando el botón I en la ventana emergente del panel de texto. El estilo de fuente de acento se aplicará a las palabras en cursiva.

Código CSS

Agrega a Sitio web > Herramientas para sitios web > CSS personalizado:

h1 em, h2 em, h3 em {
font-family:var( --meta-font-font-family);}

Mira la presentación de código personalizado de Rache del Día de Squarespace

2. Agregar decoraciones de línea

Las líneas finas como motivo visual pueden darle a cualquier sitio minimalista un toque de delicadeza. Es posible que ya uses el bloque de línea horizontal integrado en el editor de Squarespace. Para agregar líneas verticales, simplemente añade algunas líneas de código en el panel de CSS.

1. Agrega una Sección en blanco. Para que sea más fácil colocar elementos, haz visible la cuadrícula del Editor dinámico presionando G en tu teclado.

2. Haz clic en el botón Agregar bloque en la parte superior izquierda de la sección y elige Bloque de forma.

3. Abre la configuración del bloque de forma haciendo doble clic en el bloque.

4. Abre el menú desplegable de forma y elige la última opción de forma (Piedra angular).

5. Navega a Sitio web > Herramientas para sitios web > CSS personalizado. Copia y pega el código de abajo en la última línea en blanco del panel.

6. Después de pegar el CSS, el bloque de forma Piedra angular se convierte en una línea vertical. Puedes modificar su color activando la opción Trazo en la configuración del bloque de forma y eligiendo un color en el selector de color.

7. En dispositivos móviles, la línea vertical se convierte en una línea horizontal. Ajusta la ubicación del bloque en consecuencia. Esto no afectará la vista de escritorio.

Código CSS

.website-component-block .sqs-shape-block-container[data-shape-name="keystone"] {

&::before {

width: 1px;

content: ''; height: 100%; background-color: var(--shape-block-stroke-color); position: absolute;} svg {display: none !important;}.sqs-shape > * {stroke-width: 0 !important;}

}

@media screen and (max-width: 767px) {

.website-component-block .sqs-shape-block-container[data-shape-name="keystone"]::before {

height:1px;

width: 100%;

}

}

3. Mostrar efectos de imagen al desplazar el cursor

El movimiento dinámico también puede agregar interés visual a los diseños de tu sitio web. Aquí hay un ejemplo que puede activar los efectos de imagen 3D cada vez que el cursor se posiciona sobre una imagen seleccionada. Este es un ejemplo perfecto de cómo aprovechar las funciones integradas. Solo estás usando código para disminuir la distracción y aumentar la interactividad de tu sitio web.

1. Agrega un bloque de imagen o elige uno existente.

2. En la configuración del bloque de imagen, selecciona Efectos de imagen y elige un efecto.

3. De forma predeterminada, el efecto de imagen será visible al cargar la página. Para que se muestre solo al desplazar el cursor, dirígete a Sitio web > Herramientas para sitios web > CSS personalizado y pega el código a continuación.

Código CSS

.sqs-block-image .design-layout-fluid .fluid-image-container {img {visibility: visible !important;}}.imageEffectContainer {opacity: 0;transition:0.5s;}.sqs-block-image:hover .imageEffectContainer {opacity: 1;}

Espero que este artículo te anime a salir de tu zona de confort y experimentar en el entorno de pruebas de tu editor de código, si aún no lo habías hecho. ¡Feliz codificación!

¿Listo para crear y personalizar tu sitio web?