Descarga un manual gratuito que te ayudará a diseñar tu sitio con confianza.
La dirección de correo electrónico que escribiste no es válida.
Gracias por suscribirte.
Si nos das tu correo electrónico, indicas que has leído y comprendido nuestra Política de Privacidad y que aceptas recibir comunicaciones de marketing de Squarespace.
¿Estás pensando en actualizar tu sitio web y hacer algunos ajustes a su diseño, pero sientes que ya has explorado a fondo cada opción, cada ajuste de estilo, cada tipo de bloque y característica?
Squarespace siempre hace actualizaciones e incorporaciones en su sólido conjunto de herramientas para ofrecer nuevas opciones para adaptar y personalizar tu sitio web. Este artículo destacará algunas opciones que quizás aún no hayas encontrado, pero que podrían ser justo las herramientas que estás buscando para refinar el aspecto de tu sitio.
Estas herramientas también son excelentes puntos de acceso para comenzar a explorar las características más profundas de la plataforma y guiarte por un nuevo camino creativo.
Cambiar secciones de una página
Las secciones de página son las diferentes piezas que componen el contenido de una página del sitio web, como una presentación o tu lista de servicios. Echemos un vistazo a algunas de las opciones de diseño disponibles para actualizar las secciones de tu página.
1. Divisores de sección
Los separadores de sección agregan saltos más visibles entre las secciones de página. Puedes elegir agregar una línea real en diferentes estilos, como una onda o diagonal, o recortar un fondo de sección o una imagen de fondo para marcar el corte.
Estos elementos pueden ayudar a separar visualmente el contenido, permitiendo que cada sección tenga su propio espacio sin la necesidad de crear una nueva página, produciendo un diseño más dinámico. Puedes usar separadores de sección para separar los diseños de página de varias maneras, como:
Crear un corte entre las secciones Acerca de y Nuestro equipo en una sola página, consolidando dos posibles páginas en una
Hacer un sitio web de una página más organizado
Agregar una separación entre el contenido de tu página principal y el pie de página de tu sitio web
Agregar separadores de sección
2. Imágenes y videos de fondo de sección
Agrega fondos únicos a las secciones de la página para llamar la atención de un visitante cuando llegan a tu sitio. Úsalos como una alternativa a un video de fondo, como una forma de diferenciar las secciones o como una introducción visual a cualquier página de tu sitio.
Por ejemplo, puedes agregar un video de fondo a la primera sección de la página de inicio de tu sitio para ofrecer una visión general de tu producto, servicio o trabajo. También puedes usar imágenes de fondo de sección para darles a secciones específicas de una página su propio aspecto.
Consejo profesional: dependiendo de la velocidad de conexión y la versión del navegador, es posible que los videos de fondo no se carguen para todos los visitantes. Es útil agregar una imagen alternativa para dispositivos móviles para que aparezca cuando el video no cargue.
Agregar fondos personalizados a las secciones
3. Diseño inteligente
Si estás buscando una mano para comenzar a diseñar una sección de página o te gusta tener una plantilla para trabajar, los diseños inteligentes son un excelente punto de partida. Los diseños inteligentes presentan series de contenido en diseños seleccionados. Los diseños incluyen arreglos para diferentes propósitos, como columnas y filas, carruseles o diapositivas.
Estos son perfectos para mantener las páginas simples con contenido que debe actualizarse regularmente, como imágenes destacadas de productos, proyectos recientes y los integrantes actuales del equipo. Si bien este contenido comienza con diseños preestablecidos, puedes crear secciones adicionales para modificarlos como necesites.
Usa diseños inteligentes en tu sitio
4. Fondos personalizados
Si bien las imágenes de fondo de sección son una excelente manera de atraer la atención de los visitantes, también puedes agregar fondos personalizados a una sección de página para otro nivel de personalización. Los fondos personalizados te permiten crear un aspecto único con colores, patrones y formas generados en la plataforma de Squarespace.
Esta es una excelente opción para crear secciones temáticas en una sola página, como separar el sitio de una escuela en secciones por grado o mejorar el aspecto de las preguntas frecuentes que tienen mucho texto.
Bloques
Los bloques son elementos de diseño que se pueden colocar en secciones de páginas de Squarespace, como un bloque de texto, un bloque de formulario o un bloque de imagen. A continuación se muestran algunos tipos de bloques y características que quizás aún no hayas tenido la oportunidad de probar.
5. Bloques de desplazamiento
Los bloques de desplazamiento son un tipo de bloque único que te permite mostrar texto que se desplaza horizontalmente por la página. En cuanto su función, son similares a una marquesina de teatro o un teletipo de noticias. Puedes controlar la velocidad y la forma de desplazamiento.
Esta es una excelente manera de darle más vida al diseño de tu sitio y atraer la atención de los visitantes hacia la información clave.
Puedes usar bloques de desplazamiento para:
Destacar las ofertas, los lanzamientos o los productos populares
Crea un teletipo de los próximos eventos
Mostrar reseñas y testimonios de los clientes
Agregar bloques de desplazamiento a tu sitio
6. Bloques de formas
Los bloques de formas te permiten agregar diferentes formas con relleno sólido a las secciones de tu página. Esto te permite variar los diseños de página y crear diseños más diversos.
También puedes superponer bloques de formas con otros tipos de bloques para crear diseños aún más llamativos visualmente. Las formas se pueden colocar detrás de las imágenes en tu sitio para que sobresalgan de la página o se distingan de otro contenido en una galería.
Algunos usos de los bloques de formas incluyen:
Agregar un bloque con forma de estrella detrás del testimonio de un cliente para enfatizar su experiencia de 5 estrellas
Agregar bloques de formas de distintos colores alrededor de una sección de página que detallan tus servicios de venta de pasteles de cumpleaños para agregar una sensación de fiesta
Más información sobre el uso de bloques de formas
7. Bloques de acordeón
Los bloques de acordeón muestran texto en secciones plegables y en las que se puede hacer clic. Esto permite mantener la longitud de la página en un mínimo y reduce el desplazamiento de tus visitantes. Los bloques de acordeón pueden ayudarte a crear un diseño más estructurado para páginas con mucho texto, como las preguntas frecuentes o los listados de productos.
Por ejemplo, usa un bloque de acordeón para mostrar información importante sobre un servicio que tu empresa proporciona, con secciones claramente divididas en las que los clientes pueden hacer clic para leer más. Un fotógrafo de bodas podría usar un bloque de acordeón para desglosar su proceso de trabajo, con secciones de acordeón como: Primera reunión, Elige un paquete, Sesión de compromiso, Encuentro previo a la boda, Día de la boda, Después del gran día.
Agrega bloques de acordeón a tu sitio
8. Fijar bloques
Puedes anclar cualquier tipo de bloque en una sección de página. Esto los mantiene estacionarios mientras los visitantes se desplazan por el resto del contenido en la misma sección.
También permite garantizar que la información y el contenido importantes sean visibles sin importar hacia dónde te desplaces. Por ejemplo, puedes:
Anclar la ubicación de tu empresa y el horario de atención mientras los visitantes se desplazan por los productos
Mantener tu imagen al frente mientras presentas tus logros o servicios
Destacar un aviso legal cuando sea necesario
Mantener tu formulario de contacto o registro para la newsletter a la vista en todo momento
Formato del texto
La forma en que le das estilo al texto en tu sitio web puede afectar a lo que los visitantes del sitio le prestan atención y lo que recuerdan. Te presentamos algunas opciones de formato de texto y características que te permitirán sacar el máximo provecho de tus palabras.
9. Textos destacados
Para que cierto texto se destaque, prueba usar la función de destacar texto. Esto realmente puede ayudar a acentuar la información clave en una página, o hacerla más fácil de leer, si es necesario.
La función de destacar texto tiene las siguientes opciones de estilo:
Animación: anima la forma del destacado para agregar movimiento que llame la atención sobre el texto.
Poner al frente: esto permite que el destacado se superponga a tu texto, haciendo que se vea más como un destacado real.
Color: cambia el color del destacado para que sobresalga o coincida mejor con el diseño de tu sitio.
Extremos: ajusta la forma de los extremos del destacado para que sea redondeada o cuadrada.
Grosor: ajusta el grosor de la línea del destacado.
Esto es excelente para:
Destacar las reseñas de los clientes
Acentuar partes clave de una entrada de blog
Llamar la atención sobre ciertos elementos de una página de Acerca de
Más información sobre cómo destacar texto
10. Escala del texto
La escala de texto te permite ajustar tu texto al ancho de un bloque. Es una manera rápida de dimensionar tu texto sin saltos de línea, independientemente del tamaño del navegador. Recomendamos esta función para títulos o titulares breves. También es ideal para:
Dividir el contenido en secciones con encabezados
Crear listas concisas
Destacar citas importantes de porciones más grandes de texto
Formato de imágenes
La manera en que diseñas y formateas tus imágenes también puede agregar personalidad e interés visual al diseño de tu sitio.
11. Animaciones y efectos de bloques de imágenes
Puedes agregar efectos a los bloques de imágenes para aportarles a las imágenes un aspecto más estilizado y único. Algunas opciones agregan una animación (como una onda sutil o un efecto estático) para enfatizar el estilo visual de tu sitio. Otros efectos solo aparecen a medida que el visitante se desplaza por esa sección de tu sitio.
Esta es una gran manera de:
Aportar más vida a un área de un sitio que, de otro modo, sería estática
Añadir movimiento a las imágenes fijas sin usar videos
Asegurarte de que las principales imágenes siempre llamen la atención
Añadir animaciones y efectos a los bloques de imágenes
12. Formas y contornos de las imágenes
Los bloques de imagen también se pueden moldear para cambiar el aspecto de cada imagen en una página. Las opciones disponibles para dar forma a las imágenes incluyen:
Usar la configuración del radio de esquina para redondear las esquinas de una imagen
Incluir una forma completa, como un círculo o un triángulo
La configuración de forma completa aparece sobre la imagen, como una contorno, dándole una nueva forma. Convierte tu galería de fotos en una serie de formas interesantes o tus ofertas de productos en algo más que las imágenes estándar para realmente llamar la atención.