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

Los cambios de estilo son ediciones al aspecto de tu sitio, como las fuentes, los colores, los fondos y el espaciado. Puedes hacer y previsualizar los cambios de estilo en el panel de Estilos del sitio.

La opción Estilos del sitio de cada plantilla tiene diferentes opciones que se denominan "ajustes". Esta guía aborda cómo usar Estilos del sitio para perfeccionar el diseño de tu sitio y explica los ajustes que se encuentran en todas nuestras plantillas.

Te recomendamos que experimentes con Estilos del sitio a medida que crees tu sitio. Al probar los ajustes de tu plantilla, podrás ver lo que puedes hacer con ella y así lograr un diseño que te encante.

Consejo: El panel de Estilos del sitio antes se denominaba "Editor de estilos".

Mira el video

Abrir Estilos del sitio

En el Menú de Inicio, haz clic en Páginas. Abre una página en la que quieras 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).

Una vez que estés en la página adecuada, haz doble clic en Páginas, en la parte superior del panel para volver al Menú de Inicio. Haz clic en Diseño, y, luego, en Estilos del sitio. Se abrirá el panel de Estilos del sitio con una lista de retoques de estilo que pueden editarse.

Los ajustes se agrupan en secciones como General (General), Site Header (Encabezado del sitio) y Main Content (Contenido principal).Los ajustes que son únicos para tu plantilla en general aparecen bajo Options (Opciones).

Haz clic en cualquier ajuste para hacer cambios.

Nota: 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.

Ver estilos específicos para las páginas

Cuando previsualizas un tipo de página en Estilos del sitio, verás una sección de ajustes específicos para el tipo de página. Para visualizar estos ajustes, primero abre la página y, luego, ve a Estilos del sitio.

  • Página de Portada (Consulta la nota a continuación)
  • Página de Blog
  • Página de Eventos
  • Página de Galería
  • Página de Índice
  • Página de Productos

Cualquier cambio en estos ajustes se aplicará a todas las páginas de ese tipo que haya en tu sitio. Por ejemplo, si tienes múltiples Páginas de productos y haces cambios de estilo específicos para la Página de Productos, se aplicará el mismo cambio a todas las Páginas de Productos. Esto logra un aspecto consistente en tu sitio.

Algunos elementos de la colección, como las publicaciones de blog o los eventos, también tienen algunos retoques de Estilos del sitio específicos para dicho elemento. Para hacer cambios, abre Estilos del sitio mientras estés visualizando un elemento de la colección determinado.

Nota: Cuando se abre una Página de Portada en Estilos del sitio, solo verás los ajustes de la Página de Portada. Si deseas obtener más información, visita Modificar el estilo de una Página de Portada.

Encuentra un ajuste de estilo

Cuando estés en Estilos del sitio, haz clic en el área de una página para mostrar los ajustes de estilo disponibles para esa área y ocultar los demás. La casilla del Marcador de resaltado de estilo aparecerá alrededor del elemento en el que estás haciendo clic. Este atajo está disponible en la mayoría de las plantillas y para la mayoría de las áreas en tu sitio.

Por ejemplo, para cambiar el aspecto de tu menú de navegación, haz clic en un enlace de navegación, en la vista previa. Los ajustes de estilo que controlan el menú de navegación se mostrarán en Estilos del sitio, como se muestra en el siguiente ejemplo. Los demás ajustes de estilo estarán ocultos.

Haz clic en Show All (Mostrar todo) para volver a todas las opciones.

Nota: Para ver una lista completa de los ajustes de tu plantilla, consulta nuestra lista de guías de "ajustes de Estilos del sitio".

Hacer clic en un elemento de la página muestra los retoques de estilo disponibles para esa área.

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

En Estilos del sitio, hacer clic y arrastrar ajusta el Espaciado del área del banner en la plantilla Five.

Cambios de estilo comunes

Si bien los Estilos del sitio de cada plantilla tienen decenas de ajustes, hay algunas tendencias comunes entre ellos.

Tipografía

Para cambiar las fuentes y los tamaños, usa los ajustes Typography (Tipografía) o Font (Fuente). Para obtener más información, visita Cambiar fuentes.

Pueden cambiarse las fuentes con los retoques de Tipografía o Fuentes.

Colores

Para cambiar los colores, selecciona cualquier ajuste que tenga un color circle (círculo de color) junto a la etiqueta. Para obtener más información, visita Cambiar los colores.

Aparecen círculos de color al lado de los retoques de color.

Tamaños y valores

Muchos cambios de estilo están relacionados con el tamaño, como el padding (relleno), el espaciado, el ancho y los bordes. Puedes encontrar estos ajustes bajo el encabezado Sizes & Values (Tamaños y Valores). Según la plantilla, también pueden estar en otras secciones. Los tamaños en general se miden en píxeles (px).

Para hacer este cambio de estilo, posiciona el cursor sobre un ajuste de tamaño. Usa el control deslizante o ingresa un número en el campo.

Ajustar el control deslizante afecta el tamaño del relleno, los bordes y otros elementos.

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.

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.

Diferentes opciones de relación de aspecto en un menú desplegable.

Imagen de fondo

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 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 más información, visita Agregar una imagen de fondo.

Algunas plantillas tienen un retoque para la Imagen de fondo del sitio.

Imagen de cabecera

Algunas plantillas tienen una imagen de banner para todo el sitio que puedes añadir desde Estilos del sitio. Haz clic en el ajuste Imagen de Banner, en el ajuste Imagen de Encabezado, o en el ícono de imagen correspondiente dentro de Estilos del sitio.

Para imágenes por página, abre la configuración de página y haz clic en la pestaña Medios y luego carga una imagen.

Para informarte mejor, consulta Añadir imágenes de anuncios.

Algunas plantillas tienen un retoque para la Imagen de fondo del encabezado de todo el sitio para los banners.

Barra lateral

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.

Aquí tienes un ejemplo de cómo pueden verse los ajustes de la barra lateral para tu plantilla:

Los retoques de las barras laterales aparecen si tu plantilla tiene una barra lateral.

Ocultar y mostrar

En algunas plantillas, puedes ocultar características de diseño como los títulos de página, los íconos de las redes sociales, los bordes, los banners y los pies de página. Estos retoques, en general, son marcas de verificación que se encuentran en la sección Opciones.

Seleccionar ciertos retoques o anular su selección oculta o modifica los elementos del sitio de otros modos.

Deshacer un cambio de estilo

Puedes deshacer un cambio de estilo de dos maneras diferentes:

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

Haz clic en el icono de deshacer para cancelar los cambios de estilo.

  1. Haz clic en el punto junto al ajuste que has modificado. Esto te permite cancelar un cambio de estilo específico, en cualquier orden. El punto permanecerá visible hasta que guardes los cambios.

Haz clic en el punto al lado de cada retoque de estilo para deshacer un cambio reciente.

Nota: 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.

Guardar los cambios

Una vez que hayas hecho todos los cambios y que te guste lo que ves, haz clic en Guardar, en la esquina superior izquierda. Estos cambios aparecerán en tu sitio activo.

Nota: este cambio no es reversible. Si bien puedes revertir al estilo predeterminado de la plantilla, no podrás restaurar los cambios de estilo que hayas hecho anteriormente.

Restablecer el estilo predeterminado

Para comenzar de nuevo, puedes restablecer el estilo de tu sitio a los valores predeterminados de la plantilla. Esto te permitirá volver a las fuentes, los colores y el relleno originales de la plantilla.

  1. Desplázate hasta la parte inferior de Estilos del sitio y haz clic en Restablecer Estilo a los Valores Predeterminados.
  2. Revisa el mensaje de confirmación y haz clic en Restablecer.
  3. Después de guardar los Estilos del sitio, se restablecerá tu plantilla a los estilos predeterminados.
Nota: Después de guardar Estilos del sitio, el cambio no será reversible.

Añadir CSS personalizado

La opción Estilos del sitio controla el CSS de tu sitio sin un código personalizado. Sin embargo, si Estilos del sitio no te ofrece las opciones que buscas y estás familiarizado con CSS, puedes añadir CSS al 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.

Preguntas Frecuentes

Para obtener más ayuda, visita Preguntas frecuentes sobre los cambios de estilo.

Explora el estilo de tu plantilla

Each template has its own unique style options and default settings. To learn more, visit our in-depth template guides.

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