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

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.

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 un área de una página para mostrar sólo los ajustes de estilo disponibles para esa área y ocultar los demás. 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 tus menús de navegación, haz clic en un menú 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. Los demás ajustes de estilo estarán ocultos.

O, en el ejemplo a continuación, si haces clic en la navegación revela los ajustes relevantes.

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

nav_area_style_change.jpg

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

Algunas plantillas tienen una imagen de fondo para todo el sitio o la página que puedes añadir desde el Editor de Estilo. Para añadir una, haz clic en el ajuste Background Image (Imagen de fondo) o el ícono de la imagen correspondiente dentro del Editor de Estilo. Puedes cargar tus propias imágenes u obtener una con licencia de Getty Images por $10.

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 Banner Image (Imagen de Cabecera), el ajuste Header Image (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 Media (Medios) y luego carga una imagen.

Para más información, visita  Añadir 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 Save (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 Save (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 Reset Styles to Defaults (Restablecer Estilo a los Valores Predeterminados).
  2. Revisa el mensaje de confirmación y haz clic en Reset (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.

Explora el estilo de tu plantilla

Cada plantilla tiene sus propias opciones únicas de estilo y configuración predeterminada. Para conocer más sobre los ajustes para una plantilla en particular, usa la lista a continuación para visitar la guía de "Estructura y Estilo" para tu plantilla. Las plantillas se agrupan por familia.

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