Edita las fuentes, los colores y el diseño de página de tu sitio.
Utiliza las opciones de estilos del sitio para hacer cambios de estilo en tu sitio. Puedes editar estilos globales para hacer cambios que se apliquen a todo el sitio para obtener un aspecto coherente o bien, puedes aplicar estilos a cada sección.
Esta guía revisa cómo usar las opciones de estilo, denominadas "retoques", para cambiar el aspecto de tu sitio. Te recomendamos probar con las diferentes opciones de diseño a medida que creas el sitio. Al probar diferentes fuentes, colores y configuraciones de página, te harás una idea de lo que es posible y podrás crear un diseño que te encantará.
Consejo: Además de nuestras guías y tutoriales en video, ofrecemos dos seminarios web de Introducción a Squarespace. En estas sesiones, te guiaremos a través de la creación de plantillas con el Kit de diseño de Squarespace con IA, la navegación por tu sitio, opciones de dominios y correo electrónico, la preparación del contenido del sitio, la creación de una página de inicio y el estilo de colores y fuentes. Los seminarios web suelen durar una hora y no necesitas un sitio o una cuenta de Squarespace para registrarte.
Mira el video
Opciones de estilo en la versión 7.1 vs. versión 7.0
Los cambios de estilo funcionan de manera diferente según la versión de tu sitio. En las secciones que siguen, haz clic en la pestaña correspondiente a tu versión para repasar los pasos para tu sitio.
Versión 7.1
En nuestra versión más reciente de Squarespace, utilizas Estilos del sitio para hacer la mayor parte de tus cambios de estilo, incluidos los cambios de fuente, color y espaciado. Los cambios que introduces en estilos del sitio suelen ser para todo el sitio, pero puedes hacer cambios más ajustados aplicando estilo a secciones o áreas de texto específicas.
Todos los sitios de la versión 7.1 comparten la misma plantilla. Eso significa que todos tienen las mismas opciones de estilo y funciones. También todos usan secciones para agregar contenido a las páginas.
No es necesario cambiar de plantilla, por lo que esa opción no está disponible en la versión 7.1. Te recomendamos seguir los pasos de esta guía para probar diferentes estilos en tu sitio.
Versión 7.0
En la versión 7.0, la versión anterior de Squarespace, cada plantilla tiene sus propias opciones de estilo únicas y configuraciones predeterminadas. Los estilos de sitio de cada plantilla tienen diferentes retoques, que se agrupan en secciones como encabezado del sitio y contenido principal. Para obtener más información, visita la guía de tu plantilla.
Encuentra un ajuste de estilo
La forma en que encuentres un ajuste de estilo depende de la versión de tu sitio y de si lo estás editando en un equipo o en la aplicación de Squarespace.
Para abrir el panel Estilos del sitio, haz clic en el ícono de pincel situado en la esquina superior derecha mientras editas cualquier página.
A partir de ahí, puedes hacer clic en Temas para buscar paquetes preestablecidos, como Profesional, Llamativo y Divertido. Si seleccionas uno de los paquetes, cambiarás tu fuente, color y botones por los del paquete. Incluso después de seleccionar un paquete preestablecido, puedes editar los estilos individuales haciendo clic en el elemento del sitio que quieres cambiar, como Fuentes o Colores. Utiliza esta guía para ver pasos más detallados en cada panel.
Para cerrar Estilos del sitio, haz doble clic en la vista previa de la página, o haz clic en el ícono de pincel o en Cerrar en la parte superior del panel. Los cambios de estilo permanecerán intactos hasta que los guardes o los deshagas.
Con estilos del sitio cerrado, puedes realizar cambios más precisos editando una sección específica. Para aplicar estilo a una sección, posiciona el cursor sobre dicha sección y luego haz clic en Editar sección o en el icono de lápiz. Los estilos de sección anulan los estilos para todo el sitio.
Aquí puedes elegir también diferentes diseños para las secciones de colección y de galería con diseño inteligente. Si haces cambios de estilo en una sección de la colección, afectarán a todos los diseños de ese tipo. Por ejemplo, si tienes dos secciones de blog que utilizan un diseño de mampostería, cualquier cambio de estilo que hagas en una sección afectará a ambas secciones.
Para abrir Estilos del sitio:
- Abre el panel Páginas.
- Abre la página a la que quiere aplicar estilo. Para las funciones de todo el sitio, como pies de página, abre cualquier página. Para los elementos de la colección, abre cualquiera de ese tipo (como una entrada de blog o un elemento del producto).
- Haz clic en Sitio web en la parte superior izquierda del panel Páginas, haz clic en Diseño y luego en Estilos del sitio.
- En el panel Estilos del sitio, haz clic en cualquier ajuste para hacer los cambios.
La edición del sitio está inactiva cuando Estilos del sitio está abierto. Para agregar o quitar contenidos, cierra Estilos del sitio y abre el panel de Páginas.
Estilos del sitio muestra las opciones de la página en la que te encuentras. Cualquier cambio en estos ajustes se aplicará a todas las páginas de ese tipo en tu sitio. Por ejemplo, si haces cambios de estilo en una página de tienda, el mismo cambio se aplicará a todas las páginas de tienda de tu sitio.
Consejo: A cada página de portada se le ajusta el estilo por separado.
Haz clic en un área de una página en el panel de vista previa para mostrar los ajustes de estilo disponibles para esa área y ocultar el resto. El cuadro de resaltado de estilo aparece alrededor del elemento en el que estás haciendo clic. Vuelve a todas las opciones haciendo clic en Mostrar todo. Este acceso directo está disponible en la mayoría de las plantillas y áreas del sitio.
Así es cómo podría verse en la plantilla Brine:
Para algunos ajustes, puedes hacer clic y arrastrar dentro de la vista previa para ajustar la configuración:
Los cambios de estilo funcionan de manera diferente en la aplicación según la versión de tu sitio.
Estilos de la versión 7.1 en la aplicación
Con Estilos del sitio, puedes aplicar cambios de estilo a gran escala al sitio con solo pulsar una vez, incluidos los cambios de fuente, color y espaciado. Los cambios que se realizan en Estilos del sitio suelen ser en todo el sitio, pero puedes realizar cambios más detallados dando estilo a secciones o áreas de texto específicas.
Para realizar cambios de estilo:
- Toca cualquier página de tu sitio y, luego, Vista previa.
- Toca Editar en la esquina superior izquierda.
- Pulsa el ícono de pincel para abrir Estilos del sitio.
- Pulsa el área del sitio al que deseas aplicar estilo, como Fuentes o Colores.
- Utiliza las opciones del panel para personalizar esa área.
- En Fuentes, pulsa Sans-serif, Serif o Mixto para revisar los paquetes de fuentes de cada tipo. Toca el nombre de una fuente para cambiar el tamaño base.
- En Colores, elige Contraste, Claro y Oscuro para cada tema de color.
Consejo: También puedes abrir estilos del sitio en la pestaña de Configuración.
Para aplicar estilo a una sección:
- Toca la página que quieres editar y, luego, Vista previa.
- Toca Editar y luego toca una sección a la que quieras darle estilo.
- Pulsa el ícono de lápiz en la barra de herramientas de la sección.
- Pulsa Formato, Fondo o Colores y, a continuación, elige un nuevo estilo.
- Toca Listo, luego Guardar cambios.
Estilos de la versión 7.0 en la aplicación
Realizar cambios de estilo en Estilos del sitio:
- Toca Más, Páginas y, luego, la página en la que quieres aplicar los cambios. Esto le indica a estilos del sitio que debe mostrar opciones relevantes para la página que estás viendo y te permite previsualizar los cambios. Si quieres cambiar una función de todo el sitio, como los menús de navegación o un pie de página, abre cualquier página.
- Toca ..., luego Estilos del sitio.
- Se abrirá el panel de Estilos del sitio con una lista de ajustes de estilo. Toca cualquier ajuste para hacer los cambios.
Fuentes y colores
Utiliza las secciones siguientes para obtener información sobre cómo cambiar las fuentes y los colores del sitio.
Fuentes
Cómo cambiar las fuentes depende de la versión del sitio.
Para cambiar una fuente, abre estilos del sitio y haz clic en > junto a Fuentes.
En el panel Fuentes, puedes elegir un paquete de fuentes para aplicarlo a todo el texto del sitio o cambiar la fuente de determinados tipos de texto. Si deseas obtener más información, visita Cambiar fuentes.
En cualquier área de texto, también puedes cambiar el formato del texto a título, párrafo o monoespacio o bien, agregar un enlace.
- Los enlaces siempre están subrayados.
- Cuando los que visitan el sitio hacen clic en un enlace, aparece una línea de puntos alrededor de él que hace que tu sitio sea más accesible para todos los visitantes.
Para cambiar las fuentes y los tamaños, utiliza los retoques Tipografía o Fuente en Estilos del sitio. Para obtener más información, visita Cómo cambiar fuentes.
Colores
La forma en que cambies los colores depende de la versión del sitio.
Para cambiar los colores de tu sitio, abre los estilos del sitio y haz clic en > junto a Colores.
Con las combinaciones de colores seleccionadas, puedes hacer cambios en todos los colores del sitio a la vez, o bien, personalizar los colores de cada elemento del sitio. Para obtener más información sobre cómo cambiar los colores del sitio y de la sección, visita Cómo cambiar los colores. Para revisar las mejores prácticas de accesibilidad, visita Cómo crear contenidos accesibles para tu sitio.
Para cambiar los colores, selecciona cualquier ajuste de estilos del sitio con un círculo de colores junto a la etiqueta. Para obtener más información, visita Cómo cambiar los colores. Para revisar las mejores prácticas de accesibilidad, visita Cómo crear contenidos accesibles para tu sitio.
Diseño
Utiliza las secciones siguientes para obtener información sobre cómo cambiar el diseño y el espaciado de la página del sitio.
Encabezado
Los visitantes utilizan el encabezado de la parte superior para navegar por el sitio. La forma en que editas el encabezado depende de la versión del sitio.
Para editar el encabezado del sitio, haz clic en Editar en la esquina superior izquierda de la vista previa del sitio y, a continuación, coloca el cursor sobre el encabezado y haz clic en Editar encabezado del sitio. Utiliza las opciones del editor para personalizar el título del sitio o el logotipo y los enlaces de navegación. También puedes añadir un icono del carrito de compras, iconos de redes sociales y un botón de llamada a la acción.
Para obtener pasos más detallados, visita Cómo crear un encabezado de sitio.
El estilo de encabezado del sitio depende de la plantilla. Obtén más información sobre la configuración de encabezado específica en la guía de tu plantilla.
Algunas plantillas tienen funciones especiales en el encabezado. Para ver una lista de las funciones disponibles, visita Cómo crear un encabezado del sitio.
Pie de página
El estilo del pie de página depende de la versión del sitio.
Para aplicar estilo al pie de página:
- En la esquina superior izquierda, haz clic en Editar.
- Posiciona el cursor sobre el pie de página y haz clic en Editar pie de página.
- Haz clic en la sección Editar o en el ícono del lápiz para realizar cambios de estilo.
Si deseas informarte mejor, consulta Editar los pies de página.
El estilo de pie de página del sitio depende de la plantilla. Obtén más información sobre la configuración específica del pie de página en la guía de la plantilla.
Para obtener más información sobre las diferentes opciones de pie de página por plantilla, visita Cómo editar pies de página.
Espaciado y relleno
El modo en que se cambia el espaciado del sitio depende de la versión del sitio.
Para cambiar el espaciado de tu sitio, abre el panel de Espaciado.
Estos retoques cambian el espaciado en todas las páginas del sitio:
- Ancho de página (máximo): Cambiar el ancho máximo posible de las páginas de tu sitio. El ancho real depende de tu navegador y dispositivo. Este ajuste no afecta el espaciado del encabezado de tu sitio.
- Margen del sitio. Cambia el ancho del margen a cada lado del sitio. Dependiendo de la configuración Ancho de página, este retoque puede no tener un efecto visible en el contenido de la página. Este relleno afecta todo el sitio, incluido el encabezado. En las secciones de la galería, el relleno superior e inferior también cambiará en relación con el ancho del margen.
Puedes cambiar el espaciado de secciones individuales en el editor de secciones.
Muchos ajustes de estilo relacionados con el tamaño, como el relleno, el espaciado, el ancho y los bordes, están bajo el encabezado Tamaños y valores. Según la plantilla, también pueden estar en otras secciones.
Para cambiar un tamaño, coloca el cursor sobre un retoque de tamaño y, a continuación, utiliza el control deslizante o introduce un número en el campo.
Barras laterales (versión 7.0)
Los sitios de la versión 7.1 no incluyen barras laterales.
Si tu plantilla incluye una barra lateral, puedes cambiar el aspecto desde Estilos del sitio. Por ejemplo, en algunas plantillas, puedes mover la barra lateral a la izquierda o a la derecha. Para encontrar los ajustes de estilo de la barra lateral, haz clic en la barra lateral, en la vista previa de la página o busca el encabezado de Barra lateral en Estilos del sitio.
Imágenes y animaciones
Utiliza las secciones siguientes para aprender a aplicar estilos a bloques de imagen y banners, cambiar las relaciones de aspecto de las imágenes y aplicar animaciones.
Bloques de imágenes
El estilo de los bloques de imágenes depende de la versión de tu sitio. Algunos diseños de bloque tienen su propia configuración de estilo para fuentes, colores y botones en Estilos del sitio.
Para obtener más información sobre los estilos de bloque de imagen para ambas versiones, consulta bloques de imágenes.
Banners
La forma en que edites banners depende de la versión del sitio.
Puedes crear una imagen de banner en cualquier página agregando una sección de bloque con una imagen de fondo a la parte superior de la página.
- Si solo deseas una imagen en el banner, comienza con una sección en blanco.
- Los bloques añadidos en la sección se superpondrán al banner.
- Para cambiar la altura, haz clic en Editar sección o en el ícono del lápiz y establece la altura de la sección.
- Cuando elijas una imagen de fondo, sigue nuestros consejos de formato de las imágenes.
Para informarte mejor, visita Cómo agregar una imagen de banner.
La mayoría de las plantillas admiten banners de páginas, que puedes agregar en la configuración de tu página.
- Para revisar todas las opciones de banner por familia de plantillas, consulta Cómo agregar imágenes de banner.
- Para obtener más información sobre la configuración de banner específica de tu sitio, visita la guía de la plantilla.
Relación de aspecto
La relación de aspecto de una imagen es su relación entre el ancho y la altura expresada como un número, por ejemplo 3:4. Cuando eliges un ajuste de relación de aspecto, la imagen se recortará en esa forma (como por ejemplo, un cuadrado de 1:1), por lo general alrededor del punto focal.
- En la versión 7.1, puedes cambiar las relaciones de aspecto de la imagen en los editores de sección y bloque.
- En la versión 7.0, puedes cambiar las relaciones de aspecto de la imagen en Estilos del sitio y los editores de bloques.
- En ambas versiones, puedes utilizar el editor de imágenes integrado para cambiar la relación de aspecto de una imagen después de cargarla en el sitio.
Si la relación de aspecto está configurada en Auto (Automática), las imágenes se reorganizarán para crear el mejor ajuste en la página. Podrían aparecer en un orden diferente al que se siguió para cargarlas. Si necesitas más ayuda, visita Comprender las relaciones de aspecto.
Animaciones
Para añadir interés visual, puedes utilizar el panel Animaciones para animar sutilmente el contenido a medida que los visitantes se desplazan por el sitio. Para obtener más información, visita Animaciones de todo el sitio.
Fondo
La forma en que cambies el fondo del sitio depende de la versión del sitio.
Para cambiar el fondo:
- Usa el panel Colores para cambiar el fondo del sitio.
- Utiliza el editor de secciones para cambiar el color de fondo de secciones individuales o agregar imágenes de fondo o videos. Esto incluye secciones de pie de página.
- Cuando una sección tiene una imagen de fondo configurada en Recuadro, puedes configurar el color del borde del recuadro.
- El encabezado tiene el mismo color de fondo que la sección superior cuando es transparente. Desactiva la transparencia en el editor de encabezado a fin de seleccionar otro motivo de colores para el encabezado.
Puedes establecer el color de fondo del área de contenido principal en Estilos del sitio. Algunas plantillas también tienen opciones para agregar un color de fondo al encabezado, pie de página y otro espacio alrededor del contenido. Para obtener más información, visita Cómo cambiar colores.
Algunas plantillas tienen una imagen de fondo para todo el sitio o para la página añadidas desde Estilos del sitio. Para agregar una, haz clic en el ajuste Imagen de fondo o en el ícono de la imagen correspondiente dentro de Estilos del sitio. Puedes subir tu propia imagen o buscar y agregar una imagen de stock. Para informarte mejor, visita Cómo agregar imágenes de fondo para todo el sitio en la versión 7.0.
Botones
El estilo de los botones depende de la versión del sitio y de si aparecen en todo el sitio o solo en una página o sección en particular.
Para ver los pasos detallados de todos los casos, visita Cómo aplicar estilo a los botones.
Productos
El estilo de los productos depende de la versión del sitio.
Para dar estilo a la página principal de tu tienda, abre los estilos de las secciones de la tienda. Puedes revisar las opciones para cambiar el formato, el fondo y los colores de la sección.
Para darle estilo a los productos, abre los estilos del sitio de tu página de detalles del producto. Esta configuración afecta las páginas de detalles del producto individuales. Ten en cuenta que algunas de estas opciones solo se aplican a productos con varias imágenes, por lo que es posible que algunos cambios no aparezcan si tu producto solo tiene una.
Para obtener más información, visita Cómo modificar el estilo de páginas de Tienda.
Las opciones de estilo de tus productos dependen de la plantilla de tu sitio y de si tu plantilla utiliza una página de tienda clásica, avanzada o única.
Para obtener una lista detallada de las opciones de estilo del producto, visita Cómo aplicar estilo a páginas de tienda.
Ocultar o mostrar funciones
Cómo ocultar o mostrar diferentes elementos y funciones depende de la versión del sitio.
Puedes ocultar ciertas características de diseño como los iconos de redes sociales, banners y pies de página eliminando el bloque o la sección, u ocultando el encabezado y el pie de página. Abre el editor de secciones para explorar las diferentes opciones para esa sección de la página.
En algunas plantillas, puedes ocultar funciones de diseño, como títulos de página, iconos de redes sociales, bordes, banners y pies de página. Estos ajustes generalmente se encuentran en la sección Opciones de estilos del sitio.
Guardar o deshacer cambios
Puedes guardar los cambios de estilo, deshacer el cambio anterior o restablecer las áreas del sitio a sus estilos predeterminados.
Guardar los cambios
Después de que hayas realizado algún cambio de estilo y contenido, haz clic en Guardar en la esquina superior izquierda del editor de páginas. Este cambio no es reversible. Aunque puedes volver a los estilos predeterminados, no puedes restaurar los cambios de estilo anteriores después de guardarlos.
Deshacer cambios
Puedes deshacer la mayoría de los cambios de estilo de dos maneras:
- Haz clic en la flecha de deshacer en la parte superior del panel. Se cancelará el último cambio de estilo que hayas hecho. Haz clic en ella varias veces para cancelar más cambios en orden de secuencia. También puedes presionar la flecha de rehacer para volver a hacer un cambio.
Consejo: Si estás editando Estilos del sitio en la versión 7.1, puedes cerrar el panel Estilos del sitio para editar el contenido de tu página y deshacer o rehacer el último cambio de estilo.
- En algunos paneles, haz clic en el punto situado junto al ajuste que cambiaste. Esto revierte el ajuste al último cambio guardado. Los puntos permanecen visibles hasta que guardes los cambios.
Consejo: Si realizas un cambio de estilo y luego lo deshaces, la opción Guardar no aparecerá. La opción Guardar solo aparece si cambias un ajuste y lo conservas.
Restablecer el estilo predeterminado
Puedes restablecer algunas opciones de estilo a los valores predeterminados del sitio. Esto revierte el área a la forma original en que se estableció cuando iniciaste el sitio por primera vez. Después de guardar, este cambio no es reversible.
Para ver los pasos detallados, visita Iniciar de nuevo.
Añadir CSS personalizado
Todos los sitios de Squarespace controlan automáticamente el CSS del sitio sin código personalizado. Sin embargo, si estás familiarizado con CSS y no puedes encontrar un cambio que necesitas en Estilos del sitio, puedes agregar CSS en el editor de CSS.
Con CSS personalizado puedes interferir con la funcionalidad del sitio, y todo lo que respecta a código personalizado no está incluido en el soporte de Squarespace.
Más ayuda
Además de nuestras guías, ofrecemos otros recursos para ayudarte a cambiar el estilo del sitio:
- Consulta Preguntas frecuentes sobre cambios de estilo para revisar las respuestas a dudas comunes.
- Asiste a un seminario web sobre Cómo comenzar con Squarespace de una hora para aprender los conceptos básicos de la configuración de tu sitio, como la creación de páginas y el ajuste de estilos del sitio.
- Únete al programa de socios de Squarespace para diseñadores web profesionales, Circle, para acceder a un foro privado de preguntas y respuestas donde puedes hacer preguntas sobre el uso de código personalizado.
- Contrata un diseñador independiente a través del Squarespace Marketplace para personalizar el diseño de tu sitio.
Más ayuda con la versión 7.0
Para obtener más ayuda con los cambios de estilo en la versión 7.0, ve este video.