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

Style changes are edits to the look of your site, like fonts, colors, backgrounds, and spacing. You can make and preview style changes in the Site Styles panel. 

Each template's Site Styles has different options called "tweaks." This guide covers how to use Site Styles to perfect your site's design and explains tweaks found in all of our templates. 

We recommend experimenting with Site Styles as you build your site. By testing your template's tweaks, you'll get a grasp of what's possible in your template and reach a design you'll love.

Tip: The Site Styles panel used to be called the Style Editor.

Open Site Styles

In the Home Menu, click Pages. Open a page where you want the changes to apply. This tells Site Styles to show options relevant to the page you're seeing and allows you to preview your changes. (If you're changing a site-wide feature like navigation menus or a footer, open any page.) 

Once on the right page, double-click Pages at the top of the panel to return to the Home Menu. Click Design, and then click Site Styles. The Site Styles panel will open with a list of editable style tweaks.

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.

Note: Site editing is disabled when Site Styles is open. To add or remove content, close Site Styles and open the Pages panel.

Ver estilos específicos para las páginas

When you preview a page type below in Site Styles, you'll see a section of tweaks specific to the page type. To view these tweaks, first open the page, and then navigate to Site Styles.

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

Some collection items, like blog posts or events, also have item-specific Site Styles tweaks. To make changes, open Site Styles while viewing an individual collection item.

Note: When a Cover Page is open in Site Styles, you'll only see Cover Page tweaks. To learn more, visit Styling a Cover Page.

Encuentra un ajuste de estilo

When in Site Styles, click an area of a page to display the style tweaks available for that area and hide the rest. The style highlighter box appears around the element you're clicking. This shortcut is available in most templates and for most areas on your site.

For example, to change the appearance of your navigation menu, click a navigation link in the preview. The style tweaks that control the navigation menu will display in Site Styles, as shown in the example below. The other style tweaks will be hidden.

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

Note: For a full list of your template's tweaks, see our list of "Site Styles tweaks" guides.

styles.png

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

While each template's Site Styles has dozens of tweaks, there are some common trends between them.

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 Site Styles. To add one, click the Background Image tweak or the corresponding image icon within Site Styles. 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

Some templates feature a site-wide banner image you can add from Site Styles. Click the Banner Image tweak, Header Image tweak, or the corresponding image icon within Site Styles.

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

If your template includes a sidebar, you can change its appearance in Site Styles. For example, in some templates, you can move the sidebar to the left or right. To find the sidebar style tweaks, click on the sidebar in the page preview or look for the Sidebar heading in Site Styles. 

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

Ocultar y mostrar

In some templates, you can hide design features like page titles, social icons, borders, banners, and footers. These tweaks are usually checkmarks found in the Options section.

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. Scroll to the bottom of Site Styles and click Reset Styles to Defaults.
  2. Revisa el mensaje de confirmación y haz clic en Restablecer.
  3. After saving Site Styles, your template will reset to its default styles.
Note: After saving Site Styles, this change isn't reversible.                       

Añadir CSS personalizado

Site Styles controls your site's CSS without custom code. However, if you're familiar with CSS and you can't find a change you need in Site Styles, you can add CSS in the CSS Editor.

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

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.
  • Site Styles tweaks guides list all available tweaks for your template. They're a good reference when you're trying to remember a tweak's name or what section of Site Styles it's in.
Adirondack Estructura y estilo Site Styles tweaks
Avenue Estructura y estilo Site Styles tweaks

Familia Aviator

Aubrey, Aviator

Estructura y estilo Site Styles tweaks  

Familia Bedford

Anya, Bryant, Bedford, Hayden

Estructura y estilo Site Styles tweaks

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 Site Styles tweaks

Familia Farro

Farro, Haute

Estructura y estilo Site Styles tweaks
Five Estructura y estilo Site Styles tweaks
Flatiron Estructura y estilo Site Styles tweaks
Forte Estructura y estilo Site Styles tweaks
Galapagos Estructura y estilo Site Styles tweaks
Ishimoto  Estructura y estilo Site Styles tweaks
Momentum  Estructura y estilo Site Styles tweaks

Familia Montauk

Julia, Kent, Montauk, Om

Estructura y estilo Site Styles tweaks
Native  Estructura y estilo Site Styles tweaks

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Estructura y estilo Site Styles tweaks

Familia Skye

Foundry, Indigo, Ready, Skye, Tudor 

Estructura y estilo Site Styles tweaks
Supply  Estructura y estilo Site Styles tweaks

Familia Tremont

Camino, Carson, Henson, Tremont

Estructura y estilo Site Styles tweaks
Wells  Estructura y estilo Site Styles tweaks
Wexley  Estructura y estilo Site Styles tweaks

Familia York

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

Estructura y estilo Site Styles tweaks
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 49 de 115