Superestiliza sitios de Squarespace con 6 simples Snipets de CSS

1. Introducción: Hola ahí, soy Kyle. Traté de pasar todo el tiempo que puedo tropezar por carretera por el país con mi esposa y mis perros. Tomar todo lo que hay que ver, comer rosquillas veganas y beber mucho café estupendo. Pero cuando no estoy haciendo eso, paso mi tiempo construyendo sitios web para pequeñas empresas en Squarespace. De hecho, he construido más de 100 sitios web de Squarespace solo en los últimos tres años para clientes de una amplia variedad de industrias, que van desde la construcción hasta muebles comerciales, hasta panaderías, e incluso organizaciones de rescate de animales. En el transcurso de la construcción de estos muchos sitios de Squarespace, me ocurrió un conjunto de fragmentos de código CSS que instalo en todos mis sitios desde el principio para asegurarme de que todo se vea como me gusta. No soy desarrollador, pero me di cuenta de algún CSS menor para ayudar a limpiar algunos de los artículos en Squarespace que creo que podrían ser mejores y te voy a mostrar cómo hacer eso también. Esta clase es para cualquier persona que diseñe o gestione sitios web de Squarespace y quiere que luzcan de primera clase. No necesitas saber codificar, ni siquiera necesitas saber qué es CSS. Te doy todo el código que necesitarás en un documento PDF descargable. Todo lo que tienes que hacer es seguir las indicaciones para obtener el look que quieras. Para tu proyecto de clase, te animo a agregar al menos tres de estos fragmentos a un sitio de Squarespace que estás construyendo o que administres y compartas un enlace al sitio en la página de la clase para que todos podamos ver tu trabajo. Estos fragmentos CSS funcionan en todos los planes de Squarespace. A lo mejor de mi conocimiento, todas las plantillas de Squarespace. Todo lo que necesitarás para empezar es un sitio web de Squarespace, incluyendo una prueba gratuita estaría bien y la descarga de PDF que he proporcionado que contiene los fragmentos de código que vas a instalar. Una vez que tengas esos artículos listos para salir, empecemos. 2. Estillo de reglas horizontal: El primer Spppet CSS que estaremos insertando será para el estilo de reglas horizontales, o como le gusta llamarlo Squarespace, un bloque de líneas. bloques de líneas o las reglas horizontales se utilizan comúnmente para descomponer texto o sección de encabezados, o simplemente crear espacio en un sitio web. Puedes seguir adelante e ir a cualquier página de tu sitio, insertar un bloque. Va a ser el bloque de líneas. Voy a poner dos de ellos aquí para que puedan ver. Ahora, los bloques de línea de Squarespace solo te permiten tener completamente horizontal 100 por ciento de relleno y suelen ser bastante delgados, alrededor de un píxel o dos, y así vamos a insertar un pequeño fragmento de código donde puedes cambiar el color, el espesor, y el ancho. En muchas de las plantillas de Squarespace, ya se puede cambiar el color, pero algunas de ellas, ni siquiera se puede hacer eso. Una vez que tengas esos bloques de línea en tu página, pasa a la descarga de CSS que he proporcionado, estilo de regla horizontal. Adelante y resalta ese código, cópialo, vuelve a Squarespace, quieres ir a la pestaña Diseño, ve a CSS personalizado, y luego simplemente pegarlo. Ahí, ya ves lo que pasó cuando pegamos ese CSS ahí dentro. Ahora, puedes cambiar el grosor del mismo cambiando esta altura de primera línea. Si quieres hacer realmente grueso, puedes ponerlo hasta, digamos, 15. O como dije, podrías bajar a un tres más estándar o así. El ancho aquí se puede hacer en porcentaje o píxel. Podrías ir y ponerlo en algo así como 200px. Ahora bien, es importante notar que cuando hagas esto, algunas de las plantillas harán automáticamente que se justifique, por lo que puedes cambiar este último comando de margen en base a eso. Se puede sacar eso por completo. Mira, estoy trabajando con una plantilla que no tiene justificada por lo que cuando lo pones en un comando de margen, realidad lo justifica más a la izquierda. Pero si tienes una plantilla con la que estás trabajando que sí lo justifica cuando haces más pequeño el ancho, necesitarás mantener ahí ese último margen uno y luego margin-left 25 por ciento lo hará para que se centre. Pero para el mío, voy a mantenerlo fuera. Este color de fondo es donde puedes elegir un color hexadecimal o simplemente puedes escribir un color estándar si lo deseas, como el rojo. Ahí vas. Puedes usar esto en, bueno, cualquier momento que pongas esto en tu sitio ahora, puedes ir y agregar otro. Será exactamente lo mismo. Vamos a poner uno aquí arriba, por encima de eso, y ahí va. Es así como vas a darle estilo a tus bloques de línea de reglas horizontales en Squarespace con este fragmento simple CSS personalizado. 3. Títulos de la galería de cuadrícula de cuadrícula: El segundo fragmento de CSS que vamos a agregar al sitio con el fin de super estilo cualquier sitio genérico de Squarespace es comando para envolver los títulos de la cuadrícula. Ahora si has agregado alguna galería de cuadrícula a un sitio de Squarespace y has tenido algún título o título que sea más largo que el ancho de la foto en sí, te darás cuenta de que rápidamente obtienes estas elipses justo aquí y se corta. Lo que vamos a hacer es entrar un pequeño fragmento de CSS que envolverá los alrededor y mostrará igual que cualquier título antiguo de larga duración. Vas a entrar en la pestaña Diseño en Squarespace, ve a CSS personalizado. Ir a la descarga de CSS. He proporcionado, envolver títulos de cuadrícula. Adelante y resalta ese código. Vuelve a Squarespace y simplemente pegarlo. Ya verás lo que hace eso. Después agrega el comando, que con el espacio en blanco normal le permite envolver y llega a ver ahí la leyenda completa. Título completo. Puedes cambiar la altura de la línea aquí si quieres hacer esas líneas un poco más apretadas, tal vez 1.2 o subir hasta 1.8 si crees que se ve más limpio. Pero de cualquier manera, ahora tienes todos tus subtítulos mostrando. Esto sucederá sin importar el tamaño de pantalla que estés eligiendo. Si vas a un cheque móvil, aún lo verás. Funciona muy bien.Cabe señalar que si lo estás mirando en móvil aquí, puede que tengas algún problema si tienes estas líneas donde hay dos imágenes en línea y una baja a dos líneas y la otra no. Se tirará el espaciado aquí para bajar eso a otra línea.En realidad tengo un fragmento de CSS diferente que viene más tarde que se encargará de eso también y hará que las cosas se vean realmente limpias en el móvil. Ahora mismo lo vamos a volver a poner al escritorio. Ya puedes ver que ahora eres capaz de ver todos tus títulos. Asegúrate de guardarlo. 4. Widths de botones consistentes: Nuestro tercer fragmento de CSS, vamos a agregar va a ser una línea rápida de código con el fin de estandarizar los anchos de los botones. Si estás usando algún botón en tu sitio, sin importar el tamaño que sean, notarás que la configuración automática de espacios cuadrados para los botones es tenerlos por defecto a un ancho de cualquiera que sea la longitud del texto que pongas en él, así que aparte de si tienes espaciadores alrededor o si es realmente largo y baja a una segunda línea, va a ser el ancho del texto que hay dentro de él y lo puedes ver aquí. Cuando tienes dos en la misma línea o incluso en la misma página que van variando en longitud, puede parecer un poco descuidado como lo tenemos aquí. Entonces todo lo que vamos a hacer es agregar una línea rápida de código que estandariza eso. Como de costumbre, vamos a entrar en el término CSS personalizado aquí. Vamos a ir al documento que he proporcionado. Vamos a ir a “Button Width” aquí, copiar y pegar ese código. Vuelve a “Squarespace” y entra ahí dentro y verás que ahora están estandarizados. Puedes hacer este código en base a un ancho de porcentaje como tenemos aquí, 80, o podrías cambiarlo a una cantidad de píxel como 400 say. Ahora verás que cuando cambies la cantidad de píxel, será estática a eso. Por lo que puedes tener alguna superposición aquí dependiendo del tamaño de tu pantalla lo cual no es ideal. Por lo que recomendaría usar un porcentaje y también recomendaría mantenerlo más cerca o por lo menos menos menos del 90 por ciento. De lo contrario, tendrás algunos problemas de espaciado cuando llegues al móvil y demás. Puedes usar esto en cualquiera de los bloques, cualquiera de los tamaños de botones pero si quieres hacerlo solo para una talla, puedes agregar un doble guión después del elemento y luego el tamaño del bloque, tan pequeño y te darás cuenta que soy usando bloques medianos aquí así que te das cuenta cuando meto el pequeño adentro, en realidad los cambia de nuevo a la normalidad porque sólo estamos aplicando a la pequeña pero si entro medio aquí lo verás volver allá. Por lo que esta es una gran manera de estandarizar todos tus bloques de botones en tu sitio y hacer que todo se vea bonito y limpio. 5. Eliminar la Hyphenation: Para nuestro cuarto fragmento de CSS, vamos a ingresar un poco de código que eliminará estas molestas guiones que Squarespace hace en pantallas más pequeñas. Esto lo verás a menudo si estás usando una fuente grande, una H1 o H2 que has estilizado para ser grande a menudo en la página de destino o encabezado. Cuando realmente estás tratando de hacer un impacto en el lector con alguna fuente grande y frases simples cortas, lo cual es súper común en estos días, y generalmente se ve bastante bien. El problema con Squarespace es cuando tienes textos grandes como este con ejecutar tu visión arquitectónica, que es algo que utilicé en la página web de un cliente. Vas a la vista móvil, verás que separa palabras de forma natural y realmente no llegas a escoger dónde sucede eso obviamente. Es algo que hace Squarespace. Pero tengo un código simple aquí. Simplemente vamos a ir a Diseño como de costumbre, sección CSS personalizado. Vamos a ir a la Descarga que he proporcionado, ir a Remove Hyphenation, copiar ese código, volver aquí, pegar en el CSS, y mira eso. Ahí va tu guión. Su desaparecido. se puede hacer. Verás esto es para fuente regular, el H1, el H2, el H3s. Si por alguna razón querías que hicieran guiones en algunos tipos de fuentes y no en otros, puedes eliminar algunos de estos, pero por ahora lo tienes todo despejado ya no veas esa guiones en pantallas más pequeñas. 6. Impulsar filas de imágenes en las galerías de la cuadrícula móvil: El quinto fragmento de CSS que he proporcionado y que donde vamos a darle estilo a nuestros sitios de Squarespace, va a ser un fragmento que creo es una característica que es súper necesaria en mundo actual donde estamos tan acostumbrados al desplazamiento verticalmente en nuestros teléfonos para ver productos e imágenes, y ese es un comando para forzar todas las galerías de cuadrícula en filas de una sola imagen en el móvil. Si antes has trabajado en Squarespace, sabrás que cuando tengas aquí una galería de cuadrícula como tal, cuando vayas a la vista móvil, automáticamente te obligarás a tener dos imágenes por fila, y si estás usando el fragmento de código He proporcionado en menos de dos para envolver tus títulos hasta la segunda línea o tercera línea, que puede arrojar algo de espaciado aquí en el móvil. Pero tenemos una solución para eso ambos, y eso es forzar una imagen por fila para que cada imagen obtenga el mayor espacio posible y brinde una bonita imagen clara a sus espectadores. Tenemos esto, vamos a volver a la vista de escritorio porque a Squarespace no le gusta cuando agrego el código en la vista móvil. Pero sólo vamos a ir al documento que he proporcionado. Para filas de una sola imagen en galerías de cuadrícula móvil. Adelante y copia y pega eso. Ya tenía una copia y así voy a entrar aquí y pegarla. No verás nada aquí cuando estés en la vista de escritorio porque tengo esta consulta de medios establecida en 640 píxeles por lo que empezará a funcionar cuando estés por debajo de 640 píxeles. Eso se puede cambiar como más le parezca. Pero probablemente te recomiendo que te mantengas alrededor de 640. Si quisieras bajar a pantallas realmente pequeñas, podrías hacer algo así como 320. Si quisieras subir para abarcar tabletas aún más pequeñas, puedes ir a algo así como 960. Pero me gusta a 640, creo que ese es un buen punto de ruptura. Ahora que tienes eso ahí dentro, si solo vas y miras la vista móvil, verás que ahora estas son todas filas de una sola imagen y así tienes mucho más limpio, fotos más grandes, tus subtítulos se ven mejor, y has consiguió estos todo listo. Esto es realmente genial para cualquier foto de producto, así como solo fotos que tengas. 7. Subtítulos de imagen de la imagen: El sexto y último fragmento de CSS que estaremos insertando en nuestro sitio de Squarespace es una línea de código muy simple diseñada solo para centrar los subtítulo de imagen, Squarespace establece por defecto para alinear a la izquierda los subtítulo de imagen. Entonces como verán aquí, tengo dos imágenes en la página. Se puede ver los pequeños subtítulo de imagen aquí están alineados a la izquierda y eso solo se ve un poco funky sobre todo cuando se tienen imágenes con fondos blancos y no se puede decir lo anchos que van. Al igual que en este caso de aquí, se ve bastante alejado de donde debería estar. Entonces voy a volver a entrar en la pestaña Diseño, CSS personalizado, el mismo lugar que los hemos estado haciendo todos. Acude al documento descargable que he proporcionado. Pie de imagen central, ese es el último. Adelante y copia eso. Pega la derecha en CSS y verás que se trasladaron al centro ahí. Eso es todo lo que necesitas hacer para mantenerlo centrado. Si quisieras tenerlo alineado para algún toque de estilo, solo podrías reemplazar este centro aquí mismo por derecho, y ahí tienes. Pero solo recomiendo que si lo estás haciendo por cierta razón, eso funcionará mejor si no tienes fondos blancos. Como puedes ver, esto lo tira bastante si vas alineado a la izquierda o a la derecha. Entonces como dije, sólo tienes que ir con centro. Es una gran manera de hacer que todo se vea consistente a lo largo de todas tus imágenes y ahí lo tienes. Eso es todo de lo que hemos hablado en nuestros seis fragmentos de CSS para sitios de Squarespace que te ayudan a super estilo o sitio genérico. Si has disfrutado de esto, has aprendido algo, por favor pulsa el botón Seguir de mi perfil ya que estaré impartiendo más clases de Squarespace próximamente. Gracias por ver.