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 de los paneles Estilos del sitio y 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 estilo 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 dependiendo de la versión. En las secciones siguientes, haz clic en la pestaña de tu versión para ver los pasos de 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. Para cambios de estilo más avanzados, como diseñar la pantalla de bloqueo o la página Finalizar compra, utiliza el panel Diseño.

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, Estilos del sitio de cada plantilla tiene diferentes ajustes, que se agrupan en secciones, como Encabezado del sitio y 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 abrir el panel Estilos del sitio, haz clic en el ícono de pincel situado en la esquina superior derecha mientras editas cualquier página.

paintbrush_icon.png

Desde allí, haz clic en el elemento del sitio que quieras cambiar, como Fuentes o Colores. Utiliza esta guía para obtener pasos más detallados de cada panel. También puedes abrir Estilos del sitio desde el Menú de Inicio haciendo clic en Diseño y, a continuación, en Estilos del sitio.

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 ajustados editando una sección específica. Para aplicar estilo a una sección, posiciona 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 hagas 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 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. Para obtener una lista completa de los ajustes de tu plantilla, consulta la guía de ajustes de estilo de tu 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 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:

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

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, a continuación, haz clic 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. Si deseas obtener más información, visita 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 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 del sitio, abra Estilos del sitio y, a continuación, haz clic en Colores.

Con las paletas de colores seleccionadas, puedes hacer cambios rápidamente 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 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:

  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.

Espaciado y relleno

El modo en que se cambia el espaciado del sitio depende de la versión del sitio.

Para cambiar el espaciado del sitio, abre Estilos del sitio y, a continuación, haz clic 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. 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 bloques de imagen para ambas versiones, visita Bloques de imagen.

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.

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

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 dar estilo a los productos, abre Estilos del sitio y, a continuación, haz clic en Elementos de producto. Esta configuración afecta las páginas individuales de detalles del producto. 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 Tienda.

Las opciones de estilo de tus productos dependen de la plantilla de tu sitio y de si esta 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. También puedes ver todos los ajustes de productos en la guía de ajustes 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 los iconos de redes sociales, los banners y los pies de página, eliminando el bloque o la 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, 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. Para ver una lista de estas opciones, visita la guía de ajustes 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

Una vez que hayas realizado todos los cambios de estilo y contenido y te guste lo que ves, posiciona el cursor sobre Listo en la esquina superior izquierda del editor de páginas y haz clic en Guardar. 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.

undo_redo.png

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 la página y, a continuación, volver a abrir Estilos del sitio 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.

style_dot.png

Consejo: Si realizas un cambio de estilo y, a continuación, lo deshaces, no verás la opción Guardar. Esta 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:

Consejo: Contrata a un Squarespace Expert para que te ayude a personalizar el diseño de tu sitio. Obtén más información sobre los servicios de expertos disponibles a través de Squarespace Marketplace.

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: 85 de 256
Hacer cambios de estilo