Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Aviator structure and style

Aviator, Aubrey, and Encore share the same underlying structure and functionality. This guide applies to all these templates.

Esta guía te orienta sobre las diferentes opciones disponibles para ajustar el aspecto de los sitios creados con Aviator, Aubrey o Encore. Estas opciones están disponibles en Estilos del sitio.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Consejo: En el Menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio. Para acceder a los ajustes específicos de una página, navega hasta Estilos del sitio cuando estés en esa página en particular.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

Templates in the Aviator family support these page types:

  • Info - A landing page with multiple layout options that makes a great homepage.
  • Blog - The list-style Blog Page stacks posts vertically.
  • Regular Page - A blank page you can customize with blocks.
  • Album - Create a page with playable music tracks and cover art.
  • Events - Create a calendar or list of events.
  • Gallery (Standard) - Style it as a slideshow or grid.
  • Products (Classic) - Sell goods and services with our integrated Commerce features.
  • Cover Page - A unique landing page styled separately from your template.

Info Page style

In Aviator, Aubrey, and Encore, the default homepage (landing page) is an Info Page. Info Pages are styled independently from the rest of the site. To learn more, visit Info Pages.

Main content area

The main content area of your site displays centered in the browser. Adjust the width with the Site Width tweak. For example, if you choose a Site Width of 80%, the main content area will always take up 80% of the width of the browser, leaving a 10% margin on either side.

The site's background image or color displays behind and around the main content area. Adjust the transparency on the Content Background color to set how much of the site background shows through.

Border

Usa el retoque de Borde del sitio en la sección Opciones de Estilos del sitio para añadir u ocultar el borde alrededor del área de contenido principal, el encabezado o el pie de página de tu sitio.

  • The Site Border tweak has four thickness options.
  • The Borders tweak in the Colors section controls the color.

You can also check Site Drop Shadow to add a shadow border.  

Layout and Main Navigation

El diseño de tu sitio se controla con el retoque de Diseño de la Página de Información dentro de la sección Opciones de Estilos del sitio.

Note: This tweak also affects the Info Page.

In Offset or Business Card layout, the Main Navigation displays as a sidebar navigation in the top-left, and stays fixed on the page as you scroll. Social icons display in the top-right.

Note: In reduced-width browsers, your site always displays in Poster layout.

In Poster layout, the Main Navigation displays above the header and moves up with the page content as you scroll. Social icons display below the footer. 

Note: To learn how to adjust what pages display in the navigation menu, visit Adding pages to your navigation.

Usa los retoques de Navegación en la sección Colores y en la sección Tipografía de Estilos del sitio para ajustar el estilo de la fuente y el color de los vínculos de navegación. Los cambios que introduzcas en el estilo de navegación también se reflejan en la Página de Información.

Las carpetas que se agregan a la pantalla de Navegación principal se muestran con un símbolo +. Los menúes de navegación aparecen superpuestos. Usa el retoque del Menú desplegable de carpetas en la sección Colores de Estilos del sitio para ajustar el color del fondo y la transparencia del menú superpuesto.

Site header

El título o el logotipo del sitio aparecen en el encabezado arriba del área de contenidos principales. Con el retoque de Eslogan e información de contacto en la sección Opciones de Estilos del sitio, también se muestra lo siguiente:

  • Tag line - Add a tag line in the Logo & Title panel. Style it with the Tagline and Tagline Font tweaks.
  • Contact information - Set the contact information with the Contact Phone Number, Contact Email, and Physical Location areas of the Business Information panel. Style it with the Contact Info and Contact Info Font tweaks.

La sección Tamaños y valores de Estilos del sitio ajusta el tamaño del logotipo y el espaciado del encabezado del sitio. Usa la sección Colores para cambiar los colores de cada elemento. 

The Header/Footer Background color tweak adjusts the background color for both the header and footer. You may need to adjust the opacity

Background

The background image or color displays behind all content on your site. 

  • Establece una imagen de fondo para tu sitio con el retoque de Imagen de fondo en la sección Colores de Estilos del sitio.
  • To display a background color instead, remove the background image and adjust the Site Background tweak.  
  • Info Pages have their own background images.
  • Para mostrar una imagen de fondo en tu sitio para dispositivos móviles, marca Imagen de fondo en dispositivos móviles en la sección Estilos en dispositivos móviles de Estilos del sitio. La imagen de fondo de la Página de Información siempre aparece en los dispositivos móviles.

For more information, visit Adding a background image. For troubleshooting help with cropping or distortion issues, visit Formatting background and banner images for responsive design

Note: Mobile browsers can't display fixed background images. Instead, the image will move with the page.

Íconos de las redes sociales

Social icons link to your connected accounts.

  • Si seleccionaste el diseño Tarjeta personal u Desplazamiento en la sección Opciones de Estilos del sitio, los iconos de redes sociales aparecen en la esquina superior derecha del encabezado del sitio.
  • If you’ve selected the Poster layout, they display at the bottom below the footer.
  • Usa los retoques de la sección Estilos de los iconos de redes sociales en Estilos del sitio para ajustar su color, estilo y tamaño, o directamente ocultarlos.
  • On hover, social icons display the same color as the navigation. Adjust this color with the Navigation Hover tweak in the Colors section
  • Changes you make to the social icon style also appear on the Info Page.

Pie de página

The footer is site-wide, meaning the same footer content displays on all pages except the Info Page. To customize the footer, hover over it and click the Edit annotation to add content using blocks. To learn more, visit Editing footers.

The Header/Footer Background color tweak adjusts the background color for both the header and footer. You may need to adjust the opacity

In Poster layout and smaller-width browsers, social icons display below the footer.

Móvil

Because Squarespace templates are built with responsive design, your site adjusts on mobile devices to better fit the format of that device. Use Device View to see how your site looks on different devices.

  • If your site is in the Offset or Business Card layout, your site will switch to the Poster layout on smaller browsers.
  • Para mostrar una imagen de fondo en tu sitio de dispositivos sociales, marca el retoque de Imagen de fondo en dispositivos móviles, en la sección Estilos móviles de Estilos del sitio. Si necesitas más asistencia, visita Solución de problemas.
  • Logos remain visible on mobile. You can adjust the size with the Logo Size on Mobile tweak in the Mobile Styles section of the Site Editor. This tweak doesn't affect Info Pages.
  • For help with cropping or distortion issues for background images, visit Formatting background and banner images for responsive design
  • El color del menú superpuesto de navegación se determina con el retoque de Fondo del sitio en la sección Colores en Estilos del sitio.
  • Folders display with a + symbol. Tap a folder to reveal links within that folder.
  • On mobile devices, social icons for any connected accounts appear at the bottom of the page.
  • Mobile browsers can't display fixed background images. Instead, the image will move with the page.
  • Not every mobile device can display .png files; we recommend you use .jpg images. 

Nota: Puedes desactivar los estilos para sitios móviles.
Note: These templates don't offer a content sidebar. For a list of templates with sidebars, visit Editing sidebars.

Next step

Set up your Info landing page.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 3 de 11
Aviator structure and style