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 Editor de Estilo. 

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

Te recomendamos que experimentes con el Editor de Estilo 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.

Mira el video

Abre el Editor de Estilo

En el Home Menu (Menú Principal), haz clic en Pages (Páginas). Abre una página en la que quieras aplicar los cambios. Esto le indica al Editor de Estilo que debe mostrar opciones relevantes para la página que estás viendo y te permite previsualizar los cambios. (Si modificarás una característica de todo el sitio, como los menús de navegación o un pie de página, puedes abrir cualquier página.) 

Una vez que estés en la página adecuada, haz doble clic en Pages (Páginas) en la parte superior del panel para volver al Menú Principal. Haz clic en Design (Diseño), y luego haz clic en Style Editor (Editor de Estilo).

Note: If you don't see Style Editor, click Site Styles instead. Learn more.

Making_style_changes.png

El Editor de Estilo se abrirá con una lista de ajustes de estilo que puedes editar.

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 queda deshabilitada mientras el Editor de Estilo está abierto. Para añadir o quitar contenido, cierra el Editor de Estilo y abre el panel Pages (Páginas).

Ver estilos específicos para las páginas

Cuando previsualizas una página en el Editor de Estilo, verás una sección de ajustes específicos para el tipo de página. Para ver estos ajustes, primero abre la página y luego ve al Editor de Estilo.

  • 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 objetos de la colección, como publicaciones de blog o eventos, también tienen ajustes en el Editor de Estilo. Para realizar cambios, abre el Editor de Estilo mientras se muestra un objeto de la colección individual.

Nota: cuando se abre una Página de Portada en el Editor de Estilo, sólo verás los ajustes de la Página de Portada. Para más información, visita Modificar el estilo de una Página de Portada.

Encuentra un ajuste de estilo

Cuando estés en el Editor de Estilo, haz clic en el área de la página que quieres editar para mostrar los ajustes de estilo disponibles para esa área y ocultar los demás. La casilla del resaltador 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 el Editor de Estilo, 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 del Editor de Estilo".

nav_area_style_change.jpg

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

drag-spacers.gif

Cambios de estilo comunes

Si bien cada Editor de Estilo tiene 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.

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.

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.

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.

Imagen de fondo

Some templates feature a site-wide or page background image added via the Style Editor. To add one, click the Background Image tweak or the corresponding image icon within the Style Editor. You can upload your own image or search and add a stock image.

Para más información, visita Agregar una imagen de fondo.

Imagen de cabecera

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

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

Barra lateral

Si tu plantilla incluye una barra lateral, puedes cambiar el aspecto desde el Editor de Estilo. 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 vista previa de la página o busca el encabezado de la Sidebar (Barra lateral) en el Editor de Estilo. 

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

Ocultar y mostrar

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

Deshacer un cambio de estilo

Puedes deshacer un cambio de estilo de dos maneras diferentes:

  1. Haz clic en el ícono de deshacer en la parte superior del panel. Esto cancelará el último cambio de estilo que hayas hecho. Haz clic en él varias veces para cancelar más cambios, en orden. También puedes hacer clic en el ícono de rehacer para repetir un cambio. 

undo_icon.jpg

  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.

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 estés conforme con lo que ves, haz clic en Guardar. Los 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.

click_save.jpg

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 del Editor de Estilo 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 el Editor de Estilo, se restablecerá tu plantilla a los estilos predeterminados.
Nota: Después de guardar el Editor de Estilo, este cambio no será reversible.                       

Añadir CSS personalizado

El Editor de Estilo controla el CSS de tu sitio sin necesidad de código personalizado. Sin embargo, si el Editor de Estilo no te ofrece las optiones que buscas y estás familiarizado con CSS, puedes añadir 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.

Preguntas Frecuentes

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

I can't find the Style Editor

To find the Style Editor on most sites, go to the Home Menu, click Design, then click Style Editor.

On some new sites, we're testing a new look for style options. If you don't see Style Editor in the Design panel, click Site Styles instead. This panel includes all the features of the Style Editor, and also includes a theme switcher.

site-styles.png

Explora el estilo de tu plantilla

Cada plantilla tiene sus propias opciones de estilo y configuración predeterminada. Para conocer más sobre el estilo de una plantilla, usa la lista a continuación para visitar las guías de tu plantilla. Las plantillas están agrupadas por familia.

  • Las guías de estructura y estilo explican las opciones de estilo de tu plantilla y ofrecen imágenes como ejemplo. Son un excelente recurso para comenzar.
  • Las guías de ajustes del Editor de Estilo enumeran todos los ajustes disponibles para tu plantilla. Son una buena referencia cuando intentas recordar el nombre de un ajuste o en qué sección del Editor de Estilo se encuentra.
Adirondack Estructura y estilo Ajustes del Editor de Estilo
Avenue Estructura y estilo Ajustes del Editor de Estilo

Familia Aviator

Aubrey, Aviator

Estructura y estilo Ajustes del Editor de Estilo  

Familia Bedford

Anya, Bryant, Bedford, Hayden

Estructura y estilo Ajustes del Editor de Estilo

Familia Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Estructura y estilo Ajustes del Editor de Estilo

Familia Farro

Farro, Haute

Estructura y estilo Ajustes del Editor de Estilo
Five Estructura y estilo Ajustes del Editor de Estilo
Flatiron Estructura y estilo Ajustes del Editor de Estilo
Forte Estructura y estilo Ajustes del Editor de Estilo
Galapagos Estructura y estilo Ajustes del Editor de Estilo
Ishimoto  Estructura y estilo Ajustes del Editor de Estilo
Momentum  Estructura y estilo Ajustes del Editor de Estilo

Familia Montauk

Julia, Kent, Montauk, Om

Estructura y estilo Ajustes del Editor de Estilo
Native  Estructura y estilo Ajustes del Editor de Estilo

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Estructura y estilo Ajustes del Editor de Estilo

Familia Skye

Foundry, Indigo, Ready, Skye, Tudor 

Estructura y estilo Ajustes del Editor de Estilo
Supply  Estructura y estilo Ajustes del Editor de Estilo

Familia Tremont

Camino, Carson, Henson, Tremont

Estructura y estilo Ajustes del Editor de Estilo
Wells  Estructura y estilo Ajustes del Editor de Estilo
Wexley  Estructura y estilo Ajustes del Editor de Estilo

Familia York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York 

Estructura y estilo Ajustes del Editor de Estilo
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 48 de 113