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

En esta guía se presentan las opciones disponibles para ajustar el aspecto de tu sitio en Adirondack. Estas opciones están disponibles en el panel de 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.

Páginas compatibles

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

The Adirondack template supports these page types:

  • Página de Diseño: Página abierta que puedes personalizar con bloques.
  • Album - Create a page with playable music tracks and cover art.
  • Blog - The list-style Blog Page stacks posts vertically.
  • Events - Create a calendar or list of events.
  • Galería (Estándar): Ajusta su estilo como presentación o cuadrícula.
  • Products (Classic) - Sell goods and services with our integrated Commerce features. Products Pages in Adirondack support a category navigation bar.
  • Cover Page - A unique landing page styled separately from your template.

Layout and background

The main content area of your site has a fixed maximum width of 1118 pixels. On narrower browsers, the template’s responsive design adjusts to fit the width. There isn’t a way to change the maximum fixed width.

Note: The maximum width refers to the width of the content area when you're logged out of your site.

Adirondack supports a background image, background color, and drop shadow. These elements display on either side of the main content area.

Use these tweaks to adjust the background:

  • Site Drop Shadow - Add a shadow effect behind the content area.
  • Site Background Image - Add a background image. We recommend an image width between 1500 pixels and 2500 pixels. Background images should never be larger than 2500 pixels, as this can cause issues on mobile.
  • Site Background Color - Choose a solid background color.
Note: The background image may scroll with the page on certain mobile devices, including iOS.

Usa el retoque de Color de fondo del contenido para ajustar el color de fondo del área principal de contenidos y del pie de página. Usa el retoque de Color de fondo en la sección Navegación de Estilos del sitio para ajustar el color de fondo de las barras de navegación de tu sitio.

Encabezado

The header has a minimal aesthetic, with an optional Main Navigation link on the left, a site title or logo in the middle, and an optional information link on the right.

  • En la sección Encabezado del sitio de Estilos del sitio, elige el color de fondo del encabezado y la altura de la fuente del título del sitio o del logotipo.
  • Use the Header Icons tweak to choose whether the navigation and information links display as text or icons.
  • Use the Contact, Location, or Search Dropdown tweak to choose whether the information link displays as Contact, Location, or Search. Choose None to hide the link.
  • If you choose Always Show Nav, the menu ("hamburger") icon disappears and the navigation displays below the header. When Always Show Nav is unchecked, the menu icon displays, and the navigation links only appear when a visitor hovers over the header.

The site title, menu, and information links are automatically set to black or white based on the header’s Background Color.

When you click the navigation or information link, the content displays as a drop-down below the header.

When visitors scroll down the page, the header collapses to a fixed menu bar at the top.

Note: Logos don’t display on mobile or in the fixed menu bar. The site title displays instead.

Information drop-downs

An information link can display on the right side of the header, creating a contact, location, or search drop-down below the header on click. Clicking the X icon collapses the drop-down.

  • Use the Contact, Location, or Search Dropdown tweak to choose which element displays, or to hide it.
  • Use the Header Icons tweak to choose whether it displays as text or an icon. The menu and information link always display as icons on mobile.

The Contact drop-down contains a Text Block and a Form Block. You can edit these blocks, but they can't be removed. To edit the blocks, open the contact drop-down, then hover over it and click Edit. No additional blocks can be added to the header.

Nota: El botón Enviar del Bloque de formulario del encabezado es sólido en blanco o negro, según el color de fondo de tu encabezado. No es posible editar este botón en Estilos del sitio.

To update the information in the Location drop-down, open the Business Information panel and update the Physical Location, Contact Phone Number, and Contact Email. Adjust the contact information font with the Text tweak. The color is automatically set to black or white based on the header’s background color. 

Note: We recommend removing or replacing the demo content in the contact and location drop-downs. Otherwise, the demo text may display when you share your site on social media, even if it’s hidden on your site. For detailed steps, visit Adirondack troubleshooting.

Barras de navegación

Adirondack supports multiple navigation bars:

  • Main Navigation - The Main Navigation displays below the header.
  • Folder - When you're viewing a page within a folder, a navigation bar will appear below the banner (or below the header if there is no banner) displaying all the pages in the folder. The folder navigation bar doesn't display on mobile unless mobile styles are disabled
  • Navegación por categorías: Esta barra de navegación aparece en la Página de Productos después de que hayas agregado categorías a uno o más productos. Si la navegación por categorías está oculta, marca Mostrar navegación por categorías en Estilos del sitio.
  • Footer - Links from your Footer Navigation appear in a bar above the footer.

Styling the navigation bars

Los retoques de la sección Navegaciónen Estilos del sitio afectan a todas las barras de navegación:

  • Font - Set the font and size
  • Background Color - Set the background color of the bars
  • Nav Active Color - Set the color of active navigation links. The color of non-active navigation links is automatically set to black or white based on the navigation bar’s Background Color.
  • Always Show Nav - Hide or show the Main Navigation bar.
  • Header & Nav Borders - Add a border above and below each navigation bar.

Organizing with navigation bars

Here are some ways you can use your navigation bars: 

  • Create multi-tiered organization for your store by adding multiple Products Pages to a folder. Dedicate each Products Page to a different product type. For example, you could have two Products Pages labeled "Women" and "Men." Add categories to each item to help customers filter within each Products Page. 
  • The folder structure also works well for multilingual sites

nav-bars.png

Main Navigation

The Main Navigation links display in a navigation bar below the header.

  • When the Always Show Nav tweak is unchecked, a menu link displays in the header. Use the Header Icons tweak to choose whether it displays as an icon or text. When visitors click the link or hover over the header, the navigation links appear below the header.
  • When Always Show Nav is checked, the Menu link disappears from the header, and the links always display below the header.
  • Folders display with a + icon. A menu overlay with the folder links appears on hover. When you go to one of the pages in the folder, the folder's navigation links display in a second navigation bar.

Page banners

Las páginas de Diseño, de Eventos, de Blog, de Álbum y de Productos pueden mostrar imágenes de banner ovideos de banner arriba del contenido de la página. A medida que te desplazas hacia abajo, el anuncio desaparece cuando el contenido se va moviendo sobre él.

Use the Banner Height tweak to adjust the height of all banners across your site in desktop view. On mobile, banners have a fixed height.

Los banners no admiten efectos de fundido en dispositivos móviles. A veces, los banners de video no se muestran en dispositivos móviles, dependiendo de la velocidad de conexión del visitante y de la versión del navegador. Configura que aparezca una imagen de reserva para dispositivos móviles cuando el banner de video no se pueda cargar.

Gallery Pages don’t support banners.

Blog posts, products, and events display their collection item thumbnails as banner images at the top of their individual pages.

Page titles and descriptions

Marca la opciónMostrar títulos y descripciones de la página para que se visualice el título y la descripción de la página sobre el contenido de la página en Páginas de Eventos, de Productos y de Diseño. No se muestran en las Páginas de Álbum, de Blog y de Galería.

Usa los ajustes en la sección Títulos y Descripciones de la Página de Estilos del sitio para aplicar un estilo a las fuentes y al color.

  • El retoque de Decoración de Título añade un elemento decorativo al título de la página (Subrayado, Línea alta, 3 Estrellas, 3 Asteriscos o Ninguno). Este retoque también afecta a los títulos en las publicaciones de blog.
  • Desmarca la opción Mostrar Títulos y Descripciones de la Página para ocultarlos.
Consejo: Si deseas usar un texto diferente para los resultados de búsqueda, agrega un título y una descripción SEO.

Fonts

Usa la sección Contenido principal de Estilos del sitio para ajustar la fuente, el tamaño y el color del texto de tu sitio. Adirondack también tiene opciones para modificar el estilo de los Bloques de cotizaciones.

Pie de página

Adirondack supports a site-wide footer. This means the same content displays on the bottom of every page.

The footer is divided into left and right content areas. Add content directly to either footer area using blocks. When viewing the page, hover over the footer and click Edit to open the editor. To learn more, visit Editing footers.

By default, the left footer contains a Text Block, and the right footer contains a Social Links Block.

The footer takes the same color as the main content area. Adjust this with the Content Background Color tweak.

The Footer Navigation displays in a navigation bar above the footer content areas.

Íconos de las redes sociales

Adirondack doesn't support built-in social icons. Instead, add a Social Links Block to the footer or to your page content.

Móvil

Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site will look on different devices. For general information, visit How will my site appear on a mobile device?

Header elements have unique mobile styles on smartphones and other narrow browsers:

  • The navigation displays as a menu icon. When tapped, the navigation appears as an overlay. Folders display with a + symbol and drop down when tapped.
  • The background color of the navigation overlay is the same as the navigation bar.
  • The information link always displays as an icon.
  • Logos don’t display. The site title displays instead.
  • Header banners don't fade on scroll.
  • Folder navigation doesn't display on mobile. Category navigation displays as a Filter link, which drops down when tapped.

To display your background image on mobile, set your Content Background Color tweak to transparent or semi-opaque. This also affects how your site appears on desktop.

Mobile banners have a fixed height, and don't support fade effects or banner videos. Add a mobile fallback image to replace the banner video on mobile.

Próximo paso

Learn about Adirondack's Blog Page.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 2 de 13
Adirondack structure and style