Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Hacer cambios de estilo

Utiliza las opciones del panel Diseño para realizar cambios de estilo en el sitio. Puedes editar estilos globales para realizar cambios que se apliquen a todo el sitio para obtener un aspecto coherente o bien, puedes aplicar estilos a secciones individuales.

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á.

Mira el video

Este video es para la versión 7.1. Para ver un video en la versión 7.0, consulta la sección Más ayuda.

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 del sitio. A medida que utilices esta guía, haz clic en la pestaña de tu versión para ver los pasos del sitio.

Versión 7.1

En nuestra versión más reciente de Squarespace, los retoques de estilo se ordenan por tipo en el panel Diseño. Los cambios que realices en el panel Diseño suelen ser globales, pero puedes afinar detalles ajustando el estilo de 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 nuestra versión anterior de Squarespace, utilizas el panel Estilos del sitio para realizar todos los cambios de estilo. Los estilos del sitio de cada plantilla tienen diferentes retoques, que se agrupan en secciones como el encabezado del sitio y el contenido principal.

En la versión 7.0, cada plantilla tiene sus propias opciones de estilo únicas y configuración predeterminada. Para obtener más información, visita la guía de la plantilla.

Encuentra un ajuste de estilo

Cómo encontrar un retoque de estilo depende de la versión del sitio.

Para realizar cambios en todo el sitio, utiliza las opciones del panel Diseño. En el menú de Inicio, haz clic en Diseño y, a continuación, en el elemento del sitio que desees cambiar, como Fuentes o Colores. Utiliza esta guía para ver pasos más detallados en cada panel. 

Puedes realizar cambios más precisos editando una sección específica. Para aplicar estilo a una sección, edita la página, coloca el cursor sobre la sección y, a continuación, haz clic en el ícono de lápiz. Los estilos de sección anulan los estilos de todo el sitio.

edit_a_section.png

Aquí puedes elegir también diferentes diseños para las secciones de colección y de galería.

Si realizas cambios de estilo en una sección de la colección, afectará 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 realices en una sección afectará ambas secciones. 

Para abrir Estilos del sitio:

  1. En el Menú de Inicio, haz clic en Páginas
  2. Abre la página a la que deseas 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 publicación de blog o un elemento de producto). 
  3. Vuelve al menú de Inicio, haz clic en Diseñoy, a continuación, en Estilos del sitio
  4. En el panel Estilos del sitio, haz clic en cualquier retoque para realizar 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 retoques se aplicará a todas las páginas de ese tipo en tu sitio web. Por ejemplo, si realizas cambios de estilo en una página de productos, el mismo cambio se aplicará a todas las páginas de productos de tu sitio web. Para obtener una lista completa de los retoques de la plantilla, consulta la guía de retoques de estilo de la plantilla.

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 retoques 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: 

Clicking_an_element_on_the_page_displays_the_style_tweaks_available_for_that_area.png

Para algunos ajustes, puedes hacer clic y arrastrar dentro de la vista previa para ajustar la configuración:

drag-spacers.gif

Puedes realizar cambios de estilo en la aplicación de Squarespace en ambas versiones de Squarespace. 

Consejo: En la versión 7.1, el panel de estilo de la aplicación Squarespace lleva la etiquetaEstilos del sitio y Editor de estilos, dependiendo de dónde lo abras. Esto es diferente del panel Diseño habitual que se vería en un equipo, pero las opciones dentro del panel siguen coincidiendo con lo que se vería en un equipo. 

Para aplicar estilo a una página:

  1. Toca Páginas y, luego, la página en la que desees aplicar los cambios. Esto le indica a la app 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.
  2. Toca la barra de vista previa para colapsar la vista previa de la página.
  3. Toca Configuración y, luego, Estilos del sitio
  4. El panel Editor de estilos se abrirá desde la parte inferior con una lista de subpaneles y retoques de estilo. Pulsa cualquier retoque para realizar 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, haz clic en Diseño y, a continuación, en 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. Para obtener más información, visita Cómo cambiar fuentes

En cualquier área de texto, también puedes cambiar el formato del texto a encabezado, texto de párrafo o texto de monoespacio o bien, agregar un vínculo

  • 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 del sitio, en el Menú de inicio, haz clic en Diseño y, a continuación, en Colores.

Con las paletas 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 cambiar los colores, selecciona cualquier retoque de Estilos del sitio con un círculo de color junto a la etiqueta. Para obtener más información, visita Cómo cambiar colores.

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 edites 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 vínculos de navegación. También puedes añadir un ícono del carrito de compras, íconos 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 la 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:

  1. En la esquina superior izquierda, haz clic en Editar.
  2. Posiciona el cursor sobre el pie de página y haz clic en Editar pie de página.
  3. Haz clic en el ícono de 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.

Cabeceras

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 el icono del lápiz y selecciona 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.

Espaciado y relleno

La forma en que cambies el espaciado depende de la versión del sitio. 

Para cambiar el espaciado del sitio, en el menú de Inicio, haz clic en Diseño y, a continuación, en 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: Cambiar el ancho del margen a cada lado del sitio. Según la configuración de Ancho de página, es posible que este ajuste no tenga un efecto visible en el contenido de tu página. Este ajuste afecta a todo tu sitio, incluido el encabezado:

Puedes cambiar el espaciado de secciones individuales en el editor de secciones.

Muchos retoques 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 la Barra lateral en Estilos del sitio.

Imágenes y animaciones

Utiliza las secciones siguientes para aprender a aplicar estilos a bloques de imagen, ajustar la relación de aspecto de una imagen y aplicar animaciones. 

Bloques de imágenes

El estilo de bloques de imagen depende de la versión del sitio. Algunos diseños de bloque tienen su propia configuración de estilo para fuentes, colores y botones en el panel Diseño.

Para obtener más información sobre los estilos de bloques de imagen para ambas versiones, visita Bloques de imagen.

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 para establecer otro tema 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 la página que puedes añadir desde Estilos del sitio. Para agregar una, haz clic en el retoque 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 obtener más información, visita Cómo agregar imágenes de fondo en todo el sitio.

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 web. 

Para dar estilo a tu página principal de la tienda, abre los estilos de las secciones de la tienda. Verás opciones para cambiar el formato, el fondo y los colores de la sección. 

Para aplicar estilo a los elementos del producto, abre las opciones de estilo en el panel Diseño:

  1. En el Menú de Inicio, haz clic en Diseño.
  2. Haz clic en Elementos del producto.

Esta configuración afecta a 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 no veas cambios si tu producto solo tiene una.

Para obtener más información, visita Cómo modificar el estilo de páginas de productos.

Las opciones de estilo de tus productos dependen de la plantilla del sitio web y de si esta utiliza una página de productos clásicos, avanzados o únicos.

Para obtener una lista detallada de las opciones de estilo del producto, visita Cómo aplicar estilo a páginas de productos. También puedes ver todos los retoques de productos en la guía de retoques de estilo de la plantilla

Ocultar o mostrar funciones

Cómo ocultar o mostrar diferentes elementos y funciones depende de la versión del sitio.

Puedes ocultar ciertas funciones de diseño, como íconos de redes sociales, banners y pies de página, eliminando el bloque o sección. Abre el editor de la sección para explorar las diferentes opciones de esa sección de la página. 

En algunas plantillas, puedes ocultar funciones de diseño, como títulos de página, íconos de redes sociales, bordes, banners y pies de página. Estos retoques generalmente se encuentran en la sección Opciones de Estilos del sitio. Para ver una lista de estas opciones, visita la guía de retoques de estilo de la plantilla

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 haber realizado todos los cambios y te agrade lo que ves, haz clic en Guardar en la esquina superior izquierda. 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 el icono de deshacer en la parte superior del panel. Esto cancela el último cambio de estilo que hayas hecho. Haz clic en él varias veces para cancelar más cambios en orden de secuencia. También puedes hacer clic en el icono de rehacer para volver a aplicar un cambio.

theme_-_undo_and_redo.png

  • En algunos paneles, haz clic en el punto situado junto al retoque que cambiaste. Esto cancela un cambio de estilo específico. Los puntos permanecen visibles hasta que guardes los cambios.

style_dot.png

Consejo: Si realizas un cambio de estilo y luego lo deshaces no verás la opción Guardar en la parte superior del panel. La opción de Guardar solo aparece si cambias un ajuste y lo mantienes.

Restablecer el estilo predeterminado

Para algunas opciones de estilo del panel Diseño, puedes restablecer el estilo a los valores predeterminados del sitio. Esto devuelve el área a la forma original en que se estableció cuando iniciaste el sitio por primera vez. Una vez guardo, el 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:

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.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 66 de 198